/* PGBV-BEELD-20260915 — foto's uit de eigen beeldbank (assets/beeldbank, herkomst en licentie in register.json).
   Alleen sfeerbeeld: nooit met naam, citaat of bijschrift, zodat niemand denkt dat het een echte cliënt of zorgverlener is.
   Beeld staat NAAST de tekst, nooit erachter: de leesbaarheid van koppen en knoppen verandert niet. */
.pgbv-beeld{display:block;max-width:100%;height:auto;border-radius:18px;background:#e6eef5;object-fit:cover}
.pgbv-beeld--hero{width:100%;box-shadow:0 22px 44px -26px rgba(14,58,85,.55)}

/* Homepage: kop links, foto rechts; de twee keuzekaarten eronder over de volle breedte */
@media(min-width:861px){
  .hero .wrap:has(> .pgbv-beeld--hero){display:grid;grid-template-columns:minmax(0,1fr) 40%;grid-template-rows:1fr auto auto 1fr auto;column-gap:52px}
  .hero .wrap:has(> .pgbv-beeld--hero) > h1{grid-column:1;grid-row:2}
  .hero .wrap:has(> .pgbv-beeld--hero) > .lead{grid-column:1;grid-row:3}
  .hero .wrap:has(> .pgbv-beeld--hero) > .pgbv-beeld--hero{grid-column:2;grid-row:1 / 5;align-self:center}
  .hero .wrap:has(> .pgbv-beeld--hero) > .paths{grid-column:1 / -1;grid-row:5}
}
@media(max-width:860px){.hero .wrap > .pgbv-beeld--hero{margin:24px 0 0}}

/* Keuzekaarten: foto als kop van de kaart, icoon half over de foto */
.path > .pgbv-beeld--kaart{width:calc(100% + 56px);max-width:none;margin:-28px -28px 20px;border-radius:0;aspect-ratio:2/1}
.path > .pgbv-beeld--kaart + .ic{position:relative;margin-top:-46px;border:3px solid #fff;box-shadow:0 6px 16px -8px rgba(14,58,85,.45)}

/* Brede sfeerfoto boven of onder een reeks stappen */
.pgbv-beeld--band{width:100%;aspect-ratio:8/3;margin:0 0 28px}
.prose > .pgbv-beeld--band{margin:26px 0 6px;aspect-ratio:3/1}
@media(max-width:780px){.pgbv-beeld--band,.prose > .pgbv-beeld--band{aspect-ratio:3/2}}

/* Subpagina's: kop links, foto rechts (grid met lege 1fr-rijen, zodat de tekst verticaal in het midden staat) */
@media(min-width:861px){
  .pagehero .wrap:has(> .pgbv-beeld--hero){display:grid;grid-template-columns:minmax(0,1fr) 38%;grid-template-rows:1fr auto auto auto auto 1fr;column-gap:56px}
  .pagehero .wrap:has(> .pgbv-beeld--hero) > *{grid-column:1}
  .pagehero .wrap:has(> .pgbv-beeld--hero) > :nth-child(1){grid-row:2}
  .pagehero .wrap:has(> .pgbv-beeld--hero) > :nth-child(2){grid-row:3}
  .pagehero .wrap:has(> .pgbv-beeld--hero) > :nth-child(3){grid-row:4}
  .pagehero .wrap:has(> .pgbv-beeld--hero) > :nth-child(4):not(.pgbv-beeld){grid-row:5}
  .pagehero .wrap:has(> .pgbv-beeld--hero) > .ey{justify-self:start}
  .pagehero .wrap:has(> .pgbv-beeld--hero) > h1{line-height:1.2;text-wrap:balance}
  .pagehero .wrap:has(> .pgbv-beeld--hero) > .pgbv-beeld--hero{grid-column:2;grid-row:1 / -1;align-self:center}
}
@media(max-width:860px){.pagehero .wrap > .pgbv-beeld--hero{margin:26px 0 0}}

/* Foto rechts naast een korte lijst in een tekstkolom */
.prose:has(> .pgbv-beeld--zij){display:flow-root}
.prose > .pgbv-beeld--zij{float:right;width:42%;margin:36px 0 16px 32px;aspect-ratio:3/2}
@media(max-width:780px){.prose > .pgbv-beeld--zij{float:none;width:100%;margin:30px 0 0}}