/* Componenten — Project Leonidas
 *
 * Gedrag en toestand die Bricks niet op een Global Class kan zetten:
 * actief/inactief, zichtbaar/verborgen, hover. Alle waarden komen uit
 * tokens.css - hier staat geen enkele harde kleur of maat.
 */

/* ------------------------------------------------------------- PIJLERTABS */

/* Eén lijn onder de tabs, over de volle breedte van de inhoud. Het paneel
   eronder heeft zelf géén rand meer: tabrij (995px, gekrompen tot zijn inhoud)
   en paneel (640px) gaven samen twee lijnen van verschillende lengte. */
.pijler-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--pl-space-8);
  width: 100%;
  border-bottom: var(--pl-lijn) solid var(--pl-goud-600);
}

.pijler-tab {
  flex: none;
  cursor: pointer;
  background: none;
  border: 0;
  /* Ruimte voor de gouden bovenrand die bij activatie verschijnt, zodat de
     tab niet verspringt op het moment dat je hem aanklikt. */
  border-top: var(--pl-lijn-dik) solid transparent;
  color: inherit;
  font-family: inherit;
  text-align: left;
  transition: color 0.2s, border-color 0.2s;
}

.pijler-tab:hover { color: var(--pl-goud-300); }

.pijler-tab[aria-selected="true"] {
  border-top-color: var(--pl-goud-500);
  color: var(--pl-goud-400);
}

.pijler-tab .pijler-cijfer {
  display: block;
  font-size: var(--pl-fs-eyebrow);
  letter-spacing: var(--pl-ls-eyebrow);
  color: var(--accent, var(--pl-goud-500));
}

.pijler-tab .pijler-naam {
  display: block;
  font-family: var(--pl-font-kop);
  font-size: var(--pl-fs-pijler);
  line-height: var(--pl-lh-h3);
  white-space: nowrap;
}

.pijler-paneel[hidden] { display: none; }

.pijler-paneel { max-width: var(--pl-breedte-tekst); }

/* De fundering: één brede balk over de volle inhoudsbreedte, met lucht eronder. */
.fundering {
  width: 100%;
  margin-bottom: var(--pl-fundering-tekst);
}

/* Mobiel: de tabs als één horizontaal schuivende rij in plaats van vier
   rommelige rijen. Snap per tab, en de rechterrand vervaagt zodat zichtbaar is
   dat er meer is. pijlers.js schuift de actieve tab in beeld. */
@media (max-width: 767px) {
  .pijler-tabs {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, black 80%, transparent 100%);
  }

  .pijler-tabs::-webkit-scrollbar { display: none; }

  .pijler-tab { scroll-snap-align: start; }
}

/* Zonder JS moeten alle panelen leesbaar zijn in plaats van allemaal dicht. */
.geen-js .pijler-paneel { display: block; }
.geen-js .pijler-tabs   { display: none; }

/* ---------------------------------------------------------------- LIJNWERK */

/* Eyebrow met een gouden streep van 30px ervoor. Streep in currentColor, zodat
   hij de accentkleur van de sectie volgt (goud-500 op donker, goud-700 op cream). */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--pl-eyebrow-streep-ruimte);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: var(--pl-eyebrow-streep);
  height: var(--pl-lijn);
  background-color: currentColor;
}

/* Gouden haarlijn tussen twee secties, in plaats van een harde wissel. */
.brxe-section + .brxe-section {
  border-top: var(--pl-lijn) solid var(--pl-goud-600);
}

/* ----------------------------------------------------------------- KNOPPEN */

/* De pijl hoort bij de knopstijl, niet bij de knoptekst: zo staat hij op elke
   knop gelijk en blijft de tekst in Bricks gewoon "Plan een gesprek". */
.knop-primair::after,
.knop-secundair::after {
  content: "\2192";          /* → */
  display: inline-block;
  margin-left: 0.8em;
  transition: transform 0.2s;
}

.knop-primair,
.knop-secundair {
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.knop-primair:hover  { background-color: var(--pl-goud-400); }
.knop-secundair:hover { border-color: var(--pl-goud-500); color: var(--pl-goud-300); }
.knop-primair:hover::after,
.knop-secundair:hover::after { transform: translateX(4px); }

/* ------------------------------------------------------- BEELDPLAATSHOUDER */

.beeld-plaatshouder {
  /* Verhouding van een staand portret; houdt de pagina stabiel tot het
     echte beeld er is, zodat de layout straks niet verspringt. */
  aspect-ratio: 4 / 5;
  color: var(--pl-goud-600);
  font-size: var(--pl-fs-eyebrow);
  letter-spacing: var(--pl-ls-eyebrow);
  text-transform: uppercase;
  text-align: center;
}

/* Een echt beeld: geen plaatshouder-stijl, het beeld bepaalt zelf de hoogte.
   De verhouding zit in de width/height van de <img> (4:5), dus er verspringt
   niets terwijl het laadt. */
.foto img {
  display: block;
  width: 100%;
  height: auto;
}

/* Tekst over beeld krijgt altijd een donkere overlay - staat zo in het
   design system. Deze wrapper is de plek waar dat straks gebeurt. */
.beeld-met-tekst { position: relative; }

.beeld-met-tekst::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--pl-ink) 0%,
    color-mix(in srgb, var(--pl-ink) 55%, transparent) 60%,
    transparent 100%
  );
  pointer-events: none;
}

/* --------------------------------------------------------------- KOLOMMEN */

/* Twee kolommen (spiegel, weggever) en foto + tekst (Quincy). Grid met gap in
   ons eigen CSS-bestand: een gap via Bricks-instellingen komt niet in de CSS. */
.kolommen,
.kolommen-foto {
  display: grid;
  align-items: center;
}

.kolommen      { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--pl-kolom-gap); }
.kolommen-foto { grid-template-columns: var(--pl-foto-breed) minmax(0, 1fr); column-gap: var(--pl-foto-gap); }

/* Laatste element in een kolom: geen marge die de verticale centrering scheeftrekt. */
:is(.kolommen, .kolommen-foto) > * > :last-child { margin-bottom: 0; }

.kolommen-foto .beeld-plaatshouder { width: 100%; }

@media (max-width: 900px) {
  .kolommen,
  .kolommen-foto { grid-template-columns: minmax(0, 1fr); row-gap: var(--pl-space-48); }
}

/* ---------------------------------------------------------------- PARTNERS */

/* Partnerblok: smallere fotokolom dan bij Quincy (de bronfoto's laten niet meer
   toe) en om en om gespiegeld, zodat de pagina niet als een lijst leest. */
.partner {
  grid-template-columns: var(--pl-partner-foto) minmax(0, 1fr);
  align-items: start;
}

.partner + .partner { margin-top: var(--pl-partner-gap); }

/* foto-rechts spiegelt het blok. De kolombreedte hangt af van het soort blok:
   een partnerportret is smaller dan een sfeerbeeld naast lopende tekst. */
.foto-rechts > .foto { order: 2; }
.kolommen-foto.foto-rechts { grid-template-columns: minmax(0, 1fr) var(--pl-foto-breed); }

/* Een partnerblok draagt álle drie de classes (kolommen-foto partner
   foto-rechts). Met alleen `.partner.foto-rechts` won de regel hierboven op
   bronvolgorde - gelijke specificiteit - en kreeg Joseph een kolom van 550px
   voor een bronfoto van 300px, dus zichtbaar opgeschaald. Vandaar de derde
   class, en vandaar dat deze regel ná die van kolommen-foto staat. */
.partner.foto-rechts,
.kolommen-foto.partner.foto-rechts { grid-template-columns: minmax(0, 1fr) var(--pl-partner-foto); }

/* Functietitel onder de naam - zelfde stijl als de ondertitel bij een stap. */
.rol {
  margin: 0 0 var(--pl-space-16);
  font-family: var(--pl-font-accent);
  font-style: italic;
  font-size: var(--pl-fs-intro);
  color: var(--accent, var(--pl-goud-500));
}

/* Statuslabel met rand. Zelfde vorm als op een kaart, maar niet onderaan
   vastgezet: hier staat het gewoon in de tekstkolom. */
