/* styles/sections/walkthrough-intros.css
 * Section rhythm for a bespoke workflow walkthrough (walkthrough.html): each section is a white
 * field with --section-xl above and below (96, 160, 192), no rules between, and the walkthrough
 * closes --section-3xl under Up next (120, 200, 240), as the Personas frames (S0KQOH, JHRBo,
 * n637L1) draw them. The intro is the section-intro split recipe set to the frames' values:
 * the heading role's size at whole-pixel lines (34, 59, 67), the 19/29 lede in --ink-2 from D
 * (17/26 under a 22 pad on M). Also the closing statement the Closing CTA instances override
 * (LkL1M, PJGDu, x6tzv), scoped to the page's .closing-cta--statement: 35 on M (running on,
 * breaks hidden, wrapped greedily), and from 900 64 x (content / 1280) up to 64, from 1680
 * 86 x (content / 1680) up to 86, so each sentence keeps its own line between frame widths and
 * the frames' sizes hold at 1440 and 1920, all at 1.08. Between 900 and 1440 the lede narrows from 420
 * to 320 so the heading keeps a usable measure. */
@layer sections {
  .workflow-walkthrough--personas {
    padding-block: 0 var(--section-3xl);
  }

  .workflow-walkthrough--personas .walkthrough-section {
    --walkthrough-gap: var(--space-40);
    display: flex;
    flex-direction: column;
    gap: var(--walkthrough-gap);
    padding-block: var(--section-xl);
  }

  .workflow-walkthrough--personas .walkthrough-section--reach {
    --walkthrough-gap: var(--space-48);
  }

  .workflow-walkthrough--personas .up-next {
    padding-top: var(--space-48);
  }

  .walkthrough-intro {
    --intro-heading-lh: round(nearest, 1.05em, 1px);
    --intro-lede-pad: 22px;
    --intro-lede-lh: 26px;
    --intro-lede-color: var(--ink-2);
  }

  /* The instances also override the band's bottom padding to --section-xs (96, 56, 115) */
  .closing-cta--statement {
    --closing-pad-bottom: var(--section-xs);
    --closing-heading-size: 35px;
    --closing-heading-lh: round(nearest, 1.08em, 1px);
    --closing-heading-ls: -0.022em;
  }

  @media (width < 900px) {
    .closing-cta--statement .closing-cta__heading {
      text-wrap: wrap;
    }

    .closing-cta--statement .closing-cta__heading br {
      display: none;
    }
  }

  @media (min-width: 900px) {
    .workflow-walkthrough--personas .walkthrough-section {
      --walkthrough-gap: var(--space-64);
    }

    .workflow-walkthrough--personas .walkthrough-section--reach {
      --walkthrough-gap: var(--space-80);
    }

    .workflow-walkthrough--personas .up-next {
      padding-top: 0;
    }

    .walkthrough-intro {
      --intro-heading-measure: 680px;
      --intro-lede-measure: clamp(320px, 29.2vw, 420px);
      --intro-lede-pad: var(--space-6);
      --intro-lede-size: 19px;
      --intro-lede-lh: 29px;
    }

    .walkthrough-intro--first {
      --intro-heading-measure: 640px;
    }

    .closing-cta--statement {
      --closing-heading-size: min(64px, (100vw - 2 * var(--page-gutter)) * 0.05);
    }
  }

  @media (min-width: 1680px) {
    .walkthrough-intro {
      --intro-heading-measure: 773px;
    }

    .walkthrough-intro--first {
      --intro-heading-measure: 727px;
    }

    .closing-cta--statement {
      --closing-heading-size: min(86px, (100vw - 2 * var(--page-gutter)) * 0.0512);
    }
  }
}