/* ==================================================================== *
 * De bladerbalk van elke lijst op de site (View::bladeren()).
 *
 * Home en Vorige links, de stand in het midden, Volgende rechts. Een raster met drie vakken en
 * geen flex met een tussenruimte: dan staat elke knop op zijn eigen plek, ook als er links een
 * knop grijs is of de telling een cijfer langer wordt. Zo staat Volgende boven de lijst precies
 * waar hij onder de lijst staat.
 *
 * De kleuren komen van het thema via de tokens hieronder. Wie niets zet, krijgt een neutrale
 * knop in de tekstkleur van de omgeving.
 * ==================================================================== */

.cms-bladeren {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .5rem;
    margin: var(--cms-bladeren-marge, 1.5rem 0 0);
    color: var(--cms-bladeren-stand-kleur, inherit);
}

.cms-bladeren[hidden] { display: none; }

.cms-bladeren--boven { margin: var(--cms-bladeren-marge-boven, 0 0 1rem); }

.cms-bladeren__terug,
.cms-bladeren__verder {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}
.cms-bladeren__terug { justify-self: start; }
.cms-bladeren__verder { justify-self: end; }

.cms-bladeren__stand {
    justify-self: center;
    white-space: nowrap;
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
}

/* De maat van elke knop: een vinger moet hem raken. Vorm en kleur komen van de knopklasse van de
   module (bcm-btn, stad-vk-knop); zonder zo'n klasse geeft --standaard een neutrale knop in de
   tekstkleur van de omgeving, bij te sturen met de tokens. */
.cms-bladeren__knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 44px;
    min-width: 44px;
    white-space: nowrap;
    text-decoration: none;
}
.cms-bladeren__knop--standaard {
    padding: 0 .85rem;
    border: 1px solid var(--cms-bladeren-rand, currentColor);
    border-radius: var(--cms-bladeren-radius, 8px);
    background: var(--cms-bladeren-vlak, transparent);
    color: var(--cms-bladeren-kleur, inherit);
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.2;
}
.cms-bladeren__knop--standaard:not(.is-uit):hover { background: var(--cms-bladeren-vlak-hover, transparent); text-decoration: underline; }
.cms-bladeren__knop--standaard:focus-visible { outline: 2px solid var(--cms-bladeren-focus, currentColor); outline-offset: 2px; }
.cms-bladeren__knop.is-uit { opacity: .4; cursor: default; pointer-events: none; }
.cms-bladeren__icoon { flex: 0 0 auto; }

/* Op een telefoon past alles niet op één regel: "12 van 60" tussen Vorige en Volgende schoof op
   360 pixels over Vorige heen, en met de bredere letters van een dorpsthema of op 320 pixels al
   eerder. Daar staan de knoppen daarom op de eerste regel en de stand eronder, over de volle
   breedte. De knoppen houden hun plek tegen de randen, dus boven en onder staat alles gelijk. Het
   woord bij het huisje wijkt voor het oog; een schermlezer hoort het nog (visueel verborgen tekst,
   geen display:none). Vorige en Volgende houden hun woord: een pijl alleen zegt te weinig. */
@media (max-width: 479.98px) {
    .cms-bladeren {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "terug . verder" "stand stand stand";
        gap: .3rem .35rem;
    }
    .cms-bladeren__terug { grid-area: terug; gap: .3rem; }
    .cms-bladeren__verder { grid-area: verder; gap: .3rem; }
    .cms-bladeren__stand { grid-area: stand; }
    .cms-bladeren .cms-bladeren__knop { padding-left: .6rem; padding-right: .6rem; }
    .cms-bladeren__knop--home .cms-bladeren__woord {
        position: absolute;
        width: 1px; height: 1px;
        margin: -1px; padding: 0; border: 0;
        clip: rect(0 0 0 0); clip-path: inset(50%);
        overflow: hidden; white-space: nowrap;
    }
    .cms-bladeren .cms-bladeren__knop--home { padding-left: 0; padding-right: 0; }
}