/* =============================================================================
   CTFY · The 28-Day Reset (/programs/28-day-reset/, PRD pages/21) · programme template layer
   Builds on css/site.css (foundation) and css/modules.css (M01–M33). Only page composition lives here.

   TEMPLATE RULES · reusable by every programme page (PRD 21 §10: hero → why → how → hero moment → note →
   bridge → close). Everything reusable sits under the .prog-* prefix in §1–§6. A sibling page links this
   file before its own css/pages/<name>.css and uses the same class names; rules only apply where the
   markup carries them, so nothing here leaks into a page that does not use it.
     §1 Programme hero ...... .prog-hero (H5 Portrait Subhero), .prog-flag (champagne flagship eyebrow dot),
                              .prog-facts (≤3 Veil fact chips under the CTAs, linking to #programme),
                              .prog-facts__price (champagne price chip)
     §2 Statement ........... .prog-statement (M02 band carrying a statement rather than a quote)
     §3 Why + inclusions .... .prog-why (M14 split: copy left, card + detail photo right; text → card → photo
                              on phones), .prog-included (M28 --sans "What's included" Lens list with icons
                              and links), .prog-why__detail (16:10 detail photo under the card)
     §4 Week rhythm ......... .prog-rhythm (M24 numbered pillars, one theta hairline threading the three
                              numbers, drawn left → right), .prog-studio (wide studio frame + eyebrow caption)
     §5 Hero-moment chapter . .prog-moment (grid: visual left, head + legend + CTA + note right; head →
                              visual → legend on phones), .prog-legend (M03 legend, 2 columns),
                              .prog-price (the price block: champagne figure on a champagne hairline,
                              full width), .prog-key (legend glyphs that match the visual's marks)
     §6 Bridge .............. .prog-bridge (M30 band spacing on studio pages)

   PAGE-ONLY · the 28-Day Reset's hero moment, not for siblings (each programme brings its own visual into
   .prog-moment__visual, 00-overview §7):
     §7 .prog-ring ........... the month as a ring: 28 day-ticks (4 weeks × 7) fill clockwise, 8 session dots
                              (2 a week) and 4 champagne coaching marks (weekly) light as the fill passes.

   Motion: transform/opacity only, keyed on the core.js reveal states (.is-pending before entry, .is-in while
   the sequence runs, see 09a §9). The default CSS is the finished state, so reduced motion, the G4 toggle
   (html[data-motion="off"]) and no-JS all show the full ring and the final numbers.
   ============================================================================= */

/* Anchors (hero chips → #programme, in-page links) land with the dock clear of the heading */
#why,#how,#programme,#start{scroll-margin-top:96px}

/* ---------- §1 · Programme hero (H5 Portrait Subhero on BG-B aurora) ---------- */
.prog-hero .hero__main{max-width:640px}
.prog-hero .crumbs{margin-bottom:24px}
.prog-hero__portrait picture{display:contents}   /* the <picture>-wrapped photo fills the 4:5 / 16:10 frame and honours --pos / --pos-m */
/* flagship status earns the champagne dot (PRD 21 §4.1) */
.prog-flag::before{background:var(--champ-400);box-shadow:0 0 12px rgba(203,179,132,.45)}
/* fact chips: Veil glass over the aurora, links to the hero-moment chapter */
.prog-facts{margin-top:28px}
.prog-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)}
.prog-facts__price{color:var(--champ-400)}
@media (hover:hover) and (pointer:fine){.prog-facts .chip:hover{background:rgba(22,26,38,.62);border-color:rgba(255,255,255,.22)}}
@media (pointer:coarse){.prog-facts .chip{min-height:44px}}
@media (max-width:767px){.prog-facts{margin-top:22px;gap:8px}}

/* ---------- §2 · Statement (M02) ---------- */
.prog-statement{padding-block:var(--section-y-tight)}
.prog-statement .m-lightup__quote{max-width:25ch}

/* ---------- §3 · Why + inclusions (M14 + M28 --sans + detail photo) ---------- */
.prog-why{padding-top:var(--section-y-tight)}
.prog-why__aside{display:grid;gap:clamp(20px,2.4vw,32px)}
.prog-why__detail{aspect-ratio:16/10;border-radius:var(--r-l)}
.prog-included .m-feel__list li{align-items:center}
.prog-included .m-feel__list .icon{transform:none}
.prog-included .m-feel__list a{padding-block:9px;margin-block:-9px}   /* 44px hit area on the linked rows, same layout */
@media (min-width:1024px){.prog-why__split{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
/* phones and tablets: text, then the card, then the photo (PRD 21 §4.2), not the module's media-first order */
@media (max-width:1023px){.prog-why .m-split__media{order:0}}

/* ---------- §4 · Week rhythm (porcelain M24 numbered) + studio frame ---------- */
.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))}
  }
}
.prog-studio{margin-top:clamp(56px,7vw,104px)}
.prog-studio__frame{aspect-ratio:21/9;border-radius:var(--r-l)}
.prog-studio__caption{margin-top:20px}
@media (max-width:767px){.prog-studio__frame{aspect-ratio:4/3}}

/* ---------- §5 · Hero-moment chapter: visual + legend + price block + CTA + note ---------- */
.prog-moment{overflow:clip}
.prog-moment__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"visual head" "visual body";
  column-gap:clamp(40px,6vw,96px);align-items:center}
