/* ============================================================================
   v24-layout.css — containers, sections, rhythm and the measure.
   ----------------------------------------------------------------------------
   THE ONE RULE THIS FILE EXISTS TO ENFORCE

   The measure is set on a CONTAINER, never on a paragraph.

   Setting it per element is how one page ended up with prose at three widths:
   three legacy sheets each set `max-width` on `p`, and the narrowest won inside
   whatever block it happened to own. A reader cannot see why the column
   changes width halfway down a page, only that it does.

   So: `p { max-width: … }` appears nowhere on this site, and
   tools/verify_design_system.py has a rule about it.
   ============================================================================ */

/* --- the three containers --------------------------------------------------
   Reading, content, wide. A page picks one per band and nests nothing. */
.sp-wrap,
.sp-wrap-text,
.sp-wrap-wide {
  margin-inline: auto;
  padding-inline: var(--sp-gutter);
  width: 100%;
}
.sp-wrap-text { max-width: var(--sp-reading); }
.sp-wrap      { max-width: var(--sp-content); }
.sp-wrap-wide { max-width: var(--sp-wide); }

/* Prose inside a reading container is already at its measure; this caps it for
   the wider two, where the container is sized for something else — a table, a
   grid of cards — and the prose beside it must not stretch to match. */
.sp-wrap > :is(p, ul, ol, dl, blockquote),
.sp-wrap-wide > :is(p, ul, ol, dl, blockquote) {
  max-width: var(--sp-measure);
}

/* THE IN-PROSE h2 BELONGS TO THE READING CONTAINER, not to an archetype.
   --sp-t-h2 is the size a heading takes when it OPENS A SURFACE. In a column
   of prose it lands at 40px under a 48px h1, and 48 over 40 is not a
   hierarchy — it is two titles, and a reader scrolling a long page loses
   track of which level they are on.

   This is scoped to .sp-wrap-text because that container's entire purpose is
   running prose: a page that chooses it has already said what kind of page it
   is. Writing it on `h2` instead would be the defect rule 7 of
   verify_design_system.py exists to catch — a system element redefined
   globally wins on every page the sheet loads, including the ones nobody was
   thinking about. */
.sp-wrap-text h2 { font-size: var(--sp-t-xl); }

/* --- vertical rhythm -------------------------------------------------------
   Two intervals and no more. Between major moments, and within one moment.
   Everything else is the spacing scale, used locally. */
.sp-sec        { padding-block: var(--sp-sec); }
.sp-sec-tight  { padding-block: var(--sp-sec-tight); }
.sp-sec + .sp-sec,
.sp-sec-tight + .sp-sec-tight { padding-top: 0; }

/* A banded section. The band is the quiet surface, and it is the surface every
   semantic colour in the token sheet was contrast-checked against. */
.sp-band {
  background: var(--sp-quiet);
  border-block: 1px solid var(--sp-line);
}

/* --- the page head ---------------------------------------------------------
   Eyebrow, h1, standfirst. In that order, once per page.

   A defect worth remembering: the Sacred Learning hub read SACRED LEARNING
   (breadcrumb) -> SACRED LEARNING (eyebrow) -> Sacred Learning (h1), three
   times in eighty pixels. An eyebrow that repeats the breadcrumb or the
   heading is not a label, it is noise, and the archetype layers are where that
   gets decided per page. */
.sp-head { margin-bottom: var(--sp-6); }
.sp-eyebrow {
  font-family: var(--sp-sc);
  font-size: var(--sp-t-eyebrow);
  letter-spacing: var(--sp-track-eyebrow);
  text-transform: uppercase;
  color: var(--sp-bronze);
  margin: 0 0 var(--sp-3);
}
.sp-standfirst {
  font-size: var(--sp-t-lg);
  line-height: 1.5;
  color: var(--sp-ink-2);
  max-width: var(--sp-measure);
  margin: var(--sp-4) 0 0;
  text-wrap: pretty;
}

/* --- grids -----------------------------------------------------------------
   Auto-fit, so a narrow screen gets one column without a media query and a
   wide one does not stretch two cards across 1240px. */
.sp-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.sp-grid-2 {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

/* --- a row of things that wraps -------------------------------------------- */
.sp-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* --- wide content inside a narrow column -----------------------------------
   A table, a diagram or a code block may be wider than the measure. It gets its
   own scroller so the PAGE never scrolls sideways — which is SC 1.4.10, and
   which is checked at 320px, where 1280 at 400% zoom lands. */
.sp-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sp-scroll-x > table { min-width: 34rem; }

/* --- utilities, the few that earn their place ------------------------------ */
.sp-stack > * + * { margin-top: var(--sp-4); }
.sp-stack-tight > * + * { margin-top: var(--sp-2); }

/* ONE visually-hidden class. The estate had three (.sr-only, .pc-vh,
   .visually-hidden) and a fourth was proposed; three names for one behaviour is
   three places to get it subtly wrong. */
.sp-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}