/* ============================================================
   takken.css — /takken/

   Dezelfde kaart als in het menu, maar op paginaformaat: een zacht vlak
   in de kleur van de tak, met het logo groot bovenaan en de naam en de
   leeftijd eronder, en onderaan de eerstvolgende activiteit van die tak.

   Die datum stond hier eerst bewust niet: doorklikken kon ook. Maar op de
   homepage staan bij dezelfde zes takken wél de eerstvolgende activiteiten, dus
   was deze pagina de enige plek waar de vraag "wanneer is er scouts?" onbeantwoord
   bleef. Nu één activiteit per kaart: genoeg om te weten of je zaterdag moet,
   te weinig om er een agenda van te maken.
   ============================================================ */

.takken {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
    max-width: 1100px;
    margin: 0 auto;
}

.takkaart {
    display: grid;
    grid-template-rows: auto auto auto;
    justify-items: center;
    align-content: center;
    gap: .5rem;
    min-height: 15rem;
    padding: 2.4rem 1.4rem 2rem;
    border-radius: var(--radius-lg);
    text-align: center;
    text-decoration: none;
    /* Volle takkleur met witte tekst, net als de hero op de takpagina en
       de kaartjes in het menu. */
    color: #fff;
    background: var(--tak-kleur, var(--brand));
    transition: transform .18s ease, background-color .18s ease;
}

/* Het logo wit op het gekleurde vlak, zoals in de hero. */
.takkaart__logo {
    width: 5.5rem;
    height: 5.5rem;
    color: #fff;
}

.takkaart__naam {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--step-2);
    line-height: 1.05;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .01em;
}

.takkaart__leeftijd {
    font-size: var(--step--1);
    color: #fff;
    opacity: .92;
}

/* De eerstvolgende activiteit hoort hier niet: op /takken/ tonen we enkel de
   tak met logo, naam, leeftijd en leerjaar. De agenda staat op de tak-pagina
   zelf. De renderer plaatst nog een leeg .takkaart__volgende-element (gevuld
   door tak-agenda.js); dat verbergen we hier volledig. */
.takkaart__volgende { display: none; }

/* Eén beweging voor alle takken: een klein zetje omhoog en het vlak dieper
   in de eigen kleur. Geen rand of schaduw die verspringt (DESIGN-REGELS §5.2). */
.takkaart:hover {
    transform: translateY(-4px);
    background: color-mix(in srgb, var(--tak-kleur) 85%, #14200F);
}

@media (prefers-reduced-motion: reduce) {
    .takkaart { transition: none; }
    .takkaart:hover { transform: none; }
}

@media (max-width: 60rem) {
    .takken { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 34rem) {
    .takken { grid-template-columns: 1fr; }
    .takkaart { min-height: 0; padding: 1.8rem 1.4rem; }
}