/*
 * Shared layout primitives.
 *
 * Site-wide container, responsive card grid, and section-lead
 * paragraph patterns. Everything in here is consumed by at least two
 * pages (or will be, as the remaining M1 pages land). Page-scoped
 * stylesheets under pages/ should reach for these classes first and
 * only override spacing/colour when the design genuinely differs.
 *
 * See docs/design_system.md §"Layout" and §"Spacing".
 */

/* Content container — max 72rem, centred, with the site's standard
 * 1.5rem side padding. Every public section sits inside one of these. */
.container {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* 4-up card grid. Mobile stacks single-column, tablet lands two-up,
 * wide desktop opens to four. Consumed by home quick-actions,
 * about/stats, and tarieven — and by future pages that present the
 * same 4-card rhythm. Override gap or top margin in page-scoped
 * files where a section genuinely needs something different. */
.grid-4up {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 48rem) {
  .grid-4up {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 80rem) {
  .grid-4up {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Section lead — the short paragraph that sits between an
 * eyebrow-block-title and the section's main content. Default colour
 * is --ink; add .section-lead--muted when the lead should read as
 * secondary copy (e.g. a caption rather than a statement). */
.section-lead {
  font-size: var(--fs-lg);
  line-height: 1.65;
  max-width: 54ch;
  margin-block: 1rem 2rem;
  color: var(--ink);
}

.section-lead--muted {
  color: var(--muted);
}