/* ============================================================
   REALISATIES — het projectoverzicht

   De kaart zelf (.rea-kaart, .rea-kader, .rea-vlak, .rea-onder)
   komt uit basis.css en wordt hier alleen uit de flexrij gehaald.
   De filterknop komt uit blokken.css, bij .sprong a: dezelfde pil
   die op elke childpagina de sprongnavigatie draagt.

   HET FILTEREN WERKT ZONDER SCRIPT. De radio's staan in de HTML
   en de gegenereerde regels onderaan verbergen wat niet past.
   JavaScript voegt alleen de telling, de lege-resultaatzin en de
   URL-staat toe.
   ============================================================ */

/* De standaardhero knijpt zijn titel tot vijftien tekens. Deze
   kop is een volle zin en hoort op twee regels, niet op vier. */
.hero-smal h1{max-width:24ch}

/* De projecten staan hoog. Wie hier komt wil werk zien, niet
   eerst een schermhoogte tekst.                              */
.hero-smal{padding-block:clamp(120px,14vh,180px) clamp(24px,3vw,38px)}
#projecten{padding-block:clamp(26px,3.4vw,40px) var(--blok)}

/* De sectiekop is er voor wie de pagina beluistert of met koppen
   navigeert, maar hoeft niet in beeld.                        */
.verborgen-visueel{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ══ FILTERS ═══════════════════════════════════════════════
   Alleen wat een filter nodig heeft en een sprongknop niet. */
.filters{
  margin-top:clamp(30px,4.5vw,52px);
  display:flex; flex-direction:column; gap:clamp(14px,2vw,20px);
}
.filters fieldset{
  border:0; margin:0; padding:0;
  display:flex; align-items:baseline; gap:clamp(10px,1.6vw,18px); flex-wrap:wrap;
}
/* De vaste breedte zet de knoprijen op dezelfde startlijn.
   Zonder die maat staan de rijen trapsgewijs.                */
.filters legend{
  float:left; padding:0; margin-right:14px; min-width:9ch;
  font-family:var(--tekst); font-size:11.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--grijs-400);
  line-height:2.5;
}
@media(max-width:620px){ .filters legend{min-width:0; line-height:1.8} }

/* ══ DE FILTERKNOP OP EEN TELEFOON ═════════════════════════
   Dertien filterknoppen in twee rijen duwen op een klein scherm het
   eerste project onder de vouw. Daar klappen de filters dus dicht.

   De knop bestaat alleen wanneer realisaties.js draait. Draait het
   niet, dan is er geen knop en staan de filters open, en dat is
   precies de goede uitkomst: het filteren zelf zit in CSS.

   Het formulier blijft op zijn plaats in de DOM. display:none
   verandert daar niets aan, dus .filters:has(...) ~ .rea-raster
   blijft gewoon werken met een dichtgeklapt paneel.            */
.filter-knop{display:none}
@media(max-width:620px){
  .filter-knop{
    display:inline-flex; align-items:center; gap:11px;
    margin-top:clamp(26px,5vw,36px); padding:13px 21px;
    font:inherit; font-size:14.5px; font-weight:600; line-height:1.3;
    color:var(--inkt); background:#fff; cursor:pointer;
    border:1px solid var(--lijn); border-radius:var(--pil);
    transition:border-color .25s var(--ease), color .25s var(--ease);
  }
  .filter-knop:hover{border-color:var(--indigo); color:var(--indigo)}
  .filter-knop:focus-visible{outline:2px solid var(--indigo); outline-offset:3px}
  /* Het pijltje wijst naar beneden als er nog iets open kan. */
  .filter-knop::after{
    content:""; flex:none; width:8px; height:8px; translate:0 -3px;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    rotate:45deg; transition:rotate .25s var(--ease), translate .25s var(--ease);
  }
  .filter-knop[aria-expanded="true"]::after{rotate:-135deg; translate:0 3px}
  .filters-inklapbaar:not(.open){display:none}
  .filters-inklapbaar{margin-top:clamp(16px,3.5vw,24px)}
}
.filters .keuzes{display:flex; gap:9px; flex-wrap:wrap}

