/* Fotoalbums. De kaarten zelf komen uit components.css (.cms-items /.cms-item);
   hier staat alleen wat deze pagina extra nodig heeft. */

/* Een album is vooral een beeld, dus de kaarten mogen wat breder ademen dan de
   standaardgrid en het beeld wat hoger zijn. */
.band__inner > [data-cms-collection] .cms-items {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: 1.75rem;
}

.band__inner > [data-cms-collection] .cms-item__img {
    height: 13.5rem;
}

/* Het jaartal is hier de categorie. Als klein label boven de titel leest het
   rustiger dan als volwaardige regel. */
.band__inner > [data-cms-collection] .cms-item__cat {
    color: var(--muted);
}

.fotos__uitleg {
    margin-top: 2rem;
    color: var(--muted);
    font-size: .95rem;
    max-width: 46rem;
}
/* ── Jaarnavigatie ──
   Twee niveaus, want 34 jaartallen op een rij is geen navigatie maar een
   muur. Eerst het decennium als groot blok, dat bepaalt wat er op de pagina
   blijft staan. Daarna de jaren daarbinnen, om te springen. De opbouw zit in
   assets/js/pages/fotos.js. */
.jaarnav {
    display: grid;
    gap: 1.2rem;
    margin: 0 auto 2.5rem;
    max-width: 52rem;
}

/* ── De decennia ──
   Vier of vijf blokken in plaats van 34 knopjes. Ze delen de vorm van de
   takkaartjes: een vlak met de naam groot en het aantal er klein onder. */
.jaarnav__decennia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
    gap: .6rem;
}

.jaarnav__decennium {
    display: grid;
    justify-items: center;
    row-gap: .15rem;
    padding: 1rem .7rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--bg-soft);
    color: var(--brand-dark);
    cursor: pointer;
    text-align: center;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.jaarnav__decennium-naam {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--step-0);
}

.jaarnav__decennium-aantal {
    font-size: var(--step--1);
    color: var(--muted);
}

.jaarnav__decennium:hover {
    background: var(--accent-soft);
    color: var(--brand-deep);
    transform: translateY(-2px);
}

/* Het gekozen decennium in het huisgeel: je moet in één oogopslag zien welke
   jaren je onder je scherm hebt staan. */
.jaarnav__decennium[aria-pressed="true"] {
    background: var(--accent);
    color: var(--brand-deep);
    transform: none;
}

.jaarnav__decennium[aria-pressed="true"] .jaarnav__decennium-aantal {
    color: var(--brand-deep);
}

/* ── De jaren binnen het gekozen decennium ──
   Hooguit tien, dus hier mag de rij weer smal en licht zijn: dit is de
   fijnregeling, niet de hoofdkeuze. */
.jaarnav__jaren {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
}

.jaarnav__jaar {
    display: inline-block;
    /* Ruim genoeg om met een duim te raken; dit is de kleinste knop van de
       pagina en juist die moet op een telefoon nog werken. */
    padding: .6rem 1.1rem;
    border-radius: var(--radius-pill);
    background: var(--bg-soft);
    color: var(--brand-dark);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--step--1);
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.jaarnav__jaar:hover,
.jaarnav__jaar:active {
    background: var(--accent);
    color: var(--brand-deep);
    transform: translateY(-2px);
}

/* Op een telefoon geen raster maar wikkelen en centreren, precies zoals de
   jaarrij eronder. Het raster geeft op een breed scherm nette kolommen van
   gelijke breedte, maar op een smal scherm levert dat twee blokken naast
   elkaar en een derde die alleen links blijft hangen. */
@media (max-width: 35.99rem) {
    .jaarnav__decennia {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .jaarnav__decennium {
        flex: 0 1 auto;
        padding: .8rem 1.1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jaarnav__decennium:hover,
    .jaarnav__jaar:hover,
    .jaarnav__jaar:active { transform: none; }
}

/* Een jaargang die de navigatie verbergt, moet ook echt weg.
   Het hidden-attribuut zet display:none via de browserstijl, en dat is de
   zwakste laag die er is: .cms-items zet display:grid in een klasse en wint
   daarvan. Zonder deze regel bleven alle albums staan en verdween alleen de
   jaarkop erboven, want een h3 heeft geen eigen display om mee te winnen. */
[data-cms-collection="albums"] > [hidden] { display: none !important; }

/* Zodat het jaar niet onder de vaste kop verdwijnt bij het springen. Dat geldt
   ook voor de navigatie zelf: die is waar we naartoe scrollen als je een
   decennium kiest, en ze hoort dan volledig in beeld te staan. */
.cms-groep__kop,
.jaarnav { scroll-margin-top: 6rem; }