/* ============================================
   MEB CREATIV — Home Page Styles
   ============================================ */

/* ── Case Study Teaser ───────────────────────── */

.cs-teaser {
  background: var(--color-ink);
  padding: var(--space-section) 0;
}

.cs-teaser__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

.cs-teaser__metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.cs-teaser__cta {
  margin-top: var(--space-8);
}

.cs-teaser__visual {
  background: var(--color-ink-light);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Services grid on homepage ───────────────── */

.home-services {
  background: var(--color-mist);
  padding: var(--space-section) 0;
}

.home-services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-12);
}

@media (min-width: 640px) {
  .home-services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .home-services__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Last two cards centered on the 3rd row */
  .home-services__grid .card--service:nth-child(4) {
    grid-column: 1;
  }
  .home-services__grid .card--service:nth-child(5) {
    grid-column: 2;
  }
}

@media (min-width: 768px) {
  .cs-teaser__inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Testimonials ─────────────────────────── */

.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-12);
}

@media (min-width: 640px) {
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.testimonial-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  transition: border-color var(--dur-fast);
}

.testimonial-card:hover {
  border-color: rgba(91, 110, 245, 0.3);
}

.testimonial-card__quote-mark {
  font-size: 3rem;
  line-height: 1;
  color: var(--color-electric);
  font-family: var(--font-display);
  opacity: 0.55;
  margin-bottom: calc(-1 * var(--space-3));
}

.testimonial-card__text {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--color-slate-400);
  flex: 1;
}

.testimonial-card__author {
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.testimonial-card__name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-white);
}

.testimonial-card__company {
  font-size: 0.8125rem;
  color: var(--color-slate-400);
  margin-top: 2px;
}