/* De radio is onzichtbaar maar blijft bedienbaar met het
   toetsenbord. Het label is de knop.                          */
.filters input{position:absolute; width:1px; height:1px; opacity:0;
  clip-path:inset(50%); pointer-events:none}
.filters label{cursor:pointer}
.filters input:focus-visible + label{outline:2px solid var(--indigo); outline-offset:2px}

/* De aan-stand is de gewone knop van de site: indigo vlak, witte
   tekst. Een actief filter is dus hetzelfde ding als een knop die
   ingedrukt staat, en geen derde vorm.                         */
.filters input:checked + label{
  background:var(--indigo); border-color:var(--indigo); color:#fff;
}
.filters input:checked + label::before{background:#fff}
.filters input:checked + label:hover{
  background:var(--indigo-900); border-color:var(--indigo-900);
}

/* ══ HET RASTER ════════════════════════════════════════════
   Twee kaarten op een rij en niet drie. Bij drie werd het beeld
   klein en viel geen enkel project nog op.                    */
.rea-raster{
  margin-top:clamp(26px,3.4vw,40px);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(30px,4vw,58px) clamp(22px,3vw,44px);
}
@media(max-width:620px){ .rea-raster{grid-template-columns:1fr} }

/* De kaart draagt in het spoor van de homepage een vaste
   breedte. In een raster bepaalt de kolom die.               */
.rea-raster .rea-kaart{flex:initial; scroll-snap-align:none}

.rea-telling{
  margin-top:clamp(18px,2.4vw,26px);
  font-size:14px; color:var(--grijs-600); font-variant-numeric:tabular-nums;
}
.rea-leeg{
  display:none;
  margin-top:clamp(24px,3.4vw,40px);
  padding:clamp(22px,3vw,32px);
  border:1px solid var(--lijn); border-radius:var(--rond-m) 0 var(--rond-m) 0;
  background:#fff; max-width:60ch;
}
.rea-leeg p{margin:0}
.rea-leeg .knop-leeg{margin-top:16px}

/* ══ LAAG 2, DOOR maak-realisaties.py GESCHREVEN ═══════════
   Alles onder de merkregel wordt bij elke bouw vervangen.
   @@GEGENEREERD@@ */
.filters:has(#f-stiel-vloer:checked) ~ .rea-raster .rea-kaart:not([data-stiel~="vloer"]){display:none}
.filters:has(#f-stiel-grond:checked) ~ .rea-raster .rea-kaart:not([data-stiel~="grond"]){display:none}
.filters:has(#f-stiel-timmer:checked) ~ .rea-raster .rea-kaart:not([data-stiel~="timmer"]){display:none}
.filters:has(#f-stiel-dak:checked) ~ .rea-raster .rea-kaart:not([data-stiel~="dak"]){display:none}
.filters:has(#f-stiel-bouw:checked) ~ .rea-raster .rea-kaart:not([data-stiel~="bouw"]){display:none}
.filters:has(#f-gemeente-brugge:checked) ~ .rea-raster .rea-kaart:not([data-gemeente~="brugge"]){display:none}
.filters:has(#f-gemeente-damme:checked) ~ .rea-raster .rea-kaart:not([data-gemeente~="damme"]){display:none}
.filters:has(#f-gemeente-jabbeke:checked) ~ .rea-raster .rea-kaart:not([data-gemeente~="jabbeke"]){display:none}
.filters:has(#f-gemeente-oostkamp:checked) ~ .rea-raster .rea-kaart:not([data-gemeente~="oostkamp"]){display:none}
.filters:has(#f-gemeente-sint-laureins:checked) ~ .rea-raster .rea-kaart:not([data-gemeente~="sint-laureins"]){display:none}
.filters:has(#f-gemeente-zedelgem:checked) ~ .rea-raster .rea-kaart:not([data-gemeente~="zedelgem"]){display:none}