.status {
  display: inline-block;
  margin: 0;
  padding: var(--pl-status-y) var(--pl-status-x);
  border: var(--pl-lijn) solid var(--pl-rand-status);
  color: var(--accent, var(--pl-goud-500));
  font-size: var(--pl-fs-status);
  font-weight: var(--pl-tekst-vet);
  letter-spacing: var(--pl-ls-knop);
  line-height: var(--pl-lh-knop);
  text-transform: uppercase;
}

@media (max-width: 900px) {
  /* Onder elkaar: de foto weer eerst, anders staat hij bij de ene partner
     boven de tekst en bij de andere eronder. */
  .partner,
  .partner.foto-rechts,
  .kolommen-foto.foto-rechts { grid-template-columns: minmax(0, 1fr); }
  .foto-rechts > .foto { order: 0; }
  .partner > .foto { max-width: var(--pl-partner-foto); }
}

/* ----------------------------------------------------------------- KADERS */

/* De zeven spiegelzinnen: uitspraken, geen lijst. Eén kader per zin. */
.kaders {
  display: flex;
  flex-direction: column;
  gap: var(--pl-kader-gap);
}

.kader {
  display: flex;
  align-items: baseline;
  gap: var(--pl-space-16);
  margin: 0;
  padding: var(--pl-kader-y) var(--pl-kader-x);
  border: var(--pl-lijn) solid var(--pl-rand-zacht);
  background-color: var(--pl-vlak-zacht);
  font-size: var(--pl-fs-kader);
  line-height: var(--pl-lh-kader);
}

.kader::before {
  content: "\2726";           /* ✦ */
  flex: none;
  color: var(--accent, var(--pl-goud-500));
  font-size: var(--pl-fs-kader-icoon);
}

/* ---------------------------------------------------------------- KAARTEN */

/* Een kleine regel vlak boven een eyebrow (bv. "Elk onderdeel is een stuk van
   de Agoge.") heeft eigen lucht nodig, anders plakt hij tegen de streep. */
.klein.brxe-text + .eyebrow.brxe-text-basic { margin-top: var(--pl-space-16); }

/* Het ecosysteem leest als pad: drie stappen, dan de poort over de volle
   breedte, dan wat erna komt. Vandaar drie kolommen en niet vijf. */
.kaarten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pl-kaart-gap);
  margin-top: var(--pl-tekst-knop-groot);
}

.kaarten > .pad-poort { grid-column: 1 / -1; margin: 0; }

@media (max-width: 1100px) { .kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .kaarten { grid-template-columns: minmax(0, 1fr); } }

.kaart {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--pl-kaart-y) var(--pl-kaart-x);
  border: var(--pl-lijn) solid var(--pl-rand-zacht);
  background-color: var(--pl-vlak-zacht);
}

/* Klikbare productkaart.

   De link zit om de kaarttitel en wordt hier over de hele kaart uitgerekt.
   Daarmee is het klikdoel de hele kaart, terwijl een schermlezer één link met
   de productnaam voorleest - niet een leeg blok. Tot 21 oktober linkten deze
   kaarten nergens heen: vijf producten op de homepage, geen enkele klikbaar. */
.kaart-link { position: relative; transition: border-color .2s ease; }
.kaart-link .kaart-titel a { color: inherit; text-decoration: none; }
.kaart-link .kaart-titel a::after { content: ""; position: absolute; inset: 0; }
.kaart-link:hover { border-color: var(--pl-rand-status); }
.kaart-link:hover .kaart-titel { color: var(--accent, var(--pl-goud-500)); }

/* focus-within en niet :focus: het element dat de focus krijgt is de link in
   de titel, de rand hoort om de hele kaart te komen. */
.kaart-link:focus-within { outline: var(--pl-lijn) solid var(--pl-goud-500); outline-offset: 2px; }
.kaart-link .kaart-titel a:focus-visible { outline: none; }

.kaart-nummer {
  margin: 0 0 var(--pl-space-16);
  font-family: var(--pl-font-kop);
  font-size: var(--pl-fs-kaart-nummer);
  line-height: 1;
  color: var(--pl-kaart-nummer-kleur);
}

.kaart-titel {
  margin: 0 0 var(--pl-kaart-titel-regel);
  font-size: var(--pl-fs-kaart-titel);
  line-height: var(--pl-lh-kaart-titel);
  letter-spacing: var(--pl-ls-kaart-titel);
}

.kaart-regel {
  margin: 0 0 var(--pl-space-24);
  font-size: var(--pl-fs-kaart-regel);
  line-height: var(--pl-lh-tekst);
}

.kaart-status {
  margin: auto 0 0;            /* statuslabels op één lijn onderaan de kaarten */
  padding: var(--pl-status-y) var(--pl-status-x);
  border: var(--pl-lijn) solid var(--pl-rand-status);
  color: var(--accent, var(--pl-goud-500));
  font-size: var(--pl-fs-status);
  font-weight: var(--pl-tekst-vet);
  letter-spacing: var(--pl-ls-knop);
  line-height: var(--pl-lh-knop);
  text-transform: uppercase;
}

/* ------------------------------------------------------------- FORMULIEREN */

.formulier {
  display: flex;
  flex-direction: column;
  gap: var(--pl-veld-gap);
  margin-bottom: var(--pl-space-16);   /* ruimte tot de toestemmingstekst */
}

.formulier input {
  width: 100%;
  padding: var(--pl-veld-y) var(--pl-veld-x);
  background-color: var(--pl-vlak-veld);
  border: var(--pl-lijn) solid var(--pl-rand-veld);
  color: inherit;
  font-family: var(--pl-font-tekst);
  font-size: var(--pl-fs-veld);
  letter-spacing: var(--pl-ls-veld);
}

.formulier input::placeholder { color: inherit; opacity: 0.5; }
.formulier input:focus-visible { outline: var(--pl-lijn) solid var(--pl-goud-500); outline-offset: 2px; }
/* De knop in het formulier is een gewone <button>, geen Bricks-element. Bricks
   schrijft de class-CSS als .knop-primair.brxe-button en die raakt deze knop
   dus niet - vandaar dezelfde stijl hier, uit dezelfde tokens. */
.formulier button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pl-knop-y) var(--pl-knop-x);
  border: 0;
  background-color: var(--pl-goud-500);
  color: var(--pl-ink);
  font-family: var(--pl-font-tekst);
  font-size: var(--pl-fs-knop);
  font-weight: var(--pl-tekst-vet);
  letter-spacing: var(--pl-ls-knop);
  line-height: var(--pl-lh-knop);
  text-transform: uppercase;
  cursor: pointer;
}

.visueel-verborgen {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ HEADER */

.site-header {
  padding: var(--pl-header-y) var(--pl-sectie-x);
  background-color: var(--pl-ink);
  color: var(--pl-cream);
  border-bottom: var(--pl-lijn) solid var(--pl-goud-600);
  --accent: var(--pl-goud-500);
}

.header-rij {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pl-nav-gap);
}

.merk {
  display: inline-flex;
  align-items: center;
  gap: var(--pl-space-16);
  color: inherit;
  text-decoration: none;
  font-family: var(--pl-font-kop);
  font-size: var(--pl-fs-kaart-titel);
  letter-spacing: var(--pl-ls-kaart-titel);
  text-transform: uppercase;
}

.merk img { flex: none; width: var(--pl-logo); height: var(--pl-logo); }

.header-nav ul,
.site-voet ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-nav > nav > ul {
  display: flex;
  align-items: center;
  gap: var(--pl-nav-gap);
  line-height: var(--pl-lh-eyebrow);
}

.header-nav a,
.merk { white-space: nowrap; }

/* base.css zet 8px tussen lijstitems; in een horizontaal menu duwt dat alle
   items behalve het eerste 4px omlaag. */
.header-nav > nav > ul > li { margin-top: 0; }

.header-nav a,
.site-voet li a,
.site-voet li span {
  color: var(--pl-tekst-zacht);
  text-decoration: none;
  font-size: var(--pl-fs-nav);
  font-weight: var(--pl-tekst-medium);
  letter-spacing: var(--pl-ls-nav);
  text-transform: uppercase;
  transition: color 0.2s;
}

