/* Blogstijlen — gebruikt met de homepage-chrome (b2c.css). Kleuren gelijkgetrokken
   met de site-tokens; alle klassen zijn blog-specifiek (geen botsing met b2c.css). */
:root { --accent: #a3b763; --dim: #8a8a95; --surface: #1a1a20; --surface-2: #22222b; --text: #f2f2f5; }

.eyebrow { color: var(--accent); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
h1.page { font-size: clamp(32px, 5.6vw, 47px); line-height: 1.12; margin: 6px 0 12px; letter-spacing: -.015em; }
.lede { color: var(--dim); font-size: 17px; max-width: 640px; line-height: 1.6; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0; }
.chips a { background: var(--surface); border: 1px solid #26262e; border-radius: 999px; padding: 7px 15px;
           font-size: 13px; font-weight: 600; color: var(--dim); }
.chips a.on { border-color: var(--accent); color: var(--accent); background: rgba(163,183,99,.1); }
.agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.acard { background: var(--surface); border: 1px solid #26262e; border-radius: 16px; overflow: hidden;
         display: flex; flex-direction: column; transition: border-color .15s; }
.acard:hover { border-color: var(--accent); }
.acard img { width: 100%; aspect-ratio: 1200/630; object-fit: cover; }
.acard .ph { width: 100%; aspect-ratio: 1200/630; display: grid; place-items: center;
             background: linear-gradient(135deg, rgba(163,183,99,.25), var(--surface-2)); font-size: 40px; }
.acard .body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
/* Titel en samenvatting bewust groter/lichter dan de rest van de kaart (vraag Carl 6/8/2026):
   op het overzicht beslist de bezoeker op die twee regels of hij doorklikt, en in het donkere
   thema viel --dim (#8a8a95) daarvoor te ver weg. */
.acard h3 { font-size: 21px; line-height: 1.28; letter-spacing: -.015em; } .acard h3 a { color: var(--text); }
.acard p { color: #b9b9c6; font-size: 15px; line-height: 1.6; flex: 1; }
.acard .meta { display: flex; gap: 10px; font-size: 12px; color: var(--dim); }
.acard .chip { background: rgba(163,183,99,.12); color: var(--accent); border-radius: 999px;
               padding: 2px 9px; font-weight: 700; font-size: 11px; }

/* Bladwijzers onder het raster (vraag Carl 6/8/2026, vanaf meer dan zes artikelen). Dezelfde
   pilvorm als de clusterfilters bovenaan, zodat de pagina één taal spreekt. */
.blog-pager { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 30px; }
.blog-pager .pg { min-width: 38px; height: 38px; display: grid; place-items: center; padding: 0 12px;
  background: var(--surface); border: 1px solid #26262e; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--dim); }
.blog-pager a.pg:hover { border-color: var(--accent); color: var(--accent); }
.blog-pager .pg.on { border-color: var(--accent); color: var(--accent); background: rgba(163,183,99,.1); }
/* Op de eerste en laatste pagina blijven de pijlen staan, maar dof — anders verspringt de hele
   rij zodra je één keer bladert. */
.blog-pager .pg.uit { opacity: .3; }

/* Afsluiter onder het overzicht (vraag Carl 6/8/2026). Bewust GEEN b2c-cta-band: die
   gekleurde doos met knop is de afsluiter van een verkooppagina. Wie een artikellijst
   doorneemt is aan het lezen, dus één regel met een knop en een tekstlink naar de demo. */
.blog-cta { border-top: 1px solid #26262e; margin-top: 8px; padding: 30px 0 58px; }
.blog-cta .in { display: flex; align-items: center; justify-content: center; gap: 10px 20px; flex-wrap: wrap; }
.blog-cta p { font-size: 16px; color: #c9c9d4; margin: 0; }
.blog-cta .demo { color: var(--accent); font-size: 15px; font-weight: 600; border-bottom: 1px solid transparent; }
.blog-cta .demo:hover { border-bottom-color: var(--accent); }

/* Artikeldetail */
/* ── De kop van een artikel ─────────────────────────────────────────────────────────────
   Foto bovenaan over de volle contentbreedte, kruimelpad/titel/metagegevens gecentreerd
   eronder (opdracht Carl 6/8/2026; verving de tweekolomsindeling die hier tot dan stond).

   ⚠️ DE SCHERPE FOTO WORDT NOOIT UITGEREKT OF BIJGESNEDEN. Ze staat op haar eigen grootte in
   het midden van een band met VASTE hoogte; wat overblijft wordt gevuld door dezelfde foto,
   vervaagd en verdonkerd. Zo mag een bronbeeld van 800 px breed gewoon 800 px breed blijven in
   plaats van uitgesmeerd te worden over 1076. Bij een staand of erg klein beeld groeit de wazige
   rand vanzelf mee — er is dus geen enkel formaat waarbij dit stukloopt.

   De vaste bandhoogte doet nóg iets: er is geen sprong in de pagina terwijl de foto laadt,
   ongeacht haar verhouding. */
.ahead { padding: 26px 0 4px; }
/* Het kruimelpad staat boven de foto en links uitgelijnd — het zegt waar je zit, dus het hoort
   bovenaan te beginnen en niet als onderschrift onder een beeld te hangen. De categorie staat op
   diezelfde regel rechts (vraag Carl 6/8/2026); op een smal scherm valt ze eronder in plaats van
   het kruimelpad plat te drukken. */
.ahead-top { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px;
  flex-wrap: wrap; margin-bottom: 14px; }
.crumbs--top { margin: 0; text-align: left; }
.ahead-top .chip { flex: none; background: rgba(163, 183, 99, .12); color: var(--accent);
  border: 1px solid rgba(163, 183, 99, .28); border-radius: 999px; padding: 4px 13px;
  font-size: 12px; font-weight: 700; }
.ahead-top a.chip:hover { background: rgba(163, 183, 99, .22); border-color: var(--accent); }
/* ⚠️ FLEX EN GEEN GRID. In een grid is de rij zo hoog als zijn inhoud, dus `max-height: 100%`
   op de foto rekent tegen zijn eigen hoogte en begrenst niets: een staande foto stak dan gewoon
   uit de band. Een flexcontainer met een vaste hoogte geeft wél een vast ijkpunt. */
.ahero { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center;
  height: clamp(200px, 30vw, 380px); margin: 0 0 26px; overflow: hidden;
  border: 1px solid #2e2e38; border-radius: 18px; background: var(--surface); }
/* De vulling. scale() dekt de randen af die de blur anders doorzichtig maakt; saturate iets
   onder 1 houdt het rustig — een opgeblazen kleurgloed leidt af van de foto zelf. */
.ahero-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scale(1.2); filter: blur(30px) saturate(.85); }
.ahero::after { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(13, 13, 17, .45); }
/* width/height:auto naast de max-regels = de EIGEN grootte, tenzij ze niet past. Een klein beeld
   wordt dus niet opgeblazen. */
.ahero-img { position: relative; z-index: 2; width: auto; height: auto;
  max-width: 100%; max-height: 100%; border-radius: 10px; }

.ahead-tekst { max-width: 860px; margin: 0 auto; text-align: center; }
.ahead-tekst .crumbs { margin-bottom: 12px; font-size: 12.5px; }
/* Eigen maat, losgekoppeld van h1.page op het overzicht: hier moet een gewone titel op één regel
   passen zonder dat de letters onnatuurlijk klein worden. balance breekt lange titels netjes. */
.ahead-tekst h1.page { font-size: clamp(27px, 3.9vw, 40px); line-height: 1.15; margin: 0 0 4px;
  text-wrap: balance; }
.ahead-tekst .amet { justify-content: center; gap: 10px; margin-top: 14px; }
/* Puntjes tussen de tekstjes, niet vóór de categoriebadge — die draagt zijn eigen vorm al. */
.ahead-tekst .amet > span:not(.chip) + span:not(.chip)::before {
  content: '·'; margin-right: 10px; color: #4a4a55; }

@media (max-width: 800px) {
  /* Tablet: lagere band, zodat de kop niet het halve scherm opeet. */
  .ahero { height: clamp(190px, 34vw, 300px); }
}
@media (max-width: 560px) {
  /* Telefoon: volle breedte, minder blur (kost anders merkbaar rekentijd bij het scrollen),
     kleinere ronding, en metagegevens die over twee regels mogen vallen. */
  .ahead { padding-top: 16px; }
  .ahero { height: clamp(170px, 54vw, 230px); margin-bottom: 20px; border-radius: 12px; }
  .ahero-bg { filter: blur(18px) saturate(.85); transform: scale(1.3); }
  .ahero-img { border-radius: 8px; }
  .ahead-tekst .amet { gap: 8px 10px; font-size: 12.5px; }
}
.crumbs { font-size: 13px; color: var(--dim); margin-bottom: 12px; }
.crumbs a { color: var(--dim); } .crumbs a:hover { color: var(--accent); }
.amet { display: flex; gap: 14px; color: var(--dim); font-size: 13.5px; margin-top: 14px; flex-wrap: wrap; }
.amet .chip { background: rgba(163,183,99,.12); color: var(--accent); border-radius: 999px; padding: 3px 11px; font-weight: 700; }
.blog-layout { display: grid; grid-template-columns: 230px 1fr; gap: 36px; padding-top: 26px; align-items: start; }
@media (max-width: 800px) { .blog-layout { grid-template-columns: 1fr; } }
.aside { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 800px) { .aside { position: static; } }
.toc { display: flex; flex-direction: column; gap: 2px; }
.toc .h { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--dim); margin-bottom: 6px; }
.toc a { color: #c9c9d4; font-size: 13.5px; padding: 5px 10px; border-left: 2px solid #3a3a46; }
.toc a:hover { color: var(--accent); border-color: var(--accent); }
.share { display: flex; gap: 8px; flex-wrap: wrap; }
/* Doorschijnend olijfgroen (vraag Carl 6/8/2026): de deelknoppen mogen zichtbaar zijn zonder de
   inhoudstafel eronder te overstemmen. Een tint van het accent, geen vlakke kleur. */
/* Vijf iconen op één rij: 5 × 36 px + 4 × 8 px marge = 212 px, binnen de kolom van 230 px.
   Zes pasten er niet en dan viel er één naar de tweede regel (vraag Carl 6/8/2026). */
.share a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px;
  background: rgba(163, 183, 99, .12); border: 1px solid rgba(163, 183, 99, .28);
  color: #c3cf9a; cursor: pointer; font-size: 15px; transition: background .15s, border-color .15s; }
.share a:hover { background: rgba(163, 183, 99, .22);
  border-color: var(--accent); color: var(--accent); }
.deelblok { padding-bottom: 18px; border-bottom: 1px solid #26262e; }
.deelblok-h { display: block; margin-bottom: 8px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--dim); }
.prose { font-size: 16.5px; line-height: 1.75; max-width: 720px; }
.prose h2 { font-size: 24px; margin: 34px 0 12px; scroll-margin-top: 20px; }
.prose h3 { font-size: 19px; margin: 26px 0 10px; scroll-margin-top: 20px; }
/* H4 kan de redactie sinds 6/8/2026 kiezen in de editor; zonder deze regel viel hij op de blog
   terug op de browserstandaard en was hij kleiner dan gewone tekst. */
.prose h4 { font-size: 16.5px; margin: 22px 0 8px; font-weight: 700; scroll-margin-top: 20px; }
.prose p { margin-bottom: 16px; } .prose ul, .prose ol { margin: 0 0 16px 22px; }
.prose li { margin-bottom: 6px; } .prose a { text-decoration: underline; }
/* Cursief MÉT aanhalingstekens (vraag Carl 6/8/2026): een cursief blok met alleen een streepje
   ernaast leest als een terzijde, niet als iemand die iets zégt. Zelfde maten als .art-prose in
   de editor, zodat wat de redactie ziet ook is wat hier staat. */
.prose blockquote { position: relative; border-left: 3px solid var(--accent);
  padding: 6px 18px 6px 46px; margin: 20px 0; color: var(--dim); font-style: italic; }
.prose blockquote::before { content: '\201C'; position: absolute; left: 12px; top: -2px;
  font-family: Georgia, "Times New Roman", serif; font-size: 44px; line-height: 1;
  color: var(--accent); opacity: .55; font-style: normal; }
.prose img { max-width: 100%; height: auto; border-radius: 12px; margin: 6px 0 18px; }
/* Tabellen. De redactie kan er sinds 6/8/2026 met de knoppenbalk zelf een maken, en tot dan
   had de blog er geen énkele regel voor: een vergelijkingstabel kwam er als losse regels tekst
   uit. Op een telefoon schuift de tabel binnen zijn eigen kader — de pagina zelf nooit. */
/* ⚠️ De tabel schuift in ZICHZELF, op élke schermbreedte — niet alleen op een telefoon.
   De artikelkolom is een rasterkolom, en die is standaard `min-width: auto`: ze krimpt dus niet
   onder de breedte van haar inhoud. Eén vergelijkingstabel van negen kolommen duwde daardoor de
   HELE pagina 286 px breder dan het venster, ook op een laptop (gemeten op 6/8/2026). Met
   max-content + max-width:100% neemt de tabel haar natuurlijke breedte, maar nooit meer dan het
   kader — en past ze niet, dan schuift zíj in plaats van de pagina. */
.blog-layout, .blog-layout > * { min-width: 0; }
.prose table { display: block; width: max-content; max-width: 100%; overflow-x: auto;
  border-collapse: collapse; margin: 0 0 20px; font-size: 15px; }
.prose th, .prose td { border: 1px solid #2e2e38; padding: 8px 10px; text-align: left; vertical-align: top; }
.prose th { background: rgba(255, 255, 255, .04); font-weight: 700; }
.faq-sec { margin: 44px auto 0; max-width: 720px; }
.faq-sec h2 { font-size: 24px; margin-bottom: 14px; }
.faq-sec details { background: var(--surface); border: 1px solid #26262e; border-radius: 12px; margin-bottom: 8px; padding: 14px 18px; }
.faq-sec summary { font-weight: 700; cursor: pointer; font-size: 15px; }
.faq-sec p { color: var(--dim); margin-top: 10px; line-height: 1.6; font-size: 14.5px; }
.rel-h { margin: 50px 0 16px; } .rel-h .eyebrow { display: block; margin-bottom: 4px; }