/**
 * YWA Layout primitives
 * ---------------------------------------------------------------------------
 * Small, composable layout pieces the templates assemble from, rather than
 * bespoke layout CSS per page. Every value routes through the space scale.
 *
 * Breakpoints (from tokens-spec.md — repeated literally because media queries
 * cannot read custom properties):
 *   sm 640  ·  md 768  ·  lg 1024  ·  xl 1280
 *
 * VERIFY against Figma: the container max-widths and section padding below are
 * reasonable defaults from the scale, not measured from the designs.
 */

/* ===========================================================================
   CONTAINER — horizontal bounds + gutters
   =========================================================================== */

.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--space-500);
  max-width: 1200px; /* VERIFY */
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--space-800);
  }
}

/* Reading measure for long-form prose — About, History, news posts.
   Caps line length for readability rather than filling the viewport. */
.container--prose {
  max-width: 720px; /* matches $content_width in functions.php */
}

.container--wide {
  max-width: 1280px; /* MEASURED — design content column (Option A, locked 2026-07-23);
                        hero, chrome and home sections all share this so their edges align */
}

.container--full {
  max-width: none;
  padding-inline: 0;
}

/* ===========================================================================
   STACK — vertical rhythm between siblings
   Owns the space *between* children, so children never carry stray margins.
   =========================================================================== */

.stack > * + * {
  margin-block-start: var(--stack-space, var(--space-400));
}

.stack--200 { --stack-space: var(--space-200); }
.stack--300 { --stack-space: var(--space-300); }
.stack--400 { --stack-space: var(--space-400); }
.stack--600 { --stack-space: var(--space-600); }
.stack--800 { --stack-space: var(--space-800); }
.stack--1200 { --stack-space: var(--space-1200); }
.stack--1600 { --stack-space: var(--space-1600); }

/* ===========================================================================
   CLUSTER — horizontal group that wraps (button rows, tag lists, meta lines)
   =========================================================================== */

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-space, var(--space-400));
}

.cluster--200 { --cluster-space: var(--space-200); }
.cluster--300 { --cluster-space: var(--space-300); }
.cluster--600 { --cluster-space: var(--space-600); }
.cluster--between { justify-content: space-between; }
.cluster--center { justify-content: center; }
.cluster--end { justify-content: flex-end; }
.cluster--top { align-items: flex-start; }

/* ===========================================================================
   GRID — responsive card grids.
   auto-fit + minmax means no per-breakpoint column rules: cards reflow to fit
   whatever width is available, down to a sensible minimum.
   =========================================================================== */

.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-600));
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 280px), 100%), 1fr));
}

.grid--narrow { --grid-min: 220px; }
.grid--wide { --grid-min: 360px; }
.grid--tight { --grid-gap: var(--space-400); }
.grid--loose { --grid-gap: var(--space-800); }

