/* Feedback Richard (okt 2026): beeld en opmaak per pagina, deel 1 (afspraken, FAQ, kinderen, werkwijze, missie, team, mega-menu). */

/* ---------- Mondzorg-menu: kleine foto van lachende collega's in het blauwe blok "Nieuw bij ons?" ----------
   "Een glimlach voor iedereen" ook in de kleine details, juist bij de drempel om je in te schrijven.
   Vaste verhouding, zodat er niets verspringt als de (lazy) foto pas laadt bij het openen van het menu. */
.mega-cta{justify-content:flex-start}
.mega-cta>.x-mega-foto{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 40%;border-radius:4px;background:rgba(255,255,255,.08)}
.mega-cta>a{margin-top:auto}
/* Bijvangst: de inschuif-animatie van het menu-item bleef na afloop "hangen" (fill-mode both op translate).
   Daardoor werd het mega-menu gecentreerd op het woord Mondzorg i.p.v. op de header en viel het tussen
   1061 en ±1300 px links buiten beeld. Eindtoestand van de animatie = normale toestand, dus backwards volstaat. */
@media (prefers-reduced-motion:no-preference){
  .nav>.dd:has(>.mega){animation-fill-mode:backwards}
}

/* ---------- Foto bovenin een kaart in de vaststaande rechterkolom (/afspraken/, /over-ons/veelgestelde-vragen/) ----------
   Rand tot rand bovenin de kaart, zodat hij op een witte én een donkerblauwe kaart goed staat. */
.x-fotokaart>.x-kaartfoto{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;object-position:50% 22%;background:var(--ph,#e9edf2)}
/* Onder 961 px staat de kolom onder de tekst, over de volle breedte: foto niet hoger dan nodig. */
@media (max-width:960px){
  .x-fotokaart>.x-kaartfoto{aspect-ratio:auto;height:clamp(170px,42vw,260px)}
}

/* De rechterkolom moet ook op een laptopscherm (1280×720, 1366×768) helemaal in beeld blijven terwijl hij
   vaststaat. FAQ: het blok "Vragen? Bel ons" + "Pijn of spoed?" is daarvoor te hoog met een brede foto.
   Op lage schermen wordt de foto daar een rond portretje naast de kop (iets compactere kaarten),
   zodat het geheel blijft passen. */
@media (min-width:961px) and (max-height:879px){
  .x-fotokaart-faq{position:relative}
  .x-fotokaart-faq>.x-kaartfoto{position:absolute;top:22px;right:22px;width:64px;height:64px;aspect-ratio:1/1;border-radius:50%;object-position:62% 40%;object-view-box:inset(8% 17% 22% 41%);z-index:1}
  .x-fotokaart-faq>.card-b{padding:22px;gap:10px}
  .x-fotokaart-faq>.card-b>h2:first-child{min-height:64px;display:flex;align-items:center;padding-right:76px}
  .x-fotokaart-faq+.card>.card-b{padding:22px}
}

/* ---------- Kleine foto in een opsommingsblok (callout) in plaats van het smiley-icoon ----------
   /mondzorg/kinderen/ ("Je kind voorbereiden") en /over-ons/werkwijze/ ("Spannend? Zo helpen we je"). */
.callout.x-callout-foto{align-items:center;gap:clamp(18px,3vw,28px)}
.x-callout-foto>img{flex:0 0 auto;display:block;width:clamp(150px,26%,190px);height:auto;aspect-ratio:4/5;object-fit:cover;object-position:55% 50%;border-radius:6px}
@media (max-width:600px){
  .callout.x-callout-foto{flex-direction:column;align-items:stretch;gap:18px}
  .x-callout-foto>img{width:100%;aspect-ratio:16/9;object-position:50% 30%}
}