/* about-course.css — section 2 of 11
   Desktop 3001:329 (1440x411) · mobile 3001:3169 (335x686). Mobile-first: base = 375,
   then @768 (the two-column split) then @1024 (the drawn desktop band).

   SCOPE: every selector below is .about-course* — no global selector, no :root, no template
   stylesheet. The section-scoped tokens are therefore declared on the SECTION ROOT, not on
   :root (the global-scope lock owns :root; inheritance to the descendants is identical).
   They are declared in ALL THREE BANDS: a scoped token missing from the 768-1023 block is a
   known defect class on this pipeline (ragazzi-pdp2 shipped a badge 2x too large that way).

   No fill, no radius, no shadow, no image anywhere in this section: 44 nodes, zero fills.
   Everything visible is ink-on-white plus six 1px hairlines. */

/* ============================================================================
   MOBILE 0-767 — base, no @media. Anchor 375, coefficient 0.015.
   Bounds: M-min = round(M x 320/375), M-max = round(M x 767/375),
           D-min = round(D x 1024/1520), D-max = round(D x 1920/1520).
============================================================================ */
.about-course {
  --text-about-item: clamp(14px, calc(16px + (var(--max-vw) - 375px) * 0.015), 33px);
  --about-intro-gap: clamp(26px, calc(30px + (var(--max-vw) - 375px) * 0.015), 61px);
  --about-gains-gap: clamp(26px, calc(30px + (var(--max-vw) - 375px) * 0.015), 61px);
  --about-mark-h:    clamp(26px, calc(30px + (var(--max-vw) - 375px) * 0.015), 61px);
  --about-num-w:     auto;   /* mobile ordinals HUG: the five differ (21/23/25/25/25) because
                                Onest's digits are proportional. A fixed width here would
                                manufacture a delta on all 10 nodes. */
  --about-rule-gap:  10px;   /* drawn 10 on BOTH layers — a constant, like --grid-gap. */
  --about-row-gap:   15px;   /* per-band CONSTANT, 15 mobile / 10 desktop. Deliberately not
                                clamped: the mobile value is LARGER, so any interpolation
                                inverts the ramp and clamp(min>max) collapses to min. */

  /* hero -> about-course = 120 desktop / 50 mobile = exactly the page default, so this reuses
     --section-gap with no scoped override. about-course -> audience (84) is owned by the
     `audience` slice as ITS top margin; setting it here too would add 84px of page drift.
     Longhands only — a `margin` shorthand would wipe .container's margin-inline: auto. */
  margin-top: var(--section-gap);
  margin-bottom: 0;
}

/* Mobile is ONE column: intro -> mark -> gains list. 169 + 30 + 30 + 30 + 427 = 686. */
.about-course__inner {
  display: flex;
  flex-direction: column;
  gap: var(--about-gains-gap);
}

.about-course__intro {
  display: flex;
  flex-direction: column;
  gap: var(--about-intro-gap);
}

.about-course__gains {
  display: flex;
  flex-direction: column;
  gap: var(--about-gains-gap);
}

/* __title uses .t-h2 verbatim: it already carries Oswald, --fw-h2 (600 mobile / 700 desktop),
   --text-h2, --lh-h2 (.88 / 1), --ls-h2 (-4% / -6.25%), uppercase and --c-heading
   (#232323 mobile / #252627 desktop) — which is exactly what both nodes draw. Nothing to add,
   and nothing here may unify the per-band weight or ink: the gate compares exact values. */

/* __lead uses .t-lead for family/weight/size (Onest 600, --text-body-lg = M16/D20 — an exact
   match) and overrides only the two unclamped metrics that differ from that token: the nodes
   draw 120% / -3%, the token ships 115% / -5%. --text-body-lg is a PAGE token used by other
   slices and must not be redefined. */
.about-course__lead {
  line-height: 1.2;
  letter-spacing: -0.03em;
}

