/* symptoms — section CSS, written by its BUILD-SECTION subagent (2026-09-15).
   Source: brief/symptoms.md + cache/symptoms.{desktop,mobile}.json. Pattern A (.container gutter only).
   Mobile-first: base = drawn mobile layer 3271:725 (390) · 768–1023 mobile structure with pseudo-tablet
   values · 1024+ drawn desktop layer 3271:48 (--vw-base 1619). Every rule is scoped under .symptoms. */

/* ---------------------------------------------------------------------------
   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.
--------------------------------------------------------------------------- */

.symptoms {
  --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;
  --radius-md-m:   16px;
  --shadow-card-m: 0 8px 32px rgba(0,0,0,.08);
  --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;
  --section-pad-y: clamp(26px, calc(32px + (var(--max-vw) - 390px) * 0.015), 63px);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .symptoms {
    --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);
    --section-pad-y: clamp(32px, calc(32px + (var(--max-vw) - 768px) * 0.025), 75px);
  }
}

@media (min-width: 1024px) {
  .symptoms {
    --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;
    --section-pad-y: clamp(47px, calc(75px * (var(--max-vw) / var(--vw-base))), 89px);
  }
}

.symptoms {
  /* section-local type roles (brief §5 table) */
  --text-sym-title: clamp(11px, calc(14px + (var(--max-vw) - 390px) * 0.015), 28px);
  --lh-sym-title: 1.25;
  --ls-sym-title: 0;
  --text-sym-desc: clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 24px);
  --lh-sym-desc: 1.45;
  --ls-sym-desc: 0;

  /* vertical rhythm (brief §2 internal spacing) */
  --sym-ov-gap:    clamp(7px, calc(8px + (var(--max-vw) - 390px) * 0.015), 16px);
  --sym-lead-gap:  clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 24px);
  --sym-list-gap:  0px;   /* margin above the list — mobile uses the list's own padding-top instead */
  --sym-list-pad:  clamp(20px, calc(24px + (var(--max-vw) - 390px) * 0.015), 47px);
  --sym-card-gap:  clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 31px);
  --sym-note-gap:  clamp(20px, calc(24px + (var(--max-vw) - 390px) * 0.015), 47px);
  --sym-cta-gap:   clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 31px);

  /* mobile row card */
  --sym-card-minh: clamp(73px, calc(89.53px + (var(--max-vw) - 390px) * 0.015), 176px);
  --sym-img-w:     clamp(90px, calc(109.99px + (var(--max-vw) - 390px) * 0.015), 216px);
  --sym-body-pad:  clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 31px);
  --sym-title-gap: clamp(3px, calc(4px + (var(--max-vw) - 390px) * 0.015), 8px);

  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
}

/* ---------- header block ---------- */
.symptoms__eyebrow {
  width: fit-content;
  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;
  color: var(--c-eyebrow);
}

.symptoms__title {
  margin-top: var(--sym-ov-gap);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--c-ink);
}

.symptoms__lead {
  margin-top: var(--sym-lead-gap);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  color: var(--c-text);
}
.symptoms__lead strong {
  font-weight: 700;
  color: var(--c-text);
}
.symptoms__br { display: none; }

/* ---------- card list: mobile = vertical stack of ROW cards ---------- */
.symptoms__list {
  display: flex;
  flex-direction: column;
  gap: var(--sym-card-gap);
  margin-top: var(--sym-list-gap);
  padding-top: var(--sym-list-pad);
}

.symptoms__card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: var(--sym-card-minh);
  overflow: clip;                       /* rounds the flush image cell's left corners (brief §5) */
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md-m);
  box-shadow: var(--shadow-card-m);
}

.symptoms__media {
  position: relative;
  flex: 0 0 var(--sym-img-w);
}
.symptoms__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.symptoms__card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  padding: var(--sym-body-pad);
  /* the drawn 0.633px card border lays out as 1px in Chromium, which takes ~1px from the 207px text
     column; card 3 needs 206.66px for Figma's 2-line break. Give that pixel back on the inner side. */
  padding-inline-end: calc(var(--sym-body-pad) - 1px);
}

.symptoms__card-title {
  width: fit-content;
  margin-bottom: var(--sym-title-gap);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--text-sym-title);
  line-height: var(--lh-sym-title);
  letter-spacing: var(--ls-sym-title);
  color: var(--c-ink);
}

.symptoms__card-text {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-sym-desc);
  line-height: var(--lh-sym-desc);
  letter-spacing: var(--ls-sym-desc);
  color: var(--c-text);
}

/* ---------- closing line + CTA ---------- */
.symptoms__note {
  margin-top: var(--sym-note-gap);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  color: var(--c-text);
}
.symptoms__note strong {
  font-weight: 700;
  color: var(--c-ink);
}

.symptoms__cta {
  display: flex;
  margin-top: var(--sym-cta-gap);
}

