/* reviews — section CSS, written by its BUILD-SECTION subagent (2026-09-15).
   Source: brief/reviews.md (§2.3 / §2.4 / §3.3 / §5 / §6) + cache/reviews.{desktop,mobile}.json.
   Pattern A: gutter from .container, vertical padding via padding-block only.
   Bands: 0–767 mobile (anchor 390) · 768–1023 mobile structure, pseudo-tablet values · 1024+ desktop (--vw-base 1619).
   Every rule is scoped to .reviews / .reviews__*. */

/* ---------------------------------------------------------------------------
   SECTION TOKENS — moved out of the page's tokens.css.

   Read by THIS block and nothing else on the site, so they belong here rather
   than in a site-wide :root. In Shopify a section can be dropped onto any
   template from the theme editor, so a section that reads a token from a
   page-level scope breaks the moment it is moved; scoped to the block's own
   class, it travels with it.

   EVERY band is carried verbatim from the old tokens.css, in that file's own
   order — so the cascade is unchanged whether the page was written
   desktop-first (base + max-width overrides) or mobile-first (base +
   min-width overrides). Verified by computed-style diff at
   375/768/1024/1440/1920.
--------------------------------------------------------------------------- */

.reviews {
  --font-serif:      'Roboto Serif', Georgia, 'Times New Roman', serif;
  --font-mono:       'Roboto Mono', ui-monospace, 'Courier New', monospace;
  --c-eyebrow:       #b3aeae;
  --c-surface:       #ffffff;
  --c-border:        #d6e2e7;
  --grad-review-m:   linear-gradient(164.43deg, #fff4f4 16.692%, #fff 47.472%, #fff 71.037%, #d6e7ff 123.63%);
  --radius-md-m:     16px;
  --shadow-review-m: 0 4px 10px rgba(0,0,0,.07);
  --text-h2:         clamp(18px, calc(22px + (var(--max-vw) - 390px) * 0.015), 43px);
  --lh-h2:           1.2;
  --ls-h2:           -0.025em;
  --text-eyebrow:    clamp(8px, calc(10px + (var(--max-vw) - 390px) * 0.015), 20px);
  --lh-eyebrow:      1.5;
  --ls-eyebrow:      0.2em;
  --ls-lead:         0;
  --text-subnote:    clamp(8px, calc(10px + (var(--max-vw) - 390px) * 0.015), 20px);
  --lh-subnote:      1.5;
  --ls-subnote:      0;
  --section-pad-y:   clamp(26px, calc(32px + (var(--max-vw) - 390px) * 0.015), 63px);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .reviews {
    --text-h2:       clamp(22px, calc(22px + (var(--max-vw) - 768px) * 0.025), 46.425px);
    --text-eyebrow:  clamp(10px, calc(10px + (var(--max-vw) - 768px) * 0.025), 21.493px);
    --text-subnote:  clamp(10px, calc(10px + (var(--max-vw) - 768px) * 0.025), 13.639px);
    --section-pad-y: clamp(32px, calc(32px + (var(--max-vw) - 768px) * 0.025), 75px);
  }
}

@media (min-width: 1024px) {
  .reviews {
    --text-h2:       clamp(29px, calc(46.425px * (var(--max-vw) / var(--vw-base))), 55px);
    --lh-h2:         1.16;
    --ls-h2:         -0.012em;
    --text-eyebrow:  clamp(14px, calc(21.493px * (var(--max-vw) / var(--vw-base))), 25px);
    --lh-eyebrow:    normal;
    --ls-eyebrow:    0.1em;
    --ls-lead:       0;
    --text-subnote:  clamp(9px, calc(13.639px * (var(--max-vw) / var(--vw-base))), 16px);
    --lh-subnote:    normal;
    --ls-subnote:    -0.03em;
    --section-pad-y: clamp(47px, calc(75px * (var(--max-vw) / var(--vw-base))), 89px);
  }
}

/* ---------- section-local custom properties: mobile band ---------- */
.reviews {
  --rv-gap-title: clamp(7px, calc(8px + (var(--max-vw) - 390px) * 0.015), 16px);
  --rv-gap-lead:  clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 24px);
  --rv-gap-list:  clamp(20px, calc(24px + (var(--max-vw) - 390px) * 0.015), 47px);
  --rv-gap-cards: clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 24px);
  --rv-gap-cta:   clamp(20px, calc(24px + (var(--max-vw) - 390px) * 0.015), 47px);
  --rv-gap-note:  clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 24px);
  --rv-col-gap:   0px;

  --rv-card-pad:  clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 31px);
  --rv-card-gap:  0px;
  --rv-rating-pt: clamp(8px, calc(10px + (var(--max-vw) - 390px) * 0.015), 20px);
  --rv-text-pt:   clamp(7px, calc(8px + (var(--max-vw) - 390px) * 0.015), 16px);
  --rv-user-gap:  clamp(8px, calc(10px + (var(--max-vw) - 390px) * 0.015), 20px);
  --rv-who-gap:   0px;
  --rv-avatar:    clamp(30px, calc(36px + (var(--max-vw) - 390px) * 0.015), 71px);
  --rv-source:    clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 31px);
  --rv-stars-h:   clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 31px);
  --rv-text-max:  none;
  --rv-radius:    var(--radius-md-m);

  /* type (section-local roles, brief §5) */
  --rv-name: clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 24px);
  --rv-date: clamp(8px, calc(10px + (var(--max-vw) - 390px) * 0.015), 20px);
  --rv-text: clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 24px);
  --rv-lh-name: 1.25;
  --rv-lh-date: 1.5;
  --rv-lh-text: 1.5;
  --rv-ink: #1a1a1a;
  --rv-date-color: rgba(0, 0, 0, .45);

  /* decor (brief §3.3) — desktop values, applied in the 1024+ band */
  --rv-grad-d: linear-gradient(145.775deg, #ffdbd9 11.555%, #fff 20.72%, #fff 73.719%, #d6e7ff 134.39%);
  --rv-shadow-d:
    0 2.017px 4.033px rgba(0, 0, 0, .10),
    0 7.058px 7.058px rgba(0, 0, 0, .09),
    0 16.132px 9.074px rgba(0, 0, 0, .05),
    0 28.231px 11.091px rgba(0, 0, 0, .01);
}

