/* ==========================================================================
   UP AL — Testimonials (מה הלקוחות שלנו אומרים)
   A curated editorial wall, not a slider and not an automatically-tiled
   grid: one featured card (larger, more presence), one wide card (its own
   horizontal composition), one tall card (built from generous whitespace
   rather than extra copy), and three regular cards. CSS Grid with
   align-items: start gives each card its own intrinsic height — nothing
   stretches to match a neighbor — so the composition reads as deliberately
   arranged rather than auto-generated. Nothing rotates or auto-advances.

   Cards share the sitewide glass language (layered gradient surface,
   backdrop blur, ambient blue halo) with three refinements specific to
   this section: a much larger, softer quote glyph that reads as part of
   the card's background rather than an icon; delicate film-grain noise
   for material richness; and a 5-star rating that rests in quiet chrome
   and crossfades to warm gold on hover — the section's one deliberate,
   explicitly-scoped departure from the sitewide chrome/blue palette.
   ========================================================================== */

.testimonials {
  position: relative;
  padding-block: var(--space-10);
  scroll-margin-top: var(--header-height);
  border-top: 1px solid var(--color-border-soft);
  overflow: hidden;
  overflow: clip;
}

.testimonials__orb {
  width: 680px;
  height: 680px;
  inset-inline-start: -240px;
  top: -140px;
  background: radial-gradient(circle, rgba(158, 207, 247, 0.13), transparent 70%);
  opacity: 0.8;
}

.testimonials__intro {
  position: relative;
  z-index: 1;
  max-width: 680px;
}

.testimonials__heading {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
  text-wrap: balance;
  margin-block-end: var(--space-5);
}

.testimonials__lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  max-width: 60ch;
}

/* ---------- Bento wall ----------
   A 3-column grid with explicit column/row spans on three cards (see
   modifiers below) and align-items: start so every card keeps its own
   intrinsic height instead of stretching to match its row. */

.testimonials__wall {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-block-start: var(--space-9);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row dense;
  align-items: start;
  gap: var(--space-6);
}

.testimonial-card--featured,
.testimonial-card--wide {
  grid-column: span 2;
}

@media (max-width: 900px) {
  .testimonials__wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .testimonial-card--featured,
  .testimonial-card--wide {
    grid-column: span 2;
  }
}

@media (max-width: 620px) {
  .testimonials__wall {
    grid-template-columns: 1fr;
  }

  .testimonial-card--featured,
  .testimonial-card--wide {
    grid-column: span 1;
  }
}

.testimonial-card {
  position: relative;
}

/* Ambient halo — same device as the Process cards and Portfolio stage:
   a soft blue glow just outside the glass, separating the card from the
   background at rest and blooming further on hover/focus. The featured
   card carries a visibly stronger resting glow, marking it as the wall's
   center of gravity without any extra ornament. */

.testimonial-card__glow {
  position: absolute;
  z-index: 0;
  inset: -16px;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(158, 207, 247, 0.15), transparent 65%);
  opacity: 0.4;
  filter: blur(22px);
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-premium);
}

.testimonial-card--featured .testimonial-card__glow {
  opacity: 0.55;
}

.testimonial-card:hover .testimonial-card__glow,
.testimonial-card:focus-within .testimonial-card__glow {
  opacity: 0.85;
}

/* ---------- Surface: richer glass ----------
   Four layered gradients (top-start highlight, diagonal sheen, base
   vignette, elevated fill) plus a thin inner bevel highlight and a very
   low-opacity film-grain layer for material texture — richer than a flat
   fill without becoming decorative. */

.testimonial-card__surface {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: var(--space-7) var(--space-6) var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: radial-gradient(120% 90% at 16% -12%, rgba(255, 255, 255, 0.1), transparent 55%),
    radial-gradient(36% 28% at 84% 4%, rgba(255, 255, 255, 0.06), transparent 62%),
    linear-gradient(205deg, rgba(255, 255, 255, 0.035) 0%, transparent 42%),
    radial-gradient(130% 85% at 50% 125%, rgba(0, 0, 0, 0.34), transparent 60%), var(--color-bg-elevated);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-premium), border-color var(--duration-base) var(--ease-premium),
    box-shadow var(--duration-base) var(--ease-premium);
}

/* Delicate film grain — a single inline SVG turbulence texture, opacity
   kept low enough to read as material rather than noise. */

.testimonial-card__surface::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 0.025;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.testimonial-card:hover .testimonial-card__surface,
.testimonial-card:focus-within .testimonial-card__surface {
  transform: translateY(-6px);
  border-color: rgba(158, 207, 247, 0.32);
  box-shadow: var(--shadow-card-hover);
}

/* Featured card: more room, slightly larger type — see .testimonial-card__quote below. */

.testimonial-card--featured .testimonial-card__surface {
  padding: var(--space-8) var(--space-7);
}

/* Tall card: height comes from generous whitespace, not more copy — the
   quote sits centered in a taller, quieter frame. */

.testimonial-card--tall .testimonial-card__surface {
  padding-block: var(--space-9) var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 620px) {
  .testimonial-card--tall .testimonial-card__surface {
    padding-block: var(--space-7) var(--space-6);
  }
}

