/* ============================================================================
   Bruuks Huus — Wave D (Iggy's stylesheet)
   ----------------------------------------------------------------------------
   Leeg aangemaakt door Webby (Taak wave-d, punt 0) zodat de enqueue-regel in
   functions.php niet 404't. Iggy vult dit bestand met zijn eigen CSS (o.a.
   .bh-pill-toekomst en de reveal-variant-styling op zijn pagina's).
   Webby raakt dit bestand verder niet aan.
   Laadvolgorde: bh-wave-d hangt af van bh-main (functions.php) en laadt dus
   ALTIJD na main.css — overrides hieronder met gelijke of hogere specificiteit
   winnen daarom zonder !important nodig te hebben.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Grote-zaal 3D-schets — kader-ratio fix (Benjamin-feedback 2026-07-02, 1c)
   ----------------------------------------------------------------------------
   Bug in main.css: de regel `.feature .frame .ph{aspect-ratio:21/9}` gaat uit
   van .feature ALS voorouder-element van een los .frame-element (descendant-
   combinator, 2 losse elementen). In de werkelijke markup
   (`<figure class="feature frame kb reveal">`) zitten .feature EN .frame
   echter op HETZELFDE element — de regel matcht daardoor nooit, en de generieke
   `.frame .ph{aspect-ratio:4/3}` wint. Bij een ±21:9-brede 3D-impressie in een
   4:3-kader + object-fit:contain ontstaat zo een enorme lege kader-rand (de
   "mega witruimte" uit de feedback). Fix: zelfde-element-selector
   `.feature.frame .ph` (geen spatie tussen de classes) — matcht wél, en wint
   op main.css door hogere specificiteit (3 classes i.p.v. 2), dus geen
   !important nodig. object-fit naar cover: de bronfoto (2,344:1) ligt al zo
   dicht bij 21:9 (2,333:1) dat cover nagenoeg niets bijsnijdt, en het
   egale kader-vlak (voorheen zichtbaar als lege balk) verdwijnt volledig.
   ---------------------------------------------------------------------- */
