/* Program: the three months as a timeline. Phones and tablets: one vertical track on the left (start, month 1, months 2-3, finish).
   Desktop 1024px+: a horizontal track over the month labels over the cards, three columns, inner nodes on the gaps between them.
   The track is fully drawn by default (--p: 1, every node passed). program.js adds .program--live, sets --p on .program__path
   and marks nodes .is-passed while the reader scrolls; .program--done = the line reached the flag.
   Cards: pill, title, paragraph, then one element per phase. Learn = eight module squares that light up (.is-on) as the track passes month 1
   (only under .program--live; without JS or with reduced motion all are on). Practice = the make / check / improve loop; the card is a
   size container: a row with a pencil return arrow from 560px of card width, a stack with a connector below that. */
.program {
  --pg-bg: var(--color-paper);
  --pg-row: 32px;       /* phones: height of a row that carries a node (start, month label, finish) */
  --pg-rail-w: 32px;    /* phones: width of the track column */
  --pg-col-gap: 14px;   /* phones: space between the track and the content */
  --pg-line: 3px;       /* solid progress line */
  --pg-node: 12px;      /* month node */
  --pg-start: 14px;     /* start node and head dot */
  --pg-num: 30px;       /* practice loop: step number circle */
  --pg-step-gap: 22px;  /* practice loop, stacked: space between steps */
  --pg-link-gap: 4px;   /* practice loop, stacked: air between a number circle and the connector */
  --pg-loop-gap: 36px;  /* practice loop, row: space between steps (holds the arrow) */
  --pg-mod: 32px;       /* learn: module square */
}
.program.sec--alt { --pg-bg: var(--color-paper-2); }

/* ---- layout: phones and tablets ---- */
.program__path {
  --p: 1;
  position: relative;
  isolation: isolate;
  margin-top: clamp(32px, 5vw, 56px);
  display: grid;
  grid-template-columns: var(--pg-rail-w) minmax(0, 1fr);
  column-gap: var(--pg-col-gap);
}
/* The rail runs from the center of the start row to the center of the finish label row. */
.program__rail { position: relative; grid-column: 1; grid-row: 1 / 4; margin-block: calc(var(--pg-row) / 2); }

.program__start, .program__period, .program__finish-label {
  display: grid;
  grid-template-columns: var(--pg-rail-w) minmax(0, 1fr);
  column-gap: var(--pg-col-gap);
  align-items: center;
  font-size: var(--size-text-sm);
  font-weight: 700;
  line-height: var(--pg-row);
  color: var(--color-ink);
}
.program__finish-label { color: var(--color-m1-ink); }
.program__start { grid-column: 1 / -1; grid-row: 1; }

.program__months { display: none; }

.program__phases {
  grid-column: 1 / -1;
  grid-row: 2;
  list-style: none;
  margin: 28px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.program__phase--learn { --pg-ink: var(--color-m2-ink); }
.program__phase--practice { --pg-ink: var(--color-m1-ink); }
.program__phase {
  display: grid;
  grid-template-columns: var(--pg-rail-w) minmax(0, 1fr);
  column-gap: var(--pg-col-gap);
}
.program__period { grid-column: 1 / -1; }

.program__finish { display: contents; }
.program__finish-label { grid-column: 1 / -1; grid-row: 3; }
.program__finish-text { grid-column: 2; grid-row: 4; color: var(--color-ink-2); }

/* ---- the rail: pencil dashes, solid progress, head dot ---- */
.program__dashes { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--color-ink-2); opacity: .55; }
.program__dash { fill: none; stroke: currentColor; stroke-width: 2px; stroke-dasharray: 8 9; stroke-linecap: round; }
.program__dash--h { display: none; }

