/* styles/sections/walkthrough-bands-rhythm.css
 * A workflow walkthrough made of bespoke bands (renderWorkflowPage `walkthrough`, className
 * workflow-walkthrough--bands), and the closing band that follows it. Geometry: Release Readiness
 * (Ml6lO 1440, WRLTx 390, e65Tz 1920). Every rule is scoped under the walkthrough's className (the
 * closing as its following sibling), so another page linking this file is unaffected.
 *
 * <section class="workflow-walkthrough edge-top edge-bottom workflow-walkthrough--bands">
 *   <div class="container">
 *     <section class="wf-band"><div class="wf-section">intro, figure</div></section>
 *     ...
 *     <nav class="up-next">...</nav>
 *   </div>
 * </section>
 *
 * The first band opens section-lg below the edge (88, 144, 173); bands sit 56, 80, 96 apart on each
 * side; inside a band the intro and its figure are 40 (M) or 64 apart; Up next follows at that gap
 * (M adds the instance's 48, lii83) and the walkthrough closes section-3xl under it (120, 200, 240). */
@layer sections {
  .workflow-walkthrough--bands {
    --band-pad: var(--space-56);
    --band-gap: var(--space-40);
    padding-block: var(--section-lg) var(--section-3xl);
  }

  .workflow-walkthrough--bands .wf-band + .wf-band { padding-top: calc(var(--band-pad) * 2); }

  /* Intro headings on whole-pixel lines, as Pencil sets them (56 x 1.05 is 59) */
  .workflow-walkthrough--bands .wf-section .section-intro {
    --intro-heading-lh: round(nearest, 1.05em, 1px);
    --intro-lede-lh: round(nearest, 1.55em, 1px);
  }

  .workflow-walkthrough--bands .wf-section {
    display: flex;
    flex-direction: column;
    gap: var(--band-gap);
  }

  /* Bodies take the full card column: the frames break "You make the call," at 1440 on one line */
  .workflow-walkthrough--bands .up-next {
    --up-next-body-measure: 100%;
    padding-top: calc(var(--band-gap) + var(--space-48));
  }

  /* Closing (W1c4Fw, wf3mc, FJNaL): the instances close on section-xs (56, 96, 115). The M
     instance wraps its heading; D and W break it where the frame does. */
  .workflow-walkthrough--bands ~ .closing-cta { --closing-pad-bottom: var(--section-xs); }

  @media (width < 900px) {
    .workflow-walkthrough--bands ~ .closing-cta .closing-cta__heading br { display: none; }
  }

  /* The frames break the closing copy greedily (as .frame-wrap does for the bands) */
  .workflow-walkthrough--bands ~ .closing-cta :is(.closing-cta__heading, .closing-cta__deck) { text-wrap-style: auto; }

  @media (min-width: 900px) {
    /* Between frames: the lede drops under the headline where the two do not fit side by side
       (below about 1093px), its own top padding standing in for the row gap */
    .workflow-walkthrough--bands .wf-section .section-intro {
      flex-wrap: wrap;
      row-gap: 0;
    }

    .workflow-walkthrough--bands {
      --band-pad: var(--space-80);
      --band-gap: var(--space-64);
    }

    .workflow-walkthrough--bands .up-next { padding-top: var(--band-gap); }
  }

  @media (min-width: 1680px) {
    .workflow-walkthrough--bands { --band-pad: var(--space-96); }
  }
}