/*
 * Pavinom — de widgets.
 *
 * De widgets leveren alleen hun gegevens; hier staat hoe ze eruitzien. Alles
 * hieronder werkt met de tokens van dit thema, dus de lichte en de donkere
 * stand volgen vanzelf mee. Er staat geen enkele vaste kleur in behalve waar
 * die iets betekent — groen is droog gravel en dat is groen in beide standen.
 *
 * Staat apart van site.css omdat een widget een module is die ook zonder dit
 * thema bestaat. Wie hem niet gebruikt, laadt dit bestand nog altijd; dat
 * kost drie kilobyte en het scheelt een bouwstap.
 */

/* ══════════════════════════════════════════════════ de gravelbarometer ══ */

.gravel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--ruimte-5);
    align-items: center;
    padding: var(--ruimte-5);
    border: 1px solid var(--lijn);
    border-inline-start: 3px solid var(--gravel-kleur);
    border-radius: var(--radius-l);
    background: var(--papier-op);

    --gravel-kleur: #2E9E5B;
    --gravel-naald: var(--inkt);
    --gravel-baan: color-mix(in oklab, var(--inkt) 12%, transparent);
}

.gravel--twijfel { --gravel-kleur: #C8940E; }
.gravel--slecht  { --gravel-kleur: var(--oranje-diep, #C2540C); }

.gravel__meter { position: relative; flex: none; }
.gravel__meter svg { display: block; width: 168px; height: auto; }

/* De boog en de naald schuiven naar hun stand toe. Wie minder beweging
   gevraagd heeft, ziet ze meteen op hun plaats staan — zie onderaan. */
.gravel__boog { transition: stroke-dashoffset 1.1s cubic-bezier(.2, .7, .3, 1); }

.gravel__naald {
    transition: transform 1.1s cubic-bezier(.2, .7, .3, 1);
    transform-origin: 100px 104px;
}

.gravel__cijfer {
    position: absolute;
    left: 50%;
    bottom: 2px;
    translate: -50% 0;
    font-size: var(--tekst-2xl);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--gravel-kleur);
}

.gravel__eenheid { font-size: var(--tekst-xs); font-weight: 500; color: var(--inkt-flauw); }

.gravel__kop {
    margin: 0;
    font-size: var(--tekst-l);
    font-weight: 700;
    color: var(--gravel-kleur);
}

.gravel__uitleg { margin: .15rem 0 0; font-size: var(--tekst-s); }

.gravel__redenen,
.gravel__vooruit { margin: .55rem 0 0; font-size: var(--tekst-xs); color: var(--inkt-zacht); }

@media (max-width: 520px) {
    .gravel { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

/* ═════════════════════════════════════════════════════ het chaletbord ══ */

.chalet {
    display: inline-flex;
    align-items: center;
    gap: var(--ruimte-3);
    padding: var(--ruimte-3) var(--ruimte-4);
    border: 1px solid var(--lijn);
    border-radius: 999px;
    background: var(--papier-op);
    font-size: var(--tekst-s);
}

.chalet__lamp {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 50%;
    background: var(--inkt-flauw);
}

.chalet--open .chalet__lamp {
    background: #2E9E5B;
    animation: chaletKlop 2.4s ease-out infinite;
}

@keyframes chaletKlop {
    0%   { box-shadow: 0 0 0 0 rgb(46 158 91 / .55); }
    70%  { box-shadow: 0 0 0 9px rgb(46 158 91 / 0); }
    100% { box-shadow: 0 0 0 0 rgb(46 158 91 / 0); }
}

.chalet__woorden { display: grid; line-height: 1.25; }
.chalet__bij { font-size: var(--tekst-xs); color: var(--inkt-zacht); }

/* ══════════════════════════════════════════════════════ de aftelklok ══ */

.aftel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--ruimte-4);
    align-items: center;
    padding: var(--ruimte-4) var(--ruimte-5);
    border-radius: var(--radius-l);
    background: linear-gradient(135deg, var(--oranje), var(--oranje-diep));
    color: #fff;
    text-decoration: none;
    box-shadow: var(--schaduw-2);
    transition: transform .18s ease, box-shadow .18s ease;
}

.aftel:hover { transform: translateY(-2px); box-shadow: var(--schaduw-3); }

.aftel__getal {
    font-size: clamp(2.4rem, 6vw, 3.4rem);
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}

.aftel__woorden { display: grid; gap: 1px; min-width: 0; }

.aftel__wanneer {
    font-size: var(--tekst-xs);
    text-transform: uppercase;
    letter-spacing: .1em;
    opacity: .82;
}

.aftel__titel { font-size: var(--tekst-l); line-height: 1.15; }
.aftel__datum { font-size: var(--tekst-xs); opacity: .85; }
.aftel__pijl { opacity: .8; }

/* ═══════════════════════════════════════════════════ de clubkroniek ══ */

.kroniek { position: relative; }

.kroniek__spoor {
    display: flex;
    gap: var(--ruimte-6);
    list-style: none;
    margin: 0;
    padding: var(--ruimte-6) var(--rand) var(--ruimte-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;

    /* De lijn waar de stippen op staan, als achtergrond en niet als extra
       element: dan schuift hij vanzelf mee met de inhoud. */
    background:
        linear-gradient(to right, transparent, var(--lijn-sterk) 4%, var(--lijn-sterk) 96%, transparent)
        0 calc(var(--ruimte-6) + 30px) / 100% 2px no-repeat;
}

.kroniek__spoor:focus-visible {
    outline: 2px solid var(--oranje);
    outline-offset: 4px;
    border-radius: var(--radius-m);
}

.kroniek__punt {
    flex: 0 0 min(17rem, 74vw);
    scroll-snap-align: start;
    display: grid;
    gap: var(--ruimte-2);
}

.kroniek__jaar {
    font-size: var(--tekst-l);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--oranje-diep);
    font-variant-numeric: tabular-nums;
}

.kroniek__stip {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--papier);
    border: 3px solid var(--oranje);
    margin-block: 2px var(--ruimte-3);
}

.kroniek__kop { margin: 0; font-size: var(--tekst-m); }
.kroniek__tekst { margin: 0; font-size: var(--tekst-s); color: var(--inkt-zacht); }

/* ══════════════════════════════════════════ het petanque-scorebord ══ */

.teller {
    display: grid;
    gap: var(--ruimte-4);
    padding: var(--ruimte-5);
    border: 1px solid var(--lijn);
    border-radius: var(--radius-l);
    background: var(--papier-op);
}

.teller__bord { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ruimte-4); }

