/* ==========================================================================
   layout.css — Structural Layout Primitives
   ========================================================================== */

/* ── Container ────────────────────────────────────────────────────────── */
.container {
  inline-size: 100%;
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide   { max-inline-size: var(--container-wide); }
.container--narrow { max-inline-size: var(--container-narrow); }

/* ── Section rhythm ───────────────────────────────────────────────────── */
.section {
  padding-block: var(--section-y);
}

.section--tight { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.section--alt   { background-color: var(--color-surface-alt); }
.section--sunken{ background-color: var(--color-surface-sunken); }
.section--brand {
  background: linear-gradient(135deg, var(--color-brand-700), var(--color-brand));
  color: var(--color-white);
}

/* Section header block */
.section__head {
  max-inline-size: 60ch;
  margin-inline: auto;
  margin-block-end: var(--space-xl);
  text-align: center;
}

.section__head--start {
  margin-inline: 0;
  text-align: start;
}

.section__head > * + * {
  margin-block-start: var(--space-sm);
}

/* ── Grid system ──────────────────────────────────────────────────────── */
.grid {
  display: grid;
  gap: var(--space-lg);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Auto-responsive card grid — no media queries needed */
.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.grid--auto-sm {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

/* Split hero layout */
.split {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
  .split { grid-template-columns: 1.1fr 0.9fr; }
  .split--reverse > :first-child { order: 2; }
}

/* ── Flow (vertical spacing) ──────────────────────────────────────────── */
.flow > * + * {
  margin-block-start: var(--flow-space, var(--space-md));
}

.flow--sm { --flow-space: var(--space-sm); }
.flow--lg { --flow-space: var(--space-lg); }

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

.cluster--between { justify-content: space-between; }
.cluster--center  { justify-content: center; }

/* ── Stack that pushes last child to bottom (card footers) ────────────── */
.stack {
  display: flex;
  flex-direction: column;
}

.stack > .push-bottom { margin-block-start: auto; }

/* ── Center (self-centering box) ──────────────────────────────────────── */
.center {
  display: grid;
  place-items: center;
}

/* ── Responsive grid collapses ────────────────────────────────────────── */
@media (max-width: 62rem) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 40rem) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }
}

/* ── Container query support (opt-in wrapper) ─────────────────────────── */
.cq {
  container-type: inline-size;
}

/* ── Aspect ratio helpers ─────────────────────────────────────────────── */
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-4-3  { aspect-ratio: 4 / 3; }
.ratio-1-1  { aspect-ratio: 1 / 1; }

.ratio-16-9 > *,
.ratio-4-3 > *,
.ratio-1-1 > * {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* ── Skip link ────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--space-sm);
  z-index: var(--z-toast);
  padding: var(--space-2xs) var(--space-md);
  background: var(--color-brand);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  transition: inset-block-start var(--dur-fast) var(--ease-standard);
}

.skip-link:focus {
  inset-block-start: var(--space-sm);
}