.header-nav a:hover,
.header-nav a:focus-visible,
.site-voet a:hover,
.site-voet a:focus-visible { color: var(--accent); }

/* Aanbod-uitklapper: opent bij hover en bij toetsenbordfocus. */
.header-nav .heeft-sub { position: relative; }

.header-nav .sub {
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--pl-space-16));
  z-index: 10;
  min-width: max-content;
  padding: var(--pl-space-16);
  background-color: var(--pl-ink);
  border: var(--pl-lijn) solid var(--pl-rand-zacht);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s;
}

.header-nav .sub li + li { margin-top: var(--pl-space-16); }

.header-nav .heeft-sub:hover .sub,
.header-nav .heeft-sub:focus-within .sub {
  opacity: 1;
  visibility: visible;
}

/* Kleinere knop in de header. Specifieker dan Bricks' .knop-secundair.brxe-button. */
.site-header .knop-secundair.brxe-button {
  padding: var(--pl-knop-klein-y) var(--pl-knop-klein-x);
  font-size: var(--pl-fs-nav);
  letter-spacing: var(--pl-ls-nav);
  margin-right: 0;
  flex: none;            /* niet laten knijpen door de flexrij */
  white-space: nowrap;   /* anders breekt de knoptekst over twee regels */
}

.site-header .knop-secundair.brxe-button::after { content: none; }

/* ------------------------------------------------------------ MOBIEL MENU */

.menu-knop { display: none; }

/* Kopie van de afspraakknop in de navigatielijst: alleen voor het mobiele paneel. */
.header-nav .menu-cta { display: none; }

@media (max-width: 1100px) {
  /* Hamburger (toegevoegd door menu.js). */
  .menu-knop {
    position: relative;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--pl-space-4);
    width: var(--pl-menu-knop);
    height: var(--pl-menu-knop);
    margin-left: auto;
    padding: 0;
    background: none;
    border: 0;
    color: var(--pl-cream);
    cursor: pointer;
  }

  .menu-knop span {
    display: block;
    width: var(--pl-menu-streep);
    height: var(--pl-menu-streep-dik);
    background-color: currentColor;
    transition: transform 0.25s, opacity 0.2s;
  }

  .menu-knop:focus-visible { outline: var(--pl-lijn) solid var(--pl-goud-500); }

  /* Kruisje als het menu open is. */
  .menu-open .menu-knop span:nth-child(1) { transform: translateY(calc(var(--pl-space-4) + var(--pl-menu-streep-dik))) rotate(45deg); }
  .menu-open .menu-knop span:nth-child(2) { opacity: 0; }
  .menu-open .menu-knop span:nth-child(3) { transform: translateY(calc(-1 * (var(--pl-space-4) + var(--pl-menu-streep-dik)))) rotate(-45deg); }

  /* Afspraakknop en navigatie uit de rij; de knop staat onderaan in het paneel. */
  .site-header .header-rij > .brxe-button,
  .header-nav { display: none; }

  .site-header.menu-open .header-rij { position: relative; z-index: 1001; }

  /* Logo en knop boven het paneel houden (het paneel zit in dezelfde rij). */
  .site-header.menu-open .header-merk { position: relative; z-index: 1001; }

  .site-header.menu-open .header-nav {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    overflow-y: auto;
    padding: var(--pl-space-128) var(--pl-sectie-x) var(--pl-space-48);
    background-color: var(--pl-ink);
  }

  .site-header.menu-open .header-nav > nav > ul {
    flex-direction: column;
    gap: var(--pl-space-24);
    text-align: center;
  }

  .site-header.menu-open .header-nav > nav > ul > li:not(.menu-cta) > a {
    font-family: var(--pl-font-kop);
    font-size: var(--pl-fs-menu);
    font-weight: var(--pl-kop-gewicht);
    letter-spacing: var(--pl-ls-kaart-titel);
    line-height: var(--pl-lh-h3);
    color: var(--pl-cream);
  }

  /* Aanbod: label in eyebrowstijl met de onderliggende pagina's eronder open. */
  .site-header.menu-open .header-nav > nav > ul > li.heeft-sub > a {
    font-family: var(--pl-font-tekst);
    font-size: var(--pl-fs-eyebrow);
    letter-spacing: var(--pl-ls-eyebrow);
    color: var(--accent);
  }

  .site-header.menu-open .header-nav .sub {
    position: static;
    min-width: 0;
    margin-top: var(--pl-space-16);
    padding: 0;
    background: none;
    border: 0;
    opacity: 1;
    visibility: visible;
  }

  .site-header.menu-open .header-nav .menu-cta { display: block; margin-top: var(--pl-space-24); }
  .site-header.menu-open .menu-cta .brxe-button { margin-right: 0; }

  /* Zonder JS geen hamburger: dan blijft de navigatie gewoon zichtbaar. */
  .geen-js .header-nav { display: block; }
  .geen-js .header-rij { flex-wrap: wrap; }
  .geen-js .header-nav > nav > ul { flex-wrap: wrap; row-gap: var(--pl-space-16); }
}

/* Pagina niet laten meescrollen achter het open menu. */
.menu-vast,
.menu-vast body { overflow: hidden; }

/* ------------------------------------------------------------------ FOOTER */

.site-voet {
  padding: var(--pl-voet-boven) var(--pl-sectie-x) var(--pl-voet-onder);
  background-color: var(--pl-ink);
  color: var(--pl-cream);
  border-top: var(--pl-lijn) solid var(--pl-goud-600);
  --accent: var(--pl-goud-500);
}

.footer-kolommen {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--pl-voet-kolom-gap);
  margin-bottom: var(--pl-voet-boven);
}

@media (max-width: 900px) { .footer-kolommen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-kolommen { grid-template-columns: minmax(0, 1fr); gap: var(--pl-space-48); } }

.site-voet li { line-height: var(--pl-lh-knop); }
.site-voet li + li { margin-top: var(--pl-space-16); }

.voet-kop {
  margin: 0 0 var(--pl-space-24);
  color: var(--accent);
  font-size: var(--pl-fs-eyebrow);
  font-weight: var(--pl-tekst-medium);
  letter-spacing: var(--pl-ls-eyebrow);
  text-transform: uppercase;
}

.voet-slogan {
  margin: var(--pl-space-16) 0 0;
  max-width: var(--pl-breedte-tekst);
  font-family: var(--pl-font-accent);
  font-style: italic;
  font-size: var(--pl-fs-tekst);
  color: var(--pl-tekst-zacht);
}

.voet-onderbalk {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--pl-space-16);
  padding-top: var(--pl-voet-onder);
  border-top: var(--pl-lijn) solid var(--pl-rand-zacht);
  color: var(--pl-tekst-zacht);
  font-size: var(--pl-fs-klein);
  letter-spacing: var(--pl-ls-klein);
}

.voet-onderbalk p { margin: 0; }
.voet-onderbalk a { font-size: inherit; letter-spacing: inherit; text-transform: none; }

/* -------------------------------------------------------------------- HERO */

/* Achtergrond: gouden gloed + verloop, raster, ring en portret als lagen achter
   de inhoud. Alle lagen zijn decoratief (aria-hidden in de markup). */
.sectie-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-image: radial-gradient(80% 60% at 50% 40%, var(--pl-hero-gloed) 0%, transparent 70%);
}