.feature.frame .ph{aspect-ratio:21/9; background:#e7e2d6}
.feature.frame .ph img{object-fit:cover}

@media (max-width:940px){
  .feature.frame .ph{aspect-ratio:16/10}
}

/* ----------------------------------------------------------------------------
   0. Mobiel-breedte bugfix — main.css source-order (gevonden tijdens Wave D
      mobiel-testen, niet in Benjamin's feedbacklijst maar blokkerend voor
      correcte weergave op mijn eigen pagina's)
   ----------------------------------------------------------------------------
   main.css zet zijn mobiele grid-overrides (2/1-koloms bij ≤940px/≤640px)
   VOOR de onvoorwaardelijke desktop-basisregels verderop in hetzelfde bestand
   (bv. `.acco-grid{...repeat(2,1fr)...}` staat na de `@media(max-width:940px)`
   override die het juist 1fr moest maken). Bij gelijke specificiteit wint de
   latere, onvoorwaardelijke regel — de mobiele breakpoints worden dus NOOIT
   toegepast op 4 van mijn componenten (bevestigd via computed-style-check op
   390-500px viewport): .acco-grid (page-reserveren.php), .recur-grid
   (page-agenda.php), .ver-grid (page-verenigingen.php + page-geschiedenis.php,
   zie sectie 4 verderop), en .stichting-grid (page-over.php — gevonden
   tijdens Wave F mobiel-verificatie 2026-07-04: de mobiele 1-koloms regel op
   main.css regel 806 wordt teniet gedaan door de onvoorwaardelijke
   `.stichting-grid{grid-template-columns:1.1fr .9fr}` op regel 1063,
   waardoor de zakelijke-gegevens-kaart op 390px naast i.p.v. onder de
   bestuurslijst bleef staan, in 2 uitgeknepen kolommen van ~160/276px).
   Zelfde fix-methode: wave-d.css laadt na main.css, dus een simpele
   herhaling van de bedoelde mobiele regel hier wint alsnog.
   Structurele main.css-herordening is Webby's terrein — gemeld in het rapport.
   ---------------------------------------------------------------------- */
@media (max-width:940px){
  .acco-grid{grid-template-columns:1fr}
  .recur-grid{grid-template-columns:1fr}
  .stichting-grid{grid-template-columns:1fr}
}

/* ----------------------------------------------------------------------------
   2. Bruuks Beats — VOLLEDIGE club-hero (beams + embers + haze)
      Benjamin-besluit 2026-07-05: de goedgekeurde impeccable-demo
      (_concepts/impeccable-demo-beats.html) vervangt de te-monochrome
      terracotta-laag (de oude equalizer-lijnen + AI-bokeh-gloed hieronder).
   ----------------------------------------------------------------------------
   De warm-donkere kerkzaal-club: warme ambient-gloed, volumetrische licht-
   bundels en opstijgende embers, opgebouwd UITSLUITEND uit de eigen feest-
   familie. Signatuur = poppy #E0531C (rood-oranje) + #FFC24D (goudgeel); de
   bundel-gradienten gebruiken de bredere warme familie (koraal/amber/geel).
   GEEN off-brand neon (violet/ijsblauw/magenta), GEEN groen in de feest-band.

   Cascade: main.css -> wave-d.css -> (alleen op evenement-pagina's) feest.css.
   Op /plannen/ (geen feest-body) zetten deze regels de warme club-basis. Op de
   evenement-detailpagina laadt feest.css NA dit bestand en houdt de scroll-
   motor de band-achtergrond + accenten onder controle (groen -> aubergine met
   --feest); die morph wordt hier bewust NIET overschreven. De decor-laag
   (.beats-rig, nieuwe classes die feest.css niet kent) ligt op beide pagina's
   over de band en leest als clublicht ongeacht de band-kleur.
   ---------------------------------------------------------------------- */

/* Signatuur-kleuren als lokale vars (feest.css met de --fe-* tokens laadt niet
   op /plannen/, dus hier expliciet). De hex-literals #E0531C / #FFC24D zijn de
   poppy-identiteit. */
.disco{
  --beat-poppy:#E0531C;   /* poppy rood-oranje — signatuur */
  --beat-gold:#FFC24D;    /* goudgeel — signatuur */
  --beat-koraal:#FF8848;  /* feest-koraal — warme familie */
  --beat-amber:#FF8811;   /* feest-amber — lichtbundels */
  isolation:isolate;      /* eigen stacking-context: mix-blend-mode:screen blijft binnen de band */
}

/* Warme kerkzaal-nacht als rustbasis (geldt op /plannen/; op de evenement-
   pagina overschrijft feest.css deze background met de --feest-morph). Geen
   groen-tint meer: warm-zwart met een zachte gloedzone bovenaan, net als de
   demo-body. */
.disco{
  background-color:#160D0A;
  background-image:radial-gradient(150% 92% at 50% -14%,
    #241611 0%, #1B120F 44%, #130C0A 100%);
}

/* De oude equalizer-/bokeh-::before volledig neutraliseren — de sfeer komt nu
   uit de echte decor-laag (.beats-rig). Blijft als hook staan maar tekent niets
   meer, zodat een no-WebGL-fallback nooit de monochrome lijnen terugbrengt. */
.disco::before{ background:none !important; animation:none !important; opacity:0; }

/* --- decor-laag: ligt op z-index 0 (na de runtime-antigravity-canvas in de
   DOM, dus erover) en onder de content (.wrap = z-index 1). --- */
.disco .beats-rig{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}

/* warme ambient-bloom bovenaan, zoals de radial-body van de demo */
.disco .beats-glow{
  position:absolute; inset:0; mix-blend-mode:screen; opacity:.9;
  background:radial-gradient(122% 82% at 50% -8%,
    color-mix(in srgb, var(--beat-poppy) 26%, transparent) 0%,
    color-mix(in srgb, var(--beat-amber) 12%, transparent) 34%,
    transparent 62%);
}

/* volumetrische lichtbundels — warme kleuren, screen-blend, zachte blur */
.disco .beats-beam{
  position:absolute; top:-18%; width:34px; height:132%; transform-origin:top center;
  filter:blur(16px); mix-blend-mode:screen; opacity:0;
  clip-path:polygon(43% 0, 57% 0, 100% 100%, 0 100%);
  animation:beats-beam-in 1.4s ease .2s forwards,
            beats-beam-sway 9s ease-in-out infinite alternate;
}
/* lichtbron-bloom als radial-achtergrond (geen gekleurde box-shadow = geen
   "dark-glow"-tell) */
.disco .beats-beam .bb-src{
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  width:44px; height:44px; border-radius:50%; filter:blur(7px);
}
.disco .bb1{left:16%; --rot:-15deg; --swing:8deg;
  background:linear-gradient(to bottom, rgba(255,136,17,.50), rgba(255,136,17,0) 72%)}
.disco .bb1 .bb-src{background:radial-gradient(circle, rgba(255,170,60,.9) 0%, rgba(255,136,17,.32) 46%, transparent 70%)}
.disco .bb2{left:40%; --rot:8deg; --swing:-6deg;
  background:linear-gradient(to bottom, rgba(224,83,28,.52), rgba(224,83,28,0) 70%)}   /* #E0531C poppy */
.disco .bb2 .bb-src{background:radial-gradient(circle, rgba(255,122,64,.9) 0%, rgba(224,83,28,.34) 46%, transparent 70%)}
.disco .bb3{left:63%; --rot:19deg; --swing:8deg;
  background:linear-gradient(to bottom, rgba(255,136,72,.48), rgba(255,136,72,0) 70%)}  /* koraal */
.disco .bb3 .bb-src{background:radial-gradient(circle, rgba(255,150,90,.85) 0%, rgba(255,136,72,.30) 46%, transparent 70%)}
.disco .bb4{left:82%; width:20px; --rot:-6deg; --swing:6deg;
  background:linear-gradient(to bottom, rgba(255,194,77,.34), rgba(255,194,77,0) 64%)}  /* #FFC24D goudgeel */
.disco .bb4 .bb-src{background:radial-gradient(circle, rgba(255,194,77,.72) 0%, rgba(255,194,77,.24) 46%, transparent 70%)}

@keyframes beats-beam-in{to{opacity:.9}}
@keyframes beats-beam-sway{
  from{transform:translateX(-50%) rotate(var(--rot)) scaleY(1)}
  to{transform:translateX(-50%) rotate(calc(var(--rot) + var(--swing))) scaleY(1.04)}
}

/* onderrand-haze: warm licht dat op de dansvloer neerdaalt */
.disco .beats-haze{
  position:absolute; left:0; right:0; bottom:0; height:54%;
  pointer-events:none; mix-blend-mode:screen; opacity:.6;
  background:linear-gradient(to top,
    rgba(200,101,71,.5), rgba(255,136,72,.14) 54%, transparent);
}

/* opstijgende embers (server-side gerenderd in parts/beats-clublicht.php) */
.disco .beats-embers{position:absolute; inset:0; overflow:hidden}
.disco .beats-embers span{
  position:absolute; bottom:-14px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,178,120,.95) 0%, rgba(255,136,72,.4) 45%, transparent 72%);
  filter:blur(.4px); opacity:0;
  animation:beats-rise var(--dur,11s) linear infinite;
}
@keyframes beats-rise{
  0%{transform:translateY(0) scale(.6); opacity:0}
  14%{opacity:.85}
  82%{opacity:.4}
  100%{transform:translateY(-64vh) scale(1); opacity:0}
}