/* SIRKA mark. Height is the token, width is derived from the drawn 35x61 ratio (mobile
   30 x 17.213 is the same ratio to six places), so both layers land on their Figma box and
   the reserved space rules out CLS.
   The width is an explicit calc, NOT `width: auto` + `aspect-ratio`: an <svg> root with no
   viewBox attribute has a DEFAULT width of 100%, so `auto` never engages the ratio — measured,
   the mark came out 710px wide and `preserveAspectRatio` then centred the glyph in the middle
   of the right column instead of pinning it to the left edge. The symbol's own viewBox
   (34.7883x60.416, the artwork bbox) keeps the glyph itself undistorted inside this box. */
.about-course__mark {
  height: var(--about-mark-h);
  width: calc(var(--about-mark-h) * 35 / 61);
  flex: 0 0 auto;
  color: var(--c-ink-alt);   /* #252627 on BOTH layers — the one place mobile uses ink-alt */
  fill: currentColor;
}

.about-course__gains-body {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);      /* label -> list = 20 on both layers, a fixed page token */
}

/* Label = --text-h5's family/weight/size/line-height/case exactly; only letter-spacing
   differs (drawn 0% on both layers, the token ships -3%). Scoped override, token untouched.
   It is a <p>, not a heading: an <h3> here would create a doubled-heading seam. */
.about-course__gains-label {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--text-h5);
  line-height: var(--lh-h5);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-ink);
}

/* ---- the list rhythm: 11 children, 10 gaps of 10 = 100px + the rows' natural height ---- */
.about-course__gains-list {
  display: flex;
  flex-direction: column;
  gap: var(--about-rule-gap);
}

/* The 6 rules are `line` nodes of height 0 with a 1px CENTER stroke: they occupy ZERO layout
   height in Figma and must occupy zero here. A real `border` on a real box would add 1px six
   times and grow the list 256 -> 262 and the section 411 -> 417. Rejected and not to be
   re-attempted: border-top on a height:0 box (1px floor), border-block on the rows with
   compensating padding (drifts the rule positions), <hr> (UA margins + default border). */
.about-course__rule {
  display: block;
  height: 0;
  position: relative;
}
.about-course__rule::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--c-hairline);   /* #000000 — a genuinely separate value from --c-ink */
}

/* Mobile row: flex-start (Figma alignItems MIN — the ordinal sits at local y=0 even in the
   90px-tall row 03), gap 15, hugging ordinal, full 335 width. */
.about-course__gain {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--about-row-gap);
  width: 100%;
}

.about-course__gain-num {
  flex: 0 0 var(--about-num-w);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--text-h5);
  line-height: var(--lh-h5);
  letter-spacing: var(--ls-h5);   /* mobile draws -3%, i.e. the token's own value */
  color: var(--c-ink);
  white-space: nowrap;
}

.about-course__gain-text {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-about-item);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--c-ink);
}

.about-course__gain--tight .about-course__gain-text {
  letter-spacing: -0.05em;
}

