/* ==========================================================================
   /over-ons: missie en visie, drie waarden, galerij met lightbox.
   ========================================================================== */

/* Ons team: tekst links, foto rechts, elk 6 van de 12 kolommen */
.over-ons-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: center; }
.over-ons-team__tekst { display: flex; flex-direction: column; gap: 24px; padding-right: 69px; }
.over-ons-team__tekst h2 { margin-bottom: 8px; }
.over-ons-team__tekst strong { font-weight: 600; color: var(--zwart); }
.over-ons-team__foto { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-kaart); background: var(--fotovlak); }
@media (max-width: 1023px) {
  .over-ons-team { grid-template-columns: minmax(0, 1fr); }
  .over-ons-team__tekst { padding-right: 0; }
}

/* Waarden: drie witte kaarten. De iconen van de oude site zijn wit; ze staan
   op een rode cirkel, zoals de knop van de FAQ. */
.over-ons-waarde {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 48px 32px; background: var(--wit); border-radius: var(--r-kaart); text-align: center;
}
.over-ons-waarde__icoon {
  display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 8px;
  border-radius: 50%; background: var(--rood);
}
.over-ons-waarde__icoon img { width: 40px; height: 40px; }
@media (max-width: 767px) { .over-ons-waarde { padding: 32px 24px; } }

/* Galerij: 3 per rij; een onvolledige laatste rij staat gecentreerd */
.galerij { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--goot); }
.galerij__item { flex: 0 0 calc((100% - 2 * var(--goot)) / 3); }
.galerij__link { position: relative; display: block; border-radius: var(--r-kaart); overflow: hidden; background: var(--fotovlak); cursor: zoom-in; }
.galerij__link:focus-visible { outline-offset: 2px; }
.galerij__foto { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 400ms var(--ease); }
.galerij__link:hover .galerij__foto { transform: scale(1.03); }
@media (max-width: 1023px) { .galerij__item { flex-basis: calc((100% - var(--goot)) / 2); } }
@media (max-width: 479px) { .galerij__item { flex-basis: 100%; } }

/* ==========================================================================
   Lightbox op <dialog>: schermvullend, foto in het midden, rode ronde knoppen
   (zoals de paginering), wit focuskader op de donkere grond.
   ========================================================================== */
html:has(.lightbox[open]) { overflow: hidden; }
.lightbox {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; color: var(--wit); overflow: hidden;
}
.lightbox::backdrop { background: rgba(25, 29, 37, 0.96); }
.lightbox :focus-visible { outline-color: var(--wit); }
.lightbox__kader {
  position: relative; height: 100%;
  display: grid; place-items: center; padding: 72px 112px;
}
.lightbox__figuur { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 100%; max-height: 100%; }
.lightbox__beeld {
  width: auto; height: auto; max-width: min(1296px, 100%); max-height: calc(100vh - 72px * 2 - 40px);
  max-height: calc(100dvh - 72px * 2 - 40px);
  border-radius: var(--r-kaart); object-fit: contain; background: var(--zwart);
}
.lightbox__teller { font: 500 12px/1.5 var(--font); text-transform: uppercase; letter-spacing: 0.05em; color: var(--voet-tekst); min-height: 18px; }
.lightbox__knop {
  position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 0; border-radius: 50%; background: var(--rood); color: var(--wit);
  transition: background-color var(--duur) var(--ease);
}
.lightbox__knop:hover { background: var(--rood-hover); }
.lightbox__knop .icoon { width: 24px; height: 24px; }
.lightbox__knop--vorige { left: 32px; top: 50%; transform: translateY(-50%); }
.lightbox__knop--volgende { right: 32px; top: 50%; transform: translateY(-50%); }
.lightbox__knop--sluiten { right: 32px; top: 24px; }
@media (max-width: 767px) {
  .lightbox__kader { padding: 72px 16px 96px; }
  .lightbox__beeld { max-height: calc(100vh - 72px - 96px - 40px); max-height: calc(100dvh - 72px - 96px - 40px); }
  .lightbox__knop--vorige, .lightbox__knop--volgende { top: auto; bottom: 24px; transform: none; }
  .lightbox__knop--vorige { left: calc(50% - 64px); }
  .lightbox__knop--volgende { right: calc(50% - 64px); }
  .lightbox__knop--sluiten { right: 16px; top: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] { animation: lightbox-in 200ms var(--ease); }
  .lightbox[open]::backdrop { animation: lightbox-in 200ms var(--ease); }
  .lightbox__beeld.is-nieuw { animation: lightbox-in 200ms var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
  .galerij__foto { transition: none; }
  .galerij__link:hover .galerij__foto { transform: none; }
}
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }