/* ============================================================
   tak.css — /takken/<tak>/

   Eén sjabloon voor de zes takken. Wat per tak verschilt (kleur, logo)
   komt uit de --tak-*-variabelen in brand.css, niet uit dit bestand.
   ============================================================ */

/* ── Kop als vak in de takkleur ──
   De kleur zit niet meer op de hele sectie tegen de schermranden, maar op een
   afgerond vak met lucht eromheen, in de volle kleur van de tak. */
.takhero {
    position: relative;
    background: var(--bg);
    padding: clamp(1.2rem, 3vw, 2rem) clamp(1rem, 3vw, 1.5rem) 0;
}

.takhero .band__inner {
    position: relative;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.4rem, 3.5vw, 2.4rem) clamp(2rem, 4vw, 2.6rem);
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: #fff;
    background: var(--tak-kleur, var(--brand));
}

/* Alle takken krijgen een witte kop, ook de kapoenen. Met de zachtere D-kleur
   is het contrast beter dan op het volle vlak; op kapoenen-geel blijft wit een
   bewuste keuze van de klant (zie DESIGN-REGELS.md 2.3). */

.takhero .band__inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../../images/static/doodle-patroon.svg') repeat;
    background-size: 460px;
    opacity: .14;
    pointer-events: none;
}

.takhero__inner { position: relative; }

.takhero__inner {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 1.8rem);
}

.takhero__logo {
    width: clamp(4rem, 9vw, 6.5rem);
    height: clamp(4rem, 9vw, 6.5rem);
    flex: none;
}

.takhero h1 {
    color: inherit;
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
}

.takhero__detail {
    margin: .4rem 0 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--step-0);
    opacity: .85;
}

/* ── De eerstvolgende activiteiten in de kop ──
   Staat op de takkleur, dus de kaartjes krijgen een eigen lichte vulling.
   De agenda verderop toont het hele semester; dit zijn de drie die eraan
   komen. */
.takhero__volgende {
    position: relative;
    margin-top: clamp(1.4rem, 3vw, 2rem);
    /* De ruimte staat er vanaf de EERSTE render, nog vóór tak.js draait. Zo
       springt het blok niet als het script de plaatshouders neerzet én niet
       als de activiteiten binnenkomen. Waarde = kop + één rij kaartjes
       (desktop) / kop + drie gestapelde kaartjes (mobiel, zie media-query). */
    min-height: 6.6rem;
}

/* Het blok start met het hidden-attribuut. Normaal is dat display:none en
   dus nul hoogte; dan zou de reservering hierboven niets doen tot JS het
   attribuut weghaalt. Daarom: wél in de layout (ruimte gereserveerd), maar
   onzichtbaar tot tak.js het vult. Vindt tak.js niets, dan klapt het blok
   alsnog helemaal dicht via style.display = 'none'. */
.takhero__volgende[hidden] {
    display: block;
    visibility: hidden;
}

.takhero__volgende-kop {
    display: block;
    margin-bottom: .7rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .8;
}

.takhero__lijst {
    list-style: none;
    /* Een vast grid, geen flex-wrap: het aantal per rij hangt zo niet meer af
       van de breedte, dus de skeletons en de echte kaartjes wrappen identiek
       en er verspringt niets bij het inladen. Op mobiel één kolom (zie de
       media-query onderaan). */
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
    margin: 0;
    padding: 0;
}

/* Vanaf 64rem passen drie kaartjes naast elkaar met de datumzin op één regel.
   Daaronder wordt dat te smal, dus stapelen we ze; de reservering schakelt op
   exact dezelfde breedte mee zodat er nergens een sprong ontstaat. */
@media (max-width: 64rem) {
    .takhero__lijst { grid-template-columns: 1fr; }
    .takhero__volgende { min-height: 16.3rem; }
}

.takhero__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .7rem;
    align-items: center;
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
    border-radius: var(--radius);
    padding: .6rem .9rem .6rem .6rem;
    /* Vaste hoogte, gedreven door het datumblokje. De zin blijft op één regel,
       dus dit verandert niet met de breedte. */
    min-height: 4rem;
}

.takhero__datum {
    display: grid;
    place-items: center;
    align-content: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: var(--radius-sm);
    background: var(--tak-kleur, var(--brand));
    color: #fff;
    line-height: 1;
}

/* Ook het datumblokje blijft wit, zie de opmerking bovenaan. */

