/* responsive.css — correcties uit de responsiveness-controle (6 okt 2026)
   Geladen op elke pagina, na alle andere CSS. Zie docs/REVIEW-RESPONSIVE.md voor de bevindingen.
   Breedtes getest: 320–1920 (telefoon, tablet staand 768, tablet liggend 1024, laptop, desktop). */

/* ===== 1. Koppen breken netjes af =====
   site.css zet hyphens:auto op alle koppen. Samen met text-wrap:balance brak de browser daardoor
   ook korte woorden af, op elke breedte ("eer-ste", "Professione-le", "parodonto-loog" op 1920).
   Vanaf tablet: alleen afbreken waar een zacht afbreekstreepje (­) staat.
   Op de telefoon: alleen lange samenstellingen afbreken die anders niet op de regel passen
   ("wortelkanaal-behandeling"): woorden ≥ 15 tekens, minimaal 7 + 7 tekens per deel.
   Plaatsnamen en gewone woorden ("Hardinxveld", "behandelingen") blijven heel. */
h1,h2,h3,.h1,.h2,.h3{hyphens:manual;-webkit-hyphens:manual}
@media (max-width:640px){
  h1,h2,h3,h4,.h1,.h2,.h3,.h4{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:15 7 7;-webkit-hyphenate-limit-before:7;-webkit-hyphenate-limit-after:7}
}

/* ===== 2. Tablet liggend (1000–1180 px): tweekoloms blokken niet meer onder elkaar =====
   .grid-2 vraagt 2×440 + 72 px; op 1024 is er 944 px, dus alles viel terug naar één kolom
   (foto's van 944 px breed, regels van 110 tekens). Met een kleinere kolomafstand passen ze weer naast elkaar. */
@media (min-width:1000px) and (max-width:1180px){
  .grid-2,.grid-2-top{column-gap:48px}
}

