/* page.small.css — the generic page template below 768px
 *
 * From the Mobile view design setup mobile handoff →
 * `design_handoff_mobile_pages/Page Template Mobile.dc.html`, **direction 1a**
 * ("stacked bands"), chosen by Zsolt on 2026-08-13 over 1b ("indexed blocks").
 *
 * WHY 1a: page.css already alternates full-bleed bands from position
 * (`.pt__body > *:nth-child(even)`), so 1a is that same model narrowed to one
 * column — desktop and mobile stay one design. 1b would have numbered every
 * block from a CSS counter and made mobile structurally different from the
 * template it is a view of.
 *
 * ONE BAND ONLY. page.css is a clamp()-based sheet that holds from 768px to
 * 2560px with no breakpoints of its own, so there is no tablet fallback here —
 * above 767.98px its clamps already do the work. Do not add a second band.
 *
 * COLOURS ARE INHERITED, NOT RESTATED. The handoff's colour table disagrees
 * with page.css in two places — it wants the labels at #a80017 and long-form
 * body copy at #2b333b. Both are deliberate open questions, not oversights:
 * tokens.css records Zsolt's 2026-08-12 decision putting these pages' red type
 * on --red-label and says in terms not to revert it, and #2b333b is not a token
 * at all. So this sheet changes STRUCTURE, SPACING AND TYPE SIZE only, and
 * every colour falls through to page.css. See the summary that shipped with it.
 */

@media (max-width: 767.98px) {

  /* Every block's band padding comes from these two custom properties, so the
     20px page gutter is set once here rather than per rule. 38px 20px is the
     prose band; the hero and the CTA state their own below.

     --pad-x HAS TO MOVE WITH --pad. The blocks that are their own band escape
     the prose gutter with margin-inline: calc(-1 * var(--pad-x)); leave it on
     the desktop clamp here and a full-bleed block would pull 64px out of a 20px
     gutter and hang off the screen. */
  .pt { --pad-x: 20px; --pad: 38px var(--pad-x); }


  /* --- hero band ----------------------------------------------------------- */

  .pt__band {
    padding: 44px 20px 34px;
    gap: 0;                      /* the children carry their own spacing now */
  }
  .pt__eyebrow {
    gap: 10px;
    margin-bottom: 22px;
    font-size: 11px; font-weight: 700;
  }
  /* The square is already 10px in page.css — restated only so a future change
     to the desktop value cannot silently shrink it below the design here. */
  .pt__eyebrow i { width: 10px; height: 10px; }

  .pt__title {
    font-size: 52px; line-height: .92;
    letter-spacing: -.04em;
  }
  .pt__standfirst {
    margin-top: 22px;
    max-width: none;             /* 56ch is wider than the column; it never bites */
    font-size: 16px; line-height: 1.55;
  }


  /* --- editor content: prose ----------------------------------------------- */

  .pt__body h2 {
    margin-bottom: 16px;
    font-size: 30px; line-height: 1.04;
    max-width: none;
  }
  .pt__body h3 {
    margin: 26px 0 10px;
    font-size: 19px;
  }
  .pt__body p,
  .pt__body li {
    font-size: 15.5px; line-height: 1.62;
    max-width: none;             /* the 74ch measure cannot apply in 335px */
  }
  .pt__body p { margin-bottom: 14px; }

  .pt__body ul { margin: 18px 0; gap: 12px; }
  /* 14px gap + the 6px marker = the 20px inset page.css already uses, so the
     marker geometry carries over unchanged. */
  .pt__body ul li { padding-left: 20px; }
  .pt__body ul li::before { top: .6em; }


  /* --- fact strip ----------------------------------------------------------
     Desktop lays this out as auto-fit columns divided by border-LEFT. At 375px
     auto-fit already collapses to one column, which leaves those left borders
     drawing down the side of a stack — so the dividers move to border-bottom
     and the rows become the four hairline-separated rows the handoff specifies.

     THE NEGATIVE MARGINS ARE THE POINT, not a hack: the hairlines run to both
     screen edges while the text stays on the 20px gutter. The block around this
     already carries --pad's 20px, so the strip backs it out and each row puts
     it back — which is exactly how the prototype composes it, with a
     zero-padding section and 20px rows. */
  .pt__body .facts {
    grid-template-columns: 1fr;
    margin: 22px -20px 0;
  }
  .pt__body .facts > * {
    padding: 20px;
    border-left: 0;
    border-bottom: 1px solid var(--hair-2);
  }
  /* Desktop zeroes the first cell's left padding because it opens a row; here
     it opens a column, so it takes the same 20px as the rest. */
  .pt__body .facts > *:first-child { padding-left: 20px; }
  .pt__body .facts > *:last-child { border-bottom: 0; }


  /* --- media --------------------------------------------------------------- */

  .pt__body img { border: 1px solid var(--hair-strong); }
  .pt__body figcaption {
    margin-top: 14px;
    font-size: 11px; font-weight: 400;
    letter-spacing: .14em;
  }


  /* --- CTA band ------------------------------------------------------------ */

  .pt__body > .cta { padding: 38px 20px 42px; }
  .pt__body .cta h2 {
    margin-bottom: 0;
    font-size: 34px; line-height: 1.02;
    letter-spacing: -.035em;
    text-transform: uppercase;
  }
  .pt__body .cta p { margin: 18px 0 0; }
  /* A full-width bar rather than an inline chip: at this width an inline-block
     button either runs to the edge anyway or leaves a ragged gap beside it.
     space-between parks the arrow on the right the way the design draws it.
     20px vertical padding on an 11px line clears the 44px touch target. */
  .pt__body .cta a {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    margin-top: 26px;
    padding: 20px 22px;
    letter-spacing: .2em;
  }
}