.hero-laag {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hero-raster {
  background-image:
    linear-gradient(var(--pl-hero-raster-lijn) var(--pl-lijn), transparent var(--pl-lijn)),
    linear-gradient(90deg, var(--pl-hero-raster-lijn) var(--pl-lijn), transparent var(--pl-lijn));
  background-size: var(--pl-hero-raster) var(--pl-hero-raster);
  /* Masker werkt op dekking, niet op kleur: het raster vervaagt naar de randen. */
  mask-image: radial-gradient(80% 80%, black 0%, transparent 100%);
}

.hero-ring {
  inset: auto;
  top: 50%;
  left: 50%;
  width: var(--pl-hero-ring);
  height: var(--pl-hero-ring);
  transform: translate(-50%, -50%);
  border: var(--pl-lijn) solid var(--pl-hero-ring-lijn);
  border-radius: 50%;
}

/* Portret rechts, weggevaagd naar ink zodat gecentreerde tekst leesbaar blijft
   ("tekst over beeld altijd met donkere overlay"). Tot de foto er is een zacht
   vlak met een label; de foto komt later als achtergrond op dit element. */
.hero-portret {
  left: auto;
  width: var(--pl-hero-portret);
  background-color: var(--pl-vlak-zacht);
  /* Achtergrond en geen <img>: de laag heeft een masker en moet de sectie
     vullen. Daarom ook nooit lazy - wel voorgeladen in functions.php.
     image-set() kiest avif waar het kan en webp waar niet, 1x of 2x. */
  background-image: url("/wp-content/uploads/leonidas/hero-quincy-900.webp");
  background-image: image-set(
    url("/wp-content/uploads/leonidas/hero-quincy-900.avif") type("image/avif") 1x,
    url("/wp-content/uploads/leonidas/hero-quincy-1800.avif") type("image/avif") 2x,
    url("/wp-content/uploads/leonidas/hero-quincy-900.webp") type("image/webp") 1x,
    url("/wp-content/uploads/leonidas/hero-quincy-1800.webp") type("image/webp") 2x
  );
  background-size: cover;
  background-position: center top;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--pl-space-32);
}

/* Het portret vervaagt zelf naar links en onder (masker op dekking). Een ink-
   overlay erover zou de gouden gloed van de sectie afdekken en een harde rand
   geven. Een lichte donkere laag houdt de tekst erover leesbaar. */
.hero-portret {
  mask-image:
    linear-gradient(to right, transparent 0%, black 55%),
    linear-gradient(to top, transparent 0%, black 35%);
  mask-composite: intersect;
}

.hero-portret::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--pl-ink) 35%, transparent);
}

.hero-portret p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--pl-goud-600);
  font-size: var(--pl-fs-status);
  letter-spacing: var(--pl-ls-knop);
  text-transform: uppercase;
}

@media (max-width: 767px) {
  /* De laag is hier 100% breed (390px), dus 900px dekt ook een 2x-scherm. Zonder
     deze regel koos image-set() de 2x-versie en haalde de browser naast de
     voorgeladen 900px ook nog de 1800px op. */
  .hero-portret {
    background-image: url("/wp-content/uploads/leonidas/hero-quincy-900.webp");
    background-image: image-set(
      url("/wp-content/uploads/leonidas/hero-quincy-900.avif") type("image/avif") 1x,
      url("/wp-content/uploads/leonidas/hero-quincy-900.webp") type("image/webp") 1x
    );
  }

  .hero-portret::after { background-color: color-mix(in srgb, var(--pl-ink) 80%, transparent); }
  .hero-portret p { display: none; }   /* label zou dwars door de kop lopen */
}

.hero-logo {
  display: block;
  width: var(--pl-logo-hero);
  height: var(--pl-logo-hero);
  margin: 0 auto var(--pl-logo-kop);
}

/* In de hero volgt op de kop een gouden streep; de streep draagt de ruimte. */
.sectie-hero .kop-hero.brxe-heading { margin-bottom: var(--pl-kop-tekst); }

.scheiding {
  width: var(--pl-scheiding);
  height: var(--pl-lijn);
  margin: 0 auto var(--pl-kop-tekst);
  background: linear-gradient(90deg, transparent, var(--accent, var(--pl-goud-500)), transparent);
}

/* ------------------------------------------------------------- GECENTREERD */

.gecentreerd {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.gecentreerd .eyebrow { justify-content: center; }
.gecentreerd :is(.intro, .tekst, .tekstkolom, .citaat) { margin-left: auto; margin-right: auto; }

/* Knoprij: breekt op smalle schermen, en in een gecentreerde context zonder
   marge rechts (anders staat de rij scheef). */
.knoprij { flex-wrap: wrap; row-gap: var(--pl-knop-knop); }
/* Kleine tekst direct onder een knop (de spamnoot op /bedankt) plakte tegen
   de knop aan: een knoprij heeft geen ondermarge. */
.knoprij + .klein { margin-top: var(--pl-space-16); }
.gecentreerd .knoprij { justify-content: center; column-gap: var(--pl-knop-knop); }
.gecentreerd .knoprij .brxe-button { margin-right: 0; }

@media (max-width: 767px) {
  .knoprij .brxe-button { max-width: 100%; white-space: normal; text-align: center; }
}

/* ------------------------------------------------------------ TESTIMONIALS */

/* Raster dat later drie getuigenissen aankan; met één staat hij gecentreerd
   op 800px. Bij drie: grid-template-columns uitbreiden en max-width weghalen. */
.getuigen {
  display: grid;
  gap: var(--pl-kaart-gap);
  width: 100%;
  max-width: var(--pl-citaat-kader);
  margin-inline: auto;
}

.getuigen .kaart {
  align-items: center;
  padding: var(--pl-citaat-pad);
  text-align: center;
}

.getuigen blockquote {
  margin: 0 0 var(--pl-space-24);
  padding: 0;
  border: 0;               /* browser/Bricks-standaard grijze rand links weg */
}

/* --------------------------------------------------------------- STIJLGIDS */

/* Kleurstaaltjes in een grid dat meebreekt: op desktop 4 per rij (twee gelijke
   rijen voor acht kleuren), op mobiel 2. */
.staaltjes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pl-space-24);
  width: 100%;
}

@media (max-width: 767px) {
  .staaltjes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- SUBPAGINA */

/* Paginahero: dezelfde raster- en gloedlaag als de homepage (.sectie-hero),
   alleen de kopmaat verschilt (--pl-fs-pagina, via de class kop-pagina). */

/* ------------------------------------------------- DIEPTE OP DONKER VLAK */

/* Korrel en gloed (merk-review 20 sep). Het logo heeft zelf korrel; dezelfde
   ruis over de donkere secties maakt van vlak zwart een materiaal. De gloed
   geeft het vlak een lichtbron in plaats van een achtergrondkleur. Geen nieuwe
   kleur: alleen goud en ink uit de tokens.

   Allebei als background-image op de sectie zelf (de kleur komt uit de Bricks-
   class, dus die botst niet). De ruis is een SVG-filter als data-URI - geen
   extra bestand, geen netwerkverzoek - ontzadigd met feColorMatrix, want
   feTurbulence geeft anders kleurspikkels, en met de dekking in de SVG zelf,
   zodat ::before en ::after vrij blijven voor de ruit op de scheidingslijn. */
.sectie-donker {
  position: relative;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)' opacity='0.035'/%3E%3C/svg%3E"),
    radial-gradient(70% 90% at 12% 0%, color-mix(in srgb, var(--pl-goud-500) var(--pl-gloed), transparent), transparent 65%);
  background-repeat: repeat, no-repeat;
}

/* De hero heeft zijn eigen lagen (raster, ring, portret); daar hoort geen
   tweede gloed overheen. De korrel blijft wel staan. */
.sectie-hero {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)' opacity='0.035'/%3E%3C/svg%3E");
}

/* De haarlijn tussen twee secties krijgt in het midden een ruit. Klein detail,
   en precies het soort detail waarvan mensen zeggen "hier is over nagedacht".
   De ruit dekt de lijn af met de eigen sectiekleur, dus geen kruisje. */
.sectie-cream { position: relative; }

.sectie-donker::before,
.sectie-cream::before {
  content: "\25C6";                      /* ◆ */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--pl-fs-klein);
  line-height: 1;
  color: var(--pl-goud-600);
  pointer-events: none;
}

/* De hero staat bovenaan: daar is geen lijn om te onderbreken. */
.sectie-hero::before { content: none; }

/* Stappen: fasen, bewegingen, dagen, pijlers. Cijfer links, inhoud rechts,
   haarlijn ertussen. */
.stappen {
  width: 100%;
  margin-top: var(--pl-kop-tekst);
}

.stap {
  display: grid;
  grid-template-columns: var(--pl-stap-nummer) minmax(0, 1fr);
  column-gap: var(--pl-space-32);
  padding: var(--pl-stap-gap) 0;
  border-top: var(--pl-lijn) solid var(--pl-rand-zacht);
}

.stap:last-child { padding-bottom: 0; }