/* Solid progress: follows the scroll directly, so it has no transition. */
.program__progress {
  position: absolute;
  z-index: 2;
  left: calc(50% - var(--pg-line) / 2);
  top: 0;
  width: var(--pg-line);
  height: 100%;
  background: var(--color-ink);
  transform-origin: top center;
  transform: scaleY(var(--p));
}
.program__head {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: calc(var(--p) * 100%);
  width: var(--pg-start);
  height: var(--pg-start);
  margin: calc(var(--pg-start) / -2) 0 0 calc(var(--pg-start) / -2);
  border-radius: 50%;
  background: var(--color-ink);
  box-shadow: 0 0 0 3px var(--pg-bg);
  transition: opacity var(--dur-base) var(--ease-soft);
}
/* "You" dot is only meaningful while the line is being drawn. */
.program--done .program__head, .program:not(.program--live) .program__head { opacity: 0; }

/* ---- nodes ---- */
.program__node {
  position: relative;
  z-index: 3;
  box-sizing: border-box;
  justify-self: center;
  width: var(--pg-node);
  height: var(--pg-node);
  border: 2px solid var(--color-ink-2);
  border-radius: 50%;
  background: var(--pg-bg);
  transition: background-color var(--dur-base) var(--ease-soft), border-color var(--dur-base) var(--ease-soft), color var(--dur-base) var(--ease-soft);
}
.program__node--phase { --pg-nd: var(--pg-ink); }
.program__node--month { --pg-nd: var(--color-m1-ink); }
.program__node--start { --pg-nd: var(--color-ink); width: var(--pg-start); height: var(--pg-start); border-color: var(--color-ink); background: var(--color-ink); }
.program__node--finish {
  --pg-nd: var(--color-m1-ink);
  display: grid;
  place-items: center;
  width: var(--pg-row);
  height: var(--pg-row);
  color: var(--color-ink-2);
}
.program__flag { width: 16px; height: 16px; stroke-width: 2.2; }
/* passed: the line has reached the node (or nothing animates) */
.program__node.is-passed, .program:not(.program--live) .program__node {
  background: var(--pg-nd, var(--color-ink));
  border-color: var(--pg-nd, var(--color-ink));
}
.program__node--finish.is-passed, .program:not(.program--live) .program__node--finish { color: var(--color-white); }
/* one soft pop when the line reaches the flag */
@keyframes program-pop { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }
.program--live.program--done .program__node--finish { animation: program-pop var(--dur-slow) var(--ease-spring); }

/* ---- cards ---- */
.program__card {
  grid-column: 2;
  margin-top: 12px;
  padding: 24px 22px;
  container-type: inline-size;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--size-radius);
  box-shadow: var(--shadow-card);
}
/* level 1: the phase name as a pill in the phase ink */
.program__label {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: var(--size-radius-pill);
  background: var(--pg-ink);
  color: var(--color-white);
  font-size: var(--size-text-sm);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .02em;
}
/* level 2: title, level 3: paragraph */
.program__title { font-family: var(--font-body); font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); font-weight: 700; line-height: 1.2; letter-spacing: -.005em; }
.program__text { margin-top: 12px; max-width: 52ch; color: var(--color-ink-2); }
/* level 4: the phase element */
.program__learn, .program__practice { margin-top: 28px; }

