/* ==========================================================================
   testimonials.css — quote cards inside a generic .carousel
   Markup: <div class="carousel testi-carousel">
            <div class="carousel-track testi-grid">
              <div class="testi"><.quote-mark><.quote><.who>...</div>
              ...
            </div>
            <div class="carousel-controls">
              <.carousel-nav.prev>  <.carousel-dots>  <.carousel-nav.next>
            </div>
   Generic carousel structure / behavior lives in carousel.css. This file
   only describes (a) the testimonial card visuals and (b) the testi-grid
   sizing / full-bleed padding overrides on top of .carousel-track.
   ========================================================================== */

/* Track sizing — fixed-ish card width so cards don't restretch as the strip
   lengthens (~3 visible at 1280, ~2 at tablet, ~1 + peek at mobile).
   Left padding aligns the first card with the container's content edge;
   right padding is small so the next card peeks past the viewport edge,
   signalling there's more to scroll. */
.testi-grid {
  grid-auto-columns: 360px;
  padding-block: var(--space-12) var(--space-32);
  padding-inline-start: max(
    var(--container-pad),
    calc((100vw - var(--container-max)) / 2 + var(--container-pad))
  );
  padding-inline-end: var(--space-24);
  scroll-padding-inline-start: max(
    var(--container-pad),
    calc((100vw - var(--container-max)) / 2 + var(--container-pad))
  );
}

.testi {
  background: white;
  border-radius: var(--radius);
  padding: var(--space-28) var(--space-28) var(--space-24);
  /* Outer ring — same outline-via-box-shadow pattern as .card. */
  box-shadow: 0 0 0 1px var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
  transition: transform .18s ease, box-shadow .18s ease;
}
.testi:hover {
  transform: translateY(-3px);
  /* Ring goes transparent on hover so the lifted shadow reads cleanly. */
  box-shadow: 0 0 0 1px transparent, var(--shadow-lg);
}

/* Brand-tinted chip with a lucide quote glyph. */
.testi .quote-mark {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-ink);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.testi .quote-mark svg.lucide,
.testi .quote-mark [data-lucide] { width: 18px; height: 18px; }

.testi .quote {
  font-size: var(--fs-quote);
  color: var(--ink-2);
  line-height: var(--lh-prose);
  flex: 1;
}

.testi .who {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.testi .who img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}
.testi .who .name {
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
}
.testi .who .role {
  font-size: var(--fs-micro);
  color: var(--muted);
}
.testi .stars {
  color: var(--star);
  font-size: var(--fs-sm);
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .testi-grid { grid-auto-columns: 320px; }
}
@media (max-width: 720px) {
  .testi-grid {
    grid-auto-columns: 84%;
    gap: var(--space-14);
    /* Mobile: standard container padding, no full-bleed math. */
    padding-inline-start: var(--space-16);
    padding-inline-end: var(--space-16);
    scroll-padding-inline-start: var(--space-16);
  }
}