/* =============================================================================
   layout.css - Layout primitives (C0 · Spec §10, §0)
   Token-driven. Owner tweaks column counts / gaps / padding via tokens.css.
   ============================================================================= */

/* ---- Container ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: 760px; }

/* ---- Section rhythm ------------------------------------------------------- */
.section { padding-block: var(--space-3xl); }
.section--tight { padding-block: var(--space-2xl); }
.section + .section { padding-top: 0; }

/* ---- Stack (vertical flow) ------------------------------------------------ */
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--flow, var(--space-sm)); }
.stack--sm { --flow: var(--space-2xs); }
.stack--md { --flow: var(--space-md); }
.stack--lg { --flow: var(--space-lg); }

/* ---- Cluster (horizontal wrap row with gap) ------------------------------- */
.cluster {
  display: flex; flex-wrap: wrap;
  gap: var(--cluster-gap, var(--space-sm));
  align-items: var(--cluster-align, center);
}

/* ---- Auto-fit grid (cards) - column count via --grid-min ------------------ */
.grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min), 100%), 1fr));
}
/* Fixed-column variants the owner can drop in (§10 panel arrangements) */
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* ---- Split (asymmetric two-column, collapses on mobile) ------------------- */
.split {
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: var(--split-ratio, 1fr 1fr);
  align-items: center;
}
.split--media { --split-ratio: 1.1fr 0.9fr; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: var(--space-xl); } }

/* ---- Section header block ------------------------------------------------- */
.section-head { max-width: 60ch; margin-bottom: var(--space-xl); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { display: block; margin-bottom: var(--space-2xs); }
.section-head p { color: var(--text-muted); font-size: var(--step-1); margin-top: var(--space-xs); }

/* ---- Visually hidden (a11y) ----------------------------------------------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- Hairline divider ----------------------------------------------------- */
.hairline { height: 1px; background: var(--border); border: 0; }

/* ---- Surface tints (atmosphere over flat fill - §1) ----------------------- */
.surface-alt { background: var(--surface-2); }
.surface-ink {
  background: var(--primary);
  color: var(--primary-ink);
}
.surface-ink :is(h1,h2,h3,h4) { color: var(--primary-ink); }