/* styles/sections/hero-stacked.css
 * The stacked workflow hero (workflow-hero recipe, scripts/lib/workflow-page.js hero.stacked): the
 * heading across the top, then one column of deck, actions and the Reads from row, then the player.
 * Geometry is the Customer Feedback frames (oF2GB 1440, LlDUC 390, W6doM 1920): heading on the
 * display-lg role at weight 600 (44 on M, the display-md M size, as LlDUC draws it), deck 17 on M and
 * 19 on D and W, the column 560 wide from D. */
@layer sections {
  .workflow-hero--stacked {
    --workflow-hero-pad: var(--section-xs);
    --workflow-hero-gap: var(--space-32);
    --workflow-hero-media-gap: var(--space-32);
    --workflow-hero-heading-size: var(--t-display-md-size);
    /* Lines on whole pixels, as Pencil draws them (88 x 0.95 is 84) */
    --workflow-hero-heading-lh: round(nearest, var(--t-display-lg-lh) * 1em, 1px);
    --workflow-hero-heading-ls: var(--t-display-lg-ls);
    --workflow-hero-heading-weight: 600;
    --workflow-hero-deck-size: var(--t-body-size);
    /* 17 x 1.5 on whole pixels (26), as LlDUC draws the deck; D and W keep 1.5 (28.5, as drawn) */
    --workflow-hero-deck-lh: round(nearest, 1.5em, 1px);
    --workflow-hero-deck-measure: none;
    --hero-side-gap: var(--space-28);
    --hero-side-end-gap: var(--space-28);
  }

  .workflow-hero--stacked .workflow-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "heading" "side" "media";
  }

  .workflow-hero__side {
    grid-area: side;
    display: flex;
    flex-direction: column;
    gap: var(--hero-side-gap);
    min-width: 0;
  }

  .workflow-hero--stacked .workflow-hero__actions {
    align-self: flex-start;
    justify-self: auto;
    margin-top: 0;
  }

  .workflow-hero__side .reads-from { margin-top: calc(var(--hero-side-end-gap) - var(--hero-side-gap)); }

  /* Reads from: a hairline, the label, the integration marks (the frame's white PNGs at 85%) */
  .reads-from {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: var(--space-24);
    border-top: 1px solid var(--white-15);
  }

  .reads-from__label {
    margin: 0;
    font-size: 14px;
    line-height: round(nearest, 1.2em, 1px);
    color: var(--white-70);
  }

  .reads-from__marks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-14) 22px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .reads-from__marks img {
    display: block;
    width: 22px;
    height: 22px;
    opacity: 0.85;
  }

  /* "and more": the label's size and colour, so the strip does not read as the full list */
  .reads-from__more {
    align-self: center;
    font-size: 14px;
    line-height: round(nearest, 1.2em, 1px);
    color: var(--white-70);
  }

  @media (min-width: 900px) {
    .workflow-hero--stacked {
      --workflow-hero-gap: var(--space-56);
      --workflow-hero-media-gap: var(--space-56);
      --workflow-hero-heading-size: var(--t-display-lg-size);
      --workflow-hero-deck-size: 19px;
      --workflow-hero-deck-lh: 1.5;
      --hero-side-end-gap: var(--space-48);
    }

    .workflow-hero__side { width: min(100%, 560px); }

    .reads-from {
      flex-direction: row;
      align-items: center;
    }
  }
}