/* styles/sections/flow-bands.css
 * Bands of a workflow walkthrough built from bespoke sections (`walkthrough` in
 * scripts/lib/workflow-page.js; Status Reporting M2zsme, xzReC, GvHcD). The walkthrough
 * (.flow-walkthrough) spans the page: its dither edges are the first band's top and the last
 * band's bottom, and each band brings its own .container. White bands carry dither edges top and
 * bottom and section-lg over section-3xl; fern bands (inverse-textured) are section-sm over
 * section-md. Each opens on the split section intro (JKy7m, eAJtj, JBzvp), 80 above its content
 * from D and 48 on M. The payoff band holds the stacked payoff statement and Up next. */
@layer sections {
  .flow-walkthrough {
    padding-block: 0;
  }

  .flow-walkthrough > .container {
    max-width: none;
    padding-inline: 0;
  }

  .flow-band {
    --band-gap: var(--space-48);
    padding-block: var(--section-lg) var(--section-3xl);
  }

  .flow-band--fern {
    padding-block: var(--section-sm) var(--section-md);
  }

  .flow-band > .container {
    display: flex;
    flex-direction: column;
    gap: var(--band-gap);
  }

  /* Dither edges as drawn where a frame's bottom edge overhangs its section: The Conflict's runs
     4px (M) and 13px (D) past the section into New Feedback (svQpO, K8SSXN), the walkthrough's
     8px into the closing on M (xYtJl). W draws them flush. */
  .flow-band--conflict.edge-bottom::after { bottom: -4px; }
  .flow-walkthrough.edge-bottom::after { bottom: -8px; }

  /* Intro. On white the lede sits 36 under the heading on M and level with its top from D (6 pad);
     on fern it follows the heading on M and aligns with its last line from D. The 390 frame wraps
     the headline greedily; the 1440 and 1920 breaks are .frame-dw. Pencil sets lines on whole-pixel
     pitches (34 for 32px at 1.05, 26 for 17px at 1.5). */
  .flow-band__intro {
    --intro-heading-lh: round(nearest, 1.05em, 1px);
    --intro-lede-lh: round(nearest, 1.5em, 1px);
    --intro-lede-color: var(--ink-muted);
    --intro-lede-pad: 36px;
  }

  .flow-band__intro .section-intro__heading { text-wrap: wrap; }

  .flow-band--fern .flow-band__intro {
    --intro-lede-color: var(--white-85);
    --intro-lede-pad: 0;
  }

  /* Payoff (CAep1, bU6NJ, ZGWFz): the payoff-statement recipe stacked, no rule. Headline
     display-sm on M, display-md from D at weight 600; the sub 17 on M, 20 on a 620 measure from D.
     From D each of the headline's two sentences is its own line. */
  .payoff-statement--headline {
    --payoff-pad-top: 0;
    --payoff-gap: var(--space-24);
    --payoff-sub-gap: var(--space-24);
    --payoff-heading-size: var(--t-display-sm-size);
    --payoff-heading-lh: round(nearest, 0.95em, 1px);
    --payoff-heading-ls: var(--t-display-sm-ls);
    --payoff-sub-measure: 620px;
    --payoff-sub-size: var(--t-body-size);
    --payoff-sub-lh: round(nearest, 1.5em, 1px);
    border-top: 0;
  }

  .payoff-statement--headline .payoff-statement__heading {
    font-weight: 600;
    text-wrap: wrap;
  }

  .payoff-statement--headline .payoff-statement__sub {
    max-width: var(--payoff-sub-measure);
    padding-bottom: 0;
  }

  /* Up next follows the statement inside the payoff band (d5MIF holds y6kfTJ): 56 plus its own
     48 pad on M, its 96 pad from D. The bodies keep the card's full measure: the Personas body's
     first line ends on "call," at 1440 as the frame draws it, which the shared 2px trim would push
     to the next line. */
  .flow-band--payoff > .container { gap: 0; }

  .flow-band--payoff .up-next {
    --up-next-body-measure: 100%;
    margin-top: var(--space-56);
  }

  /* The stacked Closing CTA (fI1Mw, HZLaK, K7OXZs) closes on section-xs, not the master's
     section-sm: 96 at 1440, 56 at 390, 115 at 1920. */
  .closing-cta--stacked { --closing-pad-bottom: var(--section-xs); }

  @media (min-width: 900px) {
    .flow-band { --band-gap: var(--space-80); }

    .flow-band--conflict.edge-bottom::after { bottom: -13px; }
    .flow-walkthrough.edge-bottom::after { bottom: 0; }

    /* The headline keeps its drawn lines. Every intro gives its headline the same 540 column (the
       widest drawn line, New Feedback's 534, plus slack so subpixel text never orphans "update"),
       so all of them switch together: the lede sits beside the headline where 540 + 48 + 420 fit
       (from about 1168 wide) and wraps under it below that. */
    .flow-band__intro {
      --intro-lede-pad: var(--space-6);
      flex-wrap: wrap;
      row-gap: var(--space-24);
    }

    .flow-band__intro .section-intro__head { flex: 1 0 540px; }

    .flow-band__intro .section-intro__lede {
      flex: 0 1 var(--intro-lede-measure);
      min-width: 300px;
    }

    .flow-band--fern .flow-band__intro {
      --intro-lede-pad: var(--space-6);
      align-items: flex-end;
    }

    .payoff-statement--headline {
      --payoff-gap: var(--space-32);
      --payoff-sub-gap: var(--space-32);
      --payoff-heading-size: var(--t-display-md-size);
      --payoff-heading-ls: var(--t-display-md-ls);
      --payoff-sub-size: var(--t-body-lg-size);
      display: flex;
      flex-direction: column;
    }

    /* One sentence per line, as drawn; a sentence wider than the column balances inside its line */
    .payoff-statement--headline .payoff-statement__sentence {
      display: block;
      text-wrap: balance;
    }

    .payoff-statement--headline .payoff-statement__sub {
      align-self: auto;
      margin-top: 0;
    }

    .flow-band--payoff .up-next { margin-top: 0; }

    /* The closing headline breaks after "without" at 1440 and 1920 (its measure is that line
       plus 4px, in em), and wraps greedily in a narrower column */
    .closing-cta--stacked { --closing-heading-measure: 9.4em; }

    .closing-cta--stacked .closing-cta__heading { text-wrap: wrap; }
  }

  @media (min-width: 1680px) {
    .flow-band--conflict.edge-bottom::after { bottom: 0; }
  }
}