/* ============================================================
   home.css — Scouts Beernem homepage.

   De homepage is een WEGWIJZER, geen verhaal. Weinig tekst, weinig
   secties, veel lucht. Iemand die verhuur zoekt is in één tik weg.

   Volgt DESIGN-REGELS.md:
   §1 borders rondom of nergens  §2 hover wisselt alleen kleur/positie
   §3 speels en kinderlijk       §4 één scherm = één idee
   ============================================================ */

/* ============================================================
   HERO
   Eén zin, één knop, en de fotocollage. Verder niets.
   ============================================================ */
.hero {
    position: relative;
    background: var(--brand);
    color: #fff;
    padding: clamp(2.5rem, 6vw, 5rem) 1.5rem clamp(3rem, 7vw, 6rem);
    overflow: hidden;
}

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

.hero__inner {
    position: relative;
    max-width: var(--wrap);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.hero h1 {
    color: var(--accent);
    text-transform: uppercase;
    text-wrap: balance;
}

.hero__intro {
    margin-top: 1.2rem;
    font-size: var(--step-1);
    max-width: 40ch;
    color: rgba(255, 255, 255, .92);
}

/* ============================================================
   LEUS ONDER DE TITEL
   Handgeschreven, in hetzelfde handschrift als de tagline in de header.
   In licht salie: dat blijft leesbaar op het huisgroen (4,4:1), waar het
   zachte groen uit het palet met 1,7:1 zou wegvallen.

   Twee bewegingen: hij schrijft zich één keer van links naar rechts in
   beeld, en wiegt daarna heel traag heen en weer.
   ============================================================ */
.hero__leus {
    display: inline-block;
    font-family: var(--font-hand);
    font-weight: 700;
    /* Even veel lucht boven als onder: zo hangt de leus precies tussen de
       titel en de knoppen. De marge onder komt van .cta-row, die staat op 0. */
    margin: .9rem 0;
    /* Op een telefoon bewust groter: de handgeschreven leus viel daar weg. */
    font-size: clamp(1.9rem, 5.2vw, 2.3rem);
    /* Ruimte voor het uitroepteken en de schuine stand; zonder deze marge
       sneed de clip-path van de intro-animatie de staart eraf. */
    padding-right: .35em;
    line-height: 1.1;
    color: var(--brand-licht);
    transform-origin: left center;
    /* Alleen de intro-animatie. Daarna staat hij stil: een tekst die
       blijft wiegen leidt af tijdens het lezen. */
    animation: leus-schrijft .9s cubic-bezier(.65, 0, .35, 1) .35s both;
}

/* Van links naar rechts onthullen, met een lichte landing. */
@keyframes leus-schrijft {
    from {
        clip-path: inset(-20% 100% -20% 0);
        opacity: 0;
        transform: rotate(-6deg) translateY(6px);
    }
    to {
        /* Negatieve inset: niets van de letters mag afgesneden worden. */
        clip-path: inset(-20% -8% -20% 0);
        opacity: 1;
        transform: rotate(-2deg) translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__leus { animation: none; transform: rotate(-2deg); }
}

/* ============================================================
   FOTOCOLLAGE
   Losse stapel afdrukken met witte rand, elk een eigen hoek.
   Voelt als een schoendoos foto's op tafel.

   De beweging is klein en traag. Bij hover komt een foto naar voren
   en gaat rechter staan: alleen transform en z-index, nooit een
   schaduw die verandert (DESIGN-REGELS.md §5.2).
   ============================================================ */
.collage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / .82;
    max-width: 620px;
    justify-self: center;
}

.kiek {
    position: absolute;
    width: var(--kiek-b, 42%);
    margin: 0;
    padding: .5rem .5rem 1.5rem;
    background: #fff;
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 26px rgba(22, 34, 14, .28);
    transform: rotate(var(--kiek-r, 0deg));
    transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}

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

/* Handgeschreven bijschrift onder de afdruk, zoals op een polaroid. */
.kiek figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: .3rem;
    text-align: center;
    font-family: var(--font-hand);
    font-size: 1.05rem;
    color: var(--brand-dark);
    padding: 0 .5rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.kiek:hover,
.kiek:focus-within {
    transform: rotate(0deg) scale(1.06) translateY(-6px);
    z-index: 10;
}

/* De stapel. Elke foto een eigen plek, hoek, maat en ritme. */
.kiek--1 { --kiek-r: -7deg;  --kiek-b: 44%; --kiek-d: 7.5s; --kiek-v: 0s;   top: 2%;  left: 0;     z-index: 3; }
.kiek--2 { --kiek-r: 5deg;   --kiek-b: 40%; --kiek-d: 8.5s; --kiek-v: .8s;  top: 0;   right: 4%;   z-index: 4; }
.kiek--3 { --kiek-r: -3deg;  --kiek-b: 46%; --kiek-d: 9s;   --kiek-v: 1.6s; top: 34%; left: 12%;   z-index: 6; }
.kiek--4 { --kiek-r: 8deg;   --kiek-b: 38%; --kiek-d: 7.8s; --kiek-v: .4s;  top: 40%; right: 0;    z-index: 5; }
.kiek--5 { --kiek-r: -5deg;  --kiek-b: 36%; --kiek-d: 8.2s; --kiek-v: 2.2s; bottom: 0; left: 2%;   z-index: 2; }
.kiek--6 { --kiek-r: 4deg;   --kiek-b: 34%; --kiek-d: 9.4s; --kiek-v: 1.2s; bottom: 2%; right: 14%; z-index: 1; }

/* ── Oppakken en wegsmijten ──
   Zodra collage.js het overneemt (.is-fysiek) stuurt JS de transform.
   De pop-animatie en de hover-transform moeten dan wijken, anders
   vechten ze om dezelfde eigenschap. */
/* Een kiekje waarvan de foto niet bestaat.
   Een <img> die 404 geeft tekent een gescheurd icoontje met de alt-tekst
   eroverheen, midden op de kop van de startpagina. Cms-beeld haalt hem dan weg
   en zet dit merkje; het kaartje blijft staan als een leeg polaroidje, zoals er
   wel meer op tafel liggen. Zichtbaar leeg is beter dan zichtbaar stuk. */
.kiek[data-cms-beeld="ontbreekt"] { display: none; }

.collage.is-fysiek .kiek {
    animation: none;
    transition: none;
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.collage.is-fysiek .kiek:hover,
.collage.is-fysiek .kiek:focus-within { transform: none; }

.collage.is-fysiek .kiek.is-vast { cursor: grabbing; }

.collage.is-fysiek .kiek img { pointer-events: none; }

/* ── Binnenkomst: elke afdruk ploft op een eigen manier in beeld ──
   Zes varianten, elk met een eigen richting, draai en vertraging.
   collage.js wacht tot deze animaties klaar zijn voor hij de plaatsing
   overneemt, anders meet hij een halve animatie op. */
/* Alleen de binnenkomst. Daarna blijft elke afdruk staan waar hij landt.
   De zweefanimatie is eruit: die bleef de foto's verschuiven, en dat is
   precies wat hier niet mag. */
.kiek {
    animation: var(--pop, pop-1) .75s cubic-bezier(.2, 1.35, .45, 1) var(--pop-v, 0s) both;
}

.kiek--1 { --pop: pop-1; --pop-v: .05s; }
.kiek--2 { --pop: pop-2; --pop-v: .18s; }
.kiek--3 { --pop: pop-3; --pop-v: .30s; }
.kiek--4 { --pop: pop-4; --pop-v: .42s; }
.kiek--5 { --pop: pop-5; --pop-v: .54s; }
.kiek--6 { --pop: pop-6; --pop-v: .66s; }

@keyframes pop-1 {
    from { opacity: 0; transform: rotate(calc(var(--kiek-r) - 18deg)) scale(.4) translate(-40px, 30px); }
    to   { opacity: 1; transform: rotate(var(--kiek-r)) scale(1) translate(0, 0); }
}
@keyframes pop-2 {
    from { opacity: 0; transform: rotate(calc(var(--kiek-r) + 22deg)) scale(.5) translate(50px, -20px); }
    to   { opacity: 1; transform: rotate(var(--kiek-r)) scale(1) translate(0, 0); }
}
@keyframes pop-3 {
    from { opacity: 0; transform: rotate(var(--kiek-r)) scale(.25) translate(0, 0); }
    to   { opacity: 1; transform: rotate(var(--kiek-r)) scale(1) translate(0, 0); }
}
@keyframes pop-4 {
    from { opacity: 0; transform: rotate(calc(var(--kiek-r) - 26deg)) scale(.55) translate(30px, 55px); }
    to   { opacity: 1; transform: rotate(var(--kiek-r)) scale(1) translate(0, 0); }
}
@keyframes pop-5 {
    from { opacity: 0; transform: rotate(calc(var(--kiek-r) + 14deg)) scale(.6) translate(-55px, -35px); }
    to   { opacity: 1; transform: rotate(var(--kiek-r)) scale(1) translate(0, 0); }
}
@keyframes pop-6 {
    from { opacity: 0; transform: rotate(calc(var(--kiek-r) - 10deg)) scale(.45) translate(20px, -50px); }
    to   { opacity: 1; transform: rotate(var(--kiek-r)) scale(1) translate(0, 0); }
}

/* ============================================================
   TAKKEN — "Wanneer is er scouts?"
   De kaart is een <article>, geen link: kop, elke activiteit en de knop
   onderaan zijn elk een eigen link met een eigen hover. Een <a> in een
   <a> mag niet.
   ============================================================ */
.takken {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}

.tak {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.tak__kop {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.1rem 1.3rem;
    background: var(--tak-kleur, var(--brand));
    color: #fff;
    text-decoration: none;
    transition: filter .18s ease;
}

.tak__kop:hover { filter: brightness(1.08); }

/* Alle takken hebben een witte kop, ook kapoenen.
   LET OP: wit op het kapoenen-geel (#F8C200) haalt 1,65:1 en voldoet
   dus niet aan WCAG. Bewuste keuze van de klant. Wil je het wel laten
   voldoen: maak --tak-kapoenen donkerder (#A48000 geeft 3,7:1 met wit). */

.tak__titel { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }

.tak__name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--step-2);
    color: inherit;
    text-transform: uppercase;
    line-height: 1;
}

/* Leeftijd en leerjaar: klein detail, geen kop. */
.tak__detail {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.25;
    opacity: .78;
}

.tak__punt { opacity: .6; }

/* ── De eerstvolgende activiteiten ── */
.tak__volgende { display: none; }

.tak__volgende.is-gevuld {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1rem .8rem .4rem;
}

/* Kopje dat duidelijk maakt dat dit NIET de volledige agenda is. */
.tak__volgende-kop {
    display: block;
    padding: 0 .5rem .4rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
}

.tak__activiteit {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
    padding: .5rem;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--body);
    transition: background-color .18s ease, transform .18s ease;
}

