/* ==========================================================================
   03 HOW IT WORKS  —  every rule scoped under .flow
   Four stops: Upload → Schedule → Post → Check, each = short copy + one product clip.
   The markup is flat (rail, copy 1, clip 1, copy 2, clip 2 …) so one grid lays it out three ways:

   1. Stage (wide, tall-enough screens with motion: html.mf-motion). The copy scrolls past in a
      narrow left column; the four clips sit stacked in ONE large sticky stage on the right, with
      the rail of the four stops above them. js/flow.js marks the stop whose copy crosses the
      middle of the screen .is-on: its clip fades in over the last one and is the only one that
      plays, the rail moves on, and the other copy dims.
   2. Static list (reduced motion, no JS, or the motion core never booted): one row per stop,
      the copy beside its clip (the poster). Everything visible, nothing sticky.
   3. Stacked (≤ 900 px wide): copy, then its clip, one stop after the other.
   2026-10-27: replaces the 2 × 2 grid of four small clips that all played at once.
   ========================================================================== */

.flow {
  --col-gap: clamp(2rem, 4.2vw, 4rem);
  --copy-w: clamp(17.5rem, 25vw, 23rem);  /* the copy column; the clip takes the rest */
  --rail-h: 2.375rem;
  --rail-gap: clamp(1rem, 1.6vw, 1.375rem);
  --stage-top: calc(var(--nav-h) + 2rem); /* js/flow.js centres the stage in the space under the nav */
}

/* ---------- Opener ---------- */
.flow .flow-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: var(--col-gap);
}
.flow .flow-eyebrow { grid-column: 1 / -1; justify-self: start; }
.flow .flow-title { grid-column: 1; margin-top: 1.75rem; align-self: end; }
.flow .flow-intro { grid-column: 2; align-self: end; }
.flow .flow-lead { max-width: 30em; }

/* ---------- Stops: the static list (one row per stop: copy | clip) ---------- */
.flow .flow-stops {
  display: grid;
  grid-template-columns: minmax(0, var(--copy-w)) minmax(0, 1fr);
  column-gap: var(--col-gap);
  row-gap: clamp(3.5rem, 6vw, 5.5rem);
  align-items: center;
  margin-top: clamp(3rem, 5.4vw, 4.75rem);
}
.flow .flow-copy { grid-column: 1; min-width: 0; }
.flow .flow-clip { grid-column: 2; min-width: 0; }
.flow .flow-stop-title { margin-top: 1.125rem; }
.flow .flow-stop-body { margin-top: 0.625rem; max-width: 34em; }

/* Stepper: four nodes on a line; the current one opens into a pill with its name. */
.flow .flow-stepper { display: flex; align-items: center; }
.flow .st {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 1.75rem;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 2px var(--line-2);
  font-size: 0.8125rem;
  font-weight: 640;
  line-height: 1;
  color: var(--fg-3);
}
.flow .st b { width: 1.75rem; text-align: center; font-weight: inherit; }
.flow .st.is-done { background: var(--fg); color: var(--bg); box-shadow: none; }
.flow .st.is-on { padding-right: 0.8125rem; background: var(--flood); color: var(--accent-fg); box-shadow: none; }
.flow .st.is-on b { width: 1.5rem; margin-left: 0.1875rem; }
.flow .flow-stepper > i { flex: none; width: 1rem; height: 0.1875rem; background: var(--line-2); }
.flow .flow-stepper > i.is-done { background: var(--fg); }

.flow .flow-facts { margin-top: 1rem; }
.flow .flow-facts li {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  padding: 0.25rem 0;
  font-size: 0.9375rem;
  font-weight: 560;
  line-height: 1.35;
  color: var(--fg);
}
.flow .flow-facts .tile { font-size: 0.6875rem; vertical-align: 0; transform: translateY(1px); }
.flow .flow-more { margin-top: 0.875rem; }

/* A clip js/flow.js is holding (not the active stop) hides its pause button: it isn't
   playing, and pressing it couldn't start it. (.is-live: only once flow.js runs.) */
.flow .flow-stops.is-live .flow-clip:not(.is-on) .fig-pause { visibility: hidden; }

/* ---------- Rail of the four stops (stage only) ----------
   The same pill language as the stepper, at stage size, every stop named. Done = ink,
   current = flood, still to come = outline. Each pill scrolls to its stop. */