/* Spookcijfer: het Romeinse cijfer als achtergrondtypografie. Vult het vlak,
   ordent de pagina en kost geen nieuwe kleur. Komt uit data-nummer, zodat het
   cijfer maar op één plek in de JSON staat. */
.stap::before {
  content: attr(data-nummer);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--pl-font-kop);
  font-size: var(--pl-spook);
  line-height: 0.8;
  color: var(--accent, var(--pl-goud-500));
  opacity: var(--pl-spook-dekking);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.sectie-cream .stap::before { opacity: var(--pl-spook-cream); }

/* overflow: het spookcijfer is hoger dan een korte stap en zou anders in de
   buurstap doorlopen. */
.stap { position: relative; overflow: hidden; }
.stap > * { position: relative; z-index: 1; }

.stap-nummer {
  margin: 0;
  font-family: var(--pl-font-kop);
  font-size: var(--pl-fs-stap-nummer);
  line-height: 1;
  color: var(--accent, var(--pl-goud-500));
}

.stap-titel.brxe-heading {
  margin: 0 0 var(--pl-space-8);
  font-size: var(--pl-fs-h3);
  line-height: var(--pl-lh-h3);
  letter-spacing: var(--pl-ls-h3);
}

.stap-sub {
  margin: 0 0 var(--pl-space-16);
  font-family: var(--pl-font-accent);
  font-style: italic;
  font-size: var(--pl-fs-intro);
  color: var(--accent, var(--pl-goud-500));
}

/* "Zo voelt het"-regel: 70% van de tekstkleur van de sectie, dus cream op
   donker en ink op cream. Een vaste cream zou op het lichte vlak verdwijnen. */
.herkenning {
  margin: 0 0 var(--pl-space-16);
  font-family: var(--pl-font-tekst);
  font-weight: var(--pl-tekst-normaal);
  font-size: var(--pl-fs-tekst);
  line-height: var(--pl-lh-tekst);
  color: color-mix(in srgb, currentColor 70%, transparent);
}

.stap-inhoud > :last-child { margin-bottom: 0; }

@media (max-width: 767px) {
  .stap { grid-template-columns: minmax(0, 1fr); row-gap: var(--pl-space-8); }
}

/* Doorgang: de zeven fasen om en om links en rechts, met één gouden lijn die
   er verticaal doorheen loopt. Zo lees je dat het een doorgang is, geen lijst. */
.doorgang {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--pl-doorgang-gap);
}

.doorgang::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - var(--pl-lijn) / 2);
  width: var(--pl-lijn);
  background-color: var(--pl-rand-zacht);
}

/* Om en om: oneven links, even rechts. nth-of-type en niet nth-child, want de
   uitgelichte zin ertussen is een <p>: met nth-child zou het ritme daarna
   omklappen. De tweede fase schuift een halve stap omlaag, zodat de kolommen
   elkaar afwisselen in plaats van naast elkaar te lopen. */
.doorgang > .stap:nth-of-type(odd)  { grid-column: 1; }
.doorgang > .stap:nth-of-type(even) { grid-column: 2; }
.doorgang > .stap:nth-of-type(2)    { margin-top: var(--pl-stap-gap); }
.doorgang > .stap { border-top: 0; padding-top: 0; }

/* De uitgelichte zin staat over beide kolommen: precies op het kantelpunt. */
.doorgang > .uitgelicht { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .doorgang { grid-template-columns: minmax(0, 1fr); }
  .doorgang::before { left: 0; }
  /* Zelfde specificiteit als de parity-regels hierboven, anders houden de even
     fasen hun tweede kolom vast en ontstaat er een lege kolom van 0px. */
  .doorgang > .stap:nth-of-type(odd),
  .doorgang > .stap:nth-of-type(even) { grid-column: 1; padding-left: var(--pl-space-32); }
  .doorgang > .stap:nth-of-type(2) { margin-top: 0; }
  .doorgang > .uitgelicht { padding-left: var(--pl-space-32); }
}

/* Tijdlijn: één fase per rij, cijfer links, één doorlopende lijn ernaast.
   Vervangt de zigzag uit de merk-review (Website_Prompt 21 sep wint). */
.tijdlijn {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.tijdlijn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--pl-tijdlijn-kolom) / 2);
  width: var(--pl-lijn);
  background-color: var(--pl-rand-zacht);
}

.tijdlijn > .stap {
  grid-template-columns: var(--pl-tijdlijn-kolom) minmax(0, 1fr);
  border-top: 0;
  padding: 0 0 var(--pl-stap-gap);
}

/* Het cijfer staat op de lijn. Geen vlak eronder: dat tekende een zichtbaar
   rechthoekje over de gloed; de lijn loopt nu gewoon achter het cijfer door. */
.tijdlijn .stap-nummer {
  position: relative;
  z-index: 1;
  padding: var(--pl-space-8) 0;
  text-align: center;
}

@media (max-width: 767px) {
  .tijdlijn > .stap { grid-template-columns: var(--pl-tijdlijn-kolom) minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- ROUTE */

/* Eén horizontale lijn met de zeven fasen; daarboven welk onderdeel welke
   fasen dekt, en De Doorgang als verticale streep tussen V en VI. */
.route { width: 100%; margin-top: var(--pl-kop-tekst); }

.route-balken {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  row-gap: var(--pl-space-8);
  align-items: end;
}

.route-balk {
  display: flex;
  align-items: center;
  min-height: var(--pl-route-hoogte);
  padding: 0 var(--pl-space-16);
  border: var(--pl-lijn) solid var(--pl-rand-zacht);
  background-color: var(--pl-vlak-zacht);
  font-size: var(--pl-fs-status);
  letter-spacing: var(--pl-ls-knop);
  text-transform: uppercase;
}

.route-gateway     { grid-column: 2 / 3; grid-row: 1; }
.route-forge       { grid-column: 1 / 6; grid-row: 2; }
.route-brotherhood { grid-column: 6 / 8; grid-row: 2; }

/* De poort is geen product: geen vlak, alleen de streep en het woord. */
.route-poort {
  grid-column: 6 / 7;
  grid-row: 1 / 3;
  align-self: stretch;
  border-left: var(--pl-poort) solid var(--accent, var(--pl-goud-500));
  padding-left: var(--pl-space-8);
  color: var(--accent, var(--pl-goud-500));
  font-size: var(--pl-fs-status);
  letter-spacing: var(--pl-ls-knop);
  text-transform: uppercase;
}

.route-lijn {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: var(--pl-space-8) 0 0;
  padding: 0;
  list-style: none;
  border-top: var(--pl-lijn) solid var(--accent, var(--pl-goud-500));
}

.route-lijn li {
  padding-top: var(--pl-space-8);
  text-align: center;
  font-family: var(--pl-font-kop);
  font-size: var(--pl-fs-h3);
  line-height: 1;
  color: var(--accent, var(--pl-goud-500));
}

/* De vier onderdelen als rijen eronder: naam, fasen, één zin. */
.route-lijst {
  width: 100%;
  margin: var(--pl-space-48) 0 0;
}

.route-lijst > div {
  display: grid;
  grid-template-columns: var(--pl-feit-label) minmax(0, 12em) minmax(0, 1fr);
  gap: var(--pl-space-24);
  padding: var(--pl-space-16) 0;
  border-top: var(--pl-lijn) solid var(--pl-rand-zacht);
}

.route-lijst .route-naam { font-weight: var(--pl-tekst-medium); }
.route-lijst .route-fasen { color: var(--accent, var(--pl-goud-500)); }

@media (max-width: 900px) {
  /* Gestapeld, geen horizontale scroll: de balken onder elkaar, de lijn met
     de zeven cijfers eronder. */
  .route-balken { grid-template-columns: minmax(0, 1fr); }
  .route-gateway, .route-forge, .route-brotherhood { grid-column: 1; grid-row: auto; }
  .route-poort {
    grid-column: 1;
    grid-row: auto;
    border-left: 0;
    border-top: var(--pl-poort) solid var(--accent, var(--pl-goud-500));
    padding: var(--pl-space-8) 0 0;
  }
  .route-lijst > div { grid-template-columns: minmax(0, 1fr); gap: var(--pl-space-4); }
}

/* --------------------------------------------------------- DE DOORGANG */

/* Volle breedte, donker, één beeld. Geen knop: dit is geen aanbod. */
.doorgang-blok {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--pl-kolom-gap);
  align-items: center;
  width: 100%;
}

@media (max-width: 900px) {
  .doorgang-blok { grid-template-columns: minmax(0, 1fr); gap: var(--pl-space-48); }
}

/* Zolang het beeld van De Doorgang er niet is: één kolom op tekstbreedte, in
   plaats van een halve pagina leegte naast de tekst. */
.doorgang-blok.doorgang-solo {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--pl-breedte-tekst);
}

