/* styles/sections/workflow-hero-meta.css
 * Workflow hero with a proof strip (workflow-page.js `hero.meta`): heading and strip on the start
 * side, deck and actions on the end side, bottom aligned, the player below. Frames: Coding with
 * Agents ZWDMq (1440), ITpMT (390), mpVj3 (1920). Heading is the display-lg role at 600; the
 * deck is 17 on M and 20 from D. Between 900 and about 1200 the two sides would squeeze, so the
 * row wraps and the deck and actions drop under the heading. */
@layer sections {
  .workflow-hero--meta {
    --workflow-hero-heading-size: var(--t-display-lg-size);
    /* Whole-pixel lines, as Pencil sets them: 49, 84 and 114 */
    --workflow-hero-heading-lh: round(nearest, 0.95em, 1px);
    --workflow-hero-heading-ls: var(--t-display-lg-ls);
    --workflow-hero-heading-weight: 600;
    --workflow-hero-deck-size: 17px;
    --workflow-hero-deck-lh: round(nearest, 1.45em, 1px);
    --workflow-hero-deck-measure: none;
    --workflow-hero-gap: var(--space-48);
    --hero-top-w: 100%;
    --hero-side-gap: var(--space-24);
  }

  .workflow-hero--meta .workflow-hero__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--workflow-hero-gap) var(--space-80);
  }

  .workflow-hero__top {
    display: flex;
    flex: 0 1 var(--hero-top-w);
    flex-direction: column;
    gap: var(--space-28);
    min-width: 0;
  }

  /* Pencil breaks the heading greedily ("Coding with" / "Agents") */
  .workflow-hero--meta .workflow-hero__heading { text-wrap: wrap; }

  .workflow-hero__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-28);
    margin: 0;
    padding-top: var(--space-4);
    font-family: var(--font-mono);
  }

  /* An empty strip (Coding with Agents drops the frame's, BRI-7805 J44) keeps the row, not the list */
  .workflow-hero__meta:not(:has(> div)) {
    display: none;
  }

  .workflow-hero__meta > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .workflow-hero__meta dt {
    font-size: 11px;
    line-height: 13px;
    letter-spacing: 0.6px;
    color: var(--white-65);
  }

  .workflow-hero__meta dd {
    margin: 0;
    font-size: 15px;
    line-height: 18px;
    color: var(--white);
  }

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

  .workflow-hero--meta .workflow-hero__actions {
    align-self: flex-start;
    gap: var(--space-16) var(--hero-side-gap);
    margin-top: 0;
  }

  .workflow-hero--meta .workflow-hero__media { flex: 1 0 100%; }

  @media (min-width: 900px) {
    .workflow-hero--meta {
      --workflow-hero-deck-size: 20px;
      --hero-top-w: 520px;
      --hero-side-gap: var(--space-32);
    }

    .workflow-hero__meta { flex-direction: row; }
  }

  @media (min-width: 1680px) {
    .workflow-hero--meta { --hero-top-w: 680px; }
  }
}