/* ============================================================
   BLOG — alleen wat het artikel nodig heeft

   De kaart en het raster staan NIET in dit bestand. Die bestaan al
   als component in home.css, met de stielkleur langs de zijkant en
   de foto die onderaan in de kaart uitloopt. Ze hier opnieuw
   definieren gaf twee regelsets voor dezelfde klasse, en dan wint
   de laatst geladen op de eigenschappen die hij toevallig noemt en
   de andere op de rest. Zie design-systeem.md: een component staat
   op een plek.

   .art-inhoud     de inhoudsopgave met ankerlinks
   .art-tekst      de leeskolom van een artikel
   .art-auteur     wie het geschreven heeft

   Een artikel is een kolom tekst. Geen zijbalk, geen kaders om
   alinea's: wie hier komt leest, en alles wat naast die kolom staat
   trekt daarvan weg.
   ============================================================ */

/* ══ HET ARTIKEL ═══════════════════════════════════════════ */
/* HOEVEEL LUCHT ER TUSSEN DE BLOKKEN STAAT.
   Een artikel van duizend woorden leest anders dan een dienstpagina.
   De ruimte hieronder is daarom ruimer dan elders op de site, en ze
   loopt op in drie stappen: tussen twee alinea's het minst, boven
   een tussenkop meer, en boven een h2 het meest. Zo ziet de lezer
   waar een nieuw stuk begint zonder dat hij de kop hoeft te lezen.

   Boven een kop staat veel ruimte, eronder weinig: een kop hoort bij
   de tekst die volgt, niet bij de tekst die hij afsluit. Daarom
   staat er geen margin-bottom op h2 en h3 en krijgt de alinea erna
   gewoon haar eigen bovenruimte.                              */
.art-tekst{max-width:68ch}
.art-tekst h2{font-family:var(--disp); font-weight:600;
  font-size:clamp(1.45rem,2.4vw,1.95rem); letter-spacing:-.032em;
  line-height:1.15; color:var(--indigo-900); text-wrap:balance;
  margin:clamp(56px,8vw,88px) 0 0}
.art-tekst h2:first-child{margin-top:0}
.art-tekst h3{font-family:var(--disp); font-weight:600;
  font-size:clamp(1.1rem,1.6vw,1.3rem); letter-spacing:-.026em;
  color:var(--indigo-900); margin:clamp(34px,4.6vw,46px) 0 0}
.art-tekst p{margin:clamp(18px,2.4vw,24px) 0 0; line-height:1.78}
.art-tekst ul{margin:clamp(18px,2.4vw,24px) 0 0; padding-left:0; list-style:none}
.art-tekst ul li{position:relative; padding-left:26px; margin-bottom:14px;
  line-height:1.7}
.art-tekst ul li::before{content:""; position:absolute; left:2px; top:.62em;
  width:9px; height:7px; border-radius:2px 0 2px 0; background:var(--goud)}
/* Een link midden in een zin heeft meer nodig dan kleur alleen. */
.art-tekst p a:not(.knop):not(.knop-leeg){color:var(--indigo); font-weight:600;
  text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px}

.art-tabel{width:100%; margin:clamp(26px,3.6vw,36px) 0 0;
  border-collapse:collapse; font-size:15px}
.art-tabel th,.art-tabel td{padding:12px 14px; text-align:left;
  border-bottom:1px solid var(--lijn); vertical-align:top; line-height:1.55}
.art-tabel th{font-family:var(--disp); font-weight:600; color:var(--indigo-900);
  border-bottom:2px solid var(--goud)}
.art-tabel td:first-child{font-weight:600; color:var(--inkt)}
.art-omhulsel{overflow-x:auto}

/* ══ DE INHOUDSOPGAVE ══════════════════════════════════════ */
/* De opgave opent het artikel, dus zij is geen nieuwe sectie. Zij
   stond met de volle blokruimte van .werkwijze erboven en met niets
   eronder, waardoor het kader tegen de eerste kop plakte terwijl er
   boven een gat van drie cijfers stond.

   Nu draagt .art-blok geen bovenruimte meer en zet de opgave zelf
   even veel lucht onder zich als de hero erboven laat. Boven en
   onder het kader staat dus dezelfde maat, en die maat is de
   onderruimte van de hero zelf.                                */
