/* =========================================================================
   UTILITIES — container, section, section-stack, card-grid, backgrounds
   ========================================================================= */

.container {
  max-width: var(--content-default);
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 5vw, var(--space-12));
}
.container--narrow { max-width: var(--content-narrow); }
.container--wide   { max-width: var(--content-wide); }

section {
  padding-block: clamp(var(--space-16), 9vw, var(--space-24));
}

/* Section backgrounds — visueel ritme 3.5 */
.bg-base    { background: var(--color-bg); }
.bg-surface { background: var(--color-surface); }
.bg-white   { background: var(--color-surface-2); }
.bg-offset  { background: var(--color-surface-offset); }
.bg-accent  { background: var(--color-primary); color: var(--color-text-inverse); }
.bg-dark    { background: #0F1613; color: var(--color-text-inverse); }

[data-theme="dark"] .bg-white   { background: var(--color-surface-2); }
[data-theme="dark"] .bg-surface { background: var(--color-surface); }
[data-theme="dark"] .bg-dark    { background: #050706; }

/* Section-stack — vaste stapmaat eyebrow → h2 → lead → body → CTA (3.10) */
.section-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.section-stack > .eyebrow    { margin-bottom: var(--space-3); }
.section-stack > h2          { margin-bottom: var(--space-4); }
.section-stack > .lead       { margin-bottom: var(--space-10); }
.section-stack > .stack-body { margin-bottom: var(--space-12); width: 100%; }
.section-stack > .stack-cta  { margin-top: 0; }

.section-stack.no-lead > h2  { margin-bottom: var(--space-8); }

.section-stack.intro-narrow > .eyebrow,
.section-stack.intro-narrow > h2,
.section-stack.intro-narrow > .lead {
  max-width: var(--content-narrow);
}

.section-stack.intro-center { align-items: center; text-align: center; }
.section-stack.intro-center > .eyebrow,
.section-stack.intro-center > h2,
.section-stack.intro-center > .lead {
  max-width: min(var(--content-narrow), 100%);
  margin-inline: auto;
}
.section-stack.intro-center > .stack-body,
.section-stack.intro-center > .stack-cta { align-self: center; }

/* Card grids */
.card-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.card-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
}
@media (max-width: 1024px) {
  .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .card-grid-2, .card-grid-3 { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* Reveal (3.8) */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--transition-reveal),
    transform var(--transition-reveal);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}