/* over-ons.css: alleen wat de componenten uit site.css niet dekken. Tokens uit site.css. */

/* Familiefoto in de hero: iets breder beeld, gezichten in het midden */
.overons-familie img { aspect-ratio: 1400 / 1011; object-position: 50% 40%; }

/* Portret van Mike: staand, niet in 4:3 persen */
.overons-mike { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.overons-mike .duo__beeld { max-width: 420px; }
.overons-mike .duo__beeld img { aspect-ratio: 4 / 5; object-position: 50% 15%; }
.overons-mike .duo__beeld::before {
  content: ""; position: absolute; inset: 14px -14px -14px 14px; z-index: -1;
  border: 1px solid var(--rule-2); border-radius: calc(var(--r) + 4px);
}
@media (max-width: 860px) {
  .overons-mike { grid-template-columns: 1fr; }
  .overons-mike .duo__beeld { max-width: 320px; }
}

/* Afsprakenlijst: label links in mono, afspraak rechts */
.overons-afspraken { max-width: 860px; margin-bottom: var(--sp-xl); }
.overons-afspraken li > :first-child { font: 500 .8rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); flex: none; }
.overons-afspraken li > :last-child { text-align: right; font-weight: 550; }
@media (max-width: 560px) {
  .overons-afspraken li { flex-direction: column; gap: .2rem; }
  .overons-afspraken li > :last-child { text-align: left; }
}

/* Lange knopteksten mogen op smalle schermen afbreken, anders duwt de knop de kolom breder dan het scherm */
@media (max-width: 900px) { .page-hero .hero__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .hero__actions .btn { white-space: normal; text-align: center; } }