.tak__activiteit:hover {
    background: var(--bg-soft);
    transform: translateX(3px);
}

.tak__datum {
    display: grid;
    place-items: center;
    align-content: center;
    width: 2.9rem;
    height: 2.9rem;
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    color: var(--brand-dark);
    line-height: 1;
}

/* Het datumblokje blijft bij hover ongemoeid. De takkleur erin maakte
   de rij onrustig; de vulling van de rij zelf is genoeg. */

.tak__dag { font-family: var(--font-display);
    font-weight: 600; font-size: 1.15rem; }
.tak__maand { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }

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

.tak__titel-act {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.06rem;
    color: var(--ink);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tak__wanneer { font-size: .95rem; color: var(--muted); }

/* ── Knop naar de volledige agenda ── */
.tak__alles {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-top: auto;
    padding: .95rem 1.3rem;
    background: var(--bg-soft);
    color: var(--brand-dark);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .98rem;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}

/* Eén en dezelfde subtiele hover voor alle zes de takken: de balk wordt
   iets dieper en de tekst iets donkerder. Geen takkleur, want zes
   verschillende hovers naast elkaar oogde onrustig. */
.tak__alles:hover {
    /* Dezelfde warme tint als de band, 9% donkerder. --line is groenig en
       viel daardoor uit de toon. */
    background: #DAD8CD;
    color: var(--brand-deep);
}

.tak__alles .ico { width: 1.9rem; height: 1.9rem; }

/* ============================================================
   WEGWIJZER
   De rest van de site in zes rustige tegels. Dit is de plek waar
   iemand die verhuur of leiding zoekt meteen weg is.
   ============================================================ */
.wegen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}