.teller__ploeg {
    display: grid;
    gap: var(--ruimte-2);
    justify-items: center;
    padding: var(--ruimte-4) var(--ruimte-3);
    border-radius: var(--radius-l);
    background: var(--papier);
    border: 2px solid transparent;
    transition: border-color .2s ease, background .2s ease;
}

.teller__ploeg--a { --teller-kleur: var(--blauw); }
.teller__ploeg--b { --teller-kleur: var(--oranje-diep); }

.teller__ploeg.is-winnaar {
    border-color: var(--teller-kleur);
    background: color-mix(in oklab, var(--teller-kleur) 8%, var(--papier));
}

.teller__naam {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    font-size: var(--tekst-xs);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--inkt-zacht);
}

.teller__naam:hover { color: var(--teller-kleur); }

/* De knop is het cijfer zelf. Dat is met opzet zo groot: dit wordt bediend
   met een duim, in de zon, terwijl er iemand staat te wachten. */
.teller__punt {
    width: 100%;
    border: none;
    background: none;
    padding: var(--ruimte-3) 0;
    cursor: pointer;
    border-radius: var(--radius-m);
    transition: background .12s ease, transform .08s ease;
}

.teller__punt:active { transform: scale(.96); }
.teller__punt:hover { background: color-mix(in oklab, var(--teller-kleur) 10%, transparent); }

