/* ============================================================
   EasyAutoVerkoop — 02-primitives.css — layout-primitives
   Versie 1.1.0 · 2026-09-14
   Containers, content-grid, sections, flow/stack/cluster, grids,
   section-scoped thema's (dark / brand / soft).
   ============================================================ */

/* === Containers === */

.Eav-container,
.Eav-container-narrow,
.Eav-container-wide {
  inline-size: 100%;
  margin-inline: auto;
  padding-inline: var(--eav-gutter);
}
.Eav-container        { max-inline-size: var(--eav-container); }
.Eav-container-narrow { max-inline-size: var(--eav-container-narrow); }
.Eav-container-wide   { max-inline-size: var(--eav-container-wide); }

/* === Content grid — named columns, geen 100vw-truc ===
   full   = viewport-breed (bands, hero-achtergronden)
   wide   = tot 2000px (impactvolle visuals)
   content= GB container-width (default 1200px)
   narrow = 760px (lopende tekst) */

.Eav-content-grid {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--eav-gutter), 1fr)
    [wide-start] minmax(0, calc((var(--eav-container-wide) - var(--eav-container)) / 2))
    [content-start] minmax(0, calc((var(--eav-container) - var(--eav-container-narrow)) / 2))
    [narrow-start] min(100% - var(--eav-gutter) * 2, var(--eav-container-narrow)) [narrow-end]
    minmax(0, calc((var(--eav-container) - var(--eav-container-narrow)) / 2)) [content-end]
    minmax(0, calc((var(--eav-container-wide) - var(--eav-container)) / 2)) [wide-end]
    minmax(var(--eav-gutter), 1fr) [full-end];
}
.Eav-content-grid > *           { grid-column: content; }
.Eav-content-grid > .Eav-narrow { grid-column: narrow; }
.Eav-content-grid > .Eav-wide   { grid-column: wide; }
.Eav-content-grid > .Eav-full   { grid-column: full; }

/* === Section === */

.Eav-section {
  position: relative;
  padding-block: var(--eav-space-3xl);
  overflow-x: clip;
}
.Eav-section-s  { padding-block: var(--eav-space-xl); }
.Eav-section-xs { padding-block: var(--eav-space-l); }

/* Naadloze overgang tussen twee banden met dezelfde achtergrond */
.Eav-section-flush { padding-block-start: 0; }

/* === Flow & stacks === */

.Eav-flow > * + * {
  margin-block-start: var(--eav-flow-space, var(--eav-space-m));
}
.Eav-flow-xs { --eav-flow-space: var(--eav-space-xs); }
.Eav-flow-s  { --eav-flow-space: var(--eav-space-s); }
.Eav-flow-l  { --eav-flow-space: var(--eav-space-l); }
.Eav-flow-xl { --eav-flow-space: var(--eav-space-xl); }

.Eav-stack-s,
.Eav-stack-m,
.Eav-stack-l {
  display: flex;
  flex-direction: column;
}
.Eav-stack-s { gap: var(--eav-space-s); }
.Eav-stack-m { gap: var(--eav-space-m); }
.Eav-stack-l { gap: var(--eav-space-l); }

.Eav-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--eav-space-s);
}
.Eav-cluster-center  { justify-content: center; }
.Eav-cluster-between { justify-content: space-between; }

/* Centreren van content binnen een band (hero, CTA) */
.Eav-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.Eav-center > * { max-inline-size: 100%; }

/* === Grids — altijd minmax(0, 1fr), nooit kale 1fr === */

.Eav-grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--eav-space-m);
}

.Eav-grid-2,
.Eav-grid-3,
.Eav-grid-4 {
  display: grid;
  gap: var(--eav-space-m);
}
.Eav-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.Eav-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.Eav-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