/* --- poppy accenten op de rustbasis (/plannen/). Koppen blijven cremewit voor
   leesbaarheid (net als de demo), de warmte zit in de labels/captions. Op de
   evenement-pagina overschrijft feest.css waar het de morph bestuurt (h2, cap
   span, ds-row .no); de overige accenten hier zijn óók op die pagina on-brand
   warm (nooit groen). --- */
.disco .head h2{color:#F7F1E7}
.disco .head .kicker{color:var(--beat-poppy)}
.disco .head .intro{color:rgba(247,241,231,.86)}
.disco-stage .cap b{color:#F7F1E7}
.disco-stage .cap span{color:var(--beat-gold)}
.disco-side .ds-row{border-top-color:rgba(255,194,77,.18)}
.disco-side .ds-row b{color:#F7F1E7}
.disco-side .ds-row p{color:rgba(247,241,231,.82)}

/* --- reduced-motion: alles direct in eindstaat, geen beweging (matcht demo +
   feest-baseline: statische club-hero, geen embers). --- */
@media (prefers-reduced-motion:reduce){
  .disco .beats-beam{animation:beats-beam-in 1ms linear forwards}
  .disco .beats-embers{display:none}
  .disco .beats-glow{opacity:.72}
}

/* ----------------------------------------------------------------------------
   3. .bh-pill-toekomst — duidingslabel, GEEN knop-look
      (Benjamin-feedback 2026-07-02, punt 7)
   ----------------------------------------------------------------------------
   Anti-AI-regel: geen 9999px-pil-vorm. Klein, hoekig label in dezelfde taal
   als de bestaande .frame .stamp/.acco-cap-badges op de site (rand + gedekt
   vlak), zodat het meteen leesbaar is als duiding en nooit verward wordt met
   een klikbare CTA.
   ---------------------------------------------------------------------- */
.bh-pill-toekomst{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--sans); font-weight:700; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--green-deep); background:var(--green-wash); border:1px solid var(--green);
  border-radius:3px; padding:5px 11px; margin:0 0 14px; white-space:nowrap;
}
.bh-pill-toekomst::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--bh-terracotta); flex:none}

/* ----------------------------------------------------------------------------
   4. Verenigingskaarten — consistente actie-link + logo i.p.v. badge
      (Benjamin-feedback 2026-07-02, punt 3a/3b/3c + punt 4 hergebruik)
   ----------------------------------------------------------------------------
   .ver-card is in main.css een gewoon blok (geen flex) — de actie-link staat
   daardoor op een wisselende hoogte, afhankelijk van tekstlengte. Hier wordt
   het een flex-kolom zodat .vc-go via margin-top:auto altijd onderaan zakt.
   De oude .vc-tag-badge (rechtsboven) vervalt uit de markup (card-vereniging.php
   rendert hem niet meer); in de vrijgekomen plek komt het logo, met een
   lettermonogram-fallback zodat er nooit een leeg gat ontstaat.
   ---------------------------------------------------------------------- */
