/* =============================================================================
   Long tail — sectoren, product, koppelingen, artikelen
   -----------------------------------------------------------------------------
   Hoort bij de wireframes van 18-09-2026 (ireserve-website24/i-reserve_paginas).
   Alleen wat de funnelpagina's niet al hebben; de rest komt uit base.css,
   home.css en pages.css. Geen kleuren buiten de tokens.
   ============================================================================= */

/* --- kruimelpad ----------------------------------------------------------- */
.crumbs {
  padding-block: var(--space-4) 0;
  font-size: var(--text-xs);
  color: var(--c-ink-muted);
}
.crumbs .container { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; }
.crumbs a { color: var(--c-ink-muted); }
.crumbs a:hover { color: var(--c-accent); }
.crumbs [aria-current="page"] { color: var(--c-ink-strong); }
/* Kruimelpad + hero met gradient (_longtail.php): de gradient van .phero--home (pages.css) op het
   omhulsel, zodat hij achter het kruimelpad doorloopt; de hero zelf is dan transparant. */
.phero-top { background: linear-gradient(to bottom left, #d9ebfa 0%, #ffffff 55%, #ffffff 100%); }
.phero-top .phero--home { background: none; }

/* --- hero-aanvullingen ---------------------------------------------------- */
/* Overzichtspagina's hebben geen beeld: dan één kolom, tekst niet te breed. */
.phero--flat .phero__grid { grid-template-columns: 1fr; }
.phero--flat h1,
.phero--flat .phero__intro { max-width: 30ch; }
.phero--flat .phero__intro { max-width: 68ch; }
/* wide (artikeloverzicht, categorieën): intro en noot breder dan 68ch, maar op grote schermen
   begrensd; allebei dezelfde breedte, zodat ze rechts gelijk eindigen. */
.phero--wide .phero__intro,
.phero--wide .phero__note { max-width: 60rem; }
.phero__note { font-size: var(--text-sm); color: var(--c-ink-muted); margin: calc(-1 * var(--space-3)) 0 var(--space-5); }
/* De kaarten horen bij de hero: geen volle sectieruimte ertussen, en geen marge onder de laatste alinea. */
.phero--wide .phero__grid > div > :last-child { margin-bottom: 0; }
.phero--wide + .section { padding-top: var(--space-4); }

.phero__logo { margin-bottom: var(--space-4); }
.phero__logo img { max-width: 160px; max-height: 56px; width: auto; height: auto; }

.phero__figure { margin: 0; }
.phero__figure img {
  width: 100%; height: 100%; max-height: 460px;
  object-fit: cover;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
}
/* Met schaduw (sectorhero met eigen foto) geen rand, net als op /demo/. */
.phero__figure--shadow img { border: 0; }
/* rd_options vrij: transparant koppelingbeeld, los op de achtergrond, heel in beeld (Jacq, 03-10-2026). */
.phero__figure--vrij img { border: 0; border-radius: 0; object-fit: contain; }

/* Labels naast de kop: techniek, benodigde module, pakket. Zoals de wireframe (.badge): lichtblauw
   vlak, donkerblauwe tekst, 12px medium, 4px 10px, hoek 4px, 6px ertussen (Jacq, 03-10-2026). */
.hero__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-5); }
.tag {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-tag-ink);
  background: var(--c-tag-bg);
  border-radius: 4px;
}

/* --- linkraster ------------------------------------------------------------
   Eén component voor elk overzicht: sectoren, functies, koppelingen, artikelen.
   De hele kaart is de link — een kleine "lees meer" is een te klein doel. */
.link-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.link-grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
/* /product/: het aantal functies onderaan elke kaart op gelijke hoogte, ook als de teksten verschillen
   (Jacq, 03-10-2026). */
.link-grid--wide .link-card__body { flex: 1 1 auto; }
.link-grid--wide .link-card__meta { margin-top: auto; }

.link-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
a.link-card:hover { border-color: var(--c-accent); transform: translateY(-2px); }
a.link-card:hover .link-card__title { color: var(--c-accent-ink); }
.link-card--soon { opacity: .6; }

