/* ==========================================================================
   Over (About) — page-specific styles
   ========================================================================== */

/* ---- Page overrides: force header elements visible (no scroll animation) ---- */
.page--over .header__logo-text {
  opacity: 1;
}

.page--over .header__lang-icon {
  opacity: 1;
}

/* Footer info bar: blue-100 bg on over page */
.page--over .footer__info {
  background: var(--blue-100);
}

/* ---- Over content wrapper ---- */
.over {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* ---- Over body (main content area) ---- */
.over__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  padding-top: 56px;
  padding-bottom: 120px;
  width: 100%;
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 2px;
}

.breadcrumb__icon {
  width: 24px;
  height: 24px;
}

.breadcrumb__text {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 1.125rem; /* 18px */
  line-height: 1.4;
  color: var(--green-1200);
  white-space: nowrap;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.over-hero {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  padding: 0 var(--page-padding-x);
  width: 100%;
}

.over-hero__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.over-hero__title {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 6rem; /* 96px */
  line-height: 1.05;
  letter-spacing: -2.88px;
  color: var(--green-1200);
  max-width: 1178px;
}

.over-hero__subtitle {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 2.375rem; /* 38px */
  line-height: 1.2;
  letter-spacing: -0.76px;
  color: var(--green-1200);
  max-width: 1059px;
}

/* ==========================================================================
   Photo gallery strip
   ========================================================================== */

.over-photos {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 0 var(--page-padding-x);
  width: 100%;
}

.over-photos__item {
  border-radius: var(--radius-card);
  overflow: hidden;
  height: 759px;
  min-width: 0;
}

.over-photos__item--left {
  flex: 718 0 0;
}

.over-photos__item--center {
  flex: 777 0 0;
}

.over-photos__item--right {
  flex: 679 0 0;
}

.over-photos__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Waarom we doen wat we doen
   ========================================================================== */

.over-waarom {
  display: flex;
  gap: 21px;
  align-items: flex-start;
  width: 1180px;
  max-width: 100%;
}

.over-waarom__label {
  width: 337px;
  flex-shrink: 0;
}

.over-waarom__content {
  flex: 1 1 0;
  min-width: 0;
}

.over-waarom__text {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 1.875rem; /* 30px */
  line-height: 1.25;
  letter-spacing: -0.45px;
  color: var(--green-1200);
  padding-right: 120px;
  max-width: 938px;
}

/* ==========================================================================
   Waar we in geloven
   ========================================================================== */

.over-geloven {
  display: flex;
  gap: 78px;
  align-items: flex-start;
  width: 1180px;
  max-width: 100%;
}

.over-geloven__label {
  width: 281px;
  flex-shrink: 0;
}

.over-geloven__content {
  display: flex;
  flex-direction: column;
  gap: 60px;
  flex: 1 1 0;
  min-width: 0;
  max-width: 940px;
}

.over-geloven__cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 820px;
}

/* Value card */
.value-card {
  background: var(--blue-100);
  padding: 18px 20px 24px;
  border-radius: var(--radius-small);
  overflow: hidden;
}

.value-card__content {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}