/* ---------- pseudo-tablet 768–1023: mobile structure, interpolated values ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .symptoms {
    --text-sym-title: clamp(14px, calc(14px + (var(--max-vw) - 768px) * 0.025), 23.39px);
    --text-sym-desc:  clamp(12px, calc(12px + (var(--max-vw) - 768px) * 0.025), 17.929px);

    --sym-ov-gap:   clamp(8px, calc(8px + (var(--max-vw) - 768px) * 0.025), 16px);
    --sym-lead-gap: clamp(12px, calc(12px + (var(--max-vw) - 768px) * 0.025), 26.3px);
    --sym-list-pad: clamp(24px, calc(24px + (var(--max-vw) - 768px) * 0.025), 49px);
    --sym-note-gap: clamp(24px, calc(24px + (var(--max-vw) - 768px) * 0.025), 40px);
    --sym-cta-gap:  clamp(16px, calc(16px + (var(--max-vw) - 768px) * 0.025), 26px);

    /* mobile-only dimensions: no desktop counterpart → M-base (brief §2) */
    --sym-card-gap:  16px;
    --sym-card-minh: 89.53px;
    --sym-img-w:     109.99px;
    --sym-body-pad:  16px;
    --sym-title-gap: 4px;
  }
}

/* ---------- desktop 1024+: centred text, 3-column grid of COLUMN cards ---------- */
@media (min-width: 1024px) {
  .symptoms {
    --text-sym-title: clamp(15px, calc(23.39px * (var(--max-vw) / var(--vw-base))), 28px);
    --lh-sym-title: 1.2095;
    --ls-sym-title: -0.0125em;
    --text-sym-desc: clamp(11px, calc(17.929px * (var(--max-vw) / var(--vw-base))), 21px);
    --lh-sym-desc: normal;
    --ls-sym-desc: -0.02em;

    --sym-ov-gap:    clamp(10px, calc(16px * (var(--max-vw) / var(--vw-base))), 19px);
    --sym-lead-gap:  clamp(17px, calc(26.3px * (var(--max-vw) / var(--vw-base))), 31px);
    --sym-list-gap:  clamp(31px, calc(49px * (var(--max-vw) / var(--vw-base))), 58px);
    --sym-col-gap:   clamp(16px, calc(25px * (var(--max-vw) / var(--vw-base))), 30px);
    --sym-note-gap:  clamp(25px, calc(40px * (var(--max-vw) / var(--vw-base))), 47px);
    --sym-cta-gap:   clamp(16px, calc(26px * (var(--max-vw) / var(--vw-base))), 31px);

    --sym-card-minh-d: clamp(249px, calc(394px * (var(--max-vw) / var(--vw-base))), 467px);
    --sym-card-pad-d:  clamp(15px, calc(23.4px * (var(--max-vw) / var(--vw-base))), 28px);
    --sym-body-inset:  clamp(5px, calc(7.2px * (var(--max-vw) / var(--vw-base))), 9px);
    --sym-img-gap:     clamp(13px, calc(20.35px * (var(--max-vw) / var(--vw-base))), 24px);
    --sym-desc-gap:    clamp(4px, calc(6.08px * (var(--max-vw) / var(--vw-base))), 7px);

    --radius-sym-card-d: 20.021px;
    --shadow-sym-d: 21.689px 27.529px 114.953px 0 rgba(0, 0, 0, .13);
  }

  .symptoms__eyebrow { margin-inline: auto; }

  .symptoms__title {
    max-width: 13.94em;                 /* D-sym-2 MUST-APPLY: 647 / 46.425 → Figma's 2-line break */
    margin-inline: auto;
    text-align: center;
  }

  .symptoms__lead {
    max-width: 37.92em;                 /* drawn box 815 */
    margin-inline: auto;
    text-align: center;
  }
  .symptoms__br { display: inline; }

  .symptoms__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--sym-col-gap);
    padding-top: 0;
  }

  .symptoms__card {
    flex-direction: column;
    min-height: var(--sym-card-minh-d);
    overflow: visible;                  /* image 1/3 shadows must not be clipped */
    padding: var(--sym-card-pad-d) var(--sym-card-pad-d) 0;
    border-radius: var(--radius-sym-card-d);
    box-shadow: var(--shadow-sym-d);
  }

  .symptoms__media {
    position: static;
    flex: none;
  }
  .symptoms__img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 341.19 / 242.75;
    object-fit: cover;
    border-radius: 10px;
  }
  /* D-sym-5: images 1 and 3 carry the drop shadow, image 2 has none in the file */
  .symptoms__card:nth-child(1) .symptoms__img,
  .symptoms__card:nth-child(3) .symptoms__img { box-shadow: var(--shadow-sym-d); }

  .symptoms__card-body {
    display: block;
    flex: none;
    margin-top: var(--sym-img-gap);
    padding: 0 0 0 var(--sym-body-inset);
  }

  .symptoms__card-title { margin-bottom: var(--sym-desc-gap); }

  /* D-sym-2 MUST-APPLY per-item line-control widths (drawn text boxes, em of 17.929) */
  .symptoms__card:nth-child(1) .symptoms__card-text { max-width: 13.96em; }
  .symptoms__card:nth-child(2) .symptoms__card-text { max-width: 15.90em; }
  .symptoms__card:nth-child(3) .symptoms__card-text { max-width: 18.02em; }

  .symptoms__note {
    width: fit-content;
    margin-inline: auto;
    text-align: center;
  }

  .symptoms__cta { margin-inline: auto; }
}