.takhero__dag { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.takhero__maand { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }

.takhero__wat { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }

.takhero__titel {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.06rem;
    line-height: 1.2;
    /* De activiteitsnaam krijgt de kleur van de tak, zodat elke kop zijn
       eigen accent houdt. De kaart eronder is bijna wit. */
    color: var(--tak-kleur, var(--brand));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.takhero__wanneer {
    font-size: 1.05rem;
    color: var(--muted);
    /* Eén regel: de zin is nu kort (weekdag + uur), dus dat past overal en
       de kaarthoogte blijft constant. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Skeleton-plaatshouders ──
   tak.js zet er drie neer vóór de activiteiten geladen zijn, met exact de
   hoogte van een echte kaart, zodat de kop niet verspringt bij het inladen.
   Op het gekleurde vlak zijn het lichte, zacht pulserende blokjes. */
.takhero__item--skelet {
    background: rgba(255, 255, 255, .30);
}

.takhero__item--skelet .takhero__datum {
    background: rgba(255, 255, 255, .5);
}

.takhero__skelet-balk {
    display: block;
    height: .85rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, .5);
}

.takhero__skelet-balk--kort { width: 62%; margin-top: .4rem; }

@media (prefers-reduced-motion: no-preference) {
    .takhero__item--skelet { animation: takhero-skelet 1.3s ease-in-out infinite; }
}

@keyframes takhero-skelet {
    0%, 100% { opacity: .7; }
    50%      { opacity: 1; }
}

/* ── Intro naast de groepsfoto ── */
/* De groepsfoto met de mail eronder, gecentreerd. De beschrijving van de
   tak staat verderop (takverhaal), dus dit blok toont alleen het beeld en
   het mailadres. */
.takintro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    max-width: 40rem;
    margin: 0 auto;
}

.takfoto { width: min(100%, 34rem); }

.takintro__mail {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin: 0;
    font-size: 1.05rem;
}

.takintro__mail .ico { width: 1.6rem; height: 1.6rem; color: var(--brand); }

.takintro__mail a {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--brand-dark);
    text-decoration: none;
}

.takintro__mail a:hover { text-decoration: underline; }

/* ── Het verhaal van de tak ──
   Staat boven de agenda, op de plek waar eerst een kop stond. Het logo van
   de tak ligt er groot en licht achter: genoeg om te zien welke tak je leest,
   te licht om de tekst in de weg te zitten. */
.takverhaal {
    position: relative;
    max-width: var(--measure);
    margin: 0 auto clamp(2rem, 4vw, 3.2rem);
    padding: clamp(1.2rem, 3vw, 2rem) 0;
    text-align: center;
}

/* Het pad naar het logo staat hier opnieuw, en niet als var(--tak-logo)
   uit brand.css. Reden: een relatieve url() in een custom property wordt
   opgelost vanuit het bestand dat de variabele GEBRUIKT, niet vanuit het
   bestand waar ze staat. Vanuit pages/ wijst '../images/...' dus naar
   assets/css/images/ en laadt er niets. leiding.css doet het om dezelfde
   reden zo. */
.takverhaal.tak--kapoenen    { --verhaal-logo: url('../../images/static/takken/kapoenen.png'); }
.takverhaal.tak--wouters     { --verhaal-logo: url('../../images/static/takken/wouters.png'); }
.takverhaal.tak--woudlopers  { --verhaal-logo: url('../../images/static/takken/woudlopers.png'); }
.takverhaal.tak--jonggivers  { --verhaal-logo: url('../../images/static/takken/jonggivers.png'); }
.takverhaal.tak--givers      { --verhaal-logo: url('../../images/static/takken/givers.png'); }
.takverhaal.tak--jins        { --verhaal-logo: url('../../images/static/takken/jins.png'); }

.takverhaal::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(9rem, 42vw, 18rem);
    height: clamp(9rem, 42vw, 18rem);
    transform: translate(-50%, -50%) rotate(-5deg);
    background-color: var(--tak-kleur);
    opacity: .25;
    -webkit-mask: var(--verhaal-logo) center / contain no-repeat;
    mask: var(--verhaal-logo) center / contain no-repeat;
    pointer-events: none;
}

.takverhaal p {
    position: relative;
    margin: 0;
    max-width: none;
    font-size: var(--step-1);
    text-wrap: pretty;
}

/* ── Drie sfeerbeelden onder de kop ──
   Als losse polaroids die inploppen, zoals op de home. Maar collage.js
   draait hier niet, dus er is géén sleep- of schud-physics: ze ploppen in
   en blijven staan waar ze landen. Een lichte hover, verder rust. */
.takkieken {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 100%;
    padding-top: .5rem;
}

