/**
 * @file onze-mensen.css
 * Layout en styling voor de view /onze-mensen.
 *
 * Bestaat uit:
 *  - .onze-mensen__groep    : sectie per team
 *  - .onze-mensen__teamkop  : H2-kop van het team
 *  - .onze-mensen__grid     : grid waarin profielkaarten staan
 *  - .onze-mensen__cel      : grid-cel
 *  - .nnn-profile-card__functie : aanvullende styling op de bestaande
 *                                  profielkaart voor het functie-label
 */

/* ─── Sprinknavigatie bovenaan (sticky) ──────────────────── */
.onze-mensen__nav {
  position: -webkit-sticky;
  position: sticky;
  /* Drupal zet --drupal-displace-offset-top op het html-element op basis
     van de admin-toolbar (en andere displace-elementen). Zo blijft de
     pill-balk netjes onder de balk staan, en op 0 voor anonieme bezoekers. */
  top: var(--drupal-displace-offset-top, 0px);
  z-index: 20;
  margin: 0 0 var(--nnn-space-xl);
  padding: var(--nnn-space-md) 0;
  /* Lavender — gelijk aan body-background, dus naadloos over de pagina. */
  background: #EFEBF5;
  border-top: 1px solid var(--nnn-color-border);
  border-bottom: 1px solid var(--nnn-color-border);
}

.onze-mensen__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--nnn-space-sm);
}

.onze-mensen__nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.4375rem 0.875rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--nnn-color-text);
  background: var(--nnn-color-background-alt);
  border: 1px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  transition: background var(--nnn-transition-fast),
              border-color var(--nnn-transition-fast),
              color var(--nnn-transition-fast);
}

.onze-mensen__nav-link:hover,
.onze-mensen__nav-link:focus-visible {
  background: var(--nnn-color-text);
  color: var(--nnn-color-white);
  border-color: var(--nnn-color-text);
}

/* Actieve pill — overeenkomend team is in beeld. */
.onze-mensen__nav-link.is-active,
.onze-mensen__nav-link.is-active:hover,
.onze-mensen__nav-link.is-active:focus-visible {
  background: #FFDA29;
  color: #000000;
  border: 2px solid #000000;
  font-weight: 600;
  /* Compenseer extra border-dikte zodat pill-hoogte gelijk blijft. */
  padding: calc(0.4375rem - 1px) calc(0.875rem - 1px);
}

/* ─── Team-groep ─────────────────────────────────────────── */
.onze-mensen__groep {
  margin: 0 0 var(--nnn-space-xxl);
}

.onze-mensen__groep:last-of-type {
  margin-bottom: var(--nnn-space-xl);
}

/* ─── Teamkop (H2) ───────────────────────────────────────── */
.onze-mensen__teamkop {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  font-weight: 700;
  margin: 0 0 var(--nnn-space-lg);
  padding-bottom: var(--nnn-space-sm);
  border-bottom: 2px solid var(--nnn-color-text);
  /* Ruimte boven de kop laten zodat de sticky pill-balk (en eventuele
     admin-toolbar) de tekst niet afdekken bij klikken op een anchor-link.
     ~80px voor pill-balk + displace-offset voor toolbar. */
  scroll-margin-top: calc(var(--drupal-displace-offset-top, 0px) + 5rem);
}

/* ─── Grid van profielkaarten ────────────────────────────── */
.onze-mensen__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--nnn-space-lg);
}

.onze-mensen__cel {
  display: flex;
}

/* Profielkaart in een cel vult de hele breedte */
.onze-mensen__cel > * {
  width: 100%;
}

/* ─── Functie-label binnen profielkaart ──────────────────── */
.nnn-profile-card__functie {
  margin: 0 0 var(--nnn-space-md);
  font-size: 0.9375rem;
  font-style: italic;
  opacity: 0.85;
}

/* ─── Bio-kleurfix voor geel/blauw varianten ─────────────── */
/* profile-card.css zet alle bio-tekst standaard wit, maar override
   voor geel/blauw mist .nnn-profile-card__bio. Hier corrigeren we dat
   zonder het basiscomponent aan te raken. */
.nnn-profile-card--yellow .nnn-profile-card__bio,
.nnn-profile-card--yellow .nnn-profile-card__bio p,
.nnn-profile-card--yellow .nnn-profile-card__bio li,
.nnn-profile-card--yellow .nnn-profile-card__functie,
.nnn-profile-card--blue .nnn-profile-card__bio,
.nnn-profile-card--blue .nnn-profile-card__bio p,
.nnn-profile-card--blue .nnn-profile-card__bio li,
.nnn-profile-card--blue .nnn-profile-card__functie {
  color: var(--nnn-color-text);
}

/* ─── Responsief ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .onze-mensen__grid {
    grid-template-columns: 1fr;
  }
}