/* ------------------------------------------------------- AANBODKAARTEN */

/* Eén hoofdaanbod, één instap: de verhouding zegt al welke van de twee het is. */
.aanbodkaarten {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--pl-kaart-gap);
  align-items: start;
  width: 100%;
  margin-top: var(--pl-kop-tekst);
}

@media (max-width: 900px) { .aanbodkaarten { grid-template-columns: minmax(0, 1fr); } }

/* Drie losse zinnen onder elkaar, geen opsomming. */
.losseregels p {
  margin: 0 0 var(--pl-space-16);
  font-size: var(--pl-fs-intro);
  font-family: var(--pl-font-accent);
  font-style: italic;
}

.losseregels p:last-child { margin-bottom: 0; }

/* Eén regel vlak voor de footer. */
.naregel {
  margin: 0;
  padding-top: var(--pl-space-24);
  border-top: var(--pl-lijn) solid var(--pl-rand-zacht);
  font-size: var(--pl-fs-klein);
  letter-spacing: var(--pl-ls-klein);
}

/* ------------------------------------------------- OPENING VAN DE AGOGE */

/* Het Griekse woord als spookletters achter de kop: zelfde principe als de
   spookcijfers bij de fasen, maar dan één woord achter de h1. Komt uit
   data-woord zodat het maar op één plek in de JSON staat.
   Let op: Bebas Neue heeft geen Griekse glyphs, dus hiervoor valt de browser
   terug op de volgende familie in de stack. */
.spookwoord { position: relative; }

.spookwoord::before {
  content: attr(data-woord);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -58%);
  font-family: var(--pl-font-kop);
  font-size: var(--pl-spookwoord);
  line-height: 0.8;
  letter-spacing: var(--pl-ls-hero);
  color: var(--accent, var(--pl-goud-500));
  opacity: 0.04;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.spookwoord > * { position: relative; }

/* De intro van de openingssectie: groter dan .intro en met een eigen maximum,
   zodat de regel niet te lang wordt bij 32px. */
.intro-groot {
  margin: 0 0 var(--pl-kop-tekst);
  max-width: var(--pl-breedte-intro);
  font-family: var(--pl-font-accent);
  font-style: italic;
  font-size: var(--pl-fs-intro-groot);
  line-height: var(--pl-lh-intro-groot);
}

/* Lopende tekst in diezelfde opening: smaller en een tik groter dan standaard. */
.opening.brxe-text,
.opening {
  max-width: var(--pl-breedte-opening);
  font-size: var(--pl-fs-opening);
  line-height: var(--pl-lh-tekst);
}

/* De uitgelichte zin als eigen band: zelfde opmaak als .uitgelicht, groter.
   De 128px lucht zit in .uitgelicht zelf, dus de sectie eromheen heeft geen
   eigen padding (sectie-band). */
/* Twee klassen, want .uitgelicht staat verderop in dit bestand en wint
   anders op volgorde. */
.uitgelicht.uitgelicht-band { font-size: var(--pl-fs-band); }

/* ---------------------------------------------------------- SOCIAAL */

/* Vier kanalen als icoon. Gelijke maat, gelijke afstand, en flex-wrap zodat
   ze op een smal scherm netjes doorlopen in plaats van de kolom op te rekken. */
.sociaal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pl-sociaal-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* De footer zet `.site-voet li + li { margin-top }` op zijn lijsten; in een rij
   duwt dat alles behalve het eerste icoon omlaag. Zelfde specificiteit nodig
   (klasse + twee elementen), anders wint die regel. */
.sociaal li,
.sociaal li + li { margin: 0; }

/* `li a` en niet `a`: .site-voet li a is specifieker en zou anders de kleur
   overnemen (cream op 60%) in plaats van het goud. */
.sociaal li a {
  display: block;
  color: var(--accent, var(--pl-goud-500));
  line-height: 0;                     /* geen extra hoogte onder het icoon */
  transition: color 0.2s;
}

.sociaal svg {
  display: block;
  width: var(--pl-sociaal-icoon);
  height: var(--pl-sociaal-icoon);
}

.sociaal li a:hover,
.sociaal li a:focus-visible { color: var(--pl-goud-300); }

/* --------------------------------------------------------------- PAD */

/* Het ecosysteem als pad: de kaarten onder elkaar met de poort ertussen. */
.pad-poort {
  display: flex;
  align-items: baseline;
  gap: var(--pl-space-16);
  margin: var(--pl-space-24) 0;
  padding-left: var(--pl-space-16);
  border-left: var(--pl-poort) solid var(--accent, var(--pl-goud-500));
  color: var(--accent, var(--pl-goud-500));
  font-size: var(--pl-fs-status);
  letter-spacing: var(--pl-ls-knop);
  text-transform: uppercase;
}

/* Marge en niet gap: Bricks zet de inhoud van een tekstelement in een <p>,
   dus de spans zijn geen directe flexkinderen. */
.pad-poort span + span {
  margin-left: var(--pl-space-16);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--pl-fs-klein);
}

/* Eén uitgelichte zin per pagina: Playfair cursief, veel lucht, niets eromheen.
   Dit is het element dat een lezer onthoudt - daarom nooit twee per pagina. */
.uitgelicht {
  /* Bricks' block is een flexcontainer: zonder breedte krimpt de <p> tot de
     tekst en staat het centreren er alleen in naam in. */
  width: 100%;
  margin: 0;
  padding: var(--pl-uitgelicht-y) 0;
  font-family: var(--pl-font-accent);
  font-style: italic;
  font-size: var(--pl-fs-uitgelicht);
  line-height: 1.4;
  text-align: center;
  color: var(--accent, var(--pl-goud-500));
}

/* Proces: vier stappen naast elkaar met een pijl ertussen. Het enige echte
   proces op de site, dus ook als proces tonen. */
.proces {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pl-proces-gap);
  width: 100%;
  margin-top: var(--pl-kop-tekst);
}

.proces-stap {
  position: relative;
  margin: 0;
  padding-top: var(--pl-space-16);
  border-top: var(--pl-lijn-dik) solid var(--accent, var(--pl-goud-500));
}

.proces-stap + .proces-stap::before {
  content: "\2192";                       /* → */
  position: absolute;
  left: calc(var(--pl-proces-gap) / -2);
  top: calc(var(--pl-space-16) * -1);
  transform: translate(-50%, -50%);
  color: var(--accent, var(--pl-goud-500));
}

.proces-stap strong {
  display: block;
  font-family: var(--pl-font-kop);
  font-size: var(--pl-fs-h3);
  font-weight: var(--pl-kop-gewicht);
  letter-spacing: var(--pl-ls-h3);
  line-height: 1.1;
  margin-bottom: var(--pl-space-8);
}

@media (max-width: 900px) {
  .proces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proces-stap + .proces-stap::before { content: none; }
}

@media (max-width: 600px) { .proces { grid-template-columns: minmax(0, 1fr); } }

/* Kaartenraster dat zich vult (pijlers): drie op een rij, twee, dan één. */
.rasterkaarten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pl-kaart-gap);
  width: 100%;
  margin-top: var(--pl-kop-tekst);
}

@media (max-width: 900px) { .rasterkaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .rasterkaarten { grid-template-columns: minmax(0, 1fr); } }

/* Spookcijfer in een kaart: zelfde idee, kleiner. */
.kaart[data-nummer] { position: relative; overflow: hidden; }

.kaart[data-nummer]::before {
  content: attr(data-nummer);
  position: absolute;
  right: var(--pl-space-8);
  bottom: calc(var(--pl-space-24) * -1);
  font-family: var(--pl-font-kop);
  font-size: var(--pl-spook-kaart);
  line-height: 0.8;
  color: var(--accent, var(--pl-goud-500));
  opacity: var(--pl-spook-dekking);
  pointer-events: none;
  user-select: none;
}

