/* =============================================================================
   CTFY · Mindful Young Minds (/programs/youth/, PRD pages/24) · programme template layer + growth path
   Builds on css/site.css and css/modules.css. The .prog-* rules in §3–§4 and §6 follow the 28-Day Reset
   template (css/pages/28-day-reset.css), re-skinned for porcelain; the hero (.yth-*) is H6 with a floating
   photo; §5 is this page's hero moment, the growth path.

   Growth path: eight stones on a gently rising curve, 12 → 28px. On entry a theta-700 fill runs left → right
   over 1.9 s (the curve is revealed by a translateX mask pair, transform only, no animated stroke), each
   stone's fill layer pops (--ease-pop) as the fill reaches it, the last stone wears a thin ring. Numerals sit
   under the stones (a 12px stone cannot hold a legible figure). Phones: a straight vertical path on the left
   edge, stones still growing downward. The visual is aria-hidden; the spec strip is the text. Default CSS =
   finished state, so reduced motion, the G4 toggle (html[data-motion="off"]) and no-JS show the full path.
   ============================================================================= */

#why,#how,#course,#start{scroll-margin-top:96px}

/* ---------- §1 · H6 Paper Subhero: dark band, floating photo straddling the seam ---------- */
.yth-hero .crumbs{margin-bottom:24px}
.yth-hero__float picture{display:contents}
.yth-facts{margin-top:28px}
.yth-facts .chip{min-height:40px;text-decoration:none;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.yth-facts__price{color:var(--champ-400)}
@media (hover:hover) and (pointer:fine){.yth-facts .chip:hover{background:rgba(22,26,38,.62);border-color:rgba(255,255,255,.22)}}
@media (pointer:coarse){.yth-facts .chip{min-height:44px}}
@media (max-width:767px){.yth-facts{margin-top:22px;gap:8px}}
/* the float (340px, 4:5, --r-xl) never reaches the text column: copy stops 48px short of it */
.yth-hero__float{width:340px;aspect-ratio:4/5;border-radius:var(--r-xl);box-shadow:0 36px 70px -34px rgba(17,19,26,.55),0 0 0 1px rgba(255,255,255,.08)}
.yth-hero__float img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 30%)}
@media (min-width:1024px){.yth-hero .hero__content>*{max-width:min(760px,100% - 340px - 48px)}}
/* phones and tablets: 16:10 photo under the band, half over the seam (site.css hides .hero__float here) */
@media (max-width:1023px){
  .yth-hero{--w:min(100% - 2 * var(--gutter),600px)}
  .yth-hero .hero__float{display:block;position:relative;right:auto;bottom:auto;align-self:center;width:var(--w);aspect-ratio:16/10;margin:36px 0 calc(var(--w) * -.3125);border-radius:var(--r-l)}
  .yth-hero__float img{object-position:50% 30%}
}

/* ---------- §2 · Statement lead (M02 inside the porcelain chapter) ---------- */
.prog-statement{padding-block:0 clamp(40px,5vw,72px)}
.prog-statement .m-lightup__quote{max-width:26ch}

