/* =========================================================
   Section utilities & context modifiers

   Drie contexten, overgenomen uit het concept:
     --dark   zwart canvas, bone tekst          (standaard)
     --gold   goud vlak, zwarte tekst           (accentsectie)
     --bone   licht vlak, zwarte tekst          (formulier, intake)

   Plus de sectie-overgangen: in het concept schuift elke sectie
   met een afgeronde bovenkant over de vorige heen. Dat patroon
   staat onderaan dit bestand als losse modifier, zodat je het
   per sectie aan- of uitzet in plaats van het overal te erven.
========================================================= */

.ls-section {
  position: relative;
}


/* =========================================================
   Contexten
========================================================= */

/* Donker — de standaard */
.ls-section--dark {
  background: var(--color-bg);
  color: var(--color-text);
}

.ls-section--dark h1,
.ls-section--dark h2,
.ls-section--dark h3,
.ls-section--dark h4 {
  color: var(--color-text);
}

.ls-section--dark p {
  color: var(--color-muted);
}

/* Iets lichter zwart — voor een blok dat zich moet aftekenen */
.ls-section--soft {
  background: var(--color-surface);
  color: var(--color-text);
}

.ls-section--soft p {
  color: var(--color-muted);
}

/* Goud — accentsectie, zwarte tekst.
   Gebruikt --color-gold-surface, niet het accent: zie colors.css. */
.ls-section--gold {
  background: var(--color-gold-surface);
  color: var(--color-inverted);
}

.ls-section--gold h1,
.ls-section--gold h2,
.ls-section--gold h3,
.ls-section--gold h4,
.ls-section--gold p {
  color: var(--color-inverted);
}

.ls-section--gold p {
  opacity: .92;
}

/* Bone — licht vlak, voor formulieren en rustige blokken */
.ls-section--light {
  background: var(--color-bone-surface);
  color: var(--color-inverted);
}

.ls-section--light h1,
.ls-section--light h2,
.ls-section--light h3,
.ls-section--light h4 {
  color: var(--color-inverted);
}

.ls-section--light p {
  color: var(--color-inverted-muted);
}


/* =========================================================
   Sectie-overgangen

   --overlap  schuift met een afgeronde bovenkant over de vorige
              sectie heen, met schaduw omhoog. Gebruik dit bij een
              wissel van context (donker → goud, donker → bone).
   --inset    staat als een los, afgerond blok in de marge.
========================================================= */

.ls-section--overlap {
  z-index: var(--z-base);
  margin-top: calc(var(--space-4xl) * -1);
  border-radius: var(--radius-section) var(--radius-section) 0 0;
  box-shadow: var(--shadow-overlap);
}

.ls-section--inset {
  z-index: var(--z-base);
  margin-inline: var(--ls-gutter);
  border-radius: var(--radius-section);
  padding-inline: 0;
}

@media (max-width: 760px) {
  .ls-section--inset {
    margin-inline: var(--space-sm);
  }
}


/* =========================================================
   Section title — intro van een sectie
========================================================= */

.ls-section-title {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin-bottom: var(--space-3xl);
}

.ls-section-title--center {
  align-items: center;
  text-align: center;
}

.ls-section-title h2,
.ls-section-title h3,
.ls-section-title .lead,
.ls-section-title p {
  margin: 0;
}

.ls-section-title .kicker {
  margin-bottom: var(--space-md);
}

/* Titelrij: kop links, link rechts — veelgebruikt patroon */
.ls-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-2xl);
  flex-wrap: wrap;
  margin-bottom: var(--space-3xl);
}

.ls-section-head h2 {
  max-width: 14ch;
}


/* Streepje onder een sectietitel */
.ls-title-underline {
  display: block;
  width: 48px;
  height: 3px;
  background: var(--color-accent);
  border-radius: var(--radius-xs);
}

.ls-section-title--center .ls-title-underline {
  margin-inline: auto;
}


/* =========================================================
   Accentlijn — scheidt twee blokken, loopt uit bij scroll
========================================================= */

.ls-rule {
  height: 2px;
  background: rgba(207, 181, 59, .18);
  margin-bottom: clamp(50px, 6vw, 80px);
  position: relative;
  overflow: hidden;
}

.ls-rule i {
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-line) var(--ease-out);
}

.ls-rule.is-in i {
  transform: scaleX(1);
}


/* =========================================================
   Highlight woord in een kop
========================================================= */

.ls-highlight {
  background: transparent;
  color: var(--color-accent);
  font-style: normal;
}