/* ===== 3. Kaartrasters zonder eenzame laatste kaart ===== */
/* .grid-3 (drie kaarten): op 1024 drie kolommen i.p.v. 2 + 1 */
@media (min-width:1000px) and (max-width:1180px){
  .grid-3{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
}
/* Tablet staand: twee kolommen (vanaf 708 px passen er twee van 300 px); een oneven laatste kaart krijgt
   de volle breedte. Daaronder staat .grid-3 in één kolom en is niets nodig. */
@media (min-width:708px) and (max-width:999px){
  .grid-3>:last-child:nth-child(odd){grid-column:1/-1}
  /* nieuwskaart over de volle breedte: foto links, datum/titel/samenvatting rechts (geen foto van 690 px hoog) */
  .grid-3>.news-card:last-child:nth-child(odd){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto auto auto 1fr;column-gap:28px;row-gap:8px}
  .grid-3>.news-card:last-child:nth-child(odd)>.zoom{grid-column:1;grid-row:1/-1;align-self:center}
  .grid-3>.news-card:last-child:nth-child(odd)>:nth-child(2){grid-column:2;grid-row:2}
  .grid-3>.news-card:last-child:nth-child(odd)>:nth-child(3){grid-column:2;grid-row:3}
  .grid-3>.news-card:last-child:nth-child(odd)>:nth-child(4){grid-column:2;grid-row:4}
  /* kaart met foto over de volle breedte: foto links (vult de kaarthoogte), tekst rechts */
  .grid-3>.card:last-child:nth-child(odd):has(>.zoom){flex-direction:row;align-items:stretch}
  .grid-3>.card:last-child:nth-child(odd)>.zoom{position:relative;flex:0 0 50%;aspect-ratio:auto;min-height:220px}
  .grid-3>.card:last-child:nth-child(odd)>.zoom>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
}
/* .grid-4 met precies vier kaarten: 2 × 2 tot er vier naast elkaar passen (i.p.v. 3 + 1) */
@media (min-width:641px) and (max-width:1151px){
  .grid-4:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Contact "Snel naar" (vijf kaarten): 3 + 2 i.p.v. 4 + 1 op tablet liggend */
@media (min-width:768px) and (max-width:1209px){
  .x-hoofd-snel{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (min-width:641px) and (max-width:767px){
  .x-hoofd-snel>:last-child:nth-child(odd){grid-column:1/-1}
}

/* ===== 4. Footer: geen losse vierde kolom ===== */
@media (min-width:641px) and (max-width:999px){
  .f-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1000px) and (max-width:1179px){
  .f-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 28px}
}

/* ===== 5. CTA-vlak met kaartje: knoppen niet over de kaartlabels =====
   Op 1100 px en breder schoven de knoppen rechts naast de kop, precies over het kaartje
   ("Hardinxveld-Giessendam" liep door de knoppen heen). Tekst en knoppen nu onder elkaar links,
   het kaartje vrij rechts — zoals het CTA-vlak op de home. */
@media (min-width:861px){
  .cta-band:has(>.cta-map)>.between{flex-direction:column;align-items:flex-start;justify-content:flex-start}
  .cta-band:has(>.cta-map)>.between>.stack{max-width:min(620px,58%)!important}
}

/* ===== 6. Teamrasters ===== */
/* Tablet staand: drie portretten naast elkaar i.p.v. twee schermvullende (teampagina was 13.000 px lang) */
@media (min-width:641px) and (max-width:960px){
  .x-locover-team.x-locover-team{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px 16px!important}
  .x-locover-team>.card{grid-column:1/-1}
  .team-card .more{max-height:100%;overflow:auto;padding:14px;font-size:14px;line-height:1.45}
}
/* Compacte lijst vanaf 961 px: de initialen vielen half buiten het rondje van 64 px ("MvE", "BdG") */
@media (min-width:961px){
  .x-locover-team>.team-card .ph-initialen>span{width:100%;height:100%;font-size:15px;letter-spacing:-.03em}
}

/* ===== 7. Klikvlakken in de footer minimaal 24 px hoog (WCAG 2.5.8) ===== */
.f-grid p>a,.f-grid li>a{padding-block:3px}

/* ===== 8. Home, opening op tablet staand (641–860 px) =====
   De kaart met kop en knoppen gebruikte de telefoonmarge (20 px) i.p.v. de paginamarge (40 px)
   en de knoppen stonden als schermbrede balken onder elkaar. */
@media (min-width:641px) and (max-width:860px){
  .hero-v .hero-card{padding:44px 40px 36px}
  .hero-v .hero-card .hero-pick{flex-direction:row;flex-wrap:wrap;align-items:center;width:auto}
  .hero-v .hero-card .hero-pick .btn{justify-content:center}
  /* afsluiter onderaan de home: drie knoppen vullen de rij netjes (geen losse derde knop) */
  .home-close-btns>.btn{flex:1 1 auto}
}

/* ===== 9. Formulieren en kaartjes in smalle kolommen ===== */
/* Contact: keuze "Over welke praktijk" — 2 + 1; de derde keuze krijgt de volle breedte */
@media (min-width:641px) and (max-width:767px),(min-width:961px) and (max-width:1180px){
  #formulier .pick{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #formulier .pick>:nth-child(3):last-child{grid-column:1/-1}
}
/* Bedankt, deel 2: drie uitlegkaartjes — 2 + 1 op smalle tablet / liggende telefoon */
@media (min-width:496px) and (max-width:771px){
  #bd-form>.stagger>:nth-child(3):last-child{grid-column:1/-1}
}
/* Facturatie: "Vragen over je rekening?" — 2 + 1 in een smalle tekstkolom (tablet liggend, liggende telefoon) */
@media (min-width:456px) and (max-width:671px),(min-width:961px) and (max-width:1140px){
  .split-aside .prose>.stagger>:nth-child(3):last-child{grid-column:1/-1}
}
/* Openingstijden in kaarten op tablet liggend: dag boven de tijden, zodat "13.30–17.00" niet midden
   in de tijd afbreekt (kaarten staan sinds de 2-koloms correctie naast elkaar) */
@media (min-width:961px) and (max-width:1180px){
  .card .hours.x-hoofd-hours{grid-template-columns:minmax(0,1fr);row-gap:0}
  .card .hours.x-hoofd-hours dd{margin-bottom:8px}
  .card .hours.x-hoofd-hours dd:last-child{margin-bottom:0}
}

/* ===== 10. Telefoonlinks met een label: label mag afbreken, het nummer niet =====
   site.css zet a[href^="tel:"] op nowrap; op 320 px viel "Overdag, Hardinxveld-Giessendam" buiten de kaart. */
a[href^="tel:"] .small,a[href^="tel:"] .muted{white-space:normal}

/* ===== 11. Liggende telefoon (lage schermhoogte) =====
   Op 667×375 namen de vaste kopbalk (73 px) en de snelbalk onderin (63 px) 36% van het scherm in.
   Kop scrolt nu mee weg; de snelbalk wordt een compacte rij (icoon naast tekst). */
@media (max-height:500px) and (orientation:landscape){
  .hdr-wrap{position:relative;top:auto}
  .mbar a{flex-direction:row;gap:8px;min-height:46px}
  .mbar svg{width:20px;height:20px}
  .footer{padding-bottom:80px!important}
}

/* ===== 12. Knoppenrijen in CTA-vlakken op tablet staand / liggende telefoon =====
   Drie knoppen liepen 2 + 1 met ongelijke breedtes; nu vullen ze de rij (zoals op de telefoon). */
@media (min-width:641px) and (max-width:860px){
  .cta-band .row:not(:has(>:not(.btn)))>.btn{flex:1 1 auto}
}

/* ===== 13. Ankerlinks niet onder de vaste kopbalk =====
   Inhoudsopgave/ankers (bv. /mondzorg/implantaat/#kosten, /over-ons/facturatie-en-betalingen/#tarieven)
   sprongen naar een kop die achter de vaste kopbalk viel. Bestaande, ruimere marges (juridische pagina's,
   mondzorgoverzicht) blijven voorgaan: deze regel heeft geen specificiteit. */
:where(main [id]){scroll-margin-top:112px}
@media (max-width:1060px){:where(main [id]){scroll-margin-top:92px}}
@media (max-height:500px) and (orientation:landscape){:where(main [id]){scroll-margin-top:16px}}
/* Het doel van een ankerlink niet laten 'invliegen': de scroll-animatie (fadeUp, 48 px verschuiving) zette de kop
   bij binnenkomst via een link (bv. vanuit het menu of een andere pagina) alsnog half onder de kopbalk. */
main :target{animation:none!important;translate:none!important;opacity:1!important}

/* ===== 14. Staande foto's en kaarten niet hoger dan het scherm =====
   Tussen 641 en 999 px staan tweekoloms blokken onder elkaar; een staande foto (4:5, 3:4) of de staande
   plattegrond op de locatiepagina's werd dan 700–950 px hoog (meer dan een heel scherm). */
@media (min-width:641px) and (max-width:999px){
  :is(.r.ar-45,.r.ar-34,.map[style*="4 / 5"],.map[style*="4/5"]):not(.overlap>*){max-height:min(560px,70vh);width:100%}
}
/* Liggende telefoon: geen foto, kaart of video-tegel hoger dan driekwart van het scherm */
@media (max-height:500px) and (orientation:landscape){
  :is(.phero-media,.r[class*="ar-"],.map,.vid-ph):not(.overlap>*){max-height:75vh;width:100%}
}
@media (max-height:500px) and (orientation:landscape) and (max-width:860px){
  .hero-v-media{max-height:75vh}
}
/* (width:100% is nodig: anders verkleint aspect-ratio de breedte mee en staat de foto smal links) */

/* ===== 15. Initialen-tegels: langere initialen ("We & Ge") als pil i.p.v. over twee regels buiten het rondje ===== */
.ph-initialen>span{min-width:2.6em;width:auto;padding-inline:.45em;white-space:nowrap;border-radius:1.3em}
@media (min-width:961px){
  .x-locover-team>.team-card .ph-initialen>span{min-width:0;padding-inline:0;border-radius:50%}
}

/* ===== 16. Werken bij, fotocollage: 2 + 1 met een leeg vlak op tablet / liggende telefoon =====
   Zelfde opbouw als op de telefoon: twee staande foto's naast elkaar, de derde breed eronder. */
@media (min-width:641px) and (max-width:907px){
  .x-hoofd-sfeer>:nth-child(1),.x-hoofd-sfeer>:nth-child(2){aspect-ratio:3/4}
  .x-hoofd-sfeer>:nth-child(3){grid-column:1/-1;aspect-ratio:16/9}
}

/* ===== 17. Mondzorg-overzicht: vaste keuzebalk sluit aan op de kopbalk =====
   De balk staat (inline) vast op 88 px = desktopkop. Onder 1061 px is de kop 73 px: er viel 15 px tekst
   tussen kop en balk door. Op een liggende telefoon scrolt de kop weg (punt 11): balk dan bovenaan. */
@media (max-width:1060px){nav[aria-label="Groepen behandelingen"]{top:72px!important}}
@media (max-height:500px) and (orientation:landscape){nav[aria-label="Groepen behandelingen"]{top:0!important}}

/* ===== 18. Home, blok "Nieuwe patiënten": drie stappen in kolommen van 135–160 px (2 woorden per regel)
   op tablet liggend / kleine laptop; daar nu onder elkaar, zoals op de telefoon. */
@media (min-width:861px) and (max-width:1199px){
  .x-home-cta .mini-steps{grid-template-columns:minmax(0,1fr);gap:12px}
}

/* ===== 19. Smalle telefoons (≤ 389 px): tarieventabel en belknoppen passen =====
   - De NZa-tabel op /over-ons/facturatie-en-betalingen/ was op 320 px 261 px breed in 222 px ruimte:
     de kolom "Tarief" viel buiten beeld (alleen zichtbaar door zijwaarts te vegen, zonder aanwijzing).
   - "Bel Hardinxveld-Giessendam" in een CTA-vlak (spoed) werd aan beide kanten afgeknipt:
     a[href^="tel:"] staat op nowrap; een knop mag op de telefoon over twee regels. */
@media (max-width:389px){
  .pricebox{padding-left:16px;padding-right:16px}
  .pricebox table{font-size:15px!important}
  .pricebox th,.pricebox td{padding-left:6px!important;padding-right:6px!important}
  .pricebox :is(th,td):first-child{padding-left:0!important}
  .pricebox :is(th,td):last-child{padding-right:0!important}
}
@media (max-width:640px){
  .btn[href^="tel:"]{white-space:normal}
}

/* ===== 20. Smalle telefoons: openingstijden, e-mailadres, CTA-vlak "Nieuwe patiënten", keuzekaarten =====
   - Openingstijden in kaarten: "Ma t/m / vr" en "8.00–12.00 / en 13.30– / 17.00 uur"; "Donderdag" liep tegen de tijd aan.
     Op ≤ 389 px dag boven de tijden; tijden breken gebalanceerd ("8.00–12.00 en" / "13.30–17.00 uur").
   - E-mailadres brak als "info@vaneckmondzorg.n / l": iets kleiner, zodat het op één regel past.
   - Home, "Nieuwe patiënten zijn welkom": het blok had 64 px binnenmarge aan beide kanten, op 320 px bleef
     een tekstkolom van 152 px over (2–3 woorden per regel).
   - Keuzekaart (inschrijven): het rondje stond tegen "HOOFDLOCATIE AAN DE DIJK" aan. */
@media (max-width:640px){
  .hours dd{text-wrap:balance}
}
@media (max-width:389px){
  .info-row .hours{grid-template-columns:minmax(0,1fr);row-gap:0}
  .info-row .hours dd{margin-bottom:8px}
  .info-row .hours dd:last-child{margin-bottom:0}
  a[href^="mailto:"]{font-size:min(1em,15px)}
}
@media (max-width:860px){
  .cta-band:has(.x-home-cta){padding:clamp(32px,5vw,48px) clamp(22px,5vw,40px)}
}
.pick-card>.ring+span{padding-right:32px}

/* ===== 21. Smalle telefoons (≤ 389 px): kleine schikkingen zodat niets tegen de rand loopt =====
   - Spoed, grote belnummers: het telefoonicoon kromp tot 0 px en "0184 - 612 181" liep tot in de kaartrand.
   - Contact, "E-mail en sociale media": "@vaneckcentrumvoormondzorg" werd afgeknipt en het pijltje verdween.
   - Werken bij, kaart van Annet: naast het rondje van 96 px bleef een kolom van 3 woorden per regel.
   - Stappenlijsten (afspraken, inschrijven, klachten …): tekstkolom naast het nummer was 140 px.
   - Locaties, vergelijking van de praktijken: "Implantoloog / en / parodontoloog" over drie regels.
   - Afspraken, e-mailkaart: het adres brak over drie regels ("info@ / vaneckmondzorg. / nl"). */
@media (max-width:389px){
  .bigphone{font-size:clamp(26px,8.4vw,34px);gap:10px}
  .bigphone svg{flex:none}
  :has(>.bigphone){padding-left:22px!important;padding-right:22px!important}
  .card-list a>span{min-width:0;overflow-wrap:anywhere}
  .card-list a>svg{flex:none}
  .card-b>.r.ar-1[style*="96px"]{width:64px!important}
  .card-b:has(>.r.ar-1[style*="96px"]){gap:14px!important}
  .steps>li{grid-template-columns:44px minmax(0,1fr);gap:16px}
  .steps>li::before{width:44px;height:44px}
  .steps>li:not(:last-child)::after{left:21px;top:48px}
  .steps h3{font-size:19px}
  li[style*="grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.3fr)"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:12px!important}
  a.card[href^="mailto:"] .card-ico{display:none}
}

/* ===== 22. Home, opening op laptop/desktop: geen gezichten achter de witte kaart =====
   De kaart linksonder viel op elke breedte over het gezicht van de tweede persoon op de foto (35–100%
   bedekt; op 1024×600 ook over Melco). De foto schuift nu zó dat de gezichten boven de kaart staan:
   beeldverschuiving = (podiumhoogte − 72 px − kaarthoogte ≈ 360 px) − kin-lijn (52% van de fotohoogte,
   = 34,667vw bij een 3:2-foto die de breedte vult), begrensd zodat de bovenkant van de hoofden in beeld
   blijft (14vw) en de foto het podium blijft vullen. Podiumhoogte = clamp(560px, 100svh − 88px, 820px).
   Gemeten: gezicht bedekt 0–3% op 1180–1536, 11% (kin) op 1920. Geldt alleen voor de foto, niet voor een video. */
@media (min-width:861px){
  .hero-v .hero-v-img{object-position:50% min(0px,max(calc(clamp(560px,100svh - 88px,820px) - 66.667vw),min(0px,max(calc(8px - 14vw),calc(clamp(560px,100svh - 88px,820px) - 432px - 34.667vw)))))}
}
/* Tussen 861 en 1099 px is er geen ruimte om de foto te verschuiven (podium ≈ 3:2): kaart smaller,
   zodat hij naast de gezichten blijft (bedekt: 37% → 5%). */
@media (min-width:861px) and (max-width:1099px){
  .hero-v .hero-card{width:min(380px,calc(100% - 48px));padding:30px 32px 28px;bottom:32px}
  .hero-v .hero-card .h1{font-size:34px}
  .hero-v .hero-card .hero-pick{justify-content:flex-start;align-items:flex-start}
}
/* Vanaf 1100 px: linkerrand van de kaart op de paginamarge (gelijk met logo en inhoud; stond 20 px te ver links) */
@media (min-width:1100px){
  .hero-v .hero-card{left:max(40px,calc((100% - 1160px)/2))}
}