/* ==========================================================================
   Home — Team: fotocollage, kernwaarden, team en werken bij (grijze band)
   ========================================================================== */
/* minmax(0, 1fr): een lange knoptekst (nowrap) mag de kolom op 320px niet
   breder maken dan de wrap. */
.s-team__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(3rem, 2rem + 3vw, 4.5rem);
  align-items: center;
}
/* Twee kolommen pas vanaf 1100px; daaronder wordt de tekstkolom te smal en
   veel hoger dan de collage. Gelijke kolommen, maar de tekstkolom is minimaal
   33rem: dan passen de twee knoppen ook tussen 1100 en ca. 1240px naast
   elkaar (de collage geeft daar wat breedte af). */
@media (min-width: 1100px) {
  .s-team__grid {
    grid-template-columns: minmax(0, 1fr) minmax(33rem, 1fr);
    gap: var(--gap-lg);
  }
}

/* --- Collage -------------------------------------------------------------
   Vaste verhouding, zodat de foto's en het label altijd op dezelfde plek
   liggen. Alle maten in % van de collagebreedte:
   --team-w      breedte van de grote foto (16:10, dus hoogte = w × .625)
   --team-h      hoogte van de collage
   --team-foto2  breedte van de tweede foto (4:3), rechtsonder
   De groepsfoto is 16:10 en niet 4:3: bij 4:3 vallen er collega's buiten
   beeld. Het label ligt mobiel op de bovenrand van de grote foto (onderin
   is naast de tweede foto te weinig ruimte), vanaf 640px op de onderrand. */
.s-team__collage {
  --team-w: 90;
  --team-h: 82.25;
  --team-foto2: 48%;
  --team-rand: 6px;
  position: relative;
  max-width: 44rem;
  aspect-ratio: 100 / var(--team-h);
}
@media (min-width: 640px) {
  .s-team__collage { --team-w: 88; --team-h: 81.5; --team-foto2: 50%; --team-rand: 8px; }
}
@media (min-width: 1100px) {
  .s-team__collage { max-width: none; }
}
.s-team__collage--enkel { --team-w: 100; --team-h: 62.5; }

.s-team__foto {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--team-w) * 1%);
  aspect-ratio: 16 / 10;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}

.s-team__foto2 {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: var(--team-foto2);
  aspect-ratio: 4 / 3;
  border: var(--team-rand) solid var(--wit);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
}

.s-team__label {
  position: absolute;
  top: 0;
  left: 1.25rem;
  z-index: 2;
  padding: .6rem .95rem .65rem;
  border-radius: var(--r-md);
  background: var(--roze);
  color: var(--navy);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .02em;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: var(--shadow-card);
  transform: translateY(-50%);
}
@media (min-width: 640px) {
  .s-team__label {
    top: calc(100% * var(--team-w) * .625 / var(--team-h));
    left: clamp(1rem, 5%, 2rem);
    padding: .8rem 1.2rem .85rem;
    font-size: var(--fs-small);
  }
}

/* --- Tekst ------------------------------------------------------------ */
/* In één kolom even breed als de collage, zodat de scheidingslijn niet
   doorloopt tot de rand. Zonder foto vult de tekst de hele breedte. */
.s-team__tekst { max-width: 44rem; }
.s-team__tekst:only-child { grid-column: 1 / -1; }

.s-team__titel { max-width: 18ch; }
.s-team__lead { margin-top: 1.4rem; max-width: 50ch; }

/* Kernwaarden: pills in kicker-stijl (wit) met een blauwe stip. 2×2, of
   op één rij als de kolom breed genoeg is. auto-kolommen (geen max-content):
   bij grotere tekstafstand (WCAG 1.4.12) krimpen ze mee en loopt er niets
   buiten de kolom. */
.s-team__waarden {
  container-type: inline-size;
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  padding-top: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  border-top: 1px solid var(--lijn);
}
.s-team__waarden-titel {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--tekst-zacht);
}
.s-team__waarden-lijst {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: .65rem 2.5rem;
  margin-top: .9rem;
}
.s-team__waarde { margin: 0; font-size: var(--fs-body); white-space: nowrap; }

/* Knoppen: volle breedte en afbreken komen uit de gedeelde regels (.knoppen
   onder 480px, .btn onder 640px). Minder zijpadding: dan past "Maak kennis met
   het team" ook op 320px op één regel. */
.s-team__knoppen { margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); }
@media (max-width: 479.98px) {
  .s-team__knoppen .btn { padding-inline: 1rem; }
}