/* Praktische info — kleine aanvullingen op css/styles.css */

/* Kaartje "Het belangrijkste in het kort" in de paginakop: wat lucht tussen label en lijst */
.page-hero__media .hero__card .checks { margin-top: 10px; }
/* Op brede schermen: het kaartje met vier punten is hoger dan dat van de startpagina.
   Niet absoluut over de foto (dan schuift het bij grote tekst boven de foto uit),
   maar linksonder over de rand van de foto en naar onder toe groeiend. */
@media (min-width: 1280px) {
  .page-hero__media .hero__card {
    position: relative;
    left: auto;
    bottom: auto;
    width: 380px;
    margin: -128px 0 0 -48px;
  }
}

/* Genummerde stappen binnen een kaart (Voorschrift op Zak): over de volle breedte */
.card > .steps { align-self: stretch; margin: .5rem 0 1.25rem; }

/* Webadres in lopende tekst: enkel afbreken als het echt niet op één regel past (smalle gsm, grote tekst) */
.url { overflow-wrap: anywhere; }

/* Kioskfoto: bij een liggende uitsnede (gsm, tablet) blijft het scherm van de kiosk in beeld */
#kiosk .photo img { object-position: 50% 18%; }

/* Heel smalle schermen (onder 360px) met de grootste tekst: telefoonnummer en urentabel niet buiten beeld */
@media (max-width: 359.98px) {
  #bereikbaarheid .phone-xl { font-size: min(2.25rem, 9.5vw); }
  #bereikbaarheid .hours th, #bereikbaarheid .hours td { padding-inline: 8px; }
}

/* Subnavigatie met de grootste tekst tussen 1200 en 1279px: telefoonnummer weglaten zodat alles in de balk past */
@media (min-width: 1200px) and (max-width: 1279.98px) {
  html[data-textsize="3"] .subnav .subnav__phone { display: none; }
}

/* Uitslagen: de mededeling over korte consulten loopt over de volle breedte; de tekst blijft goed leesbaar */
#uitslagen .container > .notice > div { max-width: 50rem; }

/* Ingang: onder 1024px een liggende uitsnede (zoals de kioskfoto) in plaats van een hoog vierkant */
@media (max-width: 1023.98px) {
  #huisbezoeken .photo--square img { aspect-ratio: 4 / 3; }
}
.uitslagen-intro { max-width: 46rem; }