.value-card__title-col {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.value-card__title {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 1.875rem; /* 30px */
  line-height: 1.25;
  letter-spacing: -0.6px;
  color: var(--green-1200);
  width: 100%;
}

.value-card__desc-col {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.value-card__desc {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 1.125rem; /* 18px */
  line-height: 1.4;
  color: var(--green-1200);
}

.over-geloven__closing {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 1.875rem; /* 30px */
  line-height: 1.25;
  letter-spacing: -0.45px;
  color: var(--green-1200);
  max-width: 820px;
}

/* ==========================================================================
   Team section
   ========================================================================== */

.over-team {
  width: 100%;
}

.over-team__inner {
  background: var(--blue-100);
  padding: 120px;
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: center;
}

.over-team__header {
  display: flex;
  gap: 21px;
  align-items: flex-start;
  width: 1180px;
  max-width: 100%;
}

.over-team__label {
  width: 339px;
  flex-shrink: 0;
}

.over-team__intro {
  flex: 1 1 0;
  min-width: 0;
}

.over-team__intro-text {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 1.875rem; /* 30px */
  line-height: 1.25;
  letter-spacing: -0.45px;
  color: var(--green-1200);
  max-width: 938px;
}

/* ---- Team grid ---- */
.over-team__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  width: 1180px;
  max-width: 100%;
}

/* ---- Team member card ---- */
.team-card {
  display: flex;
  flex-direction: column;
  background: var(--base-100);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.team-card__photo {
  aspect-ratio: 4 / 5; /* portret, zoals gevraagd (was 274/284) */
  overflow: hidden;
  border-radius: var(--radius-card);
}

/* Van een deel van de collega's moet het portret nog komen. Dan staat er
   geen <img> in het kaartvlak (zie CollegaOverzicht.tsx) en zou de kaart op
   een witte pagina wegvallen tot een naam boven een gat. Een lichte vulling
   houdt de kaart een kaart, zonder een ontbrekende foto te maskeren als
   iemand anders. */
.team-card__photo:empty {
  background: var(--base-200);
  box-shadow: inset 0 0 0 1px rgba(0, 65, 51, 0.08);
}

.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card__name {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 1.125rem; /* 18px */
  line-height: 1.4;
  color: var(--green-1200);
  padding: 8px 12px 0;
}

.team-card__role {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 0.9375rem; /* 15px */
  line-height: 1.1;
  letter-spacing: 0.3px;
  color: var(--green-1200);
  padding: 0 12px 12px;
}

/* ---- Feature photos in grid ---- */
.team-feature {
  border-radius: var(--radius-card);
  overflow: hidden;
}

.team-feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Feature photo 1: columns 3-5, rows 1-2 */
.team-feature--1 {
  grid-column: 3 / span 3;
  grid-row: 1 / span 2;
}

/* Feature photo 2: columns 1-2, rows 5-6 */
.team-feature--2 {
  grid-column: 1 / span 2;
  grid-row: 5 / span 2;
}

/* Feature photo 3: columns 3-5, rows 10-11 */
.team-feature--3 {
  grid-column: 3 / span 3;
  grid-row: 10 / span 2;
}

/* ==========================================================================
   Vacatures
   ========================================================================== */

.over-vacatures {
  display: flex;
  gap: 78px;
  align-items: flex-start;
  width: 1180px;
  max-width: 100%;
}

.over-vacatures__label {
  width: 281px;
  flex-shrink: 0;
}

.over-vacatures__content {
  flex: 1 1 0;
  min-width: 0;
  max-width: 940px;
}

.over-vacatures__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 820px;
}

/* ---- Vacancy row ---- */
.vacancy-row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  background: var(--base-100);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.vacancy-row__info {
  display: flex;
  gap: 17px;
  align-items: center;
  padding-left: 16px;
}

.vacancy-row__title {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 1.125rem; /* 18px */
  line-height: 1.4;
  color: var(--green-1200);
  width: 325px;
  padding: 13px 0;
}

.vacancy-row__hours {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 1.125rem; /* 18px */
  line-height: 1.4;
  letter-spacing: 0.09px;
  color: var(--green-1200);
  white-space: nowrap;
  padding: 13px 0;
}

.vacancy-row__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 51px;
  flex-shrink: 0;
  background: var(--blue-200);
  padding: 8px;
}

.vacancy-row__arrow img {
  width: 24px;
  height: 24px;
}

/* ==========================================================================
   Collega-overzicht
   Het teamgrid met zoekbalk, filter op functietitel en frames waar je
   doorheen bladert. Het raster is hetzelfde als .over-team__grid — vijf
   kolommen — zodat een sfeerbeeld van 3x2 (liggend) negen mensen overlaat en
   een van 2x2 (staand) elf.
   ========================================================================== */

.collegas {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  scroll-margin-top: 93px; /* vaste header (73px) + lucht, voor het anker */
}

.collegas__filters {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.collegas__zoek {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.collegas__filter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 1 280px;
  min-width: 0;
}

.collegas__veld-label {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 0.9375rem; /* 15px */
  line-height: 1.1;
  letter-spacing: 0.3px;
  color: var(--green-1200);
}

.collegas__zoek-veld,
.collegas__filter-veld {
  width: 100%;
  padding: 12px 16px;
  background: var(--base-100);
  border: 1px solid var(--blue-200);
  border-radius: var(--radius-card);
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 1.125rem; /* 18px */
  line-height: 1.3;
  color: var(--green-1200);
}

.collegas__zoek-veld:focus-visible,
.collegas__filter-veld:focus-visible {
  outline: 2px solid var(--green-800);
  outline-offset: 2px;
}

/* ---- Keuzelijst (het functiefilter) ----------------------------------------

   Het filter is geen <select> meer maar een eigen keuzelijst, omdat de lijst
   die een select openklapt door het besturingssysteem wordt getekend en met
   geen enkele regel CSS te bereiken is. Zie src/components/site/Keuzelijst.tsx
   voor het gedrag; hieronder alleen het uiterlijk.

   De knop draagt .collegas__filter-veld en erft daarmee de opmaak van het
   veld dat er eerst stond — rand, radius, achtergrond, letter. Alleen wat een
   knop anders doet dan een invoerveld staat hier: tekst links in plaats van
   gecentreerd, en een waarde die afkapt in plaats van de knop op te rekken.
   -------------------------------------------------------------------------- */
.keuzelijst {
  position: relative;
}

button.collegas__filter-veld {
  display: block;
  text-align: left;
}

.keuzelijst__waarde {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Ruimte voor de chevron, die als achtergrond op de knop staat. */
  padding-right: 8px;
}

/* De lijst hangt onder de knop en duwt de pagina dus niet opzij. Hij is
   breed als de knop: even breed als waar de waarde in stond, zodat het één
   element lijkt in plaats van twee. */
.keuzelijst__lijst {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  /* Zestien functietitels passen niet op elk scherm; dan schuift de lijst
     zelf in plaats van de pagina. */
  max-height: 320px;
  overflow-y: auto;
  background: var(--base-100);
  border: 1px solid var(--blue-200);
  border-radius: var(--radius-card);
  /* Een schaduw in het donkergroen van de site, niet in zwart: zo blijft hij
     in de kleurfamilie van de pagina. */
  box-shadow: 0 8px 24px rgba(0, 65, 51, 0.14);
}

.keuzelijst__optie {
  padding: 10px 12px;
  border-radius: var(--radius-small);
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 1.125rem; /* 18px, gelijk aan de velden */
  line-height: 1.3;
  color: var(--green-1200);
  cursor: pointer;
}

/* De optie waar de pijl of de muis op staat. Eén markering voor allebei,
   zodat toetsenbord en muis hetzelfde beeld geven. */
.keuzelijst__optie[data-actief="ja"] {
  background: var(--blue-100);
}

/* De gekozen optie blijft herkenbaar terwijl je langs de andere loopt. */
.keuzelijst__optie[aria-selected="true"] {
  font-weight: var(--fw-semibold);
  color: var(--green-1000, #017D66);
}

.collegas__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  width: 100%;
}

.collegas__sfeerbeeld {
  border-radius: var(--radius-card);
  overflow: hidden;
}

.collegas__sfeerbeeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* De kaart is nu een link naar de eigen pagina. */
.collega-kaart {
  text-decoration: none;
  color: inherit;
}

.collega-kaart:focus-visible {
  outline: 2px solid var(--green-800);
  outline-offset: 2px;
}

.collegas__leeg {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 1.125rem; /* 18px */
  line-height: 1.3;
  color: var(--green-1200);
}

.collegas__paginering {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.collegas__pagina {
  min-width: 40px;
  padding: 8px 12px;
  background: var(--base-100);
  border: 1px solid var(--blue-200);
  border-radius: var(--radius-card);
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 1rem;
  line-height: 1.1;
  color: var(--green-1200);
  cursor: pointer;
}

.collegas__pagina--actief {
  background: var(--green-1200);
  border-color: var(--green-1200);
  color: var(--base-100);
}

.collegas__pagina:focus-visible {
  outline: 2px solid var(--green-800);
  outline-offset: 2px;
}

/* ==========================================================================
   Collega-detailpagina
   Tweede foto naast een kort tekstje. Dezelfde inspringing en kolombreedtes
   als de andere tekstsecties, zodat de pagina in de rij past.
   ========================================================================== */

.collega-detail {
  width: 100%;
  padding: 0 var(--page-padding-x);
}

.collega-detail__inner {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  width: 100%;
}

.collega-detail__foto {
  flex: 0 0 40%;
  max-width: 480px;
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.collega-detail__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.collega-detail__tekst {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1 1 0;
  min-width: 0;
}

.collega-detail__bio {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 1.875rem; /* 30px */
  line-height: 1.25;
  letter-spacing: -0.45px;
  color: var(--green-1200);
}

.collega-detail__contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.collega-detail__contact a {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 1.125rem; /* 18px */
  line-height: 1.3;
  color: var(--green-1200);
}