/* ==========================================================================
   Het Team — gedeeld component
   Gemeten: kop in een container van 1140 (padding 30px 0 21px), daaronder twee
   kolommen van 570 met 11,39px padding en foto's van 547x400.
   ========================================================================== */
/* Gemeten: 1% op elk formaat */
.team { background: var(--kleur-wit); padding-inline: 1%; }
/* Gemeten: de kop zit in een blok van 30/21 padding, maar de widget eromheen
   heeft in Elementor margin-bottom: -20px — daardoor is het blok 69px hoog en
   niet 89px. Die negatieve marge hoort er dus bij. Op mobiel is de
   onderpadding 25px en blijft deze kop 38px groot (andere koppen worden 32). */
.team > .container:first-child { padding: 30px 0 21px; }
.team > .container:first-child h2 { margin-bottom: -20px; }
/* Gemeten: kolommen van 570 met 11,39px padding, ouder met 13,95px boven/onder */
/* Gemeten: 1% boven en onder (14px bij 1425, 7 bij 753, 4 bij 360).
   Het origineel heeft GEEN gap tussen de kolommen: de tussenruimte komt uit de
   binnenpadding van de kolom zelf (1% rondom). Met gap: 20px werden de
   kolommen 560 in plaats van 570 breed. */
.team__grid { display: flex; gap: 0; padding-block: 1%; }
.team__lid {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ruimte-md);
  /* Gemeten: 1% rondom, relatief aan de container van 1140 — 11,39px bij
     1425px, 7,38px bij 753px, 3,52px bij 360px. Dit vervangt de vaste 11px
     die op tablet een 15px te smalle foto gaf. */
  padding: 1%;
  text-align: center;
}
/* Gemeten: de foto is 400x400 en staat gecentreerd in een kolom van 570 */
.team__lid img { width: 400px; max-width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
/* Gemeten marges: naam 8px boven en 16px onder, functie 14,4px onder.
   Het origineel heeft daaronder nog een lege paragraaf (40px dode ruimte);
   die is een redactierestant en niet overgenomen — zie NOTES.md. */
.team__lid figcaption { display: block; }
.team__naam {
  display: block;
  margin: 8px 0 16px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
}
.team__rol {
  display: block;
  font-size: var(--tekst-body);
  font-weight: 400;
  line-height: 1.5;
}

@media (max-width: 767px) {
  .team > .container:first-child { padding-bottom: 25px; }
  .team > .container:first-child h2 { font-size: 38px; line-height: 38px; }
  .team__grid { flex-direction: column; }
  /* De foto blijft ook op smalle schermen 400px met max-width: 100% — er stond
     width: 100%, waardoor hij tussen 480 en 767px veel groter werd dan in het
     origineel (658px bij een venster van 700). */
}