/* =====================================================================
   ai-zichtbaarheid.css — de AI-Zichtbaarheidsindex: /ai-zichtbaarheid en
   de acht sectorpagina's (redesign 25 okt 2026, Steven: "professioneel,
   huisstijl houden, alles strakker").

   Ontwerpintentie: de index is een meetinstrument, dus hij oogt als een
   rapport en niet als een folder. De meting staat bovenaan en is het beeld:
   per sector een ranglijst als echte tabel, per AI-zoekmachine een kolom met
   de telling en een smal balkje dat die telling tekent (data, geen
   versiering). Eén raster, links uitgelijnd, één kopstijl, dunne lijnen in
   plaats van een kaart om elke regel. Lime alleen op de inschrijfknop.

   Eén stylesheet voor alle negen pagina's: een wijziging hier geldt overal
   tegelijk, in plaats van negen kopieën die uit elkaar lopen. De tabel en
   de bronnenlijst komen uit api/_lib/sector-render.js; de weekrun zet ze
   elke maandag tussen de markers in #gxData.
   ===================================================================== */

.ai-pagina {
  /* Hetzelfde raster als de navigatie, de broodkruimel en de voet van de
     site (.container: 1240 px met 32 px rand), zodat alles op één lijn staat. */
  --ai-maat: 1176px;
  --ai-rand: clamp(20px, 2.5vw, 32px);
  --ai-sectie: clamp(72px, 9vw, 128px);
  --ai-h1: clamp(40px, 5.6vw, 76px);
  --ai-h2: clamp(30px, 3.6vw, 46px);
  --ai-tekst: 17px;
  --ai-lijn: var(--line);
  --ai-lijn-sterk: var(--line-strong);
  padding-bottom: var(--ai-sectie);
}

.ai-raster {
  max-width: calc(var(--ai-maat) + 2 * var(--ai-rand));
  margin: 0 auto;
  padding: 0 var(--ai-rand);
}
.ai-twee {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

/* ---------- Kop van de pagina ---------- */
.ai-kop { padding: clamp(28px, 4vw, 48px) 0 clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--ai-lijn); }
.ai-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0 0 20px;
}
.ai-label a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ai-lijn-sterk); }
.ai-kop h1 {
  font-family: var(--serif);
  font-size: var(--ai-h1);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 14em;
  margin: 0;
  text-wrap: balance;
}
.ai-kop h1 em { font-style: normal; }
.ai-lede {
  margin: 28px 0 0;
  max-width: 40em;
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.6;
  color: var(--fg-dim);
}
.ai-pagina .ap-sub {
  margin: 24px 0 0;
  font-size: 14px;
  color: var(--fg-dim);
}
.ai-feiten {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, max-content));
  gap: 12px clamp(28px, 4vw, 56px);
  margin: clamp(36px, 4vw, 48px) 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--ai-lijn);
}
.ai-feiten dt { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 6px; }
.ai-feiten dd { margin: 0; font-size: 16px; color: var(--fg); }

/* ---------- Secties ---------- */
.ai-sectie { padding-top: var(--ai-sectie); }
.ai-sectiekop { max-width: 720px; margin-bottom: clamp(32px, 4vw, 48px); }
.ai-twee .ai-sectiekop { margin-bottom: 0; }
.ai-sectiekop h2 {
  font-family: var(--serif);
  font-size: var(--ai-h2);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}
.ai-sectiekop h2 em { font-style: normal; }
.ai-sectiekop > p:not(.ai-label) {
  margin: 18px 0 0;
  max-width: 36em;
  font-size: var(--ai-tekst);
  line-height: 1.6;
  color: var(--fg-dim);
}
.ai-kopje { font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--fg); margin: 0 0 14px; }
.ai-noot { margin: 24px 0 0; max-width: 46em; font-size: 15px; line-height: 1.6; color: var(--fg-dim); }
.ai-noot a, .ai-sectiekop a, .ai-faq a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ai-lijn-sterk); }

