/* ==========================================================================
   Jaeger Pitch — Layout Primitives + Utilities (verbatim from jaeger-template)
   --------------------------------------------------------------------------
   A small, *unstyled* layout vocabulary. These carry no visual identity —
   no colours, no fonts, no "look" — only structure, all driven by tokens.
   That keeps them inside the "scaffold, not stylesheet" rule: they're
   plumbing, like `.container` always was.

   They're **opt-in**: applied via class, never to bare elements, so they
   never fight a project's own components (same posture as `.prose`). Reach
   for them instead of hand-rolling `max-width` / `margin: auto` / a fragile
   `grid-template-columns` on every component — then override per project
   via the `--*` custom-property hooks each one exposes.

   Pattern credit: Every Layout (Heydon Pickering / Andy Bell).
   ========================================================================== */

@layer utilities {
  /* ----- container ----------------------------------------------------
     Page-width wrapper: caps width, centers, adds a viewport gutter so
     content never kisses the screen edge. The max is a custom property so
     the modifiers actually re-cap it (a plain `max-width` override can't
     widen past the base `width`). */
  .container {
    --_container-max: var(--container-default);
    width: min(100% - 2 * var(--container-gutter, var(--space-5)), var(--_container-max));
    margin-inline: auto;
  }

  .container--narrow { --_container-max: var(--container-narrow); }  /*  38rem — prose width */
  .container--wide   { --_container-max: var(--container-wide); }    /*  80rem — wide hero   */

  /* ----- stack --------------------------------------------------------
     Vertical rhythm between flow children. The owl selector spaces only
     *between* siblings (no top/bottom margin on the ends). Tune the gap
     per instance with `--stack-space`. */
  .stack > * + * {
    margin-block-start: var(--stack-space, var(--space-5));
  }

  /* ----- cluster ------------------------------------------------------
     Horizontal group that wraps gracefully: nav items, tag/chip lists,
     button rows, inline meta. Gap + wrap + vertical centering. */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-space, var(--space-4));
    align-items: var(--cluster-align, center);
  }

  /* ----- auto-grid ----------------------------------------------------
     Responsive grid with no media queries: as many columns as fit at
     `--grid-min` wide, then reflows. The `min(...)` guard stops a single
     wide card from overflowing on narrow screens. This is the "card grid"
     most projects hand-roll (and get wrong). */
  .auto-grid {
    display: grid;
    gap: var(--grid-space, var(--space-5));
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 16rem), 100%), 1fr));
  }

  /* ----- center -------------------------------------------------------
     Center a *single* element to a comfortable measure — a centered intro
     paragraph, a narrow CTA block. Distinct from `.container` (which wraps
     the whole page width); use this to constrain one thing inside it. */
  .center {
    margin-inline: auto;
    max-inline-size: var(--center-max, var(--container-narrow));
  }

  /* ----- icon ---------------------------------------------------------
     Sizing + inline alignment for the SVG sprite icons emitted by the
     icon() helper. `1em`-relative so an icon scales with the
     text it sits beside; bump `--icon-size` for standalone icons. Colour
     follows `currentColor` (set `color` on the parent to recolour). */
  .icon {
    display: inline-block;
    inline-size: var(--icon-size, 1.25em);
    block-size: var(--icon-size, 1.25em);
    vertical-align: -0.125em;
    flex: none;
    fill: none;
    stroke: currentColor;
  }
}