.weg {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    background: var(--bg);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--body);
    transition: transform .18s ease, background-color .18s ease;
}

.weg:hover { transform: translateY(-3px); background: var(--accent-soft); }

.weg .ico-badge {
    width: 3.2rem;
    height: 3.2rem;
    background: var(--bg-soft);
    color: var(--brand);
}

/* Het schijfje neemt bij hover exact dezelfde gele vulling als de tegel,
   zodat het icoon los op het gele vlak lijkt te staan. */
.weg:hover .ico-badge { background: var(--accent-soft); }

.weg .ico-badge .ico { width: 1.7rem; height: 1.7rem; }

.weg__tekst { display: flex; flex-direction: column; gap: .1rem; }

.weg__naam {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--ink);
}

.weg__bij { font-size: .92rem; color: var(--muted); }

/* ============================================================
   PRAKTISCH
   Quick answer, drie feiten, en de veelgestelde vragen. Compact.
   ============================================================ */
.praktisch__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.feiten {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.feit {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.feit .ico { width: 1.9rem; height: 1.9rem; color: var(--brand); }

.feit__label {
    display: block;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
}

.feit__waarde { display: block; font-weight: 700; color: var(--ink); }

/* ── FAQ ── */
.faq__list { display: flex; flex-direction: column; gap: .7rem; }

.faq__item {
    background: var(--bg-soft);
    border-radius: var(--radius);
    padding: .2rem 1.3rem;
    transition: background-color .2s ease, transform .2s ease;
}

/* Hover: het blok komt een tikje naar voren en het teken wordt groter.
   Alleen vulling, positie en schaal. Geen border, geen schaduw. */
.faq__item:hover { background: var(--accent-soft); transform: translateX(4px); }

.faq__item:hover .faq__question { color: var(--brand-deep); }

.faq__item:hover .faq__question::after { transform: scale(1.12) rotate(90deg); }

.faq__item[open] { background: var(--accent-soft); }

.faq__item[open]:hover { transform: none; }

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
    /* components.css zet hier padding-right van 2.5rem voor een absoluut
       teken. Dat teken is nu een flex-item, dus die ruimte moet weg. */
    padding: 1rem 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--ink);
}

