/* ============================================================================
   BRUYST — TEAM / MEDEWERKERS
   ----------------------------------------------------------------------------
   Het probleem: op de ene vestiging werken zes mensen, op de andere twee.
   Een gewoon raster met vier kolommen laat er bij twee mensen twee gaten vallen
   en rekt bij zes de kaarten uit. Beide zien er onbedoeld uit.

   De oplossing hier:
     - kaarten houden hun eigen breedte (--bruyst-team-kaart), ze rekken nooit
     - de rij wordt gecentreerd, dus twee mensen staan als net paar in het midden
     - het maximum per rij past zich aan het aantal aan:
         2, 3, 4 mensen  → één rij
         5 of 6 mensen   → drie per rij, dus 3+2 en 3+3
         7 of meer       → vier per rij
       Zo krijg je nooit een eenzame kaart onderaan.

   Alles instelbaar in het blok hieronder. Geen font-family, geen losse hex.
   ============================================================================ */

:root {
  --bruyst-team-kaart:  220px;   /* breedte van één kaart */
  --bruyst-team-gap:     28px;   /* ruimte tussen de kaarten */
  --bruyst-team-radius:  18px;
  --bruyst-team-ratio:   4 / 5;  /* portretverhouding van de foto */
}


/* ============================================================
   1. Het raster
   ============================================================ */
.bruyst-team__titel {
  text-align: center;
  margin: 0 0 28px;
}

.bruyst-team__grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bruyst-team-gap);
}

.bruyst-team__item {
  /* 0 1 = mag krimpen, nooit groeien. Dit voorkomt uitgerekte kaarten. */
  flex: 0 1 var(--bruyst-team-kaart);
  max-width: var(--bruyst-team-kaart);
  margin: 0;
  padding: 0;
}

/* Maximaal vier per rij, en de rij zelf gecentreerd. */
.bruyst-team__grid {
  max-width: calc(4 * var(--bruyst-team-kaart) + 3 * var(--bruyst-team-gap));
}

/* Bij vijf of zes mensen: drie per rij → 3+2 en 3+3 in plaats van 4+1 en 4+2.
   Alleen in de rasterweergave — de cirkelweergave regelt dat zelf. */
.bruyst-team--raster[data-aantal="5"] .bruyst-team__grid,
.bruyst-team--raster[data-aantal="6"] .bruyst-team__grid {
  max-width: calc(3 * var(--bruyst-team-kaart) + 2 * var(--bruyst-team-gap));
}


/* ============================================================
   2. De kaart
   ============================================================ */
.bruyst-team__kaart {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}

.bruyst-team__fotohouder {
  position: relative;
  aspect-ratio: var(--bruyst-team-ratio);
  border-radius: var(--bruyst-team-radius);
  overflow: hidden;
  background: var(--bruyst-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bruyst-team__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Geen foto? Dan de initialen, in plaats van een leeg vlak. */
.bruyst-team__initialen {
  font-size: 40px;
  font-weight: 700;
  color: var(--bruyst-accent-dark);
  letter-spacing: .02em;
}

.bruyst-team__tekst {
  text-align: center;
}

.bruyst-team__naam {
  margin: 0;
  color: var(--bruyst-primary);
}

.bruyst-team__functie {
  margin: 2px 0 0;
  color: var(--bruyst-accent-dark);
}


/* ============================================================
   3. Knop eronder
   ============================================================ */
.bruyst-team__actie {
  text-align: center;
  margin: 32px 0 0;
}

.bruyst-team__knop {
  display: inline-flex;
  align-items: center;
  background: var(--bruyst-secondary);
  color: #fff !important;
  padding: var(--bruyst-knop-padding, 14px 28px);
  border-radius: var(--bruyst-knop-radius, 10px);
  text-decoration: none;
  transition: filter .15s;
}

.bruyst-team__knop:hover {
  filter: brightness(.92);
}


/* ============================================================
   4. Mobiel — twee kaarten naast elkaar blijft prettiger dan één
   ============================================================ */
@media (max-width: 600px) {
  :root {
    --bruyst-team-kaart: 145px;
    --bruyst-team-gap:    16px;
  }
  .bruyst-team__initialen { font-size: 30px; }
}


/* ============================================================================
   CIRKELWEERGAVE — de standaard
   ----------------------------------------------------------------------------
   Waarom dit werkt bij 1 én bij 8 mensen:

     1. De kaarten hebben geen vaste kolom. Ze staan in een gecentreerde rij die
        omslaat zodra hij vol is. Twee mensen staan dus als net paar in het
        midden, acht mensen in twee rijen — nooit een gat of een eenzame kaart.
     2. Elke derde cirkel is iets kleiner of groter en staat iets hoger of
        lager. Dat patroon van drie herhaalt zich, waardoor het bij elk aantal
        gecomponeerd oogt in plaats van als een raster.
     3. Ze zweven heel licht op en neer, elk met een eigen vertraging. Zonder
        die vertraging (--i) deint de hele rij als één blok en ziet het er
        goedkoop uit; mét vertraging leeft het.

   De beweging is bewust klein: 12px in 7 seconden. Wie liever geen beweging
   ziet (systeeminstelling "verminder beweging") krijgt hem niet.
   ============================================================================ */

.bruyst-team--cirkels {
  --bruyst-cirkel:       clamp(130px, 15vw, 200px);  /* basismaat */
  --bruyst-cirkel-gap-x: 40px;
  --bruyst-cirkel-gap-y: 56px;
  --bruyst-cirkel-zweef: 12px;   /* hoe ver ze op en neer gaan */
  --bruyst-cirkel-tempo: 7s;
}

/* Weinig mensen? Dan mogen de cirkels groter, anders oogt de sectie leeg. */
.bruyst-team--cirkels[data-aantal="1"],
.bruyst-team--cirkels[data-aantal="2"] { --bruyst-cirkel: clamp(170px, 22vw, 260px); }
.bruyst-team--cirkels[data-aantal="3"] { --bruyst-cirkel: clamp(150px, 18vw, 230px); }

.bruyst-team--cirkels .bruyst-team__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--bruyst-cirkel-gap-y) var(--bruyst-cirkel-gap-x);
  max-width: none;          /* de raster-maxbreedte geldt hier niet */
  padding-top: 20px;        /* ruimte voor de cirkels die omhoog staan */
  padding-bottom: 40px;     /* en voor die naar beneden */
}