.teller__stand {
    display: block;
    font-size: clamp(3rem, 13vw, 5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.05em;
    font-variant-numeric: tabular-nums;
    color: var(--teller-kleur);
}

.teller__knopjes { display: flex; gap: var(--ruimte-2); }

.teller__kleinknop {
    min-width: 46px;
    padding: 6px 10px;
    border: 1px solid var(--lijn-sterk);
    border-radius: var(--radius-m);
    background: var(--papier-op);
    font: inherit;
    font-size: var(--tekst-s);
    color: var(--inkt-zacht);
    cursor: pointer;
}

.teller__kleinknop:hover { border-color: var(--teller-kleur); color: var(--teller-kleur); }

.teller__melding { margin: 0; text-align: center; font-size: var(--tekst-s); color: var(--inkt-zacht); }
.teller.is-klaar .teller__melding { color: var(--inkt); font-weight: 600; }

.teller__voet { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); justify-content: center; }

/* Vergrendeld: alles blijft leesbaar, maar niets reageert nog. */
.teller.is-vergrendeld .teller__punt,
.teller.is-vergrendeld .teller__kleinknop,
.teller.is-vergrendeld .teller__naam { pointer-events: none; opacity: .55; }

/* ══════════════════════════════════════════════════════════ stilstand ══ */

@media (prefers-reduced-motion: reduce) {
    .gravel__boog,
    .gravel__naald,
    .aftel,
    .teller__punt,
    .teller__ploeg { transition: none !important; }

    .chalet--open .chalet__lamp { animation: none; }
    .kroniek__spoor { scroll-behavior: auto; }
}

/* ══════════════════════════════════════════════════════ de sfeerband ══ */

/*
 * Een brede band met een foto erachter. Het verloop staat eronder en niet
 * erover: valt het beeld weg — en dat is de toestand tot de club er zelf
 * foto's in zet — dan blijft er een clubblauw vlak staan in plaats van een
 * gat met een kapot icoontje.
 */
.sfeer {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background:
        var(--sfeer-beeld, none) center / cover no-repeat,
        linear-gradient(135deg, var(--blauw-diep), var(--blauw-nacht) 78%);
    color: #fff;
}

/* De waas. Zonder dit is witte tekst op een lichte zomerfoto onleesbaar, en
   dat is de fout die in zowat elke bandbanner ter wereld staat. */
.sfeer::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to right, rgb(6 12 30 / .82) 0%, rgb(6 12 30 / .45) 62%, rgb(6 12 30 / .3) 100%),
        radial-gradient(80% 120% at 85% 15%, rgb(244 121 31 / .2), transparent 60%);
}

.sfeer--om .sfeer__binnen { justify-content: flex-end; text-align: right; }
.sfeer--om::before { background: linear-gradient(to left, rgb(6 12 30 / .82) 0%, rgb(6 12 30 / .45) 62%, rgb(6 12 30 / .3) 100%); }

.sfeer__binnen {
    display: flex;
    align-items: center;
    min-height: clamp(15rem, 34vh, 22rem);
    padding-block: var(--ruimte-8);
}

.sfeer__tekst { max-width: 38rem; display: grid; gap: var(--ruimte-4); justify-items: start; }
.sfeer--om .sfeer__tekst { justify-items: end; }

.oogje--licht {
    border-color: rgb(255 255 255 / .3);
    background: rgb(255 255 255 / .12);
    color: #fff;
    backdrop-filter: blur(6px);
}

.sfeer__kop {
    margin: 0;
    font-size: clamp(1.6rem, .9rem + 2.4vw, 2.7rem);
    line-height: 1.08;
    letter-spacing: -.02em;
    text-wrap: balance;
    text-shadow: 0 2px 24px rgb(0 0 0 / .35);
}

.sfeer__leid {
    margin: 0;
    font-size: var(--tekst-l);
    color: rgb(255 255 255 / .9);
    text-wrap: pretty;
}

@media (max-width: 720px) {
    .sfeer--om .sfeer__binnen { justify-content: flex-start; text-align: left; }
    .sfeer--om .sfeer__tekst { justify-items: start; }
}

/* Een foto boven aan een gewone pagina, als rustige kop. */
.paginabeeld {
    position: relative;
    height: clamp(9rem, 22vh, 15rem);
    margin-bottom: calc(var(--ruimte-7) * -1);
    background: var(--sfeer-beeld, none) center / cover no-repeat, var(--papier-diep);
}

.paginabeeld::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgb(6 12 30 / .1), var(--grond) 92%);
}