.faq__question::-webkit-details-marker { display: none; }

/* Het plus/min-teken is GETEKEND met twee streepjes, geen letter.
   Een glyph zakt en verspringt (verschillende fonts, verschillende
   baseline) en een rotatie maakt van een plus een kruisje in plaats van
   een min. Twee streepjes waarvan de verticale verdwijnt geeft een
   zuivere plus die een min wordt, zonder dat er iets beweegt.
   components.css zet dit teken absoluut; hier wordt het weer een gewoon
   flex-item zodat er nooit tekst doorheen loopt. */
.faq__question::after {
    content: '';
    position: static;
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: var(--radius-pill);
    background-color: var(--accent);
    background-image:
        linear-gradient(var(--brand-deep), var(--brand-deep)),
        linear-gradient(var(--brand-deep), var(--brand-deep));
    background-repeat: no-repeat;
    background-position: center, center;
    background-size: .75rem 2px, 2px .75rem;
    transform: none;
    transition: background-size .2s ease, transform .25s cubic-bezier(.34, 1.4, .5, 1);
}

.faq__item[open]:hover .faq__question::after { transform: scale(1.12); }

.faq__item[open] .faq__question::after {
    /* components.css zet hier content: "−". Samen met ons getekende
       streepje gaf dat een DUBBELE min. De letter moet dus weg. */
    content: '';
    background-size: .75rem 2px, 2px 0;
    /* En zijn transform:translateY(-50%) rotate(180deg): die hoort bij het
       absolute teken uit components.css, niet bij ons flex-item. Zonder deze
       regel erft het teken die translateY, en zodra je hovert (scale, zonder
       translateY) verspringt het ~15px verticaal. Expliciet none houdt het
       op zijn plek. */
    transform: none;
}

.faq__answer { padding: 0 0 1.1rem; max-width: 60ch; }

/* ============================================================
   RESPONSIEF — mobile first blijft leidend
   ============================================================ */
@media (max-width: 980px) {
    .hero__inner,
    .praktisch__grid { grid-template-columns: 1fr; }

    /* Op mobiel staat de tekst BOVEN de foto's: eerst weten waar je bent,
       dan pas het beeld. Geen order-omkering dus.
       De collage krimpt mee met de hero: geen vaste 460px meer, maar de volle
       breedte van de (nu ééncolomse) hero, tot aan de paginabreedte var(--wrap). */
    .collage { max-width: 100%; margin-top: .5rem; }

    .takken,
    .wegen { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .takken { grid-template-columns: 1fr; }
    .wegen  { grid-template-columns: 1fr; }

    /* Op een telefoon vier afdrukken in plaats van zes: anders wordt
       de stapel een prop. */
    .collage { aspect-ratio: 1 / .92; }
    .kiek--5, .kiek--6 { display: none; }
    .kiek--1 { --kiek-b: 52%; }
    .kiek--2 { --kiek-b: 48%; }
    .kiek--3 { --kiek-b: 54%; top: 38%; left: 6%; }
    .kiek--4 { --kiek-b: 46%; top: 44%; }
}