/* ============================================================
   leiding.css — /leiding/

   De ploeg komt uit de leiding-collectie en wordt door
   cms-collections.js gerenderd als .cms-personen, gegroepeerd per tak.
   De kaartjes zelf staan in components.css; hier staat wat deze pagina
   anders doet: grotere foto's, meer lucht tussen de takken, en de kop
   van elke tak in de kleur en met het logo van die tak.
   ============================================================ */

.leidinglijst {
    /* Ruim: de foto's mogen de volle breedte van het scherm gebruiken. */
    max-width: 1240px;
    margin: 0 auto;
}

/* ── Kop per tak ──
   De renderer geeft elke kop een id (groep-kapoenen, groep-wouters, ...).
   Daar hangen we de kleur en het logo aan, zodat elke tak zichtbaar zijn
   eigen blok heeft zonder dat er een scheidingslijn nodig is. */
.leidinglijst .cms-groep__kop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    /* Veel lucht tussen de takken: met zes groepen onder elkaar loopt het
       anders in elkaar over. */
    margin: 6.5rem 0 2rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--step-3);
    color: var(--tak-kleur, var(--ink));
    text-transform: uppercase;
    letter-spacing: .03em;
}

.leidinglijst .cms-groep__kop:first-child { margin-top: 1rem; }

/* Het tak-logo voor de naam. Als mask, zodat het de takkleur aanneemt. */
.leidinglijst .cms-groep__kop::before {
    content: '';
    width: clamp(4.8rem, 8.5vw, 7.5rem);
    height: clamp(4.8rem, 8.5vw, 7.5rem);
    flex: none;
    background-color: currentColor;
    -webkit-mask: var(--tak-logo) center / contain no-repeat;
    mask: var(--tak-logo) center / contain no-repeat;
}

/* Per tak de eigen kleur en het eigen logo. De variabelen staan in
   brand.css, hier alleen gekoppeld aan de kop van die groep. */
#groep-kapoenen   { --tak-kleur: var(--tak-kapoenen);   --tak-logo: url('../../images/static/takken/kapoenen.png'); }
#groep-wouters    { --tak-kleur: var(--tak-wouters);    --tak-logo: url('../../images/static/takken/wouters.png'); }
#groep-woudlopers { --tak-kleur: var(--tak-woudlopers); --tak-logo: url('../../images/static/takken/woudlopers.png'); }
#groep-jonggivers { --tak-kleur: var(--tak-jonggivers); --tak-logo: url('../../images/static/takken/jonggivers.png'); }
#groep-givers     { --tak-kleur: var(--tak-givers);     --tak-logo: url('../../images/static/takken/givers.png'); }
#groep-jins       { --tak-kleur: var(--tak-jins);       --tak-logo: url('../../images/static/takken/jins.png'); }

/* Kapoenen is geel: op de warme achtergrond leest dat te licht. */
#groep-kapoenen { --tak-kleur: var(--accent-dark); }

/* De groepsleiding is geen tak en heeft geen logo. Zonder --tak-logo zou het
   ::before-vak een massief gekleurd blok worden; hier halen we het weg zodat de
   kop alleen "Groepsleiding" toont. Zij staan via TAKVOLGORDE al onderaan. */
#groep-groepsleiding::before { display: none; }

/* ── Grotere foto's ── */
.leidinglijst .cms-personen { gap: 1.8rem; }

.leidinglijst .cms-personen > .cms-persoon { flex: 0 0 15.5rem; }
.leidinglijst .cms-persoon__totem { font-size: 1.15rem; }

@media (max-width: 640px) {
    .leidinglijst .cms-personen > .cms-persoon { flex: 0 1 11rem; }
    .leidinglijst .cms-groep__kop { margin: 4.5rem 0 1.6rem; font-size: var(--step-2); }
}

/* Op deze pagina staat de tak al als kop boven de groep; hem dan ook
   onder elke naam herhalen is ruis. */
.leidinglijst .cms-persoon__rol { display: none; }

/* Het telefoonnummer hoort alleen bij de groepsleiding.
   De groepsleiding staat op deze pagina twee keer: onder hun eigen tak,
   waar ze gewoon leiding zijn, en onderaan onder "Groepsleiding". Hun
   nummer is er voor het tweede. Een ouder met een vraag over de givers
   belt de groepsleiding, niet de giverleiding thuis. Onder de tak staat
   dus alleen de naam. */
.leidinglijst .cms-personen:not(.cms-personen--groepsleiding) .cms-persoon__tel {
    display: none;
}

.leiding__leeg {
    max-width: 46ch;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--muted);
}