.sectie-cream .kaart[data-nummer]::before { opacity: var(--pl-spook-cream); }

.kaart[data-nummer] > * { position: relative; z-index: 1; }

/* De duurste vorm krijgt een gouden rand: één blik en je ziet welke het is. */
.kaart-uitgelicht { border-color: var(--accent, var(--pl-goud-500)); }

/* De dagelijkse fundering: zes elementen op één balk in plaats van een zin. */
.fundering-rij {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pl-space-16) var(--pl-space-32);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fundering-rij li {
  display: flex;
  align-items: baseline;
  gap: var(--pl-space-8);
  font-size: var(--pl-fs-tekst);
}

.fundering-rij li::before {
  content: "\2726";                       /* ✦ */
  color: var(--accent, var(--pl-goud-500));
  font-size: var(--pl-fs-klein);
}

/* Feitenlijst (label | waarde), als <dl> in een tekstelement. */
.feiten { width: 100%; margin-top: var(--pl-kop-tekst); }

.feiten dl {
  display: grid;
  grid-template-columns: var(--pl-feit-label) minmax(0, 1fr);
  margin: 0;
}

.feiten dt,
.feiten dd {
  margin: 0;
  padding: var(--pl-space-16) 0;
  border-top: var(--pl-lijn) solid var(--pl-rand-zacht);
}

.feiten dt {
  padding-right: var(--pl-space-24);
  color: var(--accent, var(--pl-goud-500));
  font-size: var(--pl-fs-eyebrow);
  font-weight: var(--pl-tekst-medium);
  letter-spacing: var(--pl-ls-eyebrow);
  line-height: var(--pl-lh-tekst);
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .feiten dl { grid-template-columns: minmax(0, 1fr); }
  .feiten dd { border-top: 0; padding-top: 0; }
}

/* Prijskaarten: twee naast elkaar, onder elkaar op mobiel. */
.prijzen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pl-kaart-gap);
  width: 100%;
  margin-top: var(--pl-kop-tekst);
}

@media (max-width: 767px) { .prijzen { grid-template-columns: minmax(0, 1fr); } }

.prijs {
  margin: 0 0 var(--pl-space-16);
  font-family: var(--pl-font-kop);
  font-size: var(--pl-fs-prijs);
  line-height: 1;
  color: var(--accent, var(--pl-goud-500));
}

/* Tekstblok (meerdere alinea's) binnen een sectie. */
/* Opsommingen in lopende tekst (juridische pagina's). */
.tekst.brxe-text ul {
  margin: 0;
  padding-left: var(--pl-space-24);
}

.tekst.brxe-text li { margin-bottom: var(--pl-space-8); }
.tekst.brxe-text li:last-child { margin-bottom: 0; }
.tekst.brxe-text :is(ul, p) + :is(ul, p) { margin-top: var(--pl-tekstblok); }

/* Hoofdstukkop in een juridische tekst: staat vlak boven zijn eigen alinea. */
.tekstkolom > .kop-kaart.brxe-heading { margin-top: var(--pl-kop-boven); }
.tekstkolom > .kop-kaart.brxe-heading:first-child { margin-top: 0; }

:is(.tekst, .intro).brxe-text p + p { margin-top: var(--pl-tekstblok); }
:is(.tekst, .intro).brxe-text p { margin: 0; }

/* Formulier met één veld: veld en knop naast elkaar (nieuwsbrief, wachtlijst). */
.formulier.formulier-rij { flex-direction: row; flex-wrap: wrap; }
/* Directe kinderen: zonder de > raakte deze regel ook het selectievakje binnen
   .formulier-vink, met een flex-basis van 14em als gevolg - een hokje van 146px. */
.formulier.formulier-rij > input { flex: 1 1 14em; width: auto; }
.formulier.formulier-rij > button { flex: 0 0 auto; width: auto; }
.gecentreerd .formulier { width: 100%; max-width: var(--pl-breedte-tekst); margin-inline: auto; }
.formulier :is(input, textarea) { text-align: left; }   /* ook in een gecentreerde sectie */
/* Op mobiel valt de knop onder het veld: dan even breed als het veld, zodat hij
   in een gecentreerde afsluiter niet links onder gecentreerde tekst hangt. */
@media (max-width: 767px) { .formulier.formulier-rij > button { flex: 1 1 100%; } }

/* Toestemmingsvinkje en de regel over waar het adres heen gaat.

   Allebei op volle breedte: in een formulier-rij moeten ze ónder het veld en
   de knop vallen, niet ernaast. De rij heeft al flex-wrap, dus flex-basis 100%
   is genoeg. */
.formulier-vink,
.formulier-klein { flex: 1 1 100%; max-width: var(--pl-breedte-tekst); }

.formulier-vink {
  display: flex;
  color: inherit;                      /* wint van Bricks' grijze `label` */
  align-items: flex-start;
  gap: var(--pl-space-8);
  font-size: var(--pl-fs-klein);
  line-height: var(--pl-lh-klein);
  cursor: pointer;
}

/* Wint van `.formulier input` (0,2,0 tegen 0,1,1): zonder deze reset krijgt het
   hokje de volle veldbreedte, de veldrand en de veldvulling mee. */
.formulier .formulier-vink input[type="checkbox"] {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  margin-top: 0.14em;
  padding: 0;
  background: none;
  border: 0;
  accent-color: var(--accent, var(--pl-goud-500));
  cursor: pointer;
}

.formulier-klein {
  margin: 0;
  font-size: var(--pl-fs-klein);
  line-height: var(--pl-lh-klein);
  opacity: 0.72;
}

.formulier-klein a { color: var(--accent, var(--pl-goud-500)); }

.formulier textarea {
  width: 100%;
  padding: var(--pl-veld-y) var(--pl-veld-x);
  background-color: var(--pl-vlak-veld);
  border: var(--pl-lijn) solid var(--pl-rand-veld);
  color: inherit;
  font-family: var(--pl-font-tekst);
  font-size: var(--pl-fs-veld);
  letter-spacing: var(--pl-ls-veld);
  resize: vertical;
}

.formulier textarea::placeholder { color: inherit; opacity: 0.5; }

/* Melding onder het formulier, gezet door formulier.js of - zonder JavaScript -
   door de shortcode na de omleiding.

   Geen rood: er is geen vierde kleur in het palet. De bevestiging staat in de
   accentkleur, de fout staat op volle tekstkracht met een gouden streep ervoor,
   en de tekst zelf zegt wat er is. Wil Quincy een echte foutkleur, dan is dat
   één token in tokens.css - geen losse hexwaarde hier. */
/* Na een geslaagde aanmelding zet formulier.js het `hidden`-attribuut. Zonder
   deze regel doet dat niets: de UA-stijl `[hidden] { display: none }` verliest
   van `.formulier { display: flex }`, en dan blijft het ingevulde formulier
   onder de bevestiging staan alsof er niets gebeurd is. */
.formulier[hidden] { display: none; }

.formulier-melding {
  margin: var(--pl-space-16) 0 0;
  max-width: var(--pl-breedte-tekst);
  font-family: var(--pl-font-tekst);
  font-size: var(--pl-fs-tekst);
  line-height: var(--pl-lh-tekst);
}

.formulier-melding-ok {
  color: var(--accent, var(--pl-goud-500));
  font-weight: var(--pl-tekst-vet);
}

.formulier-melding-fout {
  padding-left: var(--pl-space-16);
  border-left: var(--pl-lijn) solid var(--accent, var(--pl-goud-500));
  font-weight: var(--pl-tekst-vet);
}

/* In een gecentreerde afsluiter staat het formulier gecentreerd; de melding
   hoort daar niet links tegen de rand te hangen. */
.gecentreerd .formulier-melding { margin-inline: auto; }
.gecentreerd .formulier-melding-fout { border-left: 0; padding-left: 0; }

/* Wat na een lijst of kaartenrij volgt (toelichting, startdatum) krijgt
   dezelfde afstand als tekst onder een kop, niet 0. */