/* --- Het ritme van drie --- */
.bruyst-team--cirkels .bruyst-team__item {
  --schaal: 1;
  --hoogte: 0px;
  flex: 0 0 auto;
  width: calc(var(--bruyst-cirkel) * var(--schaal));
  max-width: none;
  transform: translate3d(0, var(--hoogte), 0);
  animation: bruyst-zweef var(--bruyst-cirkel-tempo) ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.9s);
}

.bruyst-team--cirkels .bruyst-team__item:nth-child(3n+2) { --schaal: .80; --hoogte:  38px; }
.bruyst-team--cirkels .bruyst-team__item:nth-child(3n)   { --schaal: .91; --hoogte: -16px; }

@keyframes bruyst-zweef {
  0%, 100% { transform: translate3d(0, var(--hoogte), 0); }
  50%      { transform: translate3d(0, calc(var(--hoogte) - var(--bruyst-cirkel-zweef)), 0); }
}

@media (prefers-reduced-motion: reduce) {
  .bruyst-team--cirkels .bruyst-team__item { animation: none; }
}

/* --- De cirkel zelf --- */
.bruyst-team--cirkels .bruyst-team__kaart {
  gap: 18px;
}

.bruyst-team--cirkels .bruyst-team__fotohouder {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--bruyst-accent-soft);
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}

/* object-position 50% 25%: portretfoto's staan bijna altijd met het hoofd
   in de bovenste helft. Zonder deze regel snijdt een ronde uitsnede het
   gezicht er net vanaf. */
.bruyst-team--cirkels .bruyst-team__foto {
  object-position: 50% 25%;
}

/* De ring die bij hoveren opengaat — het "extra" boven een platte cirkel. */
.bruyst-team--cirkels .bruyst-team__fotohouder::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--bruyst-groen, var(--bruyst-accent));
  opacity: 0;
  transition: opacity .35s, inset .35s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}

.bruyst-team--cirkels .bruyst-team__item:hover .bruyst-team__fotohouder { transform: scale(1.04); }
.bruyst-team--cirkels .bruyst-team__item:hover .bruyst-team__fotohouder::after {
  opacity: .55;
  inset: -14px;
}

.bruyst-team--cirkels .bruyst-team__initialen {
  font-size: calc(var(--bruyst-cirkel) * var(--schaal) * .28);
}

/* --- Naam en functie --- */
.bruyst-team--cirkels .bruyst-team__naam {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.25;
}

.bruyst-team--cirkels .bruyst-team__functie {
  margin-top: 4px;
  font-size: clamp(13px, 1vw, 15px);
  color: var(--bruyst-accent-dark);
}

/* --- Smalle schermen ---
   Twee cirkels naast elkaar blijft prettiger dan één grote per rij, en het
   hoogteverschil halveren we zodat de sectie niet te lang wordt. */
@media (max-width: 600px) {
  .bruyst-team--cirkels {
    --bruyst-cirkel:       min(38vw, 165px);
    --bruyst-cirkel-gap-x: 20px;
    --bruyst-cirkel-gap-y: 32px;
  }
  .bruyst-team--cirkels .bruyst-team__item:nth-child(3n+2) { --hoogte:  18px; }
  .bruyst-team--cirkels .bruyst-team__item:nth-child(3n)   { --hoogte:  -8px; }
  .bruyst-team--cirkels[data-aantal="1"] { --bruyst-cirkel: 60vw; }
}