.link-card__body { display: flex; flex-direction: column; gap: var(--space-2); }
.link-card__title {
  font-size: var(--text-lg);
  line-height: var(--lh-tight, 1.25);
  color: var(--c-ink-strong);
}
.link-grid--logo .link-card__title { font-size: var(--text-base); }
.link-card__text { font-size: var(--text-sm); color: var(--c-ink-muted); }
.link-card__meta { font-size: var(--text-xs); color: var(--c-accent-ink); }
/* Zichtbaar linklabel onderaan de kaart (vlag meer, sectorpagina's): nodigt uit om te klikken (Jacq, 04-10-2026). */
.link-card__meer { display: block; margin-top: auto; padding-top: var(--space-3); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--c-accent-ink); }
.link-card:hover .link-card__meer { text-decoration: underline; }

/* met beeld: sectoren en artikelen */
.link-grid--image .link-card { padding: 0; overflow: hidden; gap: 0; }
.link-grid--image .link-card__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.link-card__img {
  display: block; width: 100%; height: 150px;
  object-fit: cover;
  border: 0; border-radius: 0;
  min-height: 150px;
}
/* Artikelkaarten (overzicht, categorieën, Lees ook): hoger beeldvlak, zodat de vaak vierkante
   omgezette tekeningen (contain) genoeg ruimte krijgen. Sectoren: 3:2, zie link-grid--foto. */
.link-grid--art .link-card__img { height: 180px; min-height: 180px; }
/* Foto's (/sectoren/): beeldvlak 3:2, zoals de sectorkaarten op de homepage (.vision-card__img). */
.link-grid--foto .link-card__img { height: auto; min-height: 0; aspect-ratio: 3 / 2; }
/* Meta (datum op de categoriepagina, categorienaam bij Lees ook) onderin de kaart: alle kaarten in
   een rij zijn even hoog, dus de meta staat overal op dezelfde lijn. */
.link-grid--art .link-card__body { flex: 1 1 auto; }
.link-grid--art .link-card__meta { margin-top: auto; padding-top: var(--space-2); }
/* Getekende beelden (img/kennis/*.svg): passend in het vlak. Verloop als de homepage-hero
   (blauw 100 → wit), maar verticaal: onderaan loopt het naadloos over in de witte kaart. */
.link-card__img--illu {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-3);   /* was 12px 24px: brede beelden werden te klein */
  box-sizing: border-box;
  background: linear-gradient(to bottom, #d9ebfa, #ffffff);
}
/* Het beeld past in het vlak (contain) en krijgt zelf ronde hoeken: zichtbaar bij screenshots en
   foto's; bij transparante illustraties en svg's knipt het alleen doorzichtige hoekjes weg. */
.link-card__img--illu img {
  display: block; max-width: 100%; max-height: 100%; width: auto; height: auto;
  border-radius: var(--radius-md);
}
/* svg heeft geen eigen pixelmaat (anders 300×150): het vlak vullen, tekening past erin. */
.link-card__img--illu img[src$=".svg"] { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }

/* met logo: koppelingen */
/* Wireframe /koppelingen/ (Jacq, 01-10-2026): altijd 4 kolommen, kaarten rekken niet op als een
   categorie er maar twee heeft; logo heel (contain) in een vast vlak links, meta in grijs. */
.link-grid--logo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .link-grid--logo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .link-grid--logo { grid-template-columns: minmax(0, 1fr); } }
.link-grid--logo .link-card { flex-direction: row; align-items: center; gap: var(--space-4); padding: var(--space-4); }
.link-card__logo {
  flex: 0 0 64px; width: 64px; height: 44px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}
.link-grid--logo .link-card__meta { color: var(--c-ink-muted); }
.link-grid--logo .link-card__body { min-width: 0; }

/* Ankers als pillen in een strook onder de hero (vlag chips, /koppelingen/, Jacq 01-10-2026): over de
   volle containerbreedte verdeeld, achtergrond = die van de hero (de pagina). Smaller: ze lopen door. */
/* Sticky (Jacq, 01-10-2026): de strook blijft direct onder de menubalk staan, zodat je na een klik op
   een pil meteen een andere categorie kunt kiezen, zoals de oude ankerbalk. De ankerdoelen houden
   ruimte vrij voor menubalk + strook ([id].anchor-target in pages.css). */
.phero-chips {
  position: sticky; top: var(--header-h); z-index: 20;
  background: var(--c-page);
  padding-block: var(--space-3);
  margin-bottom: var(--space-3);
}
/* Direct onder een gradient-hero (phero-top) loopt de gradient onderaan uit in wit: de strook dan
   ook wit, zodat hij er naadloos op aansluit. Vast bovenin: zie .is-vast (js/redesign/anker.js). */