/* ============================================================================
   PSEUDO-TABLET 768-1023 — INTERPOLATED, nothing is drawn here. MANDATORY.
   Text metrics (lh / ls / weight / ink) stay at their mobile values through this band; the
   desktop metrics belong to the drawn desktop layer and start at 1024. That includes the row
   internals (flex-start, gap 15, hugging ordinal): the rows still wrap here, and
   align-items: center would mis-centre a 3-line row against its ordinal.
============================================================================ */
@media (min-width: 768px) {
  .about-course {
    --text-about-item: clamp(16px, calc(16px + (var(--max-vw) - 768px) * 0.025), 18px);
    --about-intro-gap: clamp(30px, calc(30px + (var(--max-vw) - 768px) * 0.025), 75px);
    --about-gains-gap: clamp(30px, calc(30px + (var(--max-vw) - 768px) * 0.025), 50px);
    --about-mark-h:    clamp(30px, calc(30px + (var(--max-vw) - 768px) * 0.025), 61px);
    --about-num-w:     auto;
    --about-rule-gap:  10px;
    --about-row-gap:   15px;
  }

  /* THE SPLIT. 3001:329 is a horizontal auto-layout, justifyContent SPACE_BETWEEN,
     alignItems MIN, two children: 467 / 263 / 710 = 1440 exactly.
     Widths are PERCENTAGES of the content box, not clamped px (page decision): the
     percentage survives the 1024 seam and the --max-vw cap with one set of numbers.
       467 / 1440 = 32.4306%   263 / 1440 = 18.2639% (the space-between slack)   710 / 1440 = 49.3056%
     The Figma `gap: 266` on this node is DEAD — SPACE_BETWEEN distributes the slack and
     Figma retains the stale field. Writing 266 overflows the content box by 3px and breaks
     the 1440 close, so the gap is never written; space-between produces the effective 263.
     Split at 768 rather than 1024 is safe here for the reason the rule names: this is
     text-beside-text, there is no image in this section at all, so the aspect-ratio
     explosion the 768 rule guards against cannot occur. */
  .about-course__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  .about-course__intro {
    flex: 0 0 auto;
    width: 32.4306%;
    /* NO space-between in this band — it belongs to the drawn desktop layer and starts at 1024
       (below). Measured at 768: the heading is still 1 line (28px) while the right column is
       475px tall, so space-between stretched the title->lead gap to 258px and the section read
       as broken rather than as bottom-aligned. This is the fallback the slice sanctions for
       exactly that observation (D-2 note): keep --about-intro-gap as a real gap through
       768-1023. CSS-only, no DOM impact. */
  }
  .about-course__gains {
    flex: 0 0 auto;
    width: 49.3056%;
  }
}

/* ============================================================================
   DESKTOP 1024+ — the drawn layer, proportional to --vw-base: 1520px.
============================================================================ */
@media (min-width: 1024px) {
  .about-course {
    --text-about-item: clamp(12px, calc(18px * (var(--max-vw) / var(--vw-base))), 23px);
    --about-intro-gap: clamp(51px, calc(75px * (var(--max-vw) / var(--vw-base))), 95px);
    --about-gains-gap: clamp(34px, calc(50px * (var(--max-vw) / var(--vw-base))), 63px);
    --about-mark-h:    clamp(41px, calc(61px * (var(--max-vw) / var(--vw-base))), 77px);
    --about-num-w:     clamp(22px, calc(32px * (var(--max-vw) / var(--vw-base))), 40px);
    --about-rule-gap:  10px;
    --about-row-gap:   10px;   /* the ONLY value that shrinks upward */
  }

  /* The drawn desktop pin. The row's height comes from the RIGHT column (61 + 50 + 300 = 411);
     the left column stretches to it and space-between pins the heading to the top of the row
     and the lead's last line to the BOTTOM, level with the final hairline 3001:360. That 75px
     is the section's typographic anchor, not slack to normalise — and 3001:330's Figma
     `gap: 92` is DEAD for the same SPACE_BETWEEN reason (effective 267 - 192 = 75).
     --about-intro-gap stays the FLOOR; a fixed gap would unpin the lead the moment the copy
     reflows or the face falls back. */
  .about-course__intro {
    justify-content: space-between;
  }

  /* Desktop rows: alignItems CENTER (the ordinal of the 42px-tall rows 03/04 sits at
     y = 9 = (42-24)/2), gap 10, and a FIXED 32px ordinal on all five rows so the text always
     starts at x = 42 and the available text width is exactly 710 - 42 = 668. Row 04's text is
     668 in 668 — zero horizontal slack, asserted in the self-check.
     Rows are hug-width in Figma (669/639/701/710/516); fit-content reproduces four of the
     five and nothing paints at a row's right edge, so it is geometric fidelity only. */
  .about-course__gain {
    align-items: center;
    width: fit-content;
    max-width: 100%;
  }
  .about-course__gain-num {
    letter-spacing: 0;   /* desktop draws 0%, unlike mobile's -3% */
  }
  /* Desktop draws letter-spacing 0 on all five row texts — the mobile -5% pair is mobile-only. */
  .about-course__gain--tight .about-course__gain-text {
    letter-spacing: 0;
  }
}