.ver-card{display:flex; flex-direction:column}
.ver-card p{flex:1 0 auto}
.ver-card .vc-go{margin-top:auto; padding-top:4px}
.ver-card .vc-head{align-items:center; justify-content:flex-start; gap:11px}

/* Vorm-fix (Opie-bevinding, 2026-07-02): dit was eerst een cirkel
   (border-radius:50%). object-fit:contain past een beeld altijd binnen de
   VIERKANTE doos, maar een cirkel-masker snijdt daarna alsnog de hoeken van
   die doos af — bij een breed/banner-logo (bv. Bond voor Senioren
   804×265px, ratio 3:1) raakt het beeld de linker/rechterrand van het
   vierkant en wordt het daar door de cirkel afgesneden. Vaste rechthoekige
   doos met kleine radius i.p.v. cirkel lost dit voor ELKE logo-ratio op,
   niet alleen de huidige set. */
.vc-logo{
  width:36px; height:36px; flex:none; border-radius:8px; overflow:hidden;
  display:grid; place-items:center; background:var(--green-wash); border:1px solid var(--line);
}
.vc-logo img{width:100%; height:100%; object-fit:contain; padding:5px}
.vc-logo--fallback{
  font-family:var(--serif); font-weight:600; font-size:1.02rem; color:var(--green-deep); line-height:1;
}

/* Bugfix (gevonden tijdens mobiel-testen Wave D): main.css definieert de
   mobiele `.ver-grid`-overrides (2-koloms bij ≤940px, 1-koloms bij ≤560px)
   VOOR de onvoorwaardelijke desktop-regel `.ver-grid{grid-template-columns:
   repeat(3,1fr)}` verderop in hetzelfde bestand. Bij gelijke specificiteit
   wint de latere, onvoorwaardelijke regel altijd — de mobiele breakpoints
   worden daardoor nooit toegepast (3 kolommen knijpen dicht op een 390px-
   scherm). Zelfde-specificiteit-fix hier, want wave-d.css laadt na main.css.
   Geraakte pagina's: page-verenigingen.php + page-geschiedenis.php (beide
   Iggy-domein). */
@media (max-width:940px){
  .ver-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .ver-grid{grid-template-columns:1fr}
}

/* Uitgelicht blok: SidB + Bond voor Senioren (de 2 "bewoners" die zelf posten
   via hun sectie_eigenaar_rol-login) springen eruit met een groter kaartformaat. */
.ver-featured{margin-top:40px}
.ver-featured-note{margin:0 0 18px; color:var(--ink-soft); font-size:.94rem; max-width:62ch}
.ver-featured-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.ver-card--featured{padding:30px 28px; border-width:1.5px}
.ver-card--featured .vc-logo{width:56px; height:56px}
.ver-card--featured .vc-logo--fallback{font-size:1.5rem}
.ver-card--featured .vc-head{gap:14px; margin-bottom:11px}
.ver-card--featured h4{font-size:1.36rem}
.ver-card--featured p{font-size:1rem}
.ver-card--featured .vc-resident{
  display:block; margin:0 0 12px; font-family:var(--sans); font-style:italic; font-size:.84rem; color:var(--green-deep);
}

/* Detailpagina-logo (parts/widget-vereniging.php, punt 3 vervolg — Opie-
   bevinding): main.css `.frame .ph{aspect-ratio:4/3}` + `.frame .ph img
   {object-fit:cover}` is bedoeld voor foto's en snijdt een breed/banner-logo
   fors bij. `.logo-frame` overschrijft beide, met een neutrale achtergrond
   zodat de letterbox-marge er verzorgd uitziet i.p.v. als een gat. */
.logo-frame .ph{background:var(--paper); padding:28px}
.logo-frame .ph img{object-fit:contain}

@media (max-width:700px){
  .ver-featured-grid{grid-template-columns:1fr}
}

/* ----------------------------------------------------------------------------
   5. Contact — echte Google Maps embed i.p.v. SVG-schets
      (Benjamin-feedback 2026-07-02, punt 10a)
   ---------------------------------------------------------------------- */
.mapcard .map-canvas iframe{width:100%; height:100%; border:0; display:block}

/* Contact-pagina: iets warmere/strakkere ademruimte + fotoaccent (punt 10b) */
.komlangs-photo{margin-bottom:18px}
.komlangs-photo .ph{aspect-ratio:16/10}