.phero-top + .phero-chips { background: var(--c-surface); }
/* Vast bovenin (Jacq, 01-10-2026): halftransparant wit met een lichte vervaging, zodat de inhoud er zacht
   doorheen schemert; geen lijn en geen schaduw. */
.phero-chips.is-vast {
  background: color-mix(in srgb, var(--c-surface) 60%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.phero-chips__lijst { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; max-width: none; }
/* Smal scherm: één rij die horizontaal scrolt, anders neemt de vaste strook half het scherm in. */
@media (max-width: 720px) {
  .phero-chips__lijst { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .phero-chips__lijst .chip { flex: 0 0 auto; }
}
.phero-chips__lijst .chip { flex: 1 1 auto; justify-content: center; white-space: nowrap; text-decoration: none; color: var(--c-ink); cursor: pointer; }
.phero-chips__lijst .chip:hover { background: var(--c-accent-soft); color: var(--c-accent-ink); }
.link-card__logo--empty { background: var(--c-surface-2); border: 1px solid var(--c-line); }

.link-grid__more { margin-top: var(--space-5); }
.link-grid__note { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--c-ink-muted); }
.link-grid__line { margin-top: var(--space-4); }

/* --- uitklapbare functielijst --------------------------------------------- */
.feat-acc {
  display: grid;
  gap: 0 var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  align-items: start;
}
.feat-acc__item { border-bottom: 1px solid var(--c-line-soft); }
.feat-acc__item > summary {
  display: flex; justify-content: space-between; gap: var(--space-3); align-items: center;
  padding-block: var(--space-4);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  color: var(--c-ink-strong);
  list-style: none;
}
.feat-acc__item > summary::-webkit-details-marker { display: none; }
.feat-acc__item > summary::after { content: "+"; color: var(--c-accent); font-size: var(--text-lg); line-height: 1; flex: none; }
.feat-acc__item[open] > summary::after { content: "–"; }
.feat-acc__item > p { padding-bottom: var(--space-4); font-size: var(--text-sm); color: var(--c-ink-muted); }
/* Doelwit van een anker uit de kaarten bovenaan: niet onder de balken vallen. */
.feat-acc__item { scroll-margin-top: 120px; }

/* --- lopende tekst --------------------------------------------------------- */
.prose-split { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: var(--space-6) var(--space-8); }
.prose-split__head h2 { margin-bottom: var(--space-3); }
.prose-split__note { font-size: var(--text-sm); color: var(--c-ink-muted); }
.prose-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--space-6); }
.prose-pair h2 { margin-bottom: var(--space-3); }
/* Twee tekstkolommen naast elkaar (o.a. Extra mogelijkheden | Zo zet je het aan): meer lucht ertussen (Jacq, 03-10-2026). */
.prose-pair:not(.prose-pair--cards) { column-gap: var(--space-8); }
/* cards: de blokken als kaart, zoals de wireframe van een koppelingdetail. */
.prose-pair--cards { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.prose-pair--cards > div { padding: var(--space-5); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg); }
.prose-pair--cards h2 { font-size: var(--text-xl); }

/* `.prose` zelf staat in base.css (stapel met gap); hier alleen de maat en de
   dingen die base niet regelt. */
.prose { max-width: 70ch; }
.prose h2 { font-size: var(--text-xl); }
.prose h3 { font-size: var(--text-lg); }
.prose a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }   /* huisstijl: link primair 500, hover 600 */
.prose a:hover { color: var(--c-accent-ink); }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-lg); }
.prose table { font-size: var(--text-sm); }

@media (max-width: 860px) {
  .prose-split { grid-template-columns: 1fr; }
}

/* --- artikel --------------------------------------------------------------- */
/* Artikelkop: hetzelfde raster als .art-layout eronder (14rem voor de inhoudsopgave + de
   tekstkolom van max 70ch), zodat titel, meta en tekst links én rechts exact uitlijnen. */
.phero--article .phero__grid { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); }
.phero--article .phero__grid > * { grid-column: 2; max-width: 70ch; }
.art-layout { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--space-8); }
.art-toc { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: var(--space-2); }
.art-toc a { font-size: var(--text-sm); color: var(--c-ink-muted); }
.art-toc a:hover { color: var(--c-accent); }