/* ---------- De meting: tabel, bronnen, wat opvalt ---------- */
.gx-meting {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.gx-meting:has(> .gx-hoofd:only-child) { grid-template-columns: minmax(0, 1fr); }
.gx-tabel { width: 100%; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
.gx-tabel caption {
  caption-side: top;
  text-align: left;
  font-size: 13px;
  color: var(--fg-dim);
  padding-bottom: 14px;
}
.gx-tabel thead th {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  text-align: left;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--ai-lijn-sterk);
}
.gx-tabel td, .gx-tabel tbody th {
  padding: 15px 0;
  border-bottom: 1px solid var(--ai-lijn);
  text-align: left;
  vertical-align: middle;
}
.gx-tabel tbody th { font-weight: 500; color: var(--fg); padding-right: 16px; }
.gx-tabel .gx-nr { width: 44px; color: var(--fg-dim); font-size: 13px; font-variant-numeric: normal; }
.gx-tabel .gx-getal { width: 150px; text-align: right; }
.gx-tabel thead .gx-getal { text-align: right; }

/* De telling en het balkje: het balkje is dezelfde breuk als het getal. */
.gx-tel { display: inline-flex; align-items: center; gap: 12px; color: var(--fg); }
.gx-tel::before {
  content: '';
  width: 64px;
  height: 6px;
  border-radius: 100px;
  background: linear-gradient(to right, var(--fg) calc(var(--v, 0) * 100%), var(--ai-lijn) 0);
}
/* Gedeeltelijke meting (27 okt 2026): een haarlijnkader, geen kleur. Het zegt
   hoeveel antwoorden er zijn, vóór iemand de namen eronder als volledig leest. */
.gx-deels { margin: 0 0 28px; padding: 14px 18px; border: 1px solid var(--ai-lijn-sterk); border-radius: 20px; font-size: 15px; line-height: 1.55; color: var(--fg); max-width: 72ch; }
.gx-leeg { margin: 0; padding: 24px 0; border-top: 1px solid var(--ai-lijn-sterk); border-bottom: 1px solid var(--ai-lijn); font-size: 16px; line-height: 1.6; color: var(--fg-dim); }

.gx-zij { padding-top: 2px; }
.gx-kopje { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-dim); margin: 0 0 8px; }
.gx-zij .gx-kopje:not(:first-child) { margin-top: 40px; }
.gx-uitleg { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--fg-dim); }
.gx-bronnen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ai-lijn-sterk); }
.gx-bronnen li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--ai-lijn); font-size: 15px; }
.gx-domein { min-width: 0; overflow-wrap: anywhere; }
.gx-insight { margin: 0; font-size: 16px; line-height: 1.6; color: var(--fg); }
.gx-month { margin: 24px 0 0; font-size: 13px; color: var(--fg-dim); }

/* Overzicht: per sector de eerste namen. */
.gx-summary { margin: 0 0 clamp(32px, 4vw, 48px); max-width: 44em; font-size: 18px; line-height: 1.65; color: var(--fg); }
.gx-sectoren tbody th { width: 34%; }
.gx-sectoren tbody th a { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ai-lijn-sterk); }
.gx-sectoren td { color: var(--fg-dim); }
.gx-geen { font-style: italic; }
@media (hover: hover) {
  .gx-sectoren tbody th a:hover { text-decoration-color: var(--fg); }
}

/* ---------- Vragen, stappen, hefbomen: genummerde lijsten zonder kaarten ---------- */
.ai-vragen, .ai-stappen, .ai-hefbomen { list-style: none; margin: 0; padding: 0; counter-reset: ai; }
.ai-vragen { border-top: 1px solid var(--ai-lijn-sterk); }
.ai-vragen li {
  counter-increment: ai;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  padding: 16px 0;
  border-bottom: 1px solid var(--ai-lijn);
  font-size: 17px;
  line-height: 1.5;
  color: var(--fg);
}
.ai-vragen li::before { content: counter(ai, decimal-leading-zero); font-size: 13px; color: var(--fg-dim); padding-top: 3px; }

.ai-stappen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); border-top: 1px solid var(--ai-lijn-sterk); }
.ai-stappen li { counter-increment: ai; padding: 22px 0 24px; border-bottom: 1px solid var(--ai-lijn); }
.ai-stappen li::before { content: counter(ai, decimal-leading-zero); display: block; font-size: 13px; color: var(--fg-dim); margin-bottom: 12px; }
.ai-stappen h3 { font-size: 18px; font-weight: 500; margin: 0 0 8px; letter-spacing: -0.01em; }
.ai-stappen p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--fg-dim); }

.ai-hefbomen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); border-top: 1px solid var(--ai-lijn-sterk); }
.ai-hefbomen li { counter-increment: ai; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-content: start; padding: 26px 0 28px; border-bottom: 1px solid var(--ai-lijn); }
.ai-hefbomen li::before { content: counter(ai, decimal-leading-zero); font-size: 13px; color: var(--fg-dim); padding-top: 5px; }
.ai-hefbomen h3 { font-size: 19px; font-weight: 500; line-height: 1.3; margin: 0 0 10px; letter-spacing: -0.01em; }
.ai-hefbomen p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--fg-dim); grid-column: 2; }

