/*
 * layout.css
 * Four composition helpers. Plain CSS so the
 * anatomy examples in bars.css, lists.css and feed.css work without a build
 * step.
 *
 *   stack     vertical rhythm
 *   cluster   horizontal group that wraps
 *   center    both axes
 *   split     pushed to opposite ends
 *
 * ── Layer placement ─────────────────────────────────────────────────
 * These sit in the `layout` layer, which index.css orders *before*
 * `components` and `patterns`. That matters for one real collision:
 * `.center` here sets `display: grid`, while `.bar` in patterns sets
 * `display: flex` and uses `.bar.center` to mean "center the bar's
 * contents". Both are single-class selectors, so specificity can't
 * separate them — the layer order does, and `.bar` wins.
 *
 * The underlying name overlap is still worth resolving; see the naming
 * note in PROJECT_STATE.md.
 */

.stack {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2xl);
}

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

/*
 * Group — a horizontal group that stays on ONE line.
 *
 * Beside Cluster because it is defined against it: wrapping is Cluster's
 * definition, not a default it happens to carry, and inside anything with a
 * fixed height that definition is wrong. A Topbar has `--topbar-height`, so a
 * wrapped second line is drawn OUTSIDE the strip rather than growing it —
 * measured at 640px, the guide's version badge landed at y=46 in a 56px bar
 * starting at y=8, on top of the page below (`FJS-D252`).
 *
 * A Group is what goes INSIDE a strip; the strip is a Bar, and there is one of
 * those per area. Writing `bar` twice inside a Topbar says there are three
 * strips where there is one.
 *
 * `min-width: 0` because a flex item's default `min-width: auto` refuses to
 * shrink below its content, so a long label pushes a Group past its container
 * instead of letting the child truncate — the failure that sends people back
 * to wrapping.
 */
.group {
  display:     flex;
  flex-wrap:   nowrap;
  align-items: center;
  gap:         var(--space-sm);
  min-width:   0;
}

.center {
  display:      grid;
  place-items:  center;
}

.split {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             var(--space-2xl);
}

/*
 * ── Container ───────────────────────────────────────────────────────
 * Centers content and holds it to a readable width, with gutters that
 * step up at the breakpoints (640 / 768 / 1024 / 1280 / 1536 — see the
 * note in tokens.css for why those are literals and not tokens).
 *
 *   .container         page width, capped at --container-max
 *   .container.narrow  prose width, capped at --container-narrow
 *   .container.wide    full bleed, gutters only
 *
 * Set --container-max on a theme or an ancestor to change the ceiling
 * without touching the gutters.
 */
.container {
  width:          100%;
  margin-inline:  auto;
  padding-inline: var(--container-pad);
  max-width:      var(--container-max);
}
.container.narrow { max-width: var(--container-narrow); }
.container.wide   { max-width: none; }

@media (min-width: 768px) {
  .container { --container-pad: 1.5rem; }
}
@media (min-width: 1280px) {
  .container { --container-pad: 2rem; }
}