/* Fixed column counts, for layouts that must not reflow arbitrarily */
.grid--2,
.grid--3,
.grid--4 {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ===========================================================================
   SECTION — vertical page rhythm + surface banding
   ---------------------------------------------------------------------------
   Surface choice is elevation-first (tokens-spec.md). Note the "is it a well?"
   test: only use --sunken where the region genuinely recesses, e.g. a band
   cradling a card. A plain full-width section or a footer is NOT a well and
   takes canvas. Picking sunken because it is a darker grey is the
   appearance-over-intent trap the token architecture exists to prevent.
   =========================================================================== */

.section {
  padding-block: var(--section-space, var(--space-1600)); /* VERIFY */
}

@media (min-width: 1024px) {
  .section {
    --section-space: var(--space-2400);
  }
}

.section--tight { --section-space: var(--space-1200); }
.section--loose { --section-space: var(--space-3200); }

/* Section tones. `ywa_section_tone()` in functions.php picks which one a
   section gets — see DECISIONS.md 2026-07-26 for the alternation rule.
   TONE (a stripe of page, no depth): canvas · subtle · accent-bg · inverse
   DEPTH (a thing, relative to what's behind it): raised · sunken */
.section--canvas    { background-color: var(--color-surface-canvas); }
.section--subtle    { background-color: var(--color-surface-subtle); }
.section--accent-bg { background-color: var(--color-accent-bg-subtle); }
.section--raised    { background-color: var(--color-surface-raised); }
.section--sunken    { background-color: var(--color-surface-sunken); }

.section--inverse {
  background-color: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

/* Whiff-red section divider — the accent rule used between sections */
.section--divided {
  border-block-start: 3px solid var(--color-accent-default);
}

/* ===========================================================================
   PAGE — the interior-page shell (page.php)
   ---------------------------------------------------------------------------
   Interior pages are composed the same way the homepage is: full-width tonal
   bands, with the content constrained inside each band. page.php therefore
   prints the_content() bare rather than wrapping it in a container, and the
   constraint lives here instead.

   A three-column grid does both jobs at once. The middle column is the reading
   measure, and every child lands in it by default — so a page Frank writes as
   plain paragraphs still reads at a sensible width, with the prose rhythm
   .flow used to give it. A <section> child, which is what every YWA block
   renders, opts out and spans the full grid, painting its band edge to edge.

   Why a grid and not `width: 100vw; margin-left: calc(50% - 50vw)` — the
   classic full-bleed trick. That trick measures against the VIEWPORT, which
   includes the scrollbar on Windows, so a full-bleed band overshoots by the
   scrollbar's width and introduces a horizontal scrollbar. The grid measures
   against the element, so it cannot overshoot. (Related: the scrollbar-gutter
   item on the polish-pass list.)
   =========================================================================== */

/* NAMESPACED, and it must stay that way.
   This was `.page`, which collided catastrophically: WordPress's body_class()
   puts a bare `page` class on <body> for EVERY Page, including the static front
   page. So this grid was applied to the document body — <header>, <main> and
   <footer> became grid items squeezed into the 1200px content column, with
   16px margins between them. Symptoms on staging (2026-07-27): the hero
   rendered as a white band, nothing expanded past 1200px, and the gaps between
   homepage sections went wrong. Every page was affected, not just the homepage.
   Theme class names go through `ywa-` so core cannot collide with them. */
.ywa-page {
  display: grid;
  grid-template-columns:
    [full-start] 1fr
    [content-start] min(1200px, 100% - var(--space-500) * 2) [content-end]
    1fr [full-end];
}

@media (min-width: 768px) {
  .ywa-page {
    grid-template-columns:
      [full-start] 1fr
      [content-start] min(1200px, 100% - var(--space-800) * 2) [content-end]
      1fr [full-end];
  }
}

/* Ordinary editor content: constrained, with the prose rhythm base.css's .flow
   supplies elsewhere. Repeated rather than reused because .flow assumes a
   wrapper element, and there is no longer one to put it on. */
.ywa-page > * { grid-column: content; }
.ywa-page > * + * { margin-block-start: var(--space-400); }
.ywa-page > * + h2 { margin-block-start: var(--space-1200); }
.ywa-page > * + h3,
.ywa-page > * + h4 { margin-block-start: var(--space-800); }

/* Breathing room above and below typed content — but NOT around a band, which
   carries its own padding and must meet the header and footer flush. */
.ywa-page > :first-child:not(section):not(.home-section-seam) { margin-block-start: var(--space-1600); }
.ywa-page > :last-child:not(section):not(.home-section-seam) { margin-block-end: var(--space-1600); }

/* The bands. `.alignfull` is core's own opt-out, honoured here so a core block
   set to Full width behaves the way the editor promises it will. */
.ywa-page > section,
.ywa-page > .home-section-seam,
.ywa-page > .alignfull {
  grid-column: full;
  margin-block: 0;
}

/* ===========================================================================
   MEDIA
   =========================================================================== */

.media-frame {
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-surface-sunken);
}

.media-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-4-3  { aspect-ratio: 4 / 3; }
.aspect-1-1  { aspect-ratio: 1 / 1; }
.aspect-3-2  { aspect-ratio: 3 / 2; }

/* ===========================================================================
   VISIBILITY
   =========================================================================== */

.hide-below-md { display: none; }
@media (min-width: 768px) {
  .hide-below-md { display: revert; }
  .hide-from-md { display: none; }
}

.hide-below-lg { display: none; }
@media (min-width: 1024px) {
  .hide-below-lg { display: revert; }
  .hide-from-lg { display: none; }
}