/* Grid-fundament voor de pilaarpagina's (multi-pagina-site naast de
   scroll-journey homepage). Elke sectie op deze pagina's gebruikt DEZELFDE
   12-koloms grid, zodat niets los "zweeft" -- alle content snapt op
   dezelfde kolommen, ook tussen secties met verschillende breedte-content. */

:root {
  --pgrid-cols: 12;
  --pgrid-gap: 1.25rem;
  --pgrid-max: 72rem;
}

.pgrid {
  display: grid;
  grid-template-columns: repeat(var(--pgrid-cols), 1fr);
  gap: var(--pgrid-gap);
  width: 100%;
  max-width: var(--pgrid-max);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  box-sizing: border-box;
}

/* Content-breedtes: elke sectie kiest een van deze kolomspans, nooit een
   losse px-waarde. Content-secties C4-C10 (gecentreerd, leesbreedte);
   volle-breedte componenten (pilaren-diagram) C1-C12. */
.pspan-tekst   { grid-column: 4 / span 6; }   /* leesbreedte, gecentreerd */
.pspan-breed   { grid-column: 2 / span 10; }  /* iets breder, bv. component-kaders */
.pspan-vol     { grid-column: 1 / span 12; }  /* volle grid-breedte */

@media (max-width: 56rem) {
  .pspan-tekst,
  .pspan-breed { grid-column: 1 / span 12; }
}

/* ---------- Knop (zelfde stijl als de homepage, hier lokaal herhaald --
   pilaarpagina's laden bewust niet de hele site.css, dat bevat de
   scroll-journey/GSAP-specifieke stijlen die hier niet nodig zijn) ---------- */

.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.button-primary {
  color: var(--gb-ink);
  background: var(--gb-mint);
}

.button-primary:hover {
  background: #45c8a1;
}

/* ---------- Paginabasis (gedeeld door alle pilaarpagina's) ---------- */

.psite-body {
  background: var(--gb-paper);
  color: var(--gb-ink);
  font-family: var(--font-body);
  line-height: 1.6;
  margin: 0;
}

.psite-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(247, 249, 248, 0.94);
  border-bottom: 1px solid var(--gb-line);
  backdrop-filter: blur(6px);
}

.psite-header .pgrid {
  grid-template-rows: auto;
  align-items: center;
  min-height: 4rem;
}

.psite-brand {
  grid-column: 1 / span 3;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--gb-ink);
  font-family: var(--font-heading);
  font-weight: 700;
}

.psite-brand img { height: 26px; width: auto; }

.psite-nav {
  grid-column: 4 / span 7;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  font-size: 0.875rem;
}

.psite-nav a {
  color: var(--gb-gray);
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
}

.psite-nav a:hover,
.psite-nav a[aria-current="page"] {
  color: var(--gb-ink);
  border-bottom-color: var(--gb-mint);
}

.psite-header .button {
  grid-column: 11 / span 2;
  justify-self: end;
}

.psection {
  padding: clamp(3rem, 8vh, 5rem) 0;
}

.psection + .psection {
  border-top: 1px solid var(--gb-line);
}

.psection-wit { background: #ffffff; }

.peyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gb-mint);
  margin: 0 0 0.75rem;
}

.psection h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}

.psection h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 700;
  margin: 0 0 0.75rem;
}

.plede {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--gb-gray);
  max-width: 60ch;
}

.pfootnote {
  font-size: 0.85rem;
  color: var(--gb-gray);
  max-width: 60ch;
}

.pfootnote a {
  color: inherit;
}

/* De hero-intro (eerste .psection op elke pilaarpagina) centreert de
   tekst zelf, niet alleen het blok -- zelfde conventie als de hero/
   spiegel-koppen op de homepage (site.css). .pspan-tekst was al correct
   gecentreerd als BLOK (grid-column 4/span 6), maar de tekst erin bleef
   links uitgelijnd, wat naast de homepage inconsistent oogde ("de
   andere pagina's, teksten moeten gecentreerd worden"). Alleen de
   EERSTE sectie op de pagina, niet de latere lichaamstekst-secties
   (h2 1/2/3 hieronder) -- gecentreerde lange alinea's zijn slecht
   leesbaar, dat blijft bewust links uitgelijnd. */
main > .psection:first-of-type .pspan-tekst {
  margin: 0 auto;
  text-align: center;
}

main > .psection:first-of-type .plede {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Pilaren-component ---------- */

.pilaren-dak,
.pilaren-fundament {
  grid-column: 1 / span 12;
  text-align: center;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-medium);
  font-size: 0.9rem;
}

