/* ============================================================
   contact.css — /contact/

   De pagina heeft maar twee dingen te zeggen: waar je mailt en wie je
   belt. Dus een kop en twee blokken, verder niets.

   De kaartjes van de mensen komen uit components.css (.cms-personen,
   gerenderd door cms-collections.js). Hier staat alleen wat deze pagina
   anders doet: het zijn er drie in plaats van dertig, dus ze mogen
   ruimer, en het telefoonnummer is hier de hoofdzaak van het kaartje in
   plaats van een bijzaak.

   Kleuren en maten komen uit brand.css, nooit als losse waarde
   (DESIGN-REGELS.md hoofdstuk 2).
   ============================================================ */

/* Naast elkaar zodra het past, eronder als het niet past. Geen vaste
   kolombreedte: de twee blokken hebben verschillend veel inhoud en mogen
   allebei even hoog worden. */
.contactblokken {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 1.5rem;
    align-items: start;
}

.contactblok {
    background: var(--bg-soft);
    border-radius: var(--radius-lg);
    padding: 2rem 1.8rem;
}

/* De koppen even groot als elkaar en kleiner dan de h1: dit zijn twee
   gelijkwaardige blokken, geen hoofdstuk met onderdelen. */
.contactblok h2 {
    margin: 0 0 1.2rem;
    font-size: var(--step-1);
    color: var(--brand-dark);
}

/* ── Het mailadres ──
   Een knop in het huisgeel, dezelfde vorm en hover als de Inschrijven-knop
   in de balk, zodat de site één taal spreekt. */
.contactblok__mail {
    display: inline-flex;
    align-items: center;
    background: var(--accent);
    color: var(--brand-deep);
    font-family: var(--font-display);
    font-weight: 600;
    /* Een mailadres is lang: op een smal blok mag het krimpen en desnoods
       afbreken, maar nooit buiten zijn knop vallen. */
    font-size: clamp(.95rem, 3.4vw, var(--step-0));
    word-break: break-word;
    text-decoration: none;
    padding: .9rem 1.5rem;
    border-radius: var(--radius-pill);
    transition: background-color .18s ease, transform .18s ease;
}

.contactblok__mail:hover,
.contactblok__mail:active {
    background: var(--accent-dark);
    transform: translateY(-2px);
}

/* ── De mensen ──
   Drie namen met een nummer. Onder elkaar in plaats van in een raster: het
   zijn er weinig, en zo staat elk nummer op één regel met de naam erboven. */
.contactblok__mensen .cms-personen {
    margin: 0;
    /* Onder elkaar, niet naast elkaar. De basis is flex-wrap, en dan hangt
       het van de blokbreedte af of er twee of drie op een rij komen. Hier
       hoort elke naam met zijn nummer op een eigen regel te staan. */
    flex-direction: column;
    align-items: stretch;
    gap: 1.2rem;
}

/* De foto links, alles wat je over die persoon leest ernaast. Een raster van
   twee kolommen: de pasfoto staat over alle rijen, en in de tweede kolom
   staan de totemnaam en de voornaam onder elkaar met het nummer eronder.

   Expliciete rij- en kolomnummers, geen auto-flow: de renderer laat een leeg
   veld gewoon weg (geen totem, geen nummer), en dan zou de volgende regel
   een rij opschuiven en naast de verkeerde tekst belanden. Met vaste
   plaatsen blijft een ontbrekende regel simpelweg een lege rij van 0 hoog. */
.contactblok__mensen .cms-personen > .cms-persoon {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    align-items: start;
    column-gap: 1rem;
    row-gap: 0;
    text-align: left;
}

.contactblok__mensen .cms-persoon__foto,
.contactblok__mensen .cms-persoon__geenfoto {
    /* Ronder dan de standaard: dit zijn gezichten, geen lijstitems. Geen
       enkele scherpe hoek (DESIGN-REGELS.md §3). */
    width: 5.5rem;
    border-radius: var(--radius-lg);

    /* Even hoog als de drie regels ernaast, wat die ook doen. Een vaste
       vierkante maat gokken op de regelhoogte van drie lettertypes klopt
       precies één keer; zodra een naam omslaat staat de foto te kort. Door
       hem over alle rijen te laten staan en mee te rekken, sluit hij altijd
       aan op de onderkant van de belknop. */
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: stretch;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}

/* Op /leiding/ is de totem het grootst en de voornaam het regeltje eronder.
   Hier is dat omgedraaid: een ouder die belt zoekt een naam, geen totemnaam.
   Geen order-truc, want de renderer zet de foto vooraan en die moet vooraan
   blijven als er ooit een pasfoto bij komt. */
.contactblok__mensen .cms-persoon__naam {
    grid-column: 2;
    grid-row: 2;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--step-0);
    color: var(--ink);
}

.contactblok__mensen .cms-persoon__totem {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: var(--step-0);
    color: var(--brand);
}

/* De rol staat al in de kop van het blok; er bij alle drie "groepsleiding"
   onder zetten voegt niets toe. */
.contactblok__mensen .cms-persoon__rol {
    display: none;
}

/* Het nummer is de reden dat iemand hier staat, dus het is geen regeltje maar
   een echte knop. Minstens 44px hoog, want op een telefoon is dit het element
   waar het meest op getikt wordt, en het is een tel:-link, dus tikken belt.

   Maar niet over de hele breedte. Een balk van vierhonderd pixels voor een
   nummer van dertien tekens leest als een leeg vak met iets in het midden; de
   knop hoort de maat van het nummer te hebben. Op een smal scherm blijft hij
   wel over de volle breedte staan: daar is hij de hoofdhandeling en tikt een
   duim liever op iets breeds. Zie de media query onderaan. */
.contactblok__mensen .cms-persoon__tel {
    /* Alleen de plaatsing en de maat. Het uiterlijk staat één keer, in
       components.css bij .cms-persoon__tel. */
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    margin-top: .45rem;
    min-height: 2.75rem;
    padding: .5rem 1.1rem;
    font-size: var(--step-0);
    background: var(--bg);
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.contactblok__mensen .cms-persoon__tel:hover,
.contactblok__mensen .cms-persoon__tel:active {
    background: var(--accent-soft);
    color: var(--brand-deep);
    transform: translateY(-2px);
}

/* ── Nog niemand ingevuld ──
   Geen foutmelding maar een gewone zin, in de handletter zoals de rest van
   de site praat wanneer ze iets aankondigt. */
.contactblok__leeg {
    margin: 0;
    font-family: var(--font-hand);
    font-size: var(--step-1);
    color: var(--brand-dark);
}

@media (prefers-reduced-motion: reduce) {
    .contactblok__mail:hover,
    .contactblok__mail:active,
    .contactblok__mensen .cms-persoon__tel:hover,
    .contactblok__mensen .cms-persoon__tel:active { transform: none; }
}

/* Op een telefoon is bellen de hoofdhandeling, en dan mag de knop wél de volle
   breedte hebben: daar tikt een duim liever op iets breeds. */
@media (max-width: 34rem) {
    .contactblok__mensen .cms-persoon__tel { justify-self: stretch; display: flex; }
}