@media (min-width: 64em) {
  .Eav-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .Eav-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .Eav-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Split: tekst naast visual/formulier; stapelt automatisch onder ~40rem */
.Eav-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--eav-space-xl);
  align-items: center;
}
@media (min-width: 64em) {
  .Eav-split       { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .Eav-split-wide  { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

/* === Scroller — onder de tablet-breakpoint wordt een grid een
   horizontale snap-slider; erboven doet de grid-class het werk. === */

@media (max-width: 47.99em) {
  .Eav-scroller {
    display: flex;
    gap: var(--eav-space-s);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--eav-gutter);
    padding-inline: var(--eav-gutter);
    padding-block-end: var(--eav-space-s);
    margin-inline: calc(var(--eav-gutter) * -1);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--eav-clr-border-strong) transparent;
  }
  .Eav-scroller > * {
    flex: 0 0 min(78%, 20rem);
    scroll-snap-align: start;
  }
}

/* === Section-scoped thema's =========================================
   Herdefiniëren de semantische tokens; elk kindcomponent gaat mee.
   Elementen die er tegenin moeten (Eav-button-invert) gebruiken raw-tokens. */

/* Donkere band — ink/night, ongeacht systeemvoorkeur */
.Eav-band-dark {
  --eav-clr-bg:             var(--eav-raw-ink);
  --eav-clr-bg-alt:         color-mix(in oklch, var(--eav-raw-ink) 90%, white);
  --eav-clr-surface:        color-mix(in oklch, var(--eav-raw-ink) 88%, white);
  --eav-clr-surface-accent: color-mix(in oklch, var(--eav-raw-ink) 75%, var(--eav-raw-accent));
  --eav-clr-text:           var(--eav-raw-paper);
  --eav-clr-text-muted:     color-mix(in oklch, var(--eav-raw-paper) 76%, var(--eav-raw-ink));
  --eav-clr-border:         color-mix(in oklch, var(--eav-raw-paper) 18%, transparent);
  --eav-clr-border-strong:  color-mix(in oklch, var(--eav-raw-paper) 50%, var(--eav-raw-ink));
  --eav-clr-primary:        var(--eav-raw-primary-lit);
  --eav-clr-primary-hover:  color-mix(in oklch, var(--eav-raw-primary-lit) 88%, white);
  --eav-clr-text-on-primary: var(--eav-raw-ink);
  --eav-clr-secondary:      var(--eav-raw-paper);
  --eav-clr-focus:          var(--eav-raw-accent);
  color-scheme: dark;
  background-color: var(--eav-clr-bg);
  color: var(--eav-clr-text);
}

/* Brand-gradient band — zelfde tokens als dark, met de brand-gradient als vlak */
.Eav-band-brand {
  --eav-clr-bg:             var(--eav-raw-primary);
  --eav-clr-bg-alt:         color-mix(in oklch, var(--eav-raw-primary) 90%, white);
  --eav-clr-surface:        color-mix(in oklch, var(--eav-raw-primary) 86%, white);
  --eav-clr-surface-accent: color-mix(in oklch, var(--eav-raw-primary) 75%, var(--eav-raw-accent));
  --eav-clr-text:           var(--eav-raw-paper);
  --eav-clr-text-muted:     color-mix(in oklch, var(--eav-raw-paper) 80%, var(--eav-raw-primary));
  --eav-clr-border:         color-mix(in oklch, var(--eav-raw-paper) 22%, transparent);
  --eav-clr-border-strong:  color-mix(in oklch, var(--eav-raw-paper) 55%, var(--eav-raw-primary));
  --eav-clr-primary:        var(--eav-raw-paper);
  --eav-clr-primary-hover:  color-mix(in oklch, var(--eav-raw-paper) 88%, var(--eav-raw-primary));
  --eav-clr-text-on-primary: var(--eav-raw-ink);
  --eav-clr-secondary:      var(--eav-raw-paper);
  --eav-clr-focus:          var(--eav-raw-accent);
  color-scheme: dark;
  background-color: var(--eav-clr-bg);
  background-image: var(--eav-grad-brand);
  color: var(--eav-clr-text);
}

/* Zachte band — sand/celadon-gradient, lichte tokens ongeacht systeemvoorkeur */
.Eav-band-soft {
  --eav-clr-bg:             var(--eav-raw-sand);
  --eav-clr-bg-alt:         var(--eav-raw-paper);
  --eav-clr-surface:        var(--eav-raw-paper);
  --eav-clr-surface-accent: var(--eav-raw-celadon);
  --eav-clr-text:           var(--eav-raw-ink);
  --eav-clr-text-muted:     color-mix(in oklch, var(--eav-raw-ink) 72%, var(--eav-raw-sand));
  --eav-clr-border:         color-mix(in oklch, var(--eav-raw-ink) 14%, var(--eav-raw-sand));
  --eav-clr-border-strong:  color-mix(in oklch, var(--eav-raw-ink) 55%, var(--eav-raw-sand));
  --eav-clr-primary:        var(--eav-raw-primary);
  --eav-clr-primary-hover:  color-mix(in oklch, var(--eav-raw-primary) 88%, black);
  --eav-clr-text-on-primary: var(--eav-raw-paper);
  --eav-clr-secondary:      var(--eav-raw-ink);
  --eav-clr-focus:          var(--eav-raw-primary);
  color-scheme: light;
  background-color: var(--eav-clr-bg);
  background-image: var(--eav-grad-soft);
  color: var(--eav-clr-text);
}

/* Alt-band — bg-alt van de actieve modus (licht: sand, donker: night-alt) */
.Eav-band-alt {
  background-color: var(--eav-clr-bg-alt);
}

/* Decoratieve glow — bovenop een band; inhoud blijft erboven via isolation */
.Eav-band-glow {
  isolation: isolate;
}
.Eav-band-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--eav-grad-glow);
  pointer-events: none;
}