/* learn: eight modules + a note about the mentor */
.program__mods-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 16px; }
.program__mods-label { padding-block: 4px; font-size: var(--size-text-sm); font-weight: 700; color: var(--color-ink); }
.program__modules { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 5px; }
.program__mod {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: var(--pg-mod);
  height: var(--pg-mod);
  border: 1.5px solid var(--color-line);
  border-bottom: 3px solid var(--mod);
  border-radius: 10px;
  background: var(--color-paper-2);
  font-size: var(--size-text-sm);
  font-weight: 700;
  line-height: 1;
  color: var(--mod);
  transition: background-color var(--dur-base) var(--ease-soft), border-color var(--dur-base) var(--ease-soft);
}
.program__mod-num { transition: color var(--dur-base) var(--ease-soft), opacity var(--dur-base) var(--ease-soft); }
/* module colors as classes: the CSP blocks inline style attributes */
.program__mod--1 { --mod: var(--color-m1-ink); }
.program__mod--2 { --mod: var(--color-m2-ink); }
.program__mod--3 { --mod: var(--color-m3-ink); }
.program__mod--4 { --mod: var(--color-m4-ink); }
.program__mod--5 { --mod: var(--color-m5-ink); }
.program__mod--6 { --mod: var(--color-m6-ink); }
.program__mod--7 { --mod: var(--color-m7-ink); }
.program__mod--8 { --mod: var(--color-m8-ink); }
/* off: the track has not reached this module yet (only while program.js drives the section) */
.program--live .program__mod:not(.is-on) { border-bottom: 1.5px solid var(--color-line); background: transparent; }
.program--live .program__mod:not(.is-on) .program__mod-num { color: var(--color-ink-2); opacity: .5; }
/* on: one short pop when the track lights it */
@keyframes program-mod-pop { 0% { transform: scale(.85); } 55% { transform: scale(1.06); } 100% { transform: scale(1); } }
.program--live .program__mod.is-on { animation: program-mod-pop var(--dur-base) var(--ease-out); }
/* narrow card (a column of the desktop grid, phones): four and four instead of five and three */
@container (width < 292px) {
  .program__modules { display: grid; grid-template-columns: repeat(4, var(--pg-mod)); }
}
.program__mentor { margin-top: 20px; display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--color-ink); }
.program__mentor-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-paper-2); color: var(--color-m2-ink); }
.program__mentor-ico .icon { width: 18px; height: 18px; }

/* practice: the loop. Default (narrow card) = stacked steps with a pencil connector and a small repeat arrow under the last one. */
.program__loop { display: flex; flex-direction: column; row-gap: var(--pg-step-gap); }
.program__step { position: relative; display: grid; grid-template-columns: var(--pg-num) minmax(0, 1fr); column-gap: 14px; align-items: start; font-weight: 600; color: var(--color-ink); }
.program__num {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: var(--pg-num);
  height: var(--pg-num);
  border: 2px solid var(--color-m1-ink);
  border-radius: 50%;
  font-size: var(--size-text-sm);
  font-weight: 700;
  line-height: 1;
  color: var(--color-m1-ink);
}
.program__step-text { padding-top: calc((var(--pg-num) - 1.35em) / 2); line-height: 1.35; }
.program__next, .program__return { display: none; }
/* pencil marks: dashes, round caps, the same filter family as the track */
.program__link, .program__return, .program__turn { color: var(--color-ink-2); opacity: .55; overflow: visible; }
.program__stroke { fill: none; stroke: currentColor; stroke-width: 2px; stroke-dasharray: 8 7; stroke-linecap: round; stroke-linejoin: round; }
.program__tip { fill: none; stroke: currentColor; stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; }
.program__link { position: absolute; left: 0; top: calc(var(--pg-num) + var(--pg-link-gap)); width: var(--pg-num); height: calc(100% + var(--pg-step-gap) - var(--pg-num) - 2 * var(--pg-link-gap)); }
.program__link .program__stroke { stroke-dasharray: 4 6; }
.program__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.program__repeat { position: relative; display: flex; align-items: center; column-gap: 14px; margin-top: 18px; }
.program__turn { flex: none; margin-inline: calc((var(--pg-num) - 20px) / 2); }
.program__turn .program__stroke { stroke-dasharray: 4 4; }
.program__repeat-text { font-size: var(--size-text-sm); font-weight: 600; line-height: 1.3; color: var(--color-ink-2); }

