/* === PlayTazzGame Case Studies page styles === */

.cs-hero {
  padding-top: var(--space-16);
  padding-bottom: var(--space-8);
  text-align: center;
}
.cs-hero-desc {
  color: var(--color-gray-100);
  font-size: var(--font-size-lg);
  margin: 0 auto var(--space-8) auto;
  max-width: 50ch;
}

.cs-overview-card {
  margin-top: var(--space-8);
  background: linear-gradient(100deg, var(--color-primary)10%, var(--color-surface) 100%);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}
.cs-project-list {
  margin-top: var(--space-2);
  color: var(--color-gray-50);
  padding-left: var(--space-4);
  list-style: disc inside;
}
.cs-project-list li {
  margin-bottom: var(--space-2);
}

.cs-case-block {
  margin-top: var(--space-12);
  background: linear-gradient(120deg, #232849, #202645 70%, #232ed6 120%);
  box-shadow: var(--shadow-lg);
}
.cs-case {
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-8);
  border-bottom: 2px dashed var(--color-primary);
}
.cs-case:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.cs-case-section {
  margin-bottom: var(--space-3);
}
.cs-case-section h4 {
  font-size: var(--font-size-md);
  color: var(--color-primary-hover);
  margin-bottom: var(--space-1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.cs-case-section ul {
  margin: 0 0 var(--space-3) var(--space-4);
  list-style: none;
  padding: 0;
}
.cs-case-section ul li {
  position: relative;
  padding-left: 1.3em;
  margin-bottom: var(--space-2);
}
.cs-case-section ul li:before {
  content: '\2714';
  color: var(--color-success);
  position: absolute;
  left: 0;
  font-size: 1.1em;
}

.cs-testimonial {
  background: rgba(40, 192, 217, 0.10);
  border-left: 6px solid var(--color-primary);
  margin: var(--space-4) 0 var(--space-2) 0;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--font-size-lg);
}
.cs-client {
  display: block;
  color: var(--color-gray-100);
  font-size: var(--font-size-md);
  font-weight: 700;
  opacity: 0.75;
  margin-bottom: var(--space-1);
}

.cs-expert-section {
  margin-top: var(--space-12);
  background: linear-gradient(120deg, #232849 60%, #50e2f1 120%);
}
.cs-expert-quote {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.cs-expert-quote blockquote {
  font-style: italic;
  font-size: var(--font-size-lg);
  color: var(--color-text);
  border-left: 4px solid var(--color-primary);
  padding-left: var(--space-4);
}
.cs-expert-quote figcaption {
  color: var(--color-primary);
  font-weight: 700;
  margin-left: var(--space-4);
  font-size: var(--font-size-md);
}
.cs-expert {
  font-family: var(--font-sans);
  font-weight: bold;
}

.cs-cta-block {
  margin-top: var(--space-12);
  background: linear-gradient(90deg, var(--color-primary-hover) 0%, var(--color-surface) 90%);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.cs-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  align-items: stretch;
  margin-top: var(--space-4);
}
.cs-cta-buttons .button {
  min-width: 180px;
  font-size: var(--font-size-lg);
}
.button.button-outline {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  box-shadow: none;
}
.button.button-outline:hover,
.button.button-outline:focus-visible {
  background: var(--color-primary);
  color: var(--color-background);
  border-color: var(--color-primary-hover);
}

@media (max-width: 900px) {
  .cs-overview-card,
  .cs-expert-section,
  .cs-case-block,
  .cs-cta-block { padding: var(--space-4); }
  .cs-hero { padding-top: var(--space-8); }
}
@media (max-width: 700px) {
  .cs-case, .cs-overview-card, .cs-expert-section, .cs-cta-block {
    padding: var(--space-3);
    margin-top: var(--space-6);
    font-size: var(--font-size-md);
  }
  .cs-cta-buttons {
    flex-direction: column;
    gap: var(--space-2);
  }
  .cs-hero-desc {
    font-size: var(--font-size-md);
  }
}