/* ──────────────────────────────────────────────────────────────────────
   LAYOUTS — page-agnostic structural primitives. These don't style
   appearance, only arrangement. Compose pages by nesting these.
   ────────────────────────────────────────────────────────────────────── */

/* Full-bleed section with consistent horizontal page padding.
   Use for the outermost wrapper of any page band. */
.section {
  padding: var(--space-9) var(--page-padding-x);
}
.section--lg  { padding: var(--space-10) var(--page-padding-x); }
.section--xl  { padding: var(--space-11) var(--page-padding-x) var(--space-9); }
.section--top { border-top: 1px solid var(--color-border); }

/* Vertical rhythm — children get even space between them. */
.stack       { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--space-4); }
.stack--sm > * + * { margin-top: var(--space-2); }
.stack--md > * + * { margin-top: var(--space-4); }
.stack--lg > * + * { margin-top: var(--space-6); }
.stack--xl > * + * { margin-top: var(--space-8); }

/* Horizontal row with gap. */
.cluster {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.cluster--center  { justify-content: center; }
.cluster--between { justify-content: space-between; align-items: baseline; }
.cluster--sm { gap: var(--space-2); }
.cluster--md { gap: var(--space-3); }
.cluster--lg { gap: var(--space-6); }

/* Centered text column with a max width. */
.prose {
  max-width: var(--content-max-wide);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.prose--narrow { max-width: var(--content-max-narrow); }

/* Equal-column grid. */
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-7); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }

/* Equal-flex row (cards that share width). */
.row-equal {
  display: flex;
  gap: var(--space-5);
}
.row-equal > * { flex: 1; }