/* wide card (560px and up): one row with arrows, and the pencil return arrow from step 3 back to step 1 */
@container (min-width: 560px) {
  .program__loop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--pg-loop-gap); row-gap: 0; }
  .program__step { align-items: center; column-gap: 12px; }
  .program__step-text { padding-top: 0; }
  .program__link, .program__turn { display: none; }
  .program__next { position: absolute; left: 100%; top: 50%; display: grid; place-items: center; width: var(--pg-loop-gap); transform: translateY(-50%); color: var(--color-ink-2); }
  .program__next .icon { width: 18px; height: 18px; }
  .program__repeat { display: block; height: 46px; margin-top: 4px; }
  /* spans from the center of number 1 to the center of number 3; the legs run up out of the box and are clipped at its top edge */
  .program__return {
    display: block;
    position: absolute;
    left: calc(var(--pg-num) / 2);
    top: 0;
    width: calc((100% + var(--pg-loop-gap)) * 2 / 3);
    height: 100%;
    clip-path: inset(0 -10px -4px -10px);
  }
  .program__repeat-text {
    position: absolute;
    top: 34px;
    left: calc(var(--pg-num) / 2 + (100% + var(--pg-loop-gap)) / 3);
    padding-inline: 12px;
    transform: translate(-50%, -50%);
    background: var(--color-card);
    white-space: nowrap;
  }
}

/* ---- desktop: horizontal track ---- */
@media (min-width: 1024px) {
  .program { --pg-rail-h: 40px; --pg-flag: 40px; }

  .program__path {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto var(--pg-rail-h) auto auto;
    column-gap: var(--size-gap);
  }

  /* row 1: start text on the left, finish block on the right; their nodes sit on the rail row below */
  .program__start, .program__finish-label { display: block; line-height: 1.4; }
  .program__start { position: relative; grid-column: 1; grid-row: 1; align-self: end; padding-bottom: 12px; }
  .program__finish {
    display: block;
    position: relative;
    grid-column: 2 / -1;
    grid-row: 1;
    justify-self: end;
    max-width: 420px;
    padding-bottom: 12px;
    text-align: right;
  }
  .program__finish-text { margin-top: 4px; font-size: var(--size-text-sm); line-height: 1.45; }
  .program__start .program__node, .program__finish .program__node { position: absolute; }
  .program__start .program__node { left: 0; top: calc(100% + (var(--pg-rail-h) - var(--pg-start)) / 2); }
  .program__finish .program__node { right: 0; top: calc(100% + (var(--pg-rail-h) - var(--pg-flag)) / 2); width: var(--pg-flag); height: var(--pg-flag); }
  .program__flag { width: 20px; height: 20px; }

  /* row 2: the rail, from the center of the start node to the center of the flag */
  .program__rail { grid-column: 1 / -1; grid-row: 2; margin: 0 calc(var(--pg-flag) / 2) 0 calc(var(--pg-start) / 2); }
  .program__dash--h { display: inline; }
  .program__dash--v { display: none; }
  .program__progress { left: 0; top: calc(50% - var(--pg-line) / 2); width: 100%; height: var(--pg-line); transform-origin: left center; transform: scaleX(var(--p)); }
  .program__head { left: calc(var(--p) * 100%); top: 50%; }

  /* row 3: month labels, one per column; the inner nodes sit on the gaps between columns */
  .program__months {
    grid-column: 1 / -1;
    grid-row: 3;
    list-style: none;
    margin: 0;
    padding: 0 0 14px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--size-gap);
  }
  .program__months li { position: relative; padding-top: 6px; text-align: center; font-size: var(--size-text-sm); font-weight: 600; color: var(--color-ink-2); }
  .program__months .program__node {
    position: absolute;
    left: calc(var(--size-gap) / -2 - var(--pg-node) / 2);
    top: calc(var(--pg-rail-h) / -2 - var(--pg-node) / 2);
  }

  /* row 4: cards. The period is for screen readers only: the months live on the track. */
  .program__phases { grid-column: 1 / -1; grid-row: 4; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--size-gap); align-items: start; }
  .program__phase { position: relative; display: flex; flex-direction: column; }
  .program__phase--learn { grid-column: span 1; }
  .program__phase--practice { grid-column: span 2; }
  .program__period {
    position: absolute !important;
    display: block;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .program__period .program__node { display: none; }
  .program__card { grid-column: auto; margin-top: 0; padding: 36px 36px 40px; }
}