/*
 * utilities.css: the small layout layer that replaces Tailwind on this site.
 * Containers, sections, grids, stacks and a few colour helpers. Everything
 * reads its values from tokens.css.
 */

/* ── Containers (max-w-[1280px] / max-w-[768px] + px-4 sm:px-6 lg:px-8) ─ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-narrow {
  max-width: var(--container-narrow);
}

/* ── Sections (PageSection: bg + py + borderTop) ─────────────────────── */
.section[data-bg="bone"] { background: var(--bone); }
.section[data-bg="linen"] { background: var(--linen); }
.section[data-bg="oat"] { background: var(--oat); }
.section[data-bg="oat-light"] { background: var(--oat-light); }
.section[data-bg="white"] { background: var(--white); }
.section[data-bg="ink"] { background: var(--ink); }
.section[data-bg="ink-mid"] { background: var(--ink-mid); }

.section[data-py="sm"] { padding-block: var(--space-section-sm); }
.section[data-py="md"] { padding-block: var(--space-section-md); }
.section[data-py="hero"] { padding-block: var(--space-section-hero); }
.section[data-py="lg"] { padding-block: var(--space-section-lg); }
.section[data-py="xl"] { padding-block: var(--space-section-xl); }

.section[data-border="top"] { border-top: 1px solid var(--hairline); }
.section[data-bg="ink"][data-border="top"],
.section[data-bg="ink-mid"][data-border="top"] { border-top-color: var(--hairline-invert); }

/* ── Grids ───────────────────────────────────────────────────────────── */
.grid {
  display: grid;
  gap: 1.5rem;
}

.grid-tiles {
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.split {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 40em) {
  .grid { gap: 2rem; }
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--start { align-items: start; }
}

/* ── Stacks and clusters (flex flex-col gap-N / flex flex-wrap gap-N) ─── */
.stack,
.stack-2,
.stack-3,
.stack-4,
.stack-6,
.stack-8,
.stack-12 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stack-2 { gap: 0.5rem; }
.stack-3 { gap: 0.75rem; }
.stack-6 { gap: 1.5rem; }
.stack-8 { gap: 2rem; }
.stack-12 { gap: 3rem; }

.cluster,
.cluster-2,
.cluster-3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.cluster-2 { gap: 0.5rem; }
.cluster-3 { gap: 0.75rem; }

.row-between {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
}

/* ── Text helpers ────────────────────────────────────────────────────── */
.text-center { text-align: center; }
.measure { max-width: 65ch; }
.measure-narrow { max-width: 45ch; }
.italic { font-style: italic; }
.upper { text-transform: uppercase; }

.c-ink { color: var(--ink); }
.c-sage { color: var(--sage); }
.c-body { color: var(--text-body); }
.c-muted { color: var(--text-muted); }
.c-dark { color: var(--text-dark); }
.c-moss { color: var(--moss); }
.c-white { color: var(--white); }
.c-bone { color: var(--bone); }
.c-muted-invert { color: var(--text-muted-invert); }

/* Visually hidden, still read by assistive tech. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}