/* ---------- mobile structure (base) ---------- */
.reviews {
  padding-block: var(--section-pad-y);   /* never a padding shorthand on a .container section */
}

.reviews__eyebrow {
  width: fit-content;                    /* hug, LEFT-aligned on mobile (D-RV-7) */
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  text-align: left;
  color: var(--c-eyebrow);
}

.reviews__title {
  width: fit-content;
  margin-top: var(--rv-gap-title);
  margin-inline: auto;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  text-align: center;
  color: var(--c-ink);
}

.reviews__lead {
  width: fit-content;
  margin-top: var(--rv-gap-lead);
  margin-inline: auto;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  text-align: center;
  color: var(--c-text);
}

.reviews__list {
  display: flex;
  flex-direction: column;
  gap: var(--rv-gap-cards);
  margin-top: var(--rv-gap-list);
  padding: 0;
  list-style: none;
}

.reviews__card {
  display: flex;
  flex-direction: column;
  gap: var(--rv-card-gap);
  padding: var(--rv-card-pad);
  border: 1px solid var(--c-border);
  border-radius: var(--rv-radius);
  background-color: var(--c-surface);
  background-image: var(--grad-review-m);
  filter: drop-shadow(var(--shadow-review-m));   /* token is in drop-shadow form (brief §3.3) */
}

.reviews__user {
  display: flex;
  align-items: center;
  gap: var(--rv-user-gap);
}

.reviews__avatar {
  display: block;
  flex: 0 0 auto;
  width: var(--rv-avatar);
  height: var(--rv-avatar);
  border-radius: 50%;
  overflow: hidden;                      /* the circular clip frame (3271:1025 / 3271:329) */
}

.reviews__avatar img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.reviews__who {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;               /* mobile name/date hug their text (3271:1029 w 72) */
  gap: var(--rv-who-gap);
  min-width: 0;
}

.reviews__name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--rv-name);
  line-height: var(--rv-lh-name);
  color: var(--rv-ink);
}

.reviews__date {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--rv-date);
  line-height: var(--rv-lh-date);
  color: var(--rv-date-color);
}

.reviews__source {
  flex: 0 0 auto;
  width: var(--rv-source);
  height: var(--rv-source);
}

.reviews__rating {
  align-self: flex-start;                /* hug the strip: 95×26 box incl. padding-top (3271:1037) */
  padding-top: var(--rv-rating-pt);
}

.reviews__rating picture { display: block; }

.reviews__stars {
  width: auto;
  height: var(--rv-stars-h);
  max-width: none;
}

.reviews__text {
  max-width: var(--rv-text-max);
  margin-top: var(--rv-text-pt);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--rv-text);
  line-height: var(--rv-lh-text);
  color: var(--rv-ink);
}

.reviews__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rv-gap-note);
  margin-top: var(--rv-gap-cta);
}

.reviews__subnote {
  width: fit-content;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-subnote);
  line-height: var(--lh-subnote);
  letter-spacing: var(--ls-subnote);
  text-align: center;
  color: var(--c-text);
}

