/* ==========================================================================
   Vindwijs — gidslaag. Hergebruikt de tokens uit styles.css. Consistent met de site.
   ========================================================================== */

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

.gids{ max-width:880px; padding-block:clamp(26px,5vw,52px) clamp(48px,7vw,84px); }

/* ---- Kruimelpad --------------------------------------------------------- */
.breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.9rem; color:var(--muted); margin-bottom:26px; }
.breadcrumb a{ color:var(--body); }
.breadcrumb a:hover{ color:var(--pine-700); }
.breadcrumb .sep{ color:var(--border-2); }
.breadcrumb [aria-current]{ color:var(--ink); }

/* ---- Zaakpagina --------------------------------------------------------- */
.zaak h1{ font-size:clamp(2rem,5vw,2.9rem); margin:6px 0 10px; }
.checked{ display:inline-block; font-size:.85rem; font-weight:600; color:var(--pine-700); background:var(--pine-50); padding:5px 12px; border-radius:999px; margin:0 0 18px; }
.lead-spec{ font-size:1.14rem; color:var(--body); max-width:62ch; }
.zaak-foto{ width:100%; max-height:340px; object-fit:cover; border-radius:var(--r); border:1px solid var(--border); margin:10px 0 20px; }

.zaak-grid{ display:grid; gap:32px; margin-top:28px; }
@media (min-width:760px){ .zaak-grid{ grid-template-columns:1fr 1fr; gap:46px; } }
.zaak-grid h2{ font-size:1.3rem; margin:0 0 14px; }

.zaak-facts dl{ display:grid; grid-template-columns:auto 1fr; gap:9px 16px; margin:0 0 18px; }
.zaak-facts dt{ color:var(--muted); font-size:.92rem; }
.zaak-facts dd{ margin:0; color:var(--ink); }

.uren{ width:100%; border-collapse:collapse; font-size:.96rem; }
.uren th{ text-align:left; font-weight:500; color:var(--body); padding:5px 0; }
.uren td{ text-align:right; color:var(--ink); padding:5px 0; border-bottom:1px solid var(--border); }
.uren tr:last-child td{ border-bottom:0; }
.uren .dicht{ color:var(--muted); }

.capsule{ border-left:2px solid var(--pine); padding:1px 0 1px 16px; margin-bottom:16px; }
.capsule h3{ font-family:var(--sans); font-weight:650; font-size:1.02rem; margin:0 0 4px; }
.capsule p{ margin:0; color:var(--body); }

.sameas{ margin-top:32px; }
.sameas h2{ font-size:1.15rem; margin:0 0 12px; }
.sameas ul{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:9px 10px; }
.sameas a{ display:inline-block; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:7px 14px; font-size:.9rem; }
.sameas a:hover{ border-color:var(--pine); color:var(--pine-700); }

.gids-links{ margin-top:30px; color:var(--muted); font-size:.95rem; }

/* ---- Gemeente / branche ------------------------------------------------- */
/* Geen zwaar paneel: een rustig blok met één lijn links. */
.aggregate{ border-left:2px solid var(--pine); padding:2px 0 2px 20px; margin:6px 0 40px; }
.aggregate h2{ font-size:1.12rem; margin:0 0 10px; }
.aggregate ul{ margin:0 0 10px; padding-left:1.05em; }
.aggregate li{ color:var(--ink); margin-bottom:6px; }
.aggregate .bron{ margin:0; font-size:.84rem; color:var(--muted); }

/* Register-stijl i.p.v. kaartjes: rustiger, geen ongelijke blokken, en het schaalt
   even goed bij 1 als bij 100 vermeldingen. Lucht mag. */
.gids-cards{ list-style:none; padding:0; margin:0; border-top:1px solid var(--border); }
.gids-card a{
  display:block; position:relative; padding:17px 30px 17px 0;
  border-bottom:1px solid var(--border); color:var(--ink);
  transition:padding-left .25s var(--ease-out), color .2s ease;
}
.gids-card a::after{
  content:"→"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  color:var(--border-2); font-size:1rem; transition:color .2s ease, right .25s var(--ease-out);
}
.gids-card a:hover{ padding-left:9px; color:var(--pine-700); }
.gids-card a:hover::after{ color:var(--pine); right:2px; }
.gids-card strong{ display:block; font-family:var(--serif); font-weight:600; font-size:1.14rem; letter-spacing:-.01em; }
.gids-card span{ display:block; color:var(--muted); font-size:.93rem; margin-top:2px; max-width:68ch; }

/* ---- Zoekbalk ----------------------------------------------------------- */
.gids-zoek{ position:relative; margin:26px 0 46px; }
.gids-zoek__ic{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--muted); pointer-events:none; }
.gids-zoek__ic svg{ width:100%; height:100%; display:block; }
.gids-zoek input{ width:100%; box-sizing:border-box; padding:14px 18px 14px 46px; font:inherit; font-size:1rem; color:var(--ink); background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--sh-sm); }
.gids-zoek input:focus{ outline:none; border-color:var(--pine); box-shadow:0 0 0 3px var(--pine-50); }
.gids-zoek input::placeholder{ color:var(--muted); }
.gids-telling{ color:var(--muted); font-size:.9rem; margin:0 0 12px; }
.gids-geen{ color:var(--muted); }

/* ---- Landing-secties ---------------------------------------------------- */
.gids-groep{ font-size:1.15rem; margin:0 0 4px; }
.gids-groep-blok{ margin-bottom:52px; }
.gids-groep-blok:last-child{ margin-bottom:0; }
.gids-groep-uitleg{ margin:0 0 16px; color:var(--muted); font-size:.93rem; }

/* Twee gelijkwaardige ingangen naast elkaar: WAT (type) en WAAR (gemeente).
   Zo is het één matrix i.p.v. losse niveaus onder elkaar. */
.gids-blader{ color:var(--muted); font-size:.93rem; margin:0 0 20px; }
.gids-assen{ display:grid; gap:40px; }
@media (min-width:720px){ .gids-assen{ grid-template-columns:1fr 1fr; gap:46px; } }
.gids-assen .as{ min-width:0; }

/* ---- Organisatie / events ----------------------------------------------- */
.org-events{ margin:24px 0 6px; }
.org-events h2{ font-size:1.3rem; margin:22px 0 12px; }
/* Zelfde rustige register-stijl als de rest van de gids. */
.ev-lijst{ list-style:none; padding:0; margin:0; border-top:1px solid var(--border); }
.ev-lijst li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; padding:15px 2px; border-bottom:1px solid var(--border); }
.ev-lijst strong{ font-family:var(--serif); font-size:1.06rem; font-weight:600; }
.ev-datum{ font-size:.82rem; font-weight:600; color:var(--pine-700); background:var(--pine-50); padding:3px 10px; border-radius:999px; }
.ev-voorbij li{ opacity:.7; }
.ev-meer{ margin:14px 0 0; font-size:.92rem; color:var(--muted); }
.org-events h2{ margin-bottom:14px; }