/* S8 — FAQ (navy). Start van het donkere slotblok: harde seam boven, geen seam onder.
   Markup-contract: .faq-item > button.faq-q[aria-expanded] + .faq-a (JS togglet,
   animatie via grid-template-rows). Open-state via .is-open of aria-expanded=true. */

/* ---------- Sectie: watermerk-anker (Timo 2026-07-10) ---------- */

.s8 {
  position: relative;
  /* Bewust GEEN overflow: clip — het watermerk loopt door over de sectiegrens
     de navy achtergrond van S9 in; body overflow-x: clip vangt het
     linker-uitsteken op zonder h-scroll. */
}

/* Groot beeldmerk-watermerk linksonder, achter de content; loopt naadloos door
   in S9 (beide vlakken --surface-deep, zelfde opacity over de hele hoogte).
   Uitsteek onder de sectierand (56px) blijft ruim boven het cream paneel:
   S9 padding-top is minimaal 72px (--space-section). Bewust geen z-index op
   .s8 zelf: .s9-panel en .s9-card zijn positioned en staan later in de DOM,
   dus die schilderen altijd boven het watermerk — het kan het cream paneel
   nooit bedekken. Fixed header (z-index 40) blijft er sowieso boven. */
.s8-watermark {
  position: absolute;
  left: -130px;
  bottom: -56px;
  width: 660px;
  /* height:auto is hier niet overbodig. Sinds de img een height-attribuut heeft
     (beeldronde 2026-08-17, tegen layout shift) werkt dat attribuut als een
     CSS-hint op height, en omdat deze regel alleen width zet nam het watermerk
     die 391px letterlijk over: 660x663 werd 660x391, plat geduwd. Met height:auto
     wint de CSS en levert het attribuut alleen nog de verhouding. */
  height: auto;
  max-width: none;
  opacity: .055;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.s8 > .container {
  position: relative;
  z-index: 1;
}

/* ---------- Grid: links kopgroep, rechts accordion ---------- */

.s8-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 640px);
  column-gap: clamp(3rem, 7vw, 7.5rem);
  row-gap: var(--gap-lg);
  align-items: start;
}

/* ---------- Linkerkolom ---------- */

.s8-badge {
  background: var(--navy-800);
  border-color: var(--navy-700);
  margin-bottom: 28px;
}

.s8-kicker { margin-top: clamp(2.5rem, 5.5vw, 4.5rem); }

.s8-lead {
  margin-top: 24px;
  max-width: 38ch;
}

/* ---------- Accordion (vlak/plat: geen echo-decor, geen schaduwlagen) ---------- */

.s8 .faq {
  display: grid;
  gap: 14px;
}

/* ---------- FAQ-item, gesloten ---------- */

.s8 .faq-item {
  background: var(--surface-card-dark);
  border: 1px solid var(--line-inv);
  border-radius: var(--r-md);
  transition: background-color .35s ease, border-color .35s ease;
}
.s8 .faq-item:not(.is-open):hover { border-color: var(--navy-500); }

.s8 .faq-q {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 19px 20px;
  text-align: left;
}

.s8 .faq-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: var(--text-strong-inv);
  flex: none;
  transition: background-color .3s ease, color .3s ease;
}
.s8 .faq-ico-v { transition: opacity .25s ease; }

.s8 .faq-q-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-strong-inv);
  transition: color .3s ease;
}

.s8 .faq-chev {
  flex: none;
  color: var(--orange-500);
  transition: transform .3s ease;
}

/* ---------- Antwoord: grid-template-rows animatie ---------- */

.s8 .faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.22, .61, .36, 1);
}
.s8 .faq-a-inner {
  overflow: hidden;
  min-height: 0;
}
.s8 .faq-a-text {
  padding: 2px 40px 24px 60px;
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--navy-500);
}

/* ---------- FAQ-item, open: paper kaart ---------- */

.s8 .faq-item.is-open,
.s8 .faq-item:has(> .faq-q[aria-expanded="true"]) {
  background: var(--surface-card);
  border-color: var(--surface-card);
}

.s8 .faq-item.is-open .faq-a,
.s8 .faq-item:has(> .faq-q[aria-expanded="true"]) .faq-a {
  grid-template-rows: 1fr;
}

.s8 .faq-item.is-open .faq-q-text,
.s8 .faq-item:has(> .faq-q[aria-expanded="true"]) .faq-q-text {
  color: var(--text-strong);
}

.s8 .faq-item.is-open .faq-ico,
.s8 .faq-item:has(> .faq-q[aria-expanded="true"]) .faq-ico {
  background: var(--blue-100);
  color: var(--orange-500);
}

.s8 .faq-item.is-open .faq-ico-v,
.s8 .faq-item:has(> .faq-q[aria-expanded="true"]) .faq-ico-v {
  opacity: 0;
}

.s8 .faq-item.is-open .faq-chev,
.s8 .faq-item:has(> .faq-q[aria-expanded="true"]) .faq-chev {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .s8 .faq-a,
  .s8 .faq-item,
  .s8 .faq-ico,
  .s8 .faq-ico-v,
  .s8 .faq-q-text,
  .s8 .faq-chev { transition: none; }
}

/* ---------- Tablet ---------- */

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

  .s8-acc {
    max-width: 640px;
    width: 100%;
  }

  .s8-kicker { margin-top: 32px; }
}

/* ---------- Mobiel ---------- */

@media (max-width: 560px) {
  /* Zelfde doorloop-gedrag als desktop: uitsteek 44px < S9 padding-top (min 72px) */
  /* BESLISSING Timo 2026-08-11: max-width toegevoegd. Gemeten op 320px viewport
     stak dit watermerk 10px voorbij de rechterrand (left -110 + width 440 = 330),
     goed voor de volledige +10px documentoverloop op index.html, oplossingen.html
     en werving-en-selectie.html; rpo.html erft dezelfde sectie. body{overflow-x:clip}
     uit base.css maakt er geen scrollbalk van, maar de meting bleef staan.
     calc(100% + 110px) compenseert exact het negatieve linker-offset, zodat de
     rechterrand van het watermerk nooit voorbij de viewport komt. Boven 330px
     viewportbreedte is 440px kleiner dan de cap en verandert er dus niets: het
     ontwerp op 360, 375, 390 en 414 is identiek gemeten (allemaal +0). Oude
     waarde verbatim: er stond geen max-width in deze regel (de basisregel zet
     max-width: none). */
  .s8-watermark {
    width: 440px;
    max-width: calc(100% + 110px);
    left: -110px;
    bottom: -44px;
  }

  .s8 .faq-q {
    padding: 16px;
    gap: 12px;
  }
  .s8 .faq-q-text { font-size: 15px; }

  .s8 .faq-a-text {
    padding: 0 16px 18px;
    max-width: none;
  }
}