/* The hero.
 *
 * Composes `base.css`; redefines nothing in it. Every value below is a token
 * from `tokens.css` or a number derived from one — the two exceptions are named
 * where they occur and both are geometry, not colour.
 *
 * The layout is three blocks and not two columns of equal weight:
 *
 *   ┌──────────────────────────────────────────────┐
 *   │ eyebrow + headline            (spans)        │
 *   ├───────────────────────┬──────────────────────┤
 *   │ paragraph, buttons    │  the demo            │
 *   └───────────────────────┴──────────────────────┘
 *
 * The headline spans because it has to. At `--step-5` the longest of its three
 * sentences sets about 840px wide, and a half-width column would fold it into
 * gibberish. Everything under it is deliberately unequal — a narrower column of
 * words against a wider figure — which is the whole difference between this and
 * a hero with a picture on the right.
 */

.hero {
  /* Less at the top than `.section` gives: the masthead is sticky and its 60px
   * already sit above this, so the section's own top padding is that much
   * shorter and the headline starts where the eye is. */
  padding-block: clamp(var(--s-xl), 5vw, var(--s-3xl)) clamp(var(--s-3xl), 10vw, var(--s-4xl));
}

.hero__grid {
  display: grid;
  row-gap: clamp(var(--s-xl), 4vw, var(--s-2xl));
}

/* ---- The words ---------------------------------------------------------- */

/* A rule leading into the eyebrow. The only ornament on the page, and it is a
 * hairline of the same weight as every other rule in the system. */
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-s);
  margin-bottom: var(--s-m);
}

.hero__eyebrow::before {
  content: "";
  flex: none;
  width: var(--s-l);
  height: 1px;
  background-color: var(--ink-faint);
}

.hero__headline {
  /* `.display` already sets balance. The folds here are hard breaks, so balance
   * has nothing left to decide within a line and only wraps a sentence that is
   * genuinely too long for the column. */
  text-wrap: pretty;
}

.hero__lede {
  /* `.lede` caps at 46ch, which is right for a standfirst under a centred
   * headline. This one is four sentences in a column of its own and it is the
   * paragraph the brief sets at the measure. */
  max-width: var(--measure);
}

.hero__actions {
  margin-top: clamp(var(--s-l), 2.5vw, var(--s-xl));
}

.hero__meta {
  margin-top: var(--s-s);
  font-size: var(--step--1);
}

/* ---- The demo ----------------------------------------------------------- */

.hero__demo {
  display: grid;
  /* The figure owns its own margins; `*{margin:0}` in the reset already took
   * the browser's. */
  justify-items: stretch;
}

.hero__stage {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-l);
  /* The ground behind the canvas, so a slow paint or a failed module leaves a
   * surface rather than a hole. */
  background-color: var(--paper-sunk);
  box-shadow: var(--lift-2);
}

.hero__canvas {
  display: block;
  width: 100%;
  /* Ratio in CSS as well as in the attributes: the attributes reserve the box
   * before the module runs, this keeps it reserved when the module resizes the
   * backing store to a different pixel count. */
  aspect-ratio: 4 / 3;
  height: auto;
}

.hero__toggle {
  justify-self: end;
  margin-top: var(--s-xs);
  padding: var(--s-2xs) var(--s-xs);
  /* 32px, not the 44px of `.btn-*`: this is a control beside the thing it
   * controls rather than an action anyone is aiming for, and it still clears
   * the 24px minimum by a comfortable margin. */
  min-height: 32px;
  border-radius: var(--radius-s);
  font-size: var(--step--1);
  font-weight: 500;
  /* --ink-quiet is 4.9:1 on paper. --ink-faint would not pass and this is a
   * label, not a rule. */
  color: var(--ink-quiet);
  transition: color var(--t-fast) var(--ease);
}

.hero__toggle:hover {
  color: var(--ink);
}

/* ---- 600px: the demo stops being a strip ---------------------------------
 *
 * Below this the figure is the full width of the viewport, gutters included.
 * At 320px that is 32 more pixels of demo — an eighth of it — and the canvas
 * lays itself out against what it is given, so those pixels go into the type
 * inside the replica rather than into margin. The frame is dropped with them:
 * a rounded card 4px from each edge reads as a card that failed to fit, and an
 * edge-to-edge figure reads as a decision.
 * ------------------------------------------------------------------------- */

@media (max-width: 599px) {
  .hero__demo {
    margin-inline: calc(-1 * clamp(var(--s-m), 5vw, var(--s-3xl)));
  }

  .hero__stage {
    border-radius: 0;
    border-inline-width: 0;
    box-shadow: none;
  }

  .hero__toggle {
    margin-inline-end: clamp(var(--s-m), 5vw, var(--s-3xl));
  }
}

@media (min-width: 600px) {
  .hero__canvas {
    aspect-ratio: 16 / 10;
  }
}

/* ---- 940px: the two columns ---------------------------------------------
 *
 * Measured rather than chosen. Below it the words column falls under 380px,
 * where the paragraph sets at about 26 characters and starts reading as a
 * newspaper column; the demo would be under 420px at the same time, which is
 * where the transcript inside it stops being comfortable.
 * ------------------------------------------------------------------------- */

@media (min-width: 940px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
    column-gap: clamp(var(--s-2xl), 5vw, var(--s-3xl));
    align-items: start;
  }

  .hero__head {
    grid-column: 1 / -1;
  }

  .hero__demo {
    /* The one deliberate misalignment: the figure starts a little below the
     * paragraph beside it, so the two columns do not read as one ruled row. */
    margin-block-start: clamp(var(--s-xs), 1.5vw, var(--s-l));
  }
}

/* ---- No scripting -------------------------------------------------------
 *
 * The demo is a canvas the module fills. Without a module it is an empty box,
 * and an empty box in a hero is worse than one column of words.
 * ------------------------------------------------------------------------- */

@media (scripting: none) {
  .hero__demo {
    display: none;
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Reduced motion ------------------------------------------------------
 *
 * demo.js draws one composed still frame of the finished state instead of
 * running, so there is no loop for a pause control to stop.
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hero__toggle {
    display: none;
  }
}