/* Overzicht: de sectoren als lijst met de vraag erbij. */
.ai-sectorlijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); border-top: 1px solid var(--ai-lijn-sterk); }
.ai-sectorlijst a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--ai-lijn);
  color: var(--fg);
  text-decoration: none;
}
.ai-sl-naam { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.ai-sl-vraag { grid-column: 1; font-size: 15px; line-height: 1.5; color: var(--fg-dim); }
.ai-sl-pijl { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 18px; transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1); }
@media (hover: hover) {
  .ai-sectorlijst a:hover .ai-sl-naam { text-decoration: underline; text-underline-offset: 4px; }
  .ai-sectorlijst a:hover .ai-sl-pijl { transform: translateX(4px); }
}

/* ---------- Volgen: het ene donkere vlak, met het ene limemoment ---------- */
.ai-volg {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
  background: var(--fg);
  color: var(--bg);
  border-radius: 24px;
  padding: clamp(32px, 5vw, 64px);
}
.ai-volg .ai-label { color: rgba(244, 240, 232, 0.7); }
.ai-volg h2 { font-family: var(--serif); font-size: var(--ai-h2); font-weight: 400; line-height: 1.06; letter-spacing: -0.03em; margin: 0; color: var(--bg); }
.ai-volg-tekst > p:not(.ai-label) { margin: 18px 0 0; font-size: 16px; line-height: 1.6; color: rgba(244, 240, 232, 0.78); max-width: 34em; }
.ai-veldlabel { display: block; font-size: 13px; color: rgba(244, 240, 232, 0.78); margin-bottom: 10px; }
.ai-volg .gx-form-row { display: flex; gap: 10px; }
.ai-volg input[type=email] {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 0 20px;
  border-radius: 100px;
  border: 1px solid rgba(244, 240, 232, 0.28);
  background: rgba(244, 240, 232, 0.08);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 16px;
}
.ai-volg input[type=email]::placeholder { color: rgba(244, 240, 232, 0.5); }
.ai-volg button {
  min-height: 52px;
  padding: 0 24px;
  border-radius: 100px;
  border: 0;
  background: var(--lime);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.ai-volg button:active { transform: scale(0.97); }
.ai-volg button:disabled { opacity: 0.6; cursor: progress; }
.ai-volg input:focus-visible, .ai-volg button:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.ai-volg .gx-form-msg { display: none; margin-top: 12px; font-size: 14px; color: var(--lime); }
.ai-volg .gx-form-note { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: rgba(244, 240, 232, 0.6); }
.ai-volg .gx-form-note a { color: rgba(244, 240, 232, 0.85); }
.ai-volg .gx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Veelgestelde vragen ---------- */
.ai-faq { border-top: 1px solid var(--ai-lijn-sterk); }
.ai-faq details { border-bottom: 1px solid var(--ai-lijn); }
.ai-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  padding: 18px 0;
  font-size: 17px;
  font-weight: 500;
}
.ai-faq summary::-webkit-details-marker { display: none; }
.ai-faq summary::after { content: '+'; font-size: 20px; color: var(--fg-dim); flex-shrink: 0; }
.ai-faq details[open] summary::after { content: '–'; }
.ai-faq details p { margin: 0 0 20px; max-width: 40em; font-size: 16px; line-height: 1.65; color: var(--fg-dim); }
.ai-faq summary:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }

/* ---------- Slot: licht, met een donkere knop (lime zit al bij volgen) ---------- */
.ai-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px 48px;
  flex-wrap: wrap;
  padding: clamp(28px, 4vw, 44px) 0;
  border-top: 1px solid var(--ai-lijn-sterk);
  border-bottom: 1px solid var(--ai-lijn-sterk);
}
.ai-cta h2 { font-family: var(--serif); font-size: clamp(26px, 2.8vw, 34px); font-weight: 400; letter-spacing: -0.02em; margin: 0; }
.ai-cta p { margin: 10px 0 0; max-width: 38em; font-size: 16px; line-height: 1.6; color: var(--fg-dim); }
.ai-knop {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 100px;
  background: var(--fg);
  color: var(--bg);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.ai-knop:active { transform: scale(0.97); }
.ai-knop:focus-visible, .ai-sectorlijst a:focus-visible, .gx-sectoren a:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }

/* ---------- Kleinere schermen ---------- */
@media (max-width: 1024px) {
  .ai-twee, .gx-meting, .ai-volg { grid-template-columns: minmax(0, 1fr); }
  .ai-feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ai-stappen, .ai-hefbomen, .ai-sectorlijst { grid-template-columns: minmax(0, 1fr); }
  .gx-tabel { font-size: 15px; }
  .gx-tabel .gx-nr { width: 32px; }
  .gx-tabel .gx-getal { width: auto; padding-left: 10px; white-space: nowrap; }
  .gx-tel { gap: 8px; }
  .gx-tel::before { width: 32px; }
  .ai-volg .gx-form-row { flex-direction: column; }
  .ai-volg { border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-sl-pijl, .ai-knop, .ai-volg button { transition: none; }
}