@media (max-width:940px){
  .komlangs-photo{display:none}
}

/* ----------------------------------------------------------------------------
   6. Nieuws-archiefkaarten — foto toevoegen (Visier wave-gate C5, punt 1)
   ----------------------------------------------------------------------------
   main.css had voor `.news-card` alleen tekst-styling (leftover uit de oude
   <details>/<summary>-accordion-opzet uit de mockup, zie de comment in
   parts/nieuws-card.php) — geen foto-slot. `.news-card{overflow:hidden;
   border-radius:6px}` bestaat al, dus een volle-breedte `.nc-media`-afbeelding
   als eerste kind vloeit vanzelf mee met de afgeronde hoeken.
   ---------------------------------------------------------------------- */
.news-card .nc-media{display:block; aspect-ratio:16/10; overflow:hidden; background:var(--green-wash)}
.news-card .nc-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.1s var(--ease)}
.news-card:hover .nc-media img{transform:scale(1.05)}

/* ----------------------------------------------------------------------------
   7. Agenda "eerstvolgende avonden" — reveal-betrouwbaarheid (Visier
      wave-gate C5, punt 2)
   ----------------------------------------------------------------------------
   Root-cause-onderzoek (wp-cli eval + live DOM-check): de WP_Query zelf is
   correct — `found_posts: 6` bevestigd tegen de live database, en alle 6
   evenement-rijen staan echt in de DOM. Dit is dus GEEN datum-vergelijkings-
   bug. De sectie IS zichtbaar bij normaal scrollen of bij een directe
   #maand-deeplink (beide handmatig gereproduceerd en werkend bevonden). Het
   probleem zit in de betrouwbaarheid van het scroll-sweep-reveal-mechanisme
   zelf (main.js, Webby's bestand — niet aangeraakt): dat is een
   scroll/resize/load-listener i.p.v. een IntersectionObserver, en kan bij
   een snelle/programmatische scroll-sprong een frame missen waarna het
   element blijvend op `opacity:0` blijft staan totdat er nog een scroll- of
   resize-event vuurt. Voor decoratieve secties is dat onschuldig; voor deze
   functionele content (de eerstvolgende evenementen, met foto's, waar
   Benjamin op vertrouwt) is blijvende onzichtbaarheid onacceptabel. Fix
   binnen mijn eigen bestand: deze specifieke lijst altijd zichtbaar, geen
   JS-afhankelijkheid — de `.reveal`-class staat in de markup nog wel (voor
   main.js' element-lijst, geen probleem), maar wordt hier voor dit blok
   overschreven zodat opacity/clip-path nooit een geladen resultatenlijst kan
   verbergen. main.js zelf niet aangeraakt (buiten mijn zone) — als dit
   patroon elders (main.js sweep-mechanisme) een structurele robuustere fix
   verdient (IntersectionObserver i.p.v. scroll-listener), is dat Webby-werk.
   Geen !important nodig: de `#maand`-ID-selector (specificiteit 1,2,0) wint
   al op zichzelf van `.reveal:not(.stagger)` (0,2,0) / `.in`-variant (0,3,0)
   — een ID verslaat elk aantal classes, ongeacht laadvolgorde.
   ---------------------------------------------------------------------- */
#maand .agenda.reveal{opacity:1; clip-path:none; transform:none}

/* ----------------------------------------------------------------------------
   8. Geschiedenis "Van Sint-Antoniuskerk tot Bruuks Huus" — kolommen-balans
      (Benjamin-feedback 2026-07-03, Wave E punt 1a)
   ----------------------------------------------------------------------------
   Root-cause (live DOM-meting op localhost:8083/geschiedenis/, 1440px): de
   `.read-grid` staat op `align-items:start` (main.css), dus de kortste van de
   twee kolommen blijft bovenaan de rij hangen en het verschil in hoogte wordt
   zichtbare lege ruimte. Met de huidige (langere) ACF-tekst was `.prose`
   1518,5px en `.read-aside` (3 gestapelde foto's) maar 1363,25px — 155px
   lege ruimte onder de foto's. Met de oude, kortere fallback-tekst is het
   precies andersom (tekst korter dan de foto-stack) — vandaar Benjamins
   screenshot met de leegte aan de andere kant. Beide kanten zijn hetzelfde
   structurele probleem: een `align-items:start`-grid balanceert nooit
   vanzelf wanneer de twee kolommen onafhankelijk van elkaar in lengte
   variëren (nu, en bij elke toekomstige tekst-wijziging in het ACF-veld).
   Fix: de aside-kolom stretcht mee naar de volledige rijhoogte, en de 3
   foto-kaarten verdelen zich met `align-content:space-between` gelijkmatig
   over die hoogte — foto's lopen zo letterlijk "naast de tekst door" (zoals
   Benjamin voorstelde) in plaats van bovenaan te klonteren met een dode zone
   eronder. Werkt symmetrisch: bij een kortere ACF-tekst compenseert dezelfde
   regel evengoed, geen aparte fix per contentlengte nodig. `position:sticky`
   op `.read-aside` (main.css) wordt hierdoor functioneel een no-op — de
   aside is nu exact zo hoog als haar grid-rij, dus er is geen ruimte meer om
   in te "stickyen" — dat is onschadelijk (geen layout-bug, geen console-
   fout) en blijft daarom ongemoeid staan i.p.v. een aparte override erbij te
   zetten die main.css's eigen regel weer teniet zou doen. Geverifieerd:
   laatste foto-kaart en laatste tekstalinea eindigen nu op dezelfde hoogte
   (bottom-delta 0px, was 155px). Mobiel (≤940px, main.css) blijft
   ongewijzigd: `.read-grid` wordt daar 1-koloms en `.read-aside` static —
   geen rij om te balanceren, dus geen effect van deze regel.
   ---------------------------------------------------------------------- */