/* Het artikel staat altijd in de brede kolom, ook als er geen inhoudsopgave is (een artikel
   zonder koppen): anders schuift het in de smalle eerste kolom van 14rem. */
.art { max-width: 70ch; grid-column: 2; }
.art > * + * { margin-top: var(--space-4); }
.art__lead { font-size: var(--text-md); color: var(--c-ink-strong); }
.art h2 { font-size: var(--text-xl); margin-top: var(--space-7); scroll-margin-top: 110px; }
/* De inhoudsopgave kan ook naar h3/h4 wijzen (artikelen zonder h2): ook die niet onder de header. */
.art :is(h3, h4)[id] { scroll-margin-top: 110px; }
.art h3 { font-size: var(--text-lg); margin-top: var(--space-5); }
.art ul, .art ol { padding-left: 1.25em; display: flex; flex-direction: column; gap: var(--space-2); }
.art ul { list-style: disc; }
.art ol { list-style: decimal; }
.art a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }   /* huisstijl: link primair 500, hover 600 */
.art a:hover { color: var(--c-accent-ink); }
.art img { max-width: 100%; height: auto; border-radius: var(--radius-lg); }

/* CTA middenin het artikel: lezen en uitproberen liggen hier het dichtst bij elkaar. */
.art-cta {
  display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start;
  margin-block: var(--space-6);
  padding: var(--space-5);
  background: var(--c-accent-soft);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
}
.art-cta b { font-family: var(--font-display); color: var(--c-ink-strong); }
.art-cta p { font-size: var(--text-sm); color: var(--c-ink-muted); }

@media (max-width: 900px) {
  .art-layout { grid-template-columns: 1fr; gap: var(--space-5); }
  .art-toc { position: static; }
  .art { grid-column: auto; }
  .phero--article .phero__grid { grid-template-columns: minmax(0, 1fr); }
  .phero--article .phero__grid > * { grid-column: auto; }
}

/* --- koppeling: wat er meegaat --------------------------------------------- */
.map-card {
  align-self: start;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.map-card__head {
  padding: var(--space-3) var(--space-4);
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-line);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-sm);
  color: var(--c-ink-strong);
}
.map-card__table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.map-card__table th,
.map-card__table td { padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--c-line-soft); text-align: left; }
.map-card__table th { font-size: var(--text-xs); color: var(--c-ink-muted); font-weight: var(--fw-medium); }
.map-card__table td[aria-hidden] { width: 2em; color: var(--c-ink-faint); text-align: center; }

