/* === GoGo Carcleaning — Layout utilities === */

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

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

/* Sectie-achtergronden — regelt visueel ritme (3.5) */
.bg-base    { background: var(--color-bg); }
.bg-surface { 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: #0B1519; color: var(--color-text-inverse); }

/* Section stack (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.no-body > .lead { 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); }

/* Solo-sectie = intro gecentreerd (3.10 regel 3a).
   BELANGRIJK: text-align: center geldt alleen voor de intro (eyebrow/h2/lead) en stack-cta,
   NIET voor stack-body content — cards en grids blijven links-uitgelijnd voor leesbaarheid. */
.section-stack.intro-center { align-items: center; }
.section-stack.intro-center > .eyebrow,
.section-stack.intro-center > h2,
.section-stack.intro-center > .lead {
  max-width: var(--content-narrow);
  margin-inline: auto;
  text-align: center;
}
.section-stack.intro-center > .stack-body,
.section-stack.intro-center > .stack-cta { align-self: center; }
.section-stack.intro-center > .stack-cta { text-align: center; }

/* Card grids */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); gap: var(--space-6); justify-content: center; }

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-auto { grid-template-columns: 1fr; }
}

/* Reveal animation (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; }
}

/* Split (tekst + visueel) */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-8), 6vw, var(--space-16));
  align-items: center;
}
.split--right-visual { grid-template-columns: 1.05fr 0.95fr; }
.split--left-visual  { grid-template-columns: 0.95fr 1.05fr; }
.split .split-visual { min-width: 0; }
.split .split-text   { min-width: 0; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--space-10); }
  .split--visual-first .split-visual { order: -1; }
  .split .split-visual { order: 2; }
}

/* Utility text alignment */
.text-center { text-align: center; }

.divider {
  border: none;
  border-top: 1px solid var(--color-divider);
  margin: 0;
}