.read-grid{align-items:stretch}
.read-aside{align-content:space-between}

/* ----------------------------------------------------------------------------
   9. Stichting "Van wie Bruuks Huus is" — kolommen-balans stichting-grid
      (Benjamin-feedback 2026-07-03, Wave E punt 1b; HERZIEN 2026-07-04, Wave F punt 2)
   ----------------------------------------------------------------------------
   Oorspronkelijke fix (Wave E, hierboven bewaard als geschiedenis): het
   kaartje kreeg `align-items:stretch` + `justify-content:center` om de
   313px lege ruimte naast de bestuurslijst (`.over-copy`, 569px) op te
   vullen. Bijwerking, gemeld door Benjamin op 2026-07-04: de gegevens staan
   nu verticaal gecentreerd in dat gestretchte kaartje, met een groot leeg
   vlak ERBOVEN de data — een nieuw soort onbalans in plaats van de oude.
   Benjamin: "zet die gegevens gewoon weer bovenaan en kort de kaart in als
   het moet."
   Fix: geen stretch meer (`align-items:start` op de grid-rij, terug naar
   main.css's eigen waarde — vandaar geen expliciete override meer nodig),
   en het kaartje krijgt zijn natuurlijke, compacte content-hoogte terug
   (geen flex-center). Om te voorkomen dat dit terugvalt naar het oude
   313px-dode-vlak-rechts-probleem, blijft het kaartje niet zomaar bovenaan
   liggen: `position:sticky; top:96px` (zelfde patroon als `.order` en
   `.read-aside` elders in main.css, regel 564/893) houdt het kaartje in
   beeld terwijl de langere bestuurslijst voorbijscrollt — een bewust
   "meebewegend" klein kaartje in plaats van een blijvend leeg vlak ernaast.
   Geverifieerd: kaart-content start nu direct onder de "Zakelijke
   gegevens"-kop (geen leeg vlak erboven), kaart-hoogte is de natuurlijke
   content-hoogte (niet meer 569px), en sticky-gedrag bevestigd via
   scroll-simulatie op localhost. Mobiel (≤940px) blijft ongewijzigd:
   `.stichting-grid` wordt daar 1-koloms (main.css) en sticky heeft in een
   1-koloms layout sowieso geen zichtbaar effect (geen rij om in te
   "stickyen").
   ---------------------------------------------------------------------- */
.zakelijk{position:sticky; top:96px}