/* --- quote met beeld -------------------------------------------------------- */
.quote-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.quote-split__img { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--c-line); }
@media (max-width: 860px) {
  .quote-split { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* --- blokken: echte schermafdruk en kleine noot ------------------------------ */
.feature__img { width: 100%; height: auto; border: 1px solid var(--c-line); border-radius: var(--radius-lg); }
.feature__img--vrij { border: 0; }   /* productcategorie: beelden zonder rand (Jacq, 04-10-2026) */
.feature__note { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--c-ink-muted); }


/* Screenshot in perspectief (".kantel"). _content.php zet elk artikelbeeld met "-kantel" in de
   bestandsnaam in dit omhulsel; de browser kantelt het, bovenaan smaller, onderaan breder, met een
   zachte schaduw eronder. Het beeld zelf is plat.
   Voor wie een beeld aanlevert: platte screenshot, transparante (of weggesneden) achtergrond,
   uitgesneden op 3:2 (liefst 1200×800 of groter), bestandsnaam eindigt op "-kantel" (bv.
   slack-flow-kantel.webp). De vorm is die van Jacqs Photoshop-versie van de Slack-flow, nagemeten;
   alle maten in cqw, zodat hij met de kolombreedte meeschaalt. */
.art .kantel,
.prose .kantel,
.prose-beeld .kantel {   /* ook op koppelingspagina's (Jacq, 01-10-2026) */
  container-type: inline-size; position: relative; overflow: hidden;
  aspect-ratio: 804 / 563; margin: var(--space-5) 0;
  filter: drop-shadow(0 10px 18px rgb(11 42 61 / .08));
}
.art .kantel img,
.prose .kantel img,
.prose-beeld .kantel img {
  position: absolute; left: 0; top: 0; max-width: none; border-radius: 0;
  width: 74.6269cqw; height: 49.7512cqw;   /* 3:2 */
  transform-origin: 0 0;
  transform: translate(19.7263cqw, 2.2517cqw) matrix(0.792045, 0, -0.289258, 0.910114, 0, 0) perspective(59.6271cqw) rotateX(30deg);
}

/* --- sectorpagina's volgens de wireframe (28-09-2026) ---------------------- *
 * Opt-in via rd_options, zodat andere pagina's met dezelfde secties niet veranderen.
 * boxed (features): elke regel een los wit kader, zodat hij ook op een grijze sectie
 * staat. features boxed: altijd twee kolommen, onder 720px één. De FAQ-variant staat in
 * pages.css: die geldt sinds 03-10-2026 voor elke FAQ, ook op pagina's zonder dit bestand. */
.feat-acc--boxed .feat-acc__item {
  border: 1px solid var(--c-line); border-radius: var(--radius-md);
  background: var(--c-surface); padding-inline: var(--space-4);
}
.feat-acc--boxed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
@media (max-width: 720px) { .feat-acc--boxed { grid-template-columns: minmax(0, 1fr); } }

/* overstap: lichtblauw kader in een grijze sectie, knop rechts. */
.managed--overstap { margin-top: 0; background: var(--c-accent-soft); border-color: var(--c-line); }
.managed--overstap h3 { margin-bottom: var(--space-2); }
.managed--overstap p { color: var(--c-ink); font-size: var(--text-base); margin: 0; }
.managed--overstap > div { flex: 1 1 28rem; }

/* media-plaatshouder (demoblok zonder screenshot): het vlak van de screenshot, 4:3, met het
   label linksboven zodat het binnen het gekantelde, uitfadende kader leesbaar blijft. */
.feature-media__ph {
  aspect-ratio: 4 / 3;
  background: var(--c-surface-2);
  display: flex; align-items: flex-start; justify-content: flex-start;
  padding: 8% 0 0 8%;
  font-size: var(--text-sm); color: var(--c-ink-muted);
}
.feature-media__ph span { max-width: 40%; }
/* Voorlopig onzichtbaar (Jacq, 03-10-2026), net als .shot in home.css: het hele gekantelde kader houdt zijn plek,
   de aanwijzing blijft in de HTML. */
.feature-media:has(.feature-media__ph) { visibility: hidden; }

/* Logobalk op sectorpagina's (logos narrow): dezelfde doorlopende rij als op de homepage, maar
   binnen de kolom in plaats van tot de schermrand. Plaatshouder: grijs vak ter
   grootte van een gemiddeld logo. */
/* Even breed als de brede kolom eronder (.container--wide min de zijmarges), zodat de logo's
   vervagen precies waar de kaarten ophouden (Jacq, 28-09-2026). */
.logos--narrow .logos__viewport { max-width: calc(min(100%, var(--width-wide)) - 2 * var(--gutter)); margin-inline: auto; }
.logos__ph {
  display: grid; place-items: center; width: 120px; height: 40px;
  border: 1px dashed var(--c-line); border-radius: var(--radius-md);
  font-size: var(--text-xs); color: var(--c-ink-muted); background: var(--c-surface);
}
.logos__ph { visibility: hidden; }   /* voorlopig onzichtbaar, plek blijft (Jacq, 03-10-2026) */
/* Licht logo (meta dim, bijv. het gele X-Cube-icoon): in rust donkerder grijs zodat het niet
   wegvalt; bij hover of focus wint de regel uit home.css (filter: none) en zie je de echte kleur. */
.logos__track img.logos__img--dim { filter: grayscale(100%) brightness(.55); }
/* Stilstaande rij bij een of twee logo's (_sections.php): gecentreerd, geen vervaagde randen.
   Bij drie of vier alleen vanaf tabletbreedte; de herhalingen (aria-hidden) vallen dan weg. */
.logos__viewport--static { -webkit-mask-image: none; mask-image: none; }
.logos__track--static { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
@media (min-width: 721px) {
  .logos__viewport--static-wide { -webkit-mask-image: none; mask-image: none; }
  .logos__track--static-wide { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
  .logos__track--static-wide li[aria-hidden] { display: none; }
}

/* --- veegbare rij ----------------------------------------------------------
   "Ook in …" bij meer dan vier koppelingen (Jacq, 03-10-2026): één rij, vier kaarten
   in beeld, zelf vegen of met de pijlknoppen (js/redesign/veeg.js). Beweegt nooit vanzelf.
   Knoppen in dezelfde stijl als de stappen-slider op de homepage. */
.link-grid--veeg {
  display: grid; grid-auto-flow: column; grid-template-columns: none;
  grid-auto-columns: calc((100% - 3 * var(--space-4)) / 4);
  gap: var(--space-4);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; padding-block: 2px;   /* ruimte voor de hover-verschuiving */
}
.link-grid--veeg::-webkit-scrollbar { display: none; }
.link-grid--veeg > * { scroll-snap-align: start; }
@media (max-width: 860px) { .link-grid--veeg { grid-auto-columns: calc((100% - var(--space-4)) / 2); } }
@media (max-width: 560px) { .link-grid--veeg { grid-auto-columns: 80%; } }
.veeg__nav { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }
.veeg__nav[hidden] { display: none; }
.veeg__arrow {
  width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 50%;
  color: var(--c-accent); transition: background .2s, border-color .2s, opacity .2s;
}
.veeg__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.veeg__arrow:hover:not(:disabled) { border-color: var(--c-accent); background: var(--c-accent-soft); }
.veeg__arrow:disabled { opacity: .35; cursor: default; }
@media (prefers-reduced-motion: reduce) { .link-grid--veeg { scroll-behavior: auto; } }

/* Brede afbeelding onder de kaarten (koppeling met tabel én beeld; optie A, Jacq 03-10-2026). */
.prose-beeld { margin: 0 auto; max-width: 960px; }
.prose-beeld--smal { max-width: 480px; }   /* vierkant of staand beeld (Jacq) */
.prose-beeld img { display: block; width: 100%; height: auto; }   /* transparant beeld, los op de achtergrond (Jacq, 03-10-2026) */
/* Strook met een beeld dat (nog) niet getoond wordt: tag "verbergen" op het beeld (Jacq, 03-10-2026). */
.section--verborgen { display: none; }

/* Productcategorie: introblok direct onder de hero, smal en gecentreerd zoals de wireframe (.wrap.narrow.intro,
   760px) (Jacq, 03-10-2026). */
.prose--intro { max-width: 760px; margin-inline: auto; }

/* Productcategorie (Jacq, 03-10-2026), zoals de wireframe: label boven de blokkop (.eye), labels onder de tekst als
   lichtblauwe tags (.badge, gelijk aan de koppelingbadges) en blauwe titels in "Alle functies" (.feat-list h3). */
.feature__kicker { margin: 0 0 var(--space-3); }
.chips--tag { gap: 6px; }
.chips--tag .chip {
  padding: 4px 10px; border: 0; border-radius: 4px;
  background: var(--c-tag-bg); color: var(--c-tag-ink);
  font-size: 12px; font-weight: 500; line-height: 1.5;
}
.chips--tag .chip:hover { border: 0; color: var(--c-tag-ink); }
.link-grid--feat .link-card__title { color: var(--c-accent); }

/* 404-pagina (Jacq & Claude, 03-10-2026): zoekveld en een rij links in de hero, in de stijl van de zoekbalk. */
.phero__zoek { display: flex; gap: var(--space-2); max-width: 30rem; margin: 0 0 var(--space-5); }
.phero__zoek input {
  flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 var(--space-4);
  border: 1px solid var(--c-line); border-radius: var(--radius-pill);
  background: var(--c-surface); color: var(--c-ink-strong); font: inherit; font-size: var(--text-base);
  -webkit-appearance: none; appearance: none;
}
.phero__zoek input::placeholder { color: var(--c-ink-faint); }
.phero__zoek input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); }
.phero__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.phero__links a { font-weight: 500; color: var(--c-accent); }

/* Functiepagina, kaart "Voor wie": sectoren als losse links (03-10-2026). */
.principe__links { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Sectoren als kleine witte knoppen met rand, in plaats van tekstlinks (Jacq, 03-10-2026). */
.principe__links .btn--klein { background: #fff; font-size: var(--text-sm); padding: 0.4em 0.9em; text-decoration: none; }
.principe__links .btn--klein:hover { background: #fff; border-color: var(--c-accent); color: var(--c-accent-ink); }

/* .grid--kaart staat sinds 04-10-2026 in home.css: ook /demo/ (funnelpagina, zonder longtail.css) gebruikt hem. */
.link-grid__more--center { text-align: center; }   /* gecentreerde backlink onder een gecentreerde sectie (Jacq, 03-10-2026) */