.prog-moment__head{grid-area:head;align-self:end;margin-bottom:clamp(32px,4vw,48px)}
.prog-moment__visual{grid-area:visual;min-width:0}
.prog-moment__body{grid-area:body;align-self:start;min-width:0}
.prog-moment__cta{margin-top:clamp(32px,4vw,44px)}
.prog-moment__note{margin-top:clamp(24px,3vw,32px)}
@media (max-width:1023px){
  .prog-moment__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "visual" "body"}
  .prog-moment__head{align-self:start}
  .prog-moment__visual{margin-bottom:clamp(40px,8vw,64px)}
}
@media (max-width:599px){.prog-moment__cta .btn{width:100%}}
/* legend: two figures side by side, the price block full width beneath (2×2 with the price spanning) */
.prog-legend,.prog-legend.m-spec{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 28px}
.prog-legend .m-spec__num{margin-top:22px}
.prog-legend .m-spec__item:not(.prog-price) .m-spec__num{font-size:calc(var(--t-num-m) * 1.25)}
.prog-legend .m-spec__label{display:flex;align-items:center;gap:10px;margin-top:12px}
.prog-price{grid-column:1/-1}
.prog-price .m-spec__rule{background:var(--g-champ)}
.prog-price .m-spec__num{color:var(--m-price)}
.prog-key{flex:none;display:inline-block}
.prog-key--session{width:10px;height:10px;border-radius:50%;background:var(--theta-300);box-shadow:0 0 0 4px rgba(62,85,245,.22),0 0 12px var(--theta-glow)}
.prog-key--coach{width:9px;height:16px;background:var(--champ-400);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}

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

/* ---------- §7 · PAGE-ONLY · The month as a ring (M03 month-ring variant, PRD 21 §4.4) ----------
   SVG geometry (viewBox 600, centre 300): day ticks r 252–284 in four arcs of seven (11.5° apart, 21° gap at
   each week boundary), session dots on the r 226 orbit at 22.5° + 45° steps (two per week, no day numbers),
   champagne coaching marks in the four week gaps. Colour change is a crossfade of a second tick layer
   (PRD 21 §9.3), never an animated stroke. The SVG is aria-hidden; the centre and the legend carry the text. */
.prog-ring{position:relative;isolation:isolate;width:min(560px,86vw,100%);aspect-ratio:1;margin-inline:auto;container-type:inline-size}
.prog-ring__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.prog-ring__bloom{position:absolute;inset:6%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(62,85,245,.34),rgba(62,85,245,.12) 52%,rgba(62,85,245,.04) 78%,transparent)}
.prog-ring__orbit{fill:none;stroke:var(--line-1);stroke-width:1.5}
.prog-ring__days line,.prog-ring__fill line{fill:none;stroke-width:3.5;stroke-linecap:round}
.prog-ring__days line{stroke:var(--line-2)}
.prog-ring__fill line{stroke:var(--theta-400)}
.prog-ring__session{fill:var(--theta-300);transform-box:fill-box;transform-origin:center}
.prog-ring__halo{fill:rgba(62,85,245,.24)}
.prog-ring__coach{fill:var(--champ-400);transform-box:fill-box;transform-origin:center}
.prog-ring__centre{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;padding:22%;text-align:center}
.prog-ring__num{display:inline-flex;align-items:baseline;gap:.08em;font-size:clamp(3rem,22cqw,7.5rem)}
.prog-ring__unit{color:var(--text-2);font:500 calc(var(--t-title) * var(--k-text))/1 var(--font-sans);letter-spacing:0}
.prog-ring__label{max-width:16ch;text-wrap:balance;color:var(--text-2);font:500 calc(var(--t-small) * var(--k-text))/1.45 var(--font-sans)}
@media (max-width:599px){.prog-ring__centre{gap:8px}.prog-ring__label{font-size:.875rem}}

/* Sequence (≈2.5 s, data-reveal-hold="1800"): the light grows, then one day-tick every 60 ms (the daily
   journal rhythm), each session dot pops as the fill reaches it, each coaching mark as its week completes. */
.js .prog-ring.is-pending{opacity:1;transform:none}
.js .prog-ring.is-pending .prog-ring__bloom{opacity:0;transform:scale(.8)}
.js .prog-ring.is-pending .prog-ring__days{opacity:.4}
.js .prog-ring.is-pending .prog-ring__fill line{opacity:0}
.js .prog-ring.is-pending .prog-ring__session{opacity:0;transform:scale(.3)}
.js .prog-ring.is-pending .prog-ring__coach{opacity:0;transform:scale(.4)}
.js .prog-ring.is-pending .prog-ring__centre{opacity:0;transform:translateY(12px)}
.prog-ring.is-in .prog-ring__bloom{transition:opacity 1800ms var(--ease-out),transform 2200ms var(--ease-out)}
.prog-ring.is-in .prog-ring__days{transition:opacity 500ms var(--ease-out)}
.prog-ring.is-in .prog-ring__centre{transition:opacity 700ms var(--ease-out) 120ms,transform 700ms var(--ease-out) 120ms}
.prog-ring.is-in .prog-ring__fill line{transition:opacity 260ms var(--ease-out) calc(280ms + var(--i) * 60ms)}
.prog-ring.is-in .prog-ring__session{transition:opacity 260ms var(--ease-out) calc(340ms + var(--i) * 60ms),transform 460ms var(--ease-pop) calc(340ms + var(--i) * 60ms)}
.prog-ring.is-in .prog-ring__coach{transition:opacity 260ms var(--ease-out) calc(400ms + var(--i) * 60ms),transform 460ms var(--ease-pop) calc(400ms + var(--i) * 60ms)}

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