/* ----------------------------------------------------------------------------
   11. Over-pagina "Het verhaal" — kolommen-balans over-grid
       (Benjamin-feedback 2026-07-03, Wave E punt 1a vervolg)
   ----------------------------------------------------------------------------
   Punt 8 hierboven loste de kolommen-balans op /geschiedenis/ op (`.read-grid`
   /`.read-aside`). Dezelfde kop ("Van Sint-Antoniuskerk tot Bruuks Huus")
   staat óók, als losse voorproef-sectie met eigen intro-tekst + link "Lees de
   hele geschiedenis", op /over/#verhaal — een andere template met andere
   classes (`.over-grid`/`.over-copy`/`.over-media`), dus punt 8's fix raakt
   dit blok niet. Live DOM-meting (localhost:8083/over/, 1440px, na volledige
   scroll zodat reveal-animaties niet false-negatives geven): `.over-copy`
   (intro + 2 alinea's + citaat + CTA-knop) is 503px, `.over-media` (4 foto's
   in de media-rail) is 1075px — 572px lege ruimte onder de tekstkolom, exact
   Benjamins screenshot ("tekstkolom eindigt ver boven de foto-kolom").
   Andere grondoorzaak dan punt 8/9: hier is niet de KORTSTE kolom een
   foto-stack met herverdeelbare items (space-between-aanpak), maar lopende
   tekst met een CTA-knop erna — die kan niet zinvol worden "uitgerekt" of
   herverdeeld zonder het leesritme te breken (losstaande alinea's met gaten
   ertussen zou raar ogen). Zelfde aanpak als de café-sectie op /plannen/
   (`.split:has(.split-grid)`, main.css) daarom:
   de kortste kolom centreert verticaal in de rij (`align-items:center`)
   i.p.v. bovenaan te blijven hangen met een dood vlak eronder — de
   foto-kolom (al zo hoog als de rij) verandert daardoor niet van positie,
   alleen de tekstkolom schuift op tot het midden, zodat de restruimte
   symmetrisch boven én onder valt i.p.v. als één blok eronder.
   Scope bewust smal gehouden tot `#verhaal .over-grid` (niet de kale
   `.over-grid`-class): diezelfde class wordt ook gebruikt op
   page-reserveren.php (`#formulier .over-grid`, reserveringsformulier naast
   een prijzenkaartje) — dat ligt buiten mijn zone (Webby/Frankie-domein) en
   een blanket `align-items:center` zou daar het formulier tegen het
   prijzenkaartje kunnen laten meecentreren met een ongewenst effect. Met de
   ID-scope blijft page-reserveren.php's `align-items:start` (main.css)
   ongemoeid. Mobiel (≤940px, main.css) blijft ongewijzigd: `.over-grid`
   wordt daar 1-koloms, dus geen rij om te centreren.
   ---------------------------------------------------------------------- */
#verhaal .over-grid{align-items:center}

/* ----------------------------------------------------------------------------
   12. Scroll-posities /over/#verhaal + /over/#stichting — ankermarge
       (Benjamin-feedback 2026-07-03, Wave E punt 3)
   ----------------------------------------------------------------------------
   Live gemeten (localhost:8083/over/#stichting, na volledige page-load +
   settle): main.css's globale `html{scroll-padding-top:84px}` (desktop) en
   `70px` (≤940px, mobiel) werken al voor beide ankers — geen overlap
   gevonden op 1440px (sectiekop landt op 84px, sticky nav is 64px hoog:
   20px lucht) of op 390px (sectiekop landt op 70px, mobiele header is 67px:
   maar 3px lucht). Die 3px op mobiel is geen zichtbare bug nu, maar een
   fragiele marge zonder enige buffer: een kleine reflow (bv. font-swap bij
   trage verbinding, iets langere navigatie-tekst, afrondingsverschil tussen
   toestellen) kan 'm zo naar een paar px overlap duwen — precies het soort
   "ongemakkelijke hoogte" dat Benjamin bedoelt. Zoekgebied afgebakend tot
   MIJN twee ankers (`#verhaal`, `#stichting`, beide in page-over.php):
   overige ankers op de site (`#formulier`/`#ruimtes` op page-reserveren.php,
   `#monumenten` op page-dorp.php, `#main` skip-link in header.php) horen bij
   andere agents' zones en zijn hier niet aangeraakt. Geen andere anker-IDs
   gevonden binnen mijn drie pagina's (page-geschiedenis.php en
   page-plannen.php's café/toekomst-secties hebben geen eigen id's om naar
   te linken). Fix: kleine extra `scroll-margin-top` op de twee secties zelf
   — telt op bovenop `scroll-padding-top` (CSSOM View-spec: het target's
   scroll-margin-box moet buiten de scroll-padding-box vallen), dus dit
   verbreedt de veilige marge op mobiel van 3px naar ~19px zonder main.css's
   globale waarde aan te raken (dat zou site-breed alle andere ankers ook
   verschuiven, buiten mijn zone). Op desktop groeit de al-comfortabele 20px
   naar ~36px — geen visueel verschil te zien, puur een scroll-eindpunt.
   `#verhaal` heeft vandaag geen inkomende link, maar krijgt dezelfde marge
   voor de toekomst (zelfde sectiepatroon, kost niets, voorkomt een herhaalde
   duik hier als er ooit een link naar toe komt).
   ---------------------------------------------------------------------- */
#verhaal, #stichting{scroll-margin-top:16px}