:is(.stappen, .feiten, .prijzen, .kaders, .aanbodkaarten, .losseregels, .route) + * { margin-top: var(--pl-kop-tekst); }

/* ------------------------------------------------------------- ASSISTENT */
/* Het venster rechtsonder. Hoekig, donker en met een gouden haarlijn: dezelfde
   taal als de kaders en de formulieren, niet de ronde bubbel van een
   standaardchatwidget. De markup staat in inc/assistent.php, de logica in
   assets/js/assistent.js. Zonder JavaScript blijft .assistent op [hidden]. */

.assistent {
  position: fixed;
  right: var(--pl-assistent-hoek);
  bottom: var(--pl-assistent-hoek);
  z-index: 60;              /* boven de inhoud, onder het mobiele menupaneel */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--pl-space-16);
  color: var(--pl-cream);
}

.assistent[hidden] { display: none; }

/* De knop die het venster opent: de maat van een kleine primaire knop. */
.assistent-knop {
  display: flex;
  align-items: center;
  gap: var(--pl-space-8);
  padding: var(--pl-knop-klein-y) var(--pl-knop-klein-x);
  background-color: var(--pl-goud-500);
  border: 0;
  color: var(--pl-ink);
  font-family: var(--pl-font-tekst);
  font-size: var(--pl-fs-knop);
  font-weight: var(--pl-tekst-vet);
  letter-spacing: var(--pl-ls-knop);
  line-height: var(--pl-lh-knop);
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 var(--pl-space-8) var(--pl-space-24) var(--pl-assistent-schaduw);
  transition: background-color 0.2s;
}

.assistent-knop:hover { background-color: var(--pl-goud-400); }
.assistent-knop:focus-visible { outline: var(--pl-lijn-dik) solid var(--pl-goud-300); outline-offset: 2px; }
.assistent-knop-icoon { display: flex; }

/* Open staat het venster er; de knop blijft staan als sluitknop in beeld. */
.assistent-open .assistent-knop-tekst { display: none; }

.assistent-venster {
  display: flex;
  flex-direction: column;
  width: var(--pl-assistent-breed);
  max-width: calc(100vw - 2 * var(--pl-space-16));
  background-color: var(--pl-assistent-vlak);
  border: var(--pl-lijn) solid var(--pl-rand-veld);
  box-shadow: 0 var(--pl-space-16) var(--pl-space-48) var(--pl-assistent-schaduw);
}

.assistent-venster[hidden] { display: none; }

.assistent-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pl-space-16) var(--pl-space-16) var(--pl-space-16) var(--pl-space-24);
  border-bottom: var(--pl-lijn) solid var(--pl-rand-zacht);
}

.assistent-titel {
  margin: 0;
  color: var(--pl-goud-500);
  font-family: var(--pl-font-tekst);
  font-size: var(--pl-fs-eyebrow);
  font-weight: var(--pl-tekst-vet);
  letter-spacing: var(--pl-ls-eyebrow);
  line-height: var(--pl-lh-eyebrow);
  text-transform: uppercase;
}

.assistent-sluit {
  padding: 0 var(--pl-space-4);
  background: none;
  border: 0;
  color: inherit;
  font-size: var(--pl-fs-h3);
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
}

.assistent-sluit:hover { opacity: 1; }
.assistent-sluit:focus-visible { outline: var(--pl-lijn) solid var(--pl-goud-500); outline-offset: 2px; }

.assistent-gesprek {
  display: flex;
  flex-direction: column;
  gap: var(--pl-space-16);
  max-height: var(--pl-assistent-gesprek);
  padding: var(--pl-space-24);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.assistent-bericht {
  max-width: 90%;
  font-family: var(--pl-font-tekst);
  font-size: var(--pl-fs-assistent);
  line-height: var(--pl-lh-assistent);
}

.assistent-bericht p { margin: 0; }
.assistent-bericht p + p { margin-top: var(--pl-space-8); }
.assistent-bericht a { color: var(--pl-goud-400); text-decoration: underline; }
.assistent-bericht a:hover { color: var(--pl-goud-300); }

/* Wat van de bezoeker komt staat rechts in een vlakje, wat van ons komt staat
   links als gewone tekst: zo blijft het antwoord leesbaar als tekst en niet
   als een rij ballonnen. */
.assistent-van-jou {
  align-self: flex-end;
  padding: var(--pl-space-8) var(--pl-space-16);
  background-color: var(--pl-assistent-bubbel);
  border: var(--pl-lijn) solid var(--pl-rand-zacht);
}

.assistent-van-ons { align-self: flex-start; }

/* Drie puntjes terwijl het antwoord onderweg is. */
.assistent-wacht { display: flex; gap: var(--pl-space-4); padding-top: var(--pl-space-8); }

.assistent-wacht span {
  width: var(--pl-space-8);
  height: var(--pl-space-8);
  background-color: var(--pl-goud-500);
  border-radius: 50%;
  animation: assistent-puls 1.2s infinite ease-in-out;
}

.assistent-wacht span:nth-child(2) { animation-delay: 0.15s; }
.assistent-wacht span:nth-child(3) { animation-delay: 0.3s; }

@keyframes assistent-puls {
  0%, 60%, 100% { opacity: 0.25; }
  30%           { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .assistent-wacht span { animation: none; opacity: 0.6; }
}

.assistent-formulier {
  display: flex;
  align-items: flex-end;
  gap: var(--pl-space-8);
  padding: var(--pl-space-16) var(--pl-space-24);
  border-top: var(--pl-lijn) solid var(--pl-rand-zacht);
}

.assistent-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.assistent-vraag {
  flex: 1 1 auto;
  /* Bricks zet textarea op min-height: 90px; dat maakt van dit veld een blok
     van drie regels hoog. Het groeit hier mee met de tekst, via assistent.js. */
  min-height: 0;
  height: auto;
  max-height: var(--pl-assistent-vraag);
  padding: var(--pl-space-8) 0;
  background: none;
  border: 0;
  color: inherit;
  font-family: var(--pl-font-tekst);
  font-size: var(--pl-fs-assistent);
  line-height: var(--pl-lh-assistent);
  resize: none;
}

.assistent-vraag::placeholder { color: inherit; opacity: 0.45; }
.assistent-vraag:focus-visible { outline: none; }
.assistent-formulier:focus-within { border-top-color: var(--pl-goud-500); }

.assistent-stuur {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pl-space-32);
  height: var(--pl-space-32);
  background: none;
  border: var(--pl-lijn) solid var(--pl-rand-veld);
  color: var(--pl-goud-500);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.assistent-stuur:hover { background-color: var(--pl-goud-500); color: var(--pl-ink); }
.assistent-stuur:focus-visible { outline: var(--pl-lijn) solid var(--pl-goud-500); outline-offset: 2px; }

/* Terwijl er een antwoord onderweg is, kan er niets tweede weg. */
.assistent-bezig .assistent-stuur { opacity: 0.4; pointer-events: none; }

.assistent-klein {
  margin: 0;
  padding: 0 var(--pl-space-24) var(--pl-space-16);
  color: var(--pl-tekst-zacht);
  font-family: var(--pl-font-tekst);
  font-size: var(--pl-fs-klein);
  line-height: var(--pl-lh-klein);
}

.assistent-klein a { color: inherit; text-decoration: underline; }
.assistent-klein a:hover { color: var(--pl-goud-400); }

/* --------------------------------------------------------- LINK IN TEKST */
/* Een link midden in een alinea. De juridische pagina's zijn de eerste met
   zo'n link (het modelformulier, de privacyverklaring); zonder deze regel
   erft hij de tekstkleur en is hij niet van gewone tekst te onderscheiden.
   De kleur komt uit --accent, dus goud-500 op donker en goud-700 op cream.
   De onderstreping blijft: kleur alleen is te weinig houvast. */
:is(.tekst, .klein, .intro) a {
  color: var(--accent, var(--pl-goud-500));
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: var(--pl-lijn);
}

:is(.tekst, .klein, .intro) a:hover { text-decoration-thickness: var(--pl-lijn-dik); }
:is(.tekst, .klein, .intro) a:focus-visible { outline: var(--pl-lijn) solid currentColor; outline-offset: 2px; }