/* styles/sections/hero-stacked-side.css
 * A workflow hero whose frame instance stacks the deck over the actions, start aligned, where the
 * Workflow Hero master (TRG0h, NrIex, P46bbR) sets them in one row (Release Readiness: cgY6T, PA3wY,
 * pJc15). Heading, 32 (M 24), deck (720 measure from D), 40 (M 32), actions, 64 (M 40), player;
 * padding 80/96 on D, 96/115 on W. Scoped to a hero followed by a bands walkthrough
 * (walkthrough.className workflow-walkthrough--bands), so another page linking this file keeps its
 * own hero; where :has() is unsupported the hero keeps the master layout. */
@layer sections {
  .workflow-hero:has(~ .workflow-walkthrough--bands) {
    --workflow-hero-gap: 0px;
    --workflow-hero-media-gap: var(--space-40);
    --hero-deck-gap: var(--space-24);
    --hero-actions-gap: var(--space-32);
    /* Deck and heading lines on whole pixels, as Pencil sets them (21 x 1.45 is 30) */
    --workflow-hero-deck-lh: round(nearest, 1.45em, 1px);
    --workflow-hero-heading-lh: round(nearest, 0.96em, 1px);
  }

  .workflow-hero:has(~ .workflow-walkthrough--bands) .workflow-hero__deck { margin-top: var(--hero-deck-gap); }

  .workflow-hero:has(~ .workflow-walkthrough--bands) .workflow-hero__actions {
    justify-self: start;
    margin-top: var(--hero-actions-gap);
  }

  @media (min-width: 900px) {
    .workflow-hero:has(~ .workflow-walkthrough--bands) {
      --workflow-hero-media-gap: var(--space-64);
      --workflow-hero-deck-measure: 720px;
      --hero-deck-gap: var(--space-32);
      --hero-actions-gap: var(--space-40);
      padding-block: var(--space-80) var(--section-xs);
    }

    .workflow-hero:has(~ .workflow-walkthrough--bands) .workflow-hero__inner {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "heading" "deck" "actions" "media";
    }

    .workflow-hero:has(~ .workflow-walkthrough--bands) .workflow-hero__actions { align-self: start; }
  }

  @media (min-width: 1680px) {
    .workflow-hero:has(~ .workflow-walkthrough--bands) { padding-block: var(--space-96) var(--section-xs); }
  }
}