/* ---------- §3 · Why (M14 split + M28 paper Feel List + group photo) ---------- */
.prog-why{padding-top:calc(160px + var(--section-y-tight))}
.prog-why__aside{display:grid;gap:clamp(20px,2.4vw,32px)}
.prog-gain .m-feel__list li{align-items:center}
.prog-gain .m-feel__list .icon{transform:none}
.prog-why__detail{width:min(100%,340px);justify-self:end;aspect-ratio:508/764;border-radius:var(--r-l)}   /* 508 px source: shown at 340 px at most, so it stays sharp at 1x */
@media (min-width:1024px){.prog-why__split{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
@media (max-width:1023px){.prog-why .m-split__media{order:0}.prog-why__detail{justify-self:start}}

/* ---------- §4 · How (porcelain band, numbered pillars on the hairline) + two studio rooms ---------- */
.prog-how{background:var(--paper-1);--surface:var(--paper-0)}
.prog-rhythm .m-pillar__media picture{display:contents}   /* <picture>-wrapped strips crop like plain <img> strips */
/* the numbers sit on a card-coloured plate so the hairline passes behind them */
.prog-rhythm .m-pillar__index{z-index:2;padding-right:14px;background:var(--surface)}
.prog-rhythm .m-pillar+.m-pillar .m-pillar__index{margin-left:-14px;padding-left:14px}
.prog-rhythm::before{display:none}
@media (min-width:1024px){
  @supports (width:1cqw){
    /* one hairline threads 01 → 02 → 03 across the cards at the numbers' centre line. Geometry from M24:
       card padding --p, column gap --gx, 16:9 media strip, 8px + 12px to the index (t-num-m, line-height 1). */
    .prog-rhythm{container-type:inline-size}
    .prog-rhythm::before{--p:clamp(22px,2.4vw,30px);--gx:clamp(20px,3vw,40px);--w:calc((100cqw - 2 * var(--gx)) / 3);
      display:block;z-index:1;left:calc(var(--p) + 1px);right:calc(var(--w) - var(--p) - 28px);
      top:calc((var(--w) - 2px) * 9 / 16 + 21px + var(--t-num-m) / 2);
      background:linear-gradient(90deg,var(--theta-700),rgba(43,59,196,.4))}
  }
}

.yth-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin-top:clamp(48px,6vw,88px)}
.yth-duo__frame{aspect-ratio:4/3;border-radius:var(--r-l)}
@media (max-width:599px){.yth-duo{grid-template-columns:minmax(0,1fr)}}

/* ---------- §5 · The course: growth path + spec strip + CTA + note ---------- */
.prog-course{--seam-to:var(--bg-2)}
.prog-path{position:relative;isolation:isolate;padding-bottom:36px}
.prog-path__plot{position:relative;height:clamp(240px,26vw,320px)}
.prog-path__line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.prog-path__line path{fill:none;stroke:rgba(17,19,26,.2);stroke-width:1;stroke-linecap:round;vector-effect:non-scaling-stroke}
.prog-path__line--fill path{stroke:var(--theta-700);stroke-width:1.75}
/* the fill: clip box stays put, the slide enters from the left while the SVG inside moves the other way (net 0) */
.prog-path__mask{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.prog-path__slide{position:absolute;inset:0;overflow:hidden}
.prog-path__vline{display:none}
.prog-path__stones{position:absolute;left:0;right:0;top:0;height:clamp(240px,26vw,320px);margin:0;padding:0;list-style:none}
.prog-path__stone{position:absolute;left:var(--x);bottom:var(--y);width:0;height:0}
.prog-path__dot{position:absolute;left:calc(var(--s) / -2);bottom:calc(var(--s) / -2);width:var(--s);height:var(--s);border-radius:50%;background:var(--paper-0);box-shadow:inset 0 0 0 1px rgba(17,19,26,.28)}
/* lit layer: crossfades in over the hollow stone, pops with --ease-pop */
.prog-path__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--theta-700);box-shadow:0 8px 18px -8px rgba(43,59,196,.55)}
.prog-path__stone:last-child .prog-path__dot::before{content:"";position:absolute;inset:-6px;border-radius:50%;box-shadow:0 0 0 1px var(--theta-700)}
.prog-path__n{position:absolute;left:0;top:calc(var(--s) / 2 + 12px);transform:translateX(-50%);color:var(--ink-2);font:300 1.25rem/1 var(--font-sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}

@media (max-width:767px){
  /* vertical path on the left edge, stones growing downward; every row is a stone and its numeral */
  .prog-path{padding-bottom:0}
  .prog-path__plot{position:absolute;left:0;top:0;bottom:0;width:28px;height:auto}
  .prog-path__plot>.prog-path__line,.prog-path__mask{display:none}
  .prog-path__vline{display:block;position:absolute;left:13px;top:32px;bottom:32px;width:2px;background:var(--theta-700);transform-origin:top}
  .prog-path__plot::before{content:"";position:absolute;left:14px;top:32px;bottom:32px;width:1px;background:rgba(17,19,26,.2)}
  .prog-path__stones{position:relative;height:auto;display:grid}
  .prog-path__stone{position:relative;left:auto;bottom:auto;width:auto;height:64px;display:flex;align-items:center;gap:22px;--d:calc(120ms + (var(--i) + .5) * 237.5ms)}
  .prog-path__dot{position:relative;left:auto;bottom:auto;flex:none;margin-inline:calc(14px - var(--s) / 2)}
  .prog-path__stone:last-child .prog-path__dot::before{inset:-5px}
  .prog-path__n{position:static;transform:none;font-size:1.75rem}
}

.prog-strip{margin-top:clamp(56px,7vw,96px)}
.prog-strip .m-spec__num{margin-top:22px;font-size:calc(var(--t-num-m) * 1.25)}
.prog-strip .m-spec__label{margin-top:12px}
.prog-price .m-spec__rule{background:var(--g-champ)}
.prog-price .m-spec__num{color:var(--m-price)}
.prog-course__cta{margin-top:clamp(36px,4.5vw,56px)}
.prog-course__note{margin-top:clamp(28px,3.5vw,40px)}
@media (max-width:599px){.prog-course__cta .btn{width:100%}}

/* Sequence (≈2.4 s, data-reveal-hold="2200"): the fill crosses the plot over 1.9 s; stone i pops as it arrives. */
.js .prog-path.is-pending{opacity:1;transform:none}
.js .prog-path.is-pending .prog-path__slide{transform:translateX(-100%)}
.js .prog-path.is-pending .prog-path__line--fill{transform:translateX(100%)}
.js .prog-path.is-pending .prog-path__vline{transform:scaleY(0)}
.js .prog-path.is-pending .prog-path__dot::after{opacity:0;transform:scale(.3)}
.js .prog-path.is-pending .prog-path__n{opacity:.3}
.prog-path.is-in .prog-path__slide,.prog-path.is-in .prog-path__line--fill{transition:transform 1900ms linear 120ms}
.prog-path.is-in .prog-path__vline{transition:transform 1900ms linear 120ms}
.prog-path.is-in .prog-path__dot::after{transition:opacity 220ms var(--ease-out) var(--d),transform 460ms var(--ease-pop) var(--d)}
.prog-path.is-in .prog-path__n{transition:opacity 500ms var(--ease-out) var(--d)}

/* ---------- §6 · Bridge ---------- */
.prog-bridge .m-bridge__line{max-width:24ch}

/* ---------- Calm states: motion off / reduced motion show the finished path ---------- */
[data-motion="off"] .prog-path *,[data-motion="off"] .prog-rhythm::before{transition:none!important}
@media (prefers-reduced-motion:reduce){.prog-path *{transition:none!important}}

/* ---------- Bulgarian (html[lang="bg"]): the H1 carries its descriptor as a smaller third line ---------- */
html[lang="bg"] .yth-hero .yth-h1-sub{font-size:.42em;line-height:1.25;margin-top:.5em;letter-spacing:0;color:var(--text-2,rgba(255,255,255,.78))}