.art-blok{padding-top:0}
.art-inhoud{margin:0 0 var(--lucht); padding:clamp(20px,2.4vw,26px);
  background:var(--grijs-50,#f7f7fa); border-left:3px solid var(--goud);
  border-radius:0 var(--rond-s) 0 var(--rond-s)}
.art-inhoud b{display:block; font-family:var(--disp); font-weight:600;
  font-size:15px; letter-spacing:-.01em; color:var(--indigo-900)}
.art-inhoud ol{margin:12px 0 0; padding-left:20px}
.art-inhoud li{margin-bottom:7px; font-size:15px; line-height:1.5}
.art-inhoud a:not(.knop):not(.knop-leeg){color:var(--inkt); text-decoration:underline;
  text-decoration-color:var(--lijn); text-underline-offset:3px;
  transition:color .2s var(--ease)}
.art-inhoud a:not(.knop):not(.knop-leeg):hover{color:var(--indigo); text-decoration-color:var(--indigo)}

/* ══ DE BRON ═══════════════════════════════════════════════
   Een artikel dat over regelgeving of premies gaat, noemt waar het
   vandaan komt. Zonder die regel is het een mening.            */
.art-bron{margin:clamp(40px,4.4vw,56px) 0 0; padding-top:clamp(18px,2.2vw,24px);
  border-top:1px solid var(--lijn); font-size:14px; line-height:1.6;
  color:var(--grijs-600)}
.art-bron a:not(.knop):not(.knop-leeg){color:var(--indigo); text-decoration:underline;
  text-underline-offset:3px}

/* ══ DE AUTEUR ═════════════════════════════════════════════ */
/* Het auteursblok stond in een eigen sectie met blokruimte boven en
   onder, en de sectie erna zette daar nog eens haar eigen blokruimte
   bovenop. Onder de kaart stond daardoor het dubbele van wat er
   boven stond, en boven stond ook al te veel.

   Nu draagt de sectie geen onderruimte meer en heeft de kaart geen
   eigen bovenmarge. Wat overblijft is de onderruimte van de oproep
   erboven en de bovenruimte van de vragen eronder, allebei één
   blokmaat. Boven en onder dus even veel.                       */
.art-auteurblok{padding-bottom:0}
.art-auteur{display:flex; align-items:center; gap:clamp(16px,2vw,22px);
  margin:0; padding:clamp(18px,2.2vw,24px);
  background:#fff; border:1px solid var(--lijn);
  border-radius:var(--rond-m) 0 var(--rond-m) 0}
.art-auteur img{width:clamp(64px,8vw,88px); height:clamp(64px,8vw,88px);
  flex:none; object-fit:cover; object-position:center 30%;
  border-radius:var(--rond-s) 0 var(--rond-s) 0}
.art-auteur b{display:block; font-family:var(--disp); font-weight:600;
  font-size:clamp(1rem,1.4vw,1.15rem); letter-spacing:-.025em;
  color:var(--indigo-900)}
.art-auteur span{display:block; margin-top:6px; font-size:14.5px;
  line-height:1.6; color:var(--grijs-600)}

/* ══ DE FILTERBALK OP HET OVERZICHT ════════════════════════
   Echte links naar de zes stielhubs, boven het kaartenraster. Geen
   eigen sectie met een eigen kop: dat gaf een half leeg scherm voor
   één rij knopjes. En geen filter dat JavaScript nodig heeft, want
   dan bestaat het niet voor wie zonder komt.                  */
.blog-balk{display:flex; flex-wrap:wrap; gap:8px;
  margin:0 0 clamp(24px,3.2vw,36px)}
/* De balk was een rij links naar de dienstpagina's: wie erop klikte
   verliet de blog. Nu filtert ze de artikels. De radio zelf staat uit
   het zicht; het label is de knop, precies zoals op /realisaties/. */
.blog-balk input{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.blog-balk label{display:inline-flex; align-items:center; padding:9px 16px;
  font-size:14px; color:var(--inkt); background:#fff; cursor:pointer;
  border:1px solid var(--lijn); border-radius:var(--rond-s) 0 var(--rond-s) 0;
  transition:border-color .25s var(--ease), color .25s var(--ease),
    background .25s var(--ease)}
.blog-balk label:hover{border-color:var(--indigo); color:var(--indigo)}
.blog-balk input:checked + label{background:var(--indigo); border-color:var(--indigo);
  color:#fff}
.blog-balk input:focus-visible + label{outline:2px solid var(--indigo); outline-offset:2px}