.flow .flow-rail { display: none; align-items: center; height: var(--rail-h); }
.flow .flow-rail > i {
  flex: 1 1 0;
  min-width: 0.75rem;
  height: 0.1875rem;
  margin: 0 0.625rem;
  border-radius: 2px;
  background: var(--line-2);
  transition: background-color var(--dur-2) ease;
}
.flow .flow-rail > i.is-done { background: var(--fg); }
.flow .flow-rail-stop {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: var(--rail-h);
  padding-right: 1.0625rem;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 2px var(--line-2);
  font-size: 0.9375rem;
  font-weight: 640;
  line-height: 1;
  color: var(--fg-2);
  white-space: nowrap;
  transition: background-color var(--dur-2) ease, color var(--dur-2) ease, box-shadow var(--dur-1) ease;
}
.flow .flow-rail-stop b { width: calc(var(--rail-h) - 0.25rem); margin-left: 0.125rem; text-align: center; font-weight: inherit; }
.flow .flow-rail-stop:hover { box-shadow: inset 0 0 0 2px var(--fg); color: var(--fg); }
.flow .flow-rail-stop.is-done { background: var(--fg); color: var(--bg); box-shadow: none; }
.flow .flow-rail-stop.is-on { background: var(--flood); color: var(--accent-fg); box-shadow: none; }

/* ---------- 1 · Stage ---------- */
@media (min-width: 901px) and (min-height: 560px) {
  .mf-motion .flow .flow-stops {
    /* the clip is as wide as its column, but never taller than the screen leaves room for */
    --stage-w: min(100%, (100svh - var(--nav-h) - var(--rail-h) - var(--rail-gap) - 7.5rem) * 1.6);
    align-items: start;
    row-gap: 0;
  }
  .mf-motion .flow .flow-rail,
  .mf-motion .flow .flow-clip {
    grid-column: 2;
    grid-row: 1 / span 4;
    position: sticky;
    align-self: start;
    width: var(--stage-w);
  }
  /* The rail's margin reaches down to the clip's foot, so the end of the chapter pushes the
     rail and the clip off together (js/flow.js measures --fig-h; the fallback estimates it). */
  .mf-motion .flow .flow-rail {
    display: flex;
    top: var(--stage-top);
    z-index: 2;
    margin-bottom: calc(var(--rail-gap) + var(--fig-h, var(--stage-w) / 1.6 + 3.5rem));
  }
  .mf-motion .flow .flow-clip {
    top: calc(var(--stage-top) + var(--rail-h) + var(--rail-gap));
    margin-top: calc(var(--rail-h) + var(--rail-gap));
    z-index: 0;
    /* leaving: stay fully drawn under the incoming clip, then drop out (no paper flash between two windows) */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0s linear 0.5s, visibility 0s linear 0.5s;
  }
  .mf-motion .flow .flow-clip.is-on {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s var(--ease-out);
  }
  .mf-motion .flow .flow-clip .clip-cap { min-height: 2.5rem; transition: opacity 0.3s ease 0.12s; } /* every clip the same height */
  .mf-motion .flow .flow-clip:not(.is-on) .clip-cap { opacity: 0; transition-delay: 0s; transition-duration: 0.15s; }

  .mf-motion .flow .flow-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: max(66svh, var(--stage-h, 0px) + 2rem); /* never shorter than the stage, so the last stop holds it */
    padding-block: 2rem;
    transition: opacity 0.45s ease;
  }
  .mf-motion .flow .flow-copy:not(.is-on) { opacity: 0.32; }
  .mf-motion .flow .flow-copy[data-stop="1"] { grid-row: 1; }
  .mf-motion .flow .flow-copy[data-stop="2"] { grid-row: 2; }
  .mf-motion .flow .flow-copy[data-stop="3"] { grid-row: 3; }
  .mf-motion .flow .flow-copy[data-stop="4"] { grid-row: 4; }
  /* the rail carries the progress; each copy keeps just its own pill as a label */
  .mf-motion .flow .flow-copy .st:not(.is-on),
  .mf-motion .flow .flow-copy .flow-stepper > i { display: none; }
}

/* ---------- 3 · Stacked ---------- */
@media (max-width: 900px) {
  .flow .flow-head { grid-template-columns: minmax(0, 1fr); }
  .flow .flow-intro { grid-column: 1; margin-top: 1.5rem; }
  .flow .flow-stops { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .flow .flow-copy,
  .flow .flow-clip { grid-column: 1; }
  .flow .flow-clip { margin-top: 1.5rem; }
  .flow .flow-copy:not([data-stop="1"]) { margin-top: clamp(3.5rem, 9vw, 4.5rem); }
}
@media (max-width: 781px) {
  .flow .flow-title { margin-top: 1.5rem; }
}