.takkiek {
    flex: 0 0 auto;
    width: clamp(5.5rem, 27vw, 19rem);
    margin: 0 -0.7rem;
    padding: .45rem .45rem 1.1rem;
    background: #fff;
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 26px rgba(22, 34, 14, .20);
    transform: rotate(var(--r, 0deg));
    transition: transform .3s cubic-bezier(.2, .7, .3, 1);
    animation: takpop .7s cubic-bezier(.2, 1.35, .45, 1) var(--d, 0s) both;
}

/* De middelste iets groter en naar voren: een stapeltje polaroids, geen
   keurige rij. De lichte overlap (negatieve marge) doet de rest. */
.takkiek--1 { --r: -6deg; --d: .10s; }
.takkiek--2 { --r:  3deg; --d: .24s; width: clamp(6rem, 29vw, 21rem); z-index: 3; }
.takkiek--3 { --r: -4deg; --d: .38s; }

.takkiek img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 3px;
    background: var(--bg-soft);
}

/* Eén foto naar voren bij hover: alleen transform, geen schaduw die
   verspringt (DESIGN-REGELS.md §5.2). */
.takkiek:hover,
.takkiek:focus-within {
    transform: rotate(0deg) scale(1.05) translateY(-5px);
    z-index: 5;
}

/* Alleen de binnenkomst beweegt; daarna blijven de foto's staan. */
@keyframes takpop {
    from { opacity: 0; transform: rotate(var(--r, 0deg)) scale(.4) translateY(28px); }
    to   { opacity: 1; transform: rotate(var(--r, 0deg)) scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .takkiek { animation: none; }
    .takkiek:hover, .takkiek:focus-within { transform: rotate(var(--r, 0deg)); }
}

/* ── Agenda en leiding ──
   De kaarten zelf komen uit components.css (.cms-agenda, .cms-personen).
   Hier alleen de breedte en de lege staat. */
.takagenda { max-width: 780px; margin: 0 auto; }

.takleiding { max-width: 1080px; margin: 0 auto; }

/* De portretten van de leiding op de takpagina zelf. De basis in
   components.css is klein (9rem); hier fors groter, net als op /leiding/. */
.takleiding .cms-personen { gap: 1.8rem; }
.takleiding .cms-personen > .cms-persoon { flex: 0 0 15.5rem; }
.takleiding .cms-persoon__totem { font-size: 1.15rem; }

@media (max-width: 640px) {
    .takleiding .cms-personen > .cms-persoon { flex: 0 1 11rem; }


    /* De drie sfeerbeelden fors groter op mobiel. Een rij van drie geeft
       een plafond, dus hier een schuine stapel zoals op de home: elke
       polaroid veel breder, diagonaal overlappend. */
    /* Een speels clustertje: twee foto's naast elkaar, de derde erboven en er
       een stukje overheen. Licht scheef zoals de rest van de huisstijl. De
       derde krijgt order:-1 zodat hij bovenaan de rij staat en met een
       negatieve ondermarge op de twee eronder zakt. */
    .takkieken {
        flex-flow: row wrap;
        justify-content: center;
        align-items: flex-start;
    }
    .takkiek { margin: 0; }
    .takkiek--3 { --r:  2.5deg; order: -1; width: 56%; margin-bottom: -13%; z-index: 3; }
    .takkiek--1 { --r: -4deg;   width: 50%; z-index: 1; }
    .takkiek--2 { --r:  3deg;   width: 50%; margin-left: -7%; z-index: 2; }
}

/* De tak onder elke naam is hier overbodig: je staat al op de pagina van
   die tak. Op /leiding/, waar alle 33 door elkaar staan, blijft hij wel. */
.takleiding .cms-persoon__rol { display: none; }

/* En het telefoonnummer ook niet. Deze lijst is gefilterd op één tak, dus
   hier staat niemand als groepsleiding: wie hier een nummer heeft, heeft
   dat omdat hij ELDERS groepsleiding is. Bellen doe je via /contact/. */
.takleiding .cms-persoon__tel { display: none; }

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

@media (max-width: 860px) {
    .takintro { grid-template-columns: 1fr; }
    /* De foto komt ONDER de tekst: eerst lees je waar je bent, dan het beeld.
       Geen order-omkering dus; de bronvolgorde is al de juiste. */
    .takfoto { max-width: 26rem; margin-top: .5rem; }
}

/* Op een smal scherm mogen de kaartjes niet half zo breed blijven staan:
   dan blijft er een gat rechts. Ze nemen de volle breedte. */
@media (max-width: 720px) {
    .takhero__lijst { flex-direction: column; }
    .takhero__item { min-width: 0; width: 100%; }
}

@media (max-width: 560px) {
    .takhero__inner { flex-direction: column; align-items: flex-start; gap: .8rem; }
    .takhero h1 { font-size: var(--step-3); }
}