/* =========================================================
   Standalone Base (True Neutral Canvas)
   No opinion. No design influence.
========================================================= */

/* 1. Predictable box model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Remove browser defaults */
html,
body {
  margin: 0;
  padding: 0;
}

/* 3. Neutral media behavior */
img,
video,
svg,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}



/* 5. Keep lists usable but not styled */
ul,
ol {
  padding-left: 1.25em;
}

/* 6. Neutral links */
a {
  color: inherit;
  text-decoration: none;
}

/* 7. Forms inherit everything */
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
:root {
  /* ======================================================
     Container tokens (semantics > size)
  ====================================================== */

  /* Breedtes — 1320px is de maat uit het concept */
  --ls-container: 1320px;          /* default content */
  --ls-container-wide: 100%;       /* full-bleed visual */
  --ls-container-narrow: 920px;    /* verhaal, focus */

  /* Gutter — loopt ruimer op dan de oude starter, zoals in het concept */
  --ls-gutter: clamp(20px, 5vw, 72px);
}

/* =========================================================
   Containers
========================================================= */

/*
  Default container
  → strak, voorspelbaar, rustig
*/
.ls-container {
  width: min(
    var(--ls-container),
    calc(100% - (var(--ls-gutter) * 2))
  );
  margin-inline: auto;
  position: relative;
}

/*
  Wide container
  → visueel, maar nog steeds begrensd
*/
.ls-container--wide {
  width: var(--ls-container-wide);
  margin-inline: auto;
  position: relative;
}

/*
  Narrow container
  → verhaal, focus, rust
*/
.ls-container--narrow {
  width: min(
    var(--ls-container-narrow),
    calc(100% - (var(--ls-gutter) * 2))
  );
  margin-inline: auto;
  position: relative;
}

/* =========================================================
   Layout helpers (intent-first)
========================================================= */

.ls-grid {
  display: grid;
}

/*
  Editorial asymmetrie
  → verhouding is vast
  → volgorde bepaalt dominantie
*/
.ls-grid--2 {
  grid-template-columns: 1.3fr 0.7fr;
  gap: clamp(40px, 8vw, 128px);
}

@media (max-width: 900px) {
  .ls-grid--2 {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Vertical rhythm (editorial)
========================================================= */

.ls-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vw, 72px);
}

/*
  Subtiele horizontale spanning
  → herhaalbaar
  → nooit op mobiel
*/
.ls-stack > *:nth-child(even) {
  margin-left: clamp(0px, 4vw, 64px);
}

@media (max-width: 900px) {
  .ls-stack > *:nth-child(even) {
    margin-left: 0;
  }
}

/* Inline alignment */
.ls-row {
  display: flex;
  align-items: center;
  gap: var(--space-gap);
}

/* =========================================================
   Widget neutralizer
========================================================= */

.ls-widget {
  width: 100%;
  display: block;
}

/* Sectie-contexten en overgangen staan in sections.css. */

/* =====================================
   Dark surface context
===================================== */

.ls-section.is-dark,
.dark-section-sm {
  background: var(--color-surface-darker);

}
/* =====================================
   Dark section utility
   dark-section-sm = dark + section-sm spacing
===================================== */

.dark-section-sm {
  background: var(--color-surface-darker);


  /* map naar spacing token (zelfde gedrag als .section-sm) */
  padding-top: calc(var(--ls-section-sm) * 1.05);
  padding-bottom: calc(var(--ls-section-sm) * 0.85);
}