/* =========================================================================
   Pagina: Over W-Care (over-ons.html)
   Kleine aanvullingen op css/styles.css; enkel met de tokens.
   ========================================================================= */

/* ---------- Onze visie: stappen bovenaan gelijk met de kop ernaast ---------- */
.principles { margin: 0; }

/* ---------- Groepsfoto van het team ----------
   Groot scherm: de volledige strook. Kleiner scherm: een uitsnede in het
   midden, zodat de gezichten groot genoeg blijven. */
.team-photo { margin-block: clamp(3rem, 2rem + 3vw, 5rem) clamp(1.25rem, .75rem + 1.5vw, 2rem); }
.team-photo img { aspect-ratio: auto; height: auto; object-fit: contain; }

/* ---------- Paginakop op tablet: het brede ontwerpbeeld minder hoog tonen ---------- */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .page-hero__media .photo img { aspect-ratio: 16 / 10; }
}

/* ---------- Wie werkt er bij W-Care? (mintkleurig vlak met twee kolommen) ---------- */
.card.roles { display: grid; gap: clamp(28px, 4vw, 72px); align-items: start; }
.roles__intro p { margin-top: 1rem; max-width: 30rem; }
.roles .facts-list li:last-child { border-bottom: 0; }
/* Titels als link: raakvlak van 44px hoog, zonder dat de opmaak verschuift */
.roles .facts-list strong a { display: inline-block; padding-block: 7px; margin-block: -7px; }
/* Gezichtjes: vaste maat en netjes afbreken, zodat de rij ook bij grote tekst past */
.roles .faces { flex-wrap: wrap; row-gap: 8px; margin-top: 1.75rem; padding-left: 12px; }
.roles .faces li, .roles .faces li + li { margin-left: -12px; }
.roles .faces img { width: 48px; height: 48px; }
@media (min-width: 1024px) {
  .card.roles { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
@media (max-width: 479.98px) {
  .roles .faces img { width: 40px; height: 40px; }
}

/* ---------- Smalle gsm (vooral met grote tekst): iets minder binnenruimte in de
   kaarten, zodat tekst en knoppen de breedte goed benutten ---------- */
@media (max-width: 479.98px) {
  .card.roles, .more-cards .card { padding-inline: 20px; }
}

/* ---------- Ons gebouw: vier kaarten altijd 2 x 2 (nooit 3 + 1) ---------- */
.cards.facilities { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(20rem, calc(50% - 24px))), 1fr)); }
.facilities .card { min-width: 0; }
/* Heel smalle schermen met grote tekst: lange woorden ("Rolstoeltoegankelijke") netjes afbreken */
@media (max-width: 379.98px) { .facilities .checks li { hyphens: auto; } }

/* ---------- Waarom een medisch huis? Acht redenen met fijne lijnen ---------- */
.reasons { gap: 0; border-top: 1px solid var(--line); }
.reasons li {
  padding: 20px 0 20px 46px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem);
  line-height: 1.45;
  color: var(--ink);
}
.reasons li::before { top: calc(20px + .18em); width: 28px; height: 28px; background-size: 15px; }
.reasons strong { font-weight: 600; color: var(--green-800); }

/* ---------- Galerij: label "Ontwerpbeeld" bovenaan op het beeld ---------- */
.gallery__item figure { position: relative; }
.gallery__item .photo__tag { top: 16px; bottom: auto; left: 16px; }
/* Uitleg bij het label, onder de galerij */
.gallery-note { margin-top: 1.25rem; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); }