/* styles/sections/walkthrough-bands.css
 * A workflow walkthrough built from bespoke sections instead of steps (`walkthrough` with
 * className workflow-walkthrough--sections in scripts/lib/workflow-page.js, Answering in Slack
 * qqaHR, tMWDp, blNSE). The bands sit in the walkthrough's container and own their padding;
 * the walkthrough keeps the dither edges and closes with Up next.
 * Bands: intro (the section-intro recipe, split from D) over one piece of content. */
@layer sections {
  .workflow-walkthrough--sections {
    padding-block: 0 var(--section-2xl);
  }

  .walkthrough-band {
    --band-pad-top: var(--section-sm);
    --band-pad-bottom: var(--section-sm);
    --band-gap: var(--space-40);
    display: flex;
    flex-direction: column;
    gap: var(--band-gap);
    padding-block: var(--band-pad-top) var(--band-pad-bottom);
  }

  .walkthrough-band--ask {
    --band-pad-top: var(--section-lg);
    --band-pad-bottom: var(--section-md);
  }

  /* The mist band spans the page from inside the container: a filled border image, outset
     past both edges. Outset border images are ink overflow, so they add no scroll width. */
  .walkthrough-band--thread {
    border-image-source: linear-gradient(var(--mist), var(--mist));
    border-image-slice: 0 fill;
    border-image-outset: 0 100vw;
  }

  /* Inline code (.t-code) is a mist chip; on the mist band it takes the page white */
  .walkthrough-band--thread .t-code {
    background: var(--white);
  }

  .walkthrough-band--slack {
    --band-pad-top: var(--section-md);
    --band-pad-bottom: var(--section-xs);
  }

  /* Section intro settings: heading h2 on M and D, h1 on W; lede 17 in ink-muted, 624 wide
     from D and 10px down from the heading's top. Lines on whole pixels, as Pencil draws them
     (32 x 1.05 is 34, 48 x 1.05 is 50, 17 x 1.55 is 26). */
  .walkthrough-band__intro {
    --intro-heading-lh: round(nearest, 1.05em, 1px);
    --intro-lede-measure: 624px;
    --intro-lede-pad: var(--space-10);
    --intro-lede-size: 17px;
    --intro-lede-lh: round(nearest, 1.55em, 1px);
    --intro-lede-color: var(--ink-muted);
  }

  /* The frames break these headings greedily ("The answer lands in the / thread" at 390) */
  .walkthrough-band__intro .section-intro__heading {
    text-wrap: wrap;
  }

  /* Slack setup guide sits 16 under the deck; the heading and deck are 20 apart on M */
  .walkthrough-band--slack .walkthrough-band__intro {
    --intro-gap: var(--space-20);
  }

  .walkthrough-band--slack .section-intro__lede {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
  }

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

    .walkthrough-band__intro {
      --intro-heading-size: var(--t-h2-size);
      --intro-heading-ls: var(--t-h2-ls);
    }

    /* The frames set the walkthrough's last band 96 (D) and 115 (W) above Up next themselves */
    /* The heading keeps the width of its drawn lines; below 1440 the lede gives way instead */
    .walkthrough-band__intro .section-intro__head {
      flex: none;
    }

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

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

  @media (min-width: 1680px) {
    .walkthrough-band__intro {
      --intro-heading-size: var(--t-h1-size);
      --intro-heading-ls: var(--t-h1-ls);
    }
  }
}