/* ----------------------------------------------------------------------------
   12. Facebook-koppeling — herkomst op de kaart, colofon op de detailpagina,
       en het driekaartsblok op de SidB-pagina (taak 5, traject
       2026-09-07-bruukshuus-meta-koppeling)
   ----------------------------------------------------------------------------
   Waarom hier en niet in main.css: main.css is de overgenomen mockup-CSS en
   wordt niet meer aangeraakt; wave-d.css is het stylesheet dat altijd, op elke
   pagina, ná main.css laadt en dat de latere toevoegingen aan de nieuwskaart al
   draagt (punt 6 hierboven). Zo kost dit geen extra stylesheet-request op een
   site die ook op mobiel snel moet zijn.

   Typografie: geen nieuwe kleuren, geen nieuw lettertype, geen nieuwe schaal.
   De datum en het label blijven kapitaaltjes (de almanak-stem uit DESIGN.md);
   de paginanaam staat er bewust in gewone schrijfwijze naast, want dat is een
   naam en geen label — en 23 tekens kapitaal op 9,6px leest slecht, wat botst
   met het senior-eerst-uitgangspunt (PRODUCT.md, designprincipe 4).
   ---------------------------------------------------------------------- */

/* De metaregel mag afbreken: op een smalle kaart passen datum, label en
   paginanaam niet op één regel, en een inline-flex zonder wrap zou buiten de
   kaart lopen in plaats van netjes door te lopen op een tweede regel. */
.news-lead .nl-copy .nc-date{display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; row-gap:6px}
/* Op een kaart is de metaregel een blok over de volle kaartbreedte en krijgt de
   paginanaam altijd een eigen regel. Anders hangt het van de lengte van de
   datum af of de naam er nog naast past, en staat hij in de ene kaart wél en in
   de kaart ernaast niet achter het label — een rafelrand zonder betekenis. */
.news-card .nc-date, .news-tcard .nc-date{display:flex; align-items:center; gap:8px; flex-wrap:wrap; row-gap:6px}
.news-card .nc-bron, .news-tcard .nc-bron{flex-basis:100%}

/* Het label "Facebook" op de home-teaserkaart en op het uitgelichte bericht in
   het archief: dezelfde tag-stijl als op de archiefkaart (main.css
   `.news-card .nc-tag`), die daar nog niet gold. */
.news-tcard .nc-tag, .news-lead .nl-copy .nc-tag{
  font-family:var(--sans); font-weight:700; font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft); border:1px solid var(--line);
  border-radius:2px; padding:3px 8px;
}

/* De naam van de Facebookpagina, als naam gezet: geen kapitaaltjes, geen
   letterspatiëring, één tint zachter dan de datum. Bewust geen scheidingsteken
   ervoor: op een smalle kaart valt de naam op een tweede regel, en een punt of
   streepje zou dan als los teken aan het begin van die regel achterblijven. Het
   omkaderde label ernaast scheidt de twee al duidelijk genoeg. */
.news-card .nc-bron, .news-tcard .nc-bron, .news-lead .nl-copy .nc-bron{
  font-family:var(--sans); font-weight:600; font-size:.72rem; line-height:1.2;
  letter-spacing:0; text-transform:none; color:var(--ink-soft);
  display:inline-flex; align-items:center;
}
/* Het uitgelichte bericht zet zijn metaregel een maat groter (.7rem i.p.v.
   .66rem); de naam schaalt mee zodat de onderkastletters optisch even zwaar
   blijven als de kapitaaltjes ernaast. */
.news-lead .nl-copy .nc-bron{font-size:.78rem}

/* Colofonregel onder een overgenomen bericht: een haarlijn erboven scheidt de
   herkomst van de tekst zelf, zoals een bronvermelding onder een artikel. */
.prose .fb-herkomst{
  font-family:var(--sans); font-size:.88rem; color:var(--ink-soft);
  margin:28px 0 0; padding-top:16px; border-top:1px solid var(--line);
}

/* De archiefkaart is een <a> en heeft dus display:block nodig. Dat stond als
   inline-style in parts/nieuws-card.php, waar geen stylesheet eroverheen kon;
   hier kan de driekaarts-variant hieronder er wel een flex-kolom van maken. */
.news-card{display:block}

/* Het blok op de SidB-pagina toont er drie naast elkaar; het nieuwsarchief
   houdt zijn twee kolommen. Onder 940px valt alles terug op één kolom, gelijk
   aan de bestaande `.news-grid`-override in main.css. */
.news-grid.is-drie{grid-template-columns:repeat(3,1fr)}
@media (max-width:940px){
  .news-grid.is-drie{grid-template-columns:1fr}
}

/* Drie kaarten naast elkaar zijn even hoog, maar niet elk Facebook-bericht
   heeft een foto. Zonder deze regel eindigt de tekst van een kaart zonder foto
   halverwege en blijft de rest van de kaart leeg onder "Lees verder". Dezelfde
   oplossing als bij de home-teaserkaart in main.css (`.news-tcard` is een
   flex-kolom met `p{flex:1}`): de tekst rekt op, de link staat onderaan. */
.news-grid.is-drie .news-card{display:flex; flex-direction:column}
.news-grid.is-drie .news-card > div{display:flex; flex-direction:column; flex:1}
.news-grid.is-drie .news-card .nc-intro{flex:1}