/* ---------- 768–1023: mobile structure, pseudo-tablet values ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .reviews {
    --rv-gap-title: clamp(8px, calc(8px + (var(--max-vw) - 768px) * 0.025), 15.36px);
    --rv-gap-lead:  clamp(12px, calc(12px + (var(--max-vw) - 768px) * 0.025), 21.63px);
    --rv-gap-list:  clamp(24px, calc(24px + (var(--max-vw) - 768px) * 0.025), 41.55px);
    --rv-gap-cards: 12px;                /* brief §2.3: stays 12 (no desktop row gap) */
    --rv-gap-cta:   clamp(24px, calc(24px + (var(--max-vw) - 768px) * 0.025), 40.84px);
    --rv-gap-note:  12px;                /* D-base 11.91 < M-base 12 → flat 12 */

    --rv-card-pad:  clamp(16px, calc(16px + (var(--max-vw) - 768px) * 0.025), 24.198px);
    --rv-rating-pt: clamp(10px, calc(10px + (var(--max-vw) - 768px) * 0.025), 16.132px);
    --rv-text-pt:   clamp(8px, calc(8px + (var(--max-vw) - 768px) * 0.025), 16.132px);
    --rv-user-gap:  clamp(10px, calc(10px + (var(--max-vw) - 768px) * 0.025), 16.132px);
    --rv-who-gap:   clamp(0px, calc(0px + (var(--max-vw) - 768px) * 0.025), 3.025px);
    --rv-avatar:    clamp(36px, calc(36px + (var(--max-vw) - 768px) * 0.025), 40.331px);
    --rv-source:    clamp(16px, calc(16px + (var(--max-vw) - 768px) * 0.025), 24.198px);
    --rv-stars-h:   clamp(16px, calc(16px + (var(--max-vw) - 768px) * 0.025), 24.198px);

    --rv-name: clamp(12px, calc(12px + (var(--max-vw) - 768px) * 0.025), 16.132px);
    --rv-date: clamp(10px, calc(10px + (var(--max-vw) - 768px) * 0.025), 12.099px);
    --rv-text: clamp(12px, calc(12px + (var(--max-vw) - 768px) * 0.025), 16.132px);
  }
}

/* ---------- 1024+: desktop structure ---------- */
@media (min-width: 1024px) {
  .reviews {
    --rv-gap-title: clamp(10px, calc(15.36px * (var(--max-vw) / var(--vw-base))), 18px);
    --rv-gap-lead:  clamp(14px, calc(21.63px * (var(--max-vw) / var(--vw-base))), 26px);
    --rv-gap-list:  clamp(26px, calc(41.55px * (var(--max-vw) / var(--vw-base))), 49px);
    --rv-col-gap:   clamp(32px, calc(50.41px * (var(--max-vw) / var(--vw-base))), 60px);
    --rv-gap-cta:   clamp(26px, calc(40.84px * (var(--max-vw) / var(--vw-base))), 48px);
    --rv-gap-note:  clamp(8px, calc(11.91px * (var(--max-vw) / var(--vw-base))), 14px);

    --rv-card-pad:  clamp(15px, calc(24.198px * (var(--max-vw) / var(--vw-base))), 29px);
    --rv-card-gap:  clamp(10px, calc(16.132px * (var(--max-vw) / var(--vw-base))), 19px);
    --rv-rating-pt: 0px;
    --rv-text-pt:   0px;
    --rv-user-gap:  clamp(10px, calc(16.132px * (var(--max-vw) / var(--vw-base))), 19px);
    --rv-who-gap:   clamp(2px, calc(3.025px * (var(--max-vw) / var(--vw-base))), 4px);
    --rv-avatar:    clamp(26px, calc(40.331px * (var(--max-vw) / var(--vw-base))), 48px);
    --rv-source:    clamp(15px, calc(24.198px * (var(--max-vw) / var(--vw-base))), 29px);
    --rv-stars-h:   clamp(15px, calc(24.198px * (var(--max-vw) / var(--vw-base))), 29px);
    --rv-text-max:  clamp(173px, calc(274.248px * (var(--max-vw) / var(--vw-base))), 325px);  /* MUST-APPLY */
    --rv-radius:    16.132px;

    --rv-name: clamp(10px, calc(16.132px * (var(--max-vw) / var(--vw-base))), 19px);
    --rv-date: clamp(8px, calc(12.099px * (var(--max-vw) / var(--vw-base))), 14px);
    --rv-text: clamp(10px, calc(16.132px * (var(--max-vw) / var(--vw-base))), 19px);
    --rv-lh-name: 1.25;
    --rv-lh-date: 1.25;
    --rv-lh-text: 1.25;
    --rv-date-color: rgba(0, 0, 0, .5);
  }

  .reviews__eyebrow {
    margin-inline: auto;
    text-align: center;
  }

  .reviews__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--rv-col-gap);
    align-items: start;                  /* natural height, top-aligned (D-RV-5) */
  }

  .reviews__card {
    /* Figma's INSIDE stroke does not push desktop children in (they sit at exactly 24.198) */
    padding: calc(var(--rv-card-pad) - 1px);
    background-image: var(--rv-grad-d);
    filter: none;
    box-shadow: var(--rv-shadow-d);
  }

  .reviews__card--ruben { order: -1; }   /* desktop visual order Ruben, Tanya, Domingo (D-RV-3) */

  .reviews__who { align-items: stretch; } /* desktop name/date boxes fill the block (227.87) */

  .reviews__cta { flex-direction: column-reverse; }  /* desktop: button above subnote */
}