/* approach.css — "Our approach" · Figma D 1817:4416 (1050x303) / M 1817:5012 (358x311)
   Pattern C: nested 2nd in .science-index__main (no .container, no own padding/margin — the host owns gutter + gap).
   Source: brief/approach.md §1b / §2 / §5 / §6 / §11 + cache/approach.{desktop,mobile}.json.
   Scoped to .approach / .approach__* only (GLOBAL-SCOPE LOCK). Mobile-first: base = 390 anchor,
   768 pseudo-tablet (flat gaps, mobile copy), 1024 desktop (desktop copy — D-AP-1 swap). */

/* ---- Section shell (mobile base) — fluid values per brief §2 (anchor 390, coefficient 0.015) ---- */
.approach {
  --approach-gap: clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 24px);      /* title → body: M 20 */
  --approach-text-gap: clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 12px); /* p → p: 12 */

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: var(--approach-gap);
  width: 100%;
}

/* Section Title 1817:5013 / 1817:4417 — Heading/H2, #232323 */
.approach__title {
  width: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--color-graphite);
}

/* Body blocks 1817:5014 (M) / 1817:4418 (D) — vertical, gap 12 */
.approach__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: var(--approach-text-gap);
  width: 100%;
}

/* D-AP-1: the desktop copy is not drawn on the mobile layer (and the band reads the mobile copy) */
.approach__body--desktop {
  display: none;
}

/* Paragraphs 1817:5015–5017 / 1817:4419–4421 — Body/Large/Regular, #232323 */
.approach__text {
  width: 100%;                     /* layoutSizingHorizontal FILL on every paragraph node */
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
  color: var(--color-graphite);
}

/* ---- Pseudo-tablet 768–1023 (no Figma layer): M-767 = M-max → flat gaps; mobile copy, full column width ---- */
@media (min-width: 768px) {
  .approach {
    --approach-gap: 24px;
    --approach-text-gap: 12px;
  }
}

/* ---- Desktop 1024+ — D-base 24 / 12 @1920, D-min = formula at 1024 ---- */
@media (min-width: 1024px) {
  .approach {
    --approach-gap: clamp(13px, calc(24px * (var(--max-vw) / var(--vw-base))), 24px);
    --approach-text-gap: clamp(6px, calc(12px * (var(--max-vw) / var(--vw-base))), 12px);
  }

  .approach__body--desktop {
    display: flex;
  }

  .approach__body--mobile {
    display: none;
  }
}