.pilaren-dak {
  background: #eef0f0;
  color: var(--gb-gray);
  margin-bottom: 0.75rem;
}

.pilaren-dak strong { color: var(--gb-ink); }

.pilaren-fundament {
  background: var(--gb-ink);
  color: #ffffff;
  margin-top: 0.75rem;
  padding: 1.1rem 1rem;
  font-weight: 600;
}

.pilaren-fundament span {
  display: block;
  font-weight: 400;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 0.25rem;
}

.pilaren-rij {
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
}

@media (max-width: 56rem) {
  .pilaren-rij { grid-template-columns: 1fr; }
}

/* Flex-kolom i.p.v. block: zo kan de gevolg-pil met margin-top:auto
   naar de onderkant geduwd worden, ongeacht hoeveel bewijslast-tekst
   erboven staat (review Abdul 02-08, pillen op gelijke hoogte over de
   5 kaarten voor betere scanbaarheid). */
.pilaar-kaart {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #ffffff;
  border: 1px solid var(--gb-line);
  border-radius: var(--radius-medium);
  padding: 1.1rem 1rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.pilaar-kaart:hover {
  border-color: var(--gb-mint);
  transform: translateY(-2px);
}

.pilaar-kaart.is-actief {
  border-color: var(--gb-mint);
  background: rgba(87, 214, 176, 0.06);
}

.pilaar-nr {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--gb-mint);
  letter-spacing: 0.06em;
}

.pilaar-naam {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0.35rem 0 0.5rem;
}

.pilaar-handhaver {
  font-size: 0.8rem;
  color: var(--gb-gray);
  margin: 0 0 0.5rem;
}

.pilaar-bewijslast {
  list-style: none;
  margin: 0 0 0.6rem;
  padding: 0;
  font-size: 0.8rem;
  color: var(--gb-gray);
}

.pilaar-bewijslast li {
  padding-left: 0.9rem;
  position: relative;
  margin-bottom: 0.25rem;
}

.pilaar-bewijslast li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gb-line);
}

/* Standaard: geen gekleurde pastel-pil (las als generieke AI-badge,
   review Abdul -- verder is de site vrijwel monochroom, rood komt
   nergens anders voor). Wel als eigen neutraal label-chipje (review
   Abdul 02-08, "vind de gevolgen die er in staan onopvallend... het
   hoeft geen AI te screewen maar wel duidelijk aanwezig") -- puur
   inline tekst verdween te veel in de rest van de kaarttekst. Chip
   blijft grijstinten, geen kleur, dus geen terugval naar het
   alarm-badge-gevoel.
   Lettertype bewust Inter (font-body), niet IBM Plex Mono: dit is
   inhoud die je moet lézen (het gevolg als een pilaar faalt), geen
   code/datum -- huisstijl (GEBORGD-WEBSITE-HUISSTIJL.md §4) reserveert
   mono voor "codes, datums en technische labels". Mono + hoofdletters
   + bold samen maakte langere woorden juist minder scanbaar (review
   Abdul, "leesbaarheid is niet goed"). Bij een Normcheck-uitslag
   (status-klassen) is de kleur wél functioneel (echte pas/aandacht/
   fout-status) en komt de pil terug, zie hieronder. */
.pilaar-risico {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.4rem;
  margin-top: auto;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: rgba(24, 36, 43, 0.06);
  border: 1px solid rgba(24, 36, 43, 0.12);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gb-ink);
}

.pilaar-risico::before {
  content: "";
  width: 5px;
  height: 5px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gb-ink);
}

/* Variant C: ingekleurd (Normcheck-uitslag) */
.pilaar-kaart.status-groen,
.pilaar-kaart.status-oranje,
.pilaar-kaart.status-rood {
  --status-tekst: var(--gb-ink);
  --status-bg: transparent;
}
.pilaar-kaart.status-groen  { border-color: #57d6b0; --status-tekst: #17663f; --status-bg: #e2f4ea; }
.pilaar-kaart.status-oranje { border-color: #e3a72f; --status-tekst: #795611; --status-bg: #fbf0d5; }
.pilaar-kaart.status-rood   { border-color: #d95c5c; --status-tekst: #a13636; --status-bg: #fbe3e3; }

.pilaar-kaart.status-groen .pilaar-risico,
.pilaar-kaart.status-oranje .pilaar-risico,
.pilaar-kaart.status-rood .pilaar-risico {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--status-tekst);
  background: var(--status-bg);
}

.pilaar-kaart.status-groen .pilaar-risico::before,
.pilaar-kaart.status-oranje .pilaar-risico::before,
.pilaar-kaart.status-rood .pilaar-risico::before {
  display: none;
}