/* Wide card: quote and attribution sit side by side rather than stacked,
   the composition a wide card is actually for. */

@media (min-width: 901px) {
  .testimonial-card--wide .testimonial-card__surface {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-7);
  }

  .testimonial-card--wide .testimonial-card__content {
    flex: 1;
    min-width: 0;
  }

  .testimonial-card--wide .testimonial-card__quote {
    margin-block-end: 0;
  }

  .testimonial-card--wide .testimonial-card__attribution {
    flex: none;
    max-width: 220px;
  }
}

/* Oversized quote glyph — pushed much larger and softer so it reads as
   part of the card's background composition, not a discrete icon. */

.testimonial-card__mark {
  position: absolute;
  z-index: 0;
  top: -0.32em;
  inset-inline-end: 0.1em;
  font-size: 8rem;
  font-weight: var(--fw-extrabold);
  line-height: 1;
  color: var(--color-text-muted);
  opacity: 0.07;
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-premium);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .testimonial-card__mark {
    background: var(--gradient-chrome);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0.1;
  }
}

.testimonial-card:hover .testimonial-card__mark,
.testimonial-card:focus-within .testimonial-card__mark {
  opacity: 0.16;
}

.testimonial-card__content {
  position: relative;
  z-index: 1;
}

/* ---------- Rating ---------- */

.testimonial-card__rating {
  margin-block-end: var(--space-5);
}

.testimonial-card__stars {
  display: inline-flex;
  gap: var(--space-1);
}

.testimonial-card__star {
  position: relative;
  display: inline-block;
  width: 19px;
  height: 19px;
}

.testimonial-card__star-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 650ms var(--ease-premium), transform 650ms var(--ease-premium);
}

.testimonial-card__star-icon--gold {
  opacity: 0;
  transform: scale(0.85);
}

.testimonial-card:hover .testimonial-card__star-icon--chrome,
.testimonial-card:focus-within .testimonial-card__star-icon--chrome {
  opacity: 0;
}

.testimonial-card:hover .testimonial-card__star-icon--gold,
.testimonial-card:focus-within .testimonial-card__star-icon--gold {
  opacity: 1;
  transform: scale(1);
}

/* Subtle ripple — each star picks up the gold a beat after the last. */

.testimonial-card__star:nth-child(1) .testimonial-card__star-icon { transition-delay: 0ms; }
.testimonial-card__star:nth-child(2) .testimonial-card__star-icon { transition-delay: 20ms; }
.testimonial-card__star:nth-child(3) .testimonial-card__star-icon { transition-delay: 40ms; }
.testimonial-card__star:nth-child(4) .testimonial-card__star-icon { transition-delay: 60ms; }
.testimonial-card__star:nth-child(5) .testimonial-card__star-icon { transition-delay: 80ms; }

@media (prefers-reduced-motion: reduce) {
  .testimonial-card__star-icon {
    transition-delay: 0ms !important;
  }
}

/* ---------- Quote ----------
   Larger, more breathing room, and a brighter resting white than the
   sitewide secondary text color — brightens further to full white on
   hover, matching the "easier to read" + "luxurious hover" brief. */

.testimonial-card__quote {
  margin: 0 0 var(--space-6);
}

.testimonial-card__quote p {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: var(--fw-regular);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
  transition: color var(--duration-base) var(--ease-premium);
}

.testimonial-card--featured .testimonial-card__quote p {
  font-size: 1.4375rem;
  line-height: 1.55;
}

.testimonial-card:hover .testimonial-card__quote p,
.testimonial-card:focus-within .testimonial-card__quote p {
  color: var(--color-text-primary);
}

/* ---------- Attribution: name, verified mark, role ----------
   Spacing only, no divider line — hierarchy comes from weight and color. */

.testimonial-card__attribution {
  position: relative;
  z-index: 1;
}

.testimonial-card__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: 1rem;
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
}

/* Verified-client mark — the section's one quiet luxury detail: a thin
   chrome/blue outline check, not a filled badge or pill. */

.testimonial-card__verified {
  flex: none;
  width: 14px;
  height: 14px;
  opacity: 0.9;
}

.testimonial-card__role {
  margin: var(--space-1) 0 0;
  font-size: 0.8125rem;
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}

.testimonial-card__dot {
  margin-inline: 0.4em;
  opacity: 0.6;
}

/* ---------- Scroll reveal stagger ---------- */

.testimonials__wall .testimonial-card:nth-child(1) { transition-delay: 20ms; }
.testimonials__wall .testimonial-card:nth-child(2) { transition-delay: 50ms; }
.testimonials__wall .testimonial-card:nth-child(3) { transition-delay: 80ms; }
.testimonials__wall .testimonial-card:nth-child(4) { transition-delay: 110ms; }
.testimonials__wall .testimonial-card:nth-child(5) { transition-delay: 140ms; }
.testimonials__wall .testimonial-card:nth-child(6) { transition-delay: 170ms; }

/* ---------- Small screens ----------
   Matches the same padding-block reduction used across every other
   section at this breakpoint. */

@media (max-width: 560px) {
  .testimonials {
    padding-block: var(--space-8);
  }
}