/* ============================================================
   REALISATIE — de detailpagina van één project

   Alleen wat hier bestaat en nergens anders:
     .stielwerk   de stielen die op deze werf samenkwamen
     .galerij     de fotoreeks
     .plek        de ene zin over waar het staat

   Alles daarbuiten komt uit basis.css en blokken.css. De hero is
   .hero-smal, de oproep is .daadstrook met .daadvlak, en de twee
   andere projecten hangen aan .rea-kaart.
   ============================================================ */

/* ══ DE STIELEN OP DEZE WERF ═══════════════════════════════
   Het merkvierkantje, dezelfde vorm als in het megamenu en op de
   filterknoppen: linksboven en rechtsonder rond. Het schaalt op
   bij het binnenkomen, 70 milliseconden na elkaar, zodat je ziet
   dat er meerdere stielen na elkaar op deze ene werf stonden. */
.stielwerk{display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,42px)}
.stielwerk a{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  column-gap:12px; align-items:start; min-width:200px;
  font-family:var(--disp); font-weight:600; font-size:clamp(1rem,1.4vw,1.15rem);
  letter-spacing:-.025em; color:var(--indigo-900);
  transition:color .3s var(--ease);
}
.stielwerk a::before{
  content:""; width:16px; height:16px; margin-top:.2em;
  border-radius:5px 0 5px 0; background:var(--kleur,var(--indigo));
  transform:scale(0); transform-origin:left center;
  transition:transform .45s var(--ease) var(--wacht,0ms);
}
/* De klasse die het reveal-systeem zet heet zichtbaar, en ze komt
   op het element met data-reveal zelf. Zonder beweging staat het
   vierkantje er meteen, want de garantie van de site is dat alles
   zichtbaar is ook als er niets beweegt.                       */
.stielwerk.zichtbaar a::before,
html:not(.beweging-aan) .stielwerk a::before{transform:scale(1)}
.stielwerk a:hover{color:var(--kleur,var(--indigo))}
.stielwerk a:hover::before{transform:scale(1.15)}
.stielwerk span{grid-column:2; display:block; margin-top:4px;
  font-family:var(--tekst); font-weight:400; font-size:13.5px;
  color:var(--grijs-600); letter-spacing:0}

/* ══ HET VERHAAL ═══════════════════════════════════════════
   Eén kolom. De tweede kolom stond er leeg bij en dan leest het
   als een plek waar een beeld had moeten staan.                */
.verhaal-tekst h2{
  font-size:clamp(2.1rem,4.6vw,4rem); line-height:.96;
  letter-spacing:-.042em; max-width:22ch; text-wrap:balance;
}
.verhaal-tekst .mini{display:inline-flex}
.verhaal-tekst p{margin:0 0 16px; max-width:66ch}
.verhaal-tekst p:first-of-type{margin-top:clamp(20px,2.6vw,32px)}
.verhaal-tekst p:last-child{margin-bottom:0}
/* Een materiaalnaam in de lopende tekst is een weg naar de stiel
   die het legde. Onderstreept, want midden in een zin is kleur
   alleen niet genoeg om een link te herkennen.                */
/* Niet op knoppen. Die dragen hun eigen kleur, en een indigo
   letterkleur op een indigo knopvlak maakt de tekst onzichtbaar. */
.verhaal-tekst a:not(.knop):not(.knop-leeg){color:var(--indigo); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px;
  transition:color .25s var(--ease)}
.verhaal-tekst a:not(.knop):not(.knop-leeg):hover{color:var(--kleur,var(--indigo))}

/* ══ DE GALERIJ ════════════════════════════════════════════
   Twee kolommen die los van elkaar lopen, geen raster. Een raster
   zet een staande en een liggende foto naast elkaar op dezelfde
   rij en laat dan een gat vallen onder de korte. Met kolommen
   schuift elke foto op tot tegen de vorige, dus een staande foto
   duwt zijn buur vanzelf omhoog en de witruimte blijft overal
   even groot.

   Het eerste beeld loopt over beide kolommen, want dat toont het
   project in één keer.                                        */
.galerij{columns:2; column-gap:clamp(26px,3.6vw,56px)}
@media(max-width:640px){ .galerij{columns:1} }
.galerij figure{
  margin:0 0 clamp(26px,3.6vw,56px);
  break-inside:avoid; -webkit-column-break-inside:avoid;
}
.galerij figure:first-child{column-span:all}
.galerij .vlak{display:block; overflow:hidden; background:var(--grijs-100);
  aspect-ratio:3/2; border-radius:var(--rond-m) 0 var(--rond-m) 0}
.galerij figure.staand .vlak{aspect-ratio:3/4}
.galerij figure:first-child .vlak{aspect-ratio:16/9;
  border-radius:var(--rond-l) 0 var(--rond-l) 0}
.galerij img{width:100%; height:100%; object-fit:cover; display:block}

/* ══ DE TWEE ANDERE PROJECTEN ══════════════════════════════
   Dezelfde kaart als op het overzicht, maar dat stylesheet laadt
   hier niet. Zonder deze regels valt de kaart terug op de vaste
   breedte uit het horizontale spoor van de homepage en staan de
   twee schermbreed onder elkaar.                              */
.rea-raster{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3.4vw,44px); margin-top:clamp(24px,3.4vw,40px)}
@media(max-width:700px){ .rea-raster{grid-template-columns:1fr} }
.rea-raster .rea-kaart{flex:initial; scroll-snap-align:none}

/* ══ WAAR HET STAAT ════════════════════════════════════════
   Dezelfde kaart als op de homepage, inline zodat home.css hem
   opmaakt en site.js de gemeentewenk erop kan zetten. De speld
   wijst hier niet het kantoor aan maar de werf, dus de generator
   verplaatst hem naar de gemeente van dit project.            */
/* Label, kop en tekst staan in EEN kolom, met de kaart ernaast en
   verticaal gecentreerd tegenover dat hele blok. Stond de kop eerst
   in een eigen sectiekop over de volle breedte, dan zweefde de kaart
   los onder de titel en viel er een gat tussen de kop en de tekst.
   De kopmaat komt uit dezelfde gedeelde regel als elke andere
   sectiekop op de site, zodat er maar een plek is waar dat staat. */
.plek{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(24px,4vw,56px); align-items:center}
.plek-tekst{display:flex; flex-direction:column}
.plek-tekst .mini{display:inline-flex; margin-bottom:clamp(14px,1.8vw,22px)}
.plek-tekst p{margin:clamp(20px,2.6vw,32px) 0 0; max-width:46ch}
@media(max-width:820px){ .plek{grid-template-columns:1fr} }
.plek a{color:var(--indigo); font-weight:600}
.plek-kaart{position:relative; display:block}
.plek-kaart .kaart-svg{width:100%; height:auto; display:block; overflow:visible}