/* ==========================================================================
   Section: testimonials — "What people say" (Google rating + review cards)
   Figma "Home Page" y 5466→5836 (1920 frame) · "Mobile Home" y 3964→4404 (402)
   Layout (revised from the Figma on request — a DELIBERATE deviation): the
   Figma shows three static 512×323 cards beside the intro (x 535 / 1065 /
   1595, y 5513) in a 370px-tall section. The build keeps that geometry —
   intro column 100→535, cards from x=535 at y=5513 — but the cards are a
   continuously scrolling row (18px pitch, 2px gradient stroke, 29px radius)
   that runs to the viewport edge, fades out over 96px before the text column
   and pauses on hover, so the sections below keep their Figma positions (page
   height 14430 vs the Figma's 14429). Tablet and mobile stack the intro above
   a full-bleed row, as in the Figma mobile frame (362px cards, 11px pitch).
   Cards: 2px white→#5a5959 border.
   ========================================================================== */

.section--testimonials {
  padding: 79px 0 27px; /* (5466−5308 work bottom)/2 above, (5890 video-testimonials top−5836)/2 below */
}

/* ---- Stage: intro column | review row ------------------------------------ */
.section--testimonials .testimonials__stage {
  display: grid;
  grid-template-columns: 435px minmax(0, 1fr); /* intro 100→535, cards from x=535 */
  align-items: start;
  margin-top: 22px; /* eyebrow bottom 5491 → cards top 5513 */
}

/* ---- Intro: Google rating row + heading ----------------------------------- */
.section--testimonials .testimonials__intro {
  padding-top: 29px; /* cards top 5513 → rating row 5538 (+4px: the row's reveal padding) */
}

/* "★★★★★ 5.0 from 27+ [G] reviews" — 31px row, everything vertically centred */
.section--testimonials .testimonials__rating {
  display: flex;
  align-items: center;
  gap: 11px; /* last star ends x=201 → "5.0" at 212 */
  height: 31px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 0.98;
  white-space: nowrap;
}
.section--testimonials .testimonials__score {
  min-width: 126px; /* Figma text box 212→338 keeps the G at x=342 whatever the font renders */
}
.section--testimonials .testimonials__source {
  display: inline-flex;
  align-items: center;
  gap: 8px; /* G ends x=366 → "reviews" at 374 */
  margin-left: -7px; /* score box → G is 4px, not the row's 11px */
}
.section--testimonials .testimonials__google {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}

/* Star rows: 17px orange stars on a 20.75px pitch (rating), 16px green on 19.75px (cards) */
.section--testimonials .testimonials__stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 16px;
  flex: 0 0 auto;
}
.section--testimonials .testimonials__stars--rating { height: 17px; }
.section--testimonials .testimonials__stars img { flex: 0 0 auto; }

.section--testimonials .testimonials__title {
  max-width: 435px;
  margin-top: 30px; /* rating bottom 5569 → heading 5599 */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h4); /* 50px */
  line-height: 0.95;
}

/* ---- Review marquee: full-bleed, edge to edge ------------------------------ */
/* Runs from the intro's right edge to the viewport edge. Cards scroll left and
   fade out over the last 96px before the text column (mask), so they never
   pass under the text. */
.section--testimonials .testimonials__marquee {
  width: calc(100% + var(--gutter)); /* .marquee is width:100% in base.css; stretch through the right gutter */
  margin-right: calc(var(--gutter) * -1);
  /* room for the reveal rise (js/main.js) so the card borders never clip */
  padding-block: 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 96px);
  mask-image: linear-gradient(90deg, transparent 0, #000 96px);
}
.section--testimonials .testimonials__track {
  /* .marquee__track (base.css) supplies the flex layout + keyframes; the list
     is rendered twice and shifted by exactly 50%, so spacing must come from
     the cards' own margin (a flex `gap` would leave a half-gap seam). */
  align-items: stretch;
  animation-duration: 110s; /* 18 cards × 530px ≈ 9.5k px → ~43 px/s, readable */
}
.section--testimonials .testimonials__card {
  flex: 0 0 512px;
  width: 512px;
  display: flex;
  flex-direction: column;
  min-height: 323px;
  margin: 0 18px 0 0;
  padding: 33px 37px 36px 38px; /* + 2px border = 35 / 39 / 38 / 40 (content 433 wide) */
  border: 2px solid transparent;
  border-radius: 29px;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(133deg, #ffffff 0%, #5a5959 100%) border-box;
}
.section--testimonials .testimonials__quote {
  margin: 26px 0 0; /* stars bottom 5564 → text 5590 */
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.3;
}
.section--testimonials .testimonials__quote p { margin: 0; }
.section--testimonials .testimonials__author {
  margin-top: auto; /* name pinned to the card bottom */
  padding-top: 16px;
  font-family: var(--font-display);
}
.section--testimonials .testimonials__name {
  display: block;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
}
.section--testimonials .testimonials__company {
  display: block;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.08;
}

/* ---- Tablet ---------------------------------------------------------------- */
@media (max-width: 1024px) {
  .section--testimonials .testimonials__stage { display: block; }
  .section--testimonials .testimonials__intro { max-width: 435px; padding-top: 30px; }
  .section--testimonials .testimonials__marquee {
    width: calc(100% + 2 * var(--gutter));
    margin: 36px calc(var(--gutter) * -1) 0; /* full-bleed row under the intro */
    -webkit-mask-image: none;
    mask-image: none;
  }
  .section--testimonials .testimonials__track {
    margin-left: var(--gutter); /* frame 0 (and reduced motion, where the row is static) starts the first
                                   card at the gutter (x=40 / 20) like the Figma mobile frame instead of flush
                                   with the viewport edge. The −50% keyframe is relative to the track's own
                                   width, so the loop stays seamless; padding on .testimonials__marquee would
                                   clip the cards instead. */
  }
}

/* ---- Mobile (Figma "Mobile Home", 402 wide, 20px gutters) ------------------ */
@media (max-width: 640px) {
  .section--testimonials {
    padding: 71px 0 31px; /* eyebrow 3985 − (3964 − (3964−3865)/2) ≈ 70.5 above; (4466−4404)/2 below */
  }
  .section--testimonials .eyebrow { gap: 16px; }                    /* dot x=20, text x=42 */
  .section--testimonials .testimonials__intro { margin-top: 15px; padding-top: 0; } /* eyebrow bottom 4005 → rating 4020 (the ≤1024 padding-top is not for mobile) */
  .section--testimonials .testimonials__stage { margin-top: 0; }

  /* Heading is absent from the mobile design: keep it for assistive tech only */
  .section--testimonials .testimonials__title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .section--testimonials .testimonials__marquee { margin-top: 30px; } /* rating bottom 4051 → cards 4081 */
  .section--testimonials .testimonials__track { animation-duration: 80s; }
  .section--testimonials .testimonials__card {
    flex-basis: 362px;
    width: 362px;
    margin-right: 11px;               /* card 20→382, next card at 393 */
    padding: 33px 26px 36px 26px;     /* + 2px border = 35 / 28 / 38 / 28 (text 306 wide) */
    background:
      linear-gradient(var(--bg), var(--bg)) padding-box,
      linear-gradient(123deg, #ffffff 0%, #5a5959 100%) border-box; /* same Figma gradient on a 362×323 box */
  }

  /* The Figma card is 323px tall with a 176px quote box (≈7 lines of 16px/1.3).
     Longer reviews are clamped to 7 lines so a single long quote cannot stretch
     every card (align-items: stretch) and push every section below it down. */
  .section--testimonials .testimonials__quote p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    line-clamp: 7;
    overflow: hidden;
  }
  .section--testimonials .testimonials__author { padding-top: 8px; } /* Figma allots ~41px to name + company */
}

/* ---- Small phones (≤400): the nowrap rating row is 349px wide at 20px --------- */
@media (max-width: 400px) {
  .section--testimonials .testimonials__rating {
    flex-wrap: wrap;
    row-gap: 6px;
    height: auto;
    white-space: normal;
    font-size: 18px;                /* ≈318px: fits the 320px container of a 360px phone on one line */
  }
  .section--testimonials .testimonials__score { min-width: 0; }
}