/* =====================================================================
   Fotoalbums op de website

   Drie dingen staan hier: de albumtegels (/fotos en de blokjes elders op
   de site), het fotoraster van één album, en de lightbox waarin een foto
   groot opengaat.

   De kleuren, afrondingen en afstanden komen uit theme.css en site.css,
   dus dit loopt automatisch mee met de huisstijl uit het CMS.
   ===================================================================== */

/* ------------------------------------------------------------------
   De albumtegels
   ------------------------------------------------------------------ */
.pk-fotoalbums {
    display: grid;
    gap: 1.6rem;
    grid-template-columns: 1fr;
}

.pk-fotoalbum {
    display: block;
    color: inherit;
    text-decoration: none;
}

.pk-fotoalbum__kader {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--pk-rond, 18px);
    background: var(--pk-nacht, #071a43);
    box-shadow: var(--pk-schaduw, 0 10px 30px rgba(7, 26, 67, .12));
}

.pk-fotoalbum__beeld {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Een album zonder foto's: dan maar een icoontje. */
.pk-fotoalbum__leeg {
    display: grid;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, .5);
    place-items: center;
}

.pk-fotoalbum__leeg svg {
    width: 38px;
    height: 38px;
}

/* Het aantal foto's, rechtsonder op de omslag. */
.pk-fotoalbum__aantal {
    position: absolute;
    right: .7rem;
    bottom: .7rem;
    padding: .25rem .7rem;
    border-radius: 999px;
    background: rgba(7, 26, 67, .78);
    color: var(--pk-wit, #fff);
    font-size: .8rem;
    font-weight: 700;
}

.pk-fotoalbum__tekst {
    display: block;
    padding-top: .85rem;
}

.pk-fotoalbum__titel {
    display: block;
    color: var(--pk-nacht, #071a43);
    font-family: var(--font-kop, inherit);
    font-size: 1.15rem;
    font-weight: var(--kop-gewicht, 800);
    line-height: 1.25;
}

.pk-fotoalbum__datum {
    display: block;
    margin-top: .2rem;
    color: var(--pk-rood, #d71920);
    font-size: .85rem;
    font-weight: 700;
}

.pk-fotoalbum__intro {
    display: block;
    margin-top: .4rem;
    color: var(--kleur-tekst-grijs, #5a5a66);
    font-size: .92rem;
    line-height: 1.5;
}

/* ------------------------------------------------------------------
   Het fotoraster van één album
   ------------------------------------------------------------------ */
.pk-fotointro {
    margin: 0 auto 2.2rem;
    max-width: 68ch;
}

.pk-fotos {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(2, 1fr);
}

.pk-fotos__item {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--pk-rond, 18px);
    background: var(--pk-licht, #f6f5f8);
    cursor: zoom-in;
}

.pk-fotos__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Het loepje in de hoek, en het bijschrift dat eronder vandaan komt. */
.pk-fotos__loep {
    display: grid;
    position: absolute;
    top: .55rem;
    right: .55rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    opacity: 0;
    background: rgba(7, 26, 67, .72);
    color: var(--pk-wit, #fff);
    place-items: center;
}

.pk-fotos__loep svg {
    width: 15px;
    height: 15px;
}

.pk-fotos__bij {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.6rem .8rem .6rem;
    background: linear-gradient(to top, rgba(7, 26, 67, .82), rgba(7, 26, 67, 0));
    color: var(--pk-wit, #fff);
    font-size: .82rem;
    line-height: 1.35;
}

.pk-fotos__item:focus-visible {
    outline: 3px solid var(--pk-goud, #ffc400);
    outline-offset: 3px;
}

/* ------------------------------------------------------------------
   Het blokje bij een optreden
   ------------------------------------------------------------------ */
.pk-fotobij {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.4rem;
    padding: 1.4rem 1.6rem;
    border-radius: var(--pk-rond, 18px);
    background: var(--pk-wit, #fff);
    box-shadow: var(--pk-schaduw, 0 10px 30px rgba(7, 26, 67, .12));
}

.pk-fotobij__tekst h2 {
    margin: .2rem 0 .15rem;
    font-size: 1.25rem;
}

.pk-fotobij__tekst p {
    margin: 0;
    color: var(--kleur-tekst-grijs, #5a5a66);
    font-size: .95rem;
}

/* ------------------------------------------------------------------
   De lightbox
   ------------------------------------------------------------------ */
.pk-lightbox {
    display: grid;
    position: fixed;
    z-index: 2000;
    inset: 0;
    align-items: center;
    background: rgba(4, 12, 32, .94);
    grid-template-columns: auto 1fr auto;
}

.pk-lightbox[hidden] {
    display: none;
}

/* Zolang de lightbox openstaat, scrollt de pagina eronder niet mee. */
body.pk-lightbox-open {
    overflow: hidden;
}

.pk-lightbox__balk {
    display: flex;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    left: 0;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1.1rem;
    gap: 1rem;
}

.pk-lightbox__teller {
    color: rgba(255, 255, 255, .72);
    font-size: .9rem;
    font-weight: 700;
}

.pk-lightbox__beeld {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    margin: 0;
    padding: 3.6rem .5rem 1.2rem;
    min-width: 0;
    max-height: 100vh;
    grid-column: 2;
}

.pk-lightbox__beeld img {
    max-width: 100%;
    max-height: calc(100vh - 7.5rem);
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    object-fit: contain;
}

/* Terwijl je veegt schuift de foto mee. */
.pk-lightbox__beeld.is-veeg img {
    transition: none;
}

.pk-lightbox__beeld figcaption {
    max-width: 62ch;
    color: rgba(255, 255, 255, .86);
    font-size: .95rem;
    line-height: 1.45;
    text-align: center;
}

.pk-lightbox__beeld figcaption:empty {
    display: none;
}

.pk-lightbox__knop {
    display: grid;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--pk-wit, #fff);
    cursor: pointer;
    place-items: center;
}

.pk-lightbox__knop:hover,
.pk-lightbox__knop:focus-visible {
    background: var(--pk-rood, #d71920);
    outline: 0;
}

.pk-lightbox__knop svg {
    width: 22px;
    height: 22px;
}

.pk-lightbox__knop--vorige {
    grid-column: 1;
    margin-left: .6rem;
}

.pk-lightbox__knop--volgende {
    grid-column: 3;
    margin-right: .6rem;
}

.pk-lightbox__knop--dicht {
    width: 40px;
    height: 40px;
}

.pk-lightbox__knop[hidden] {
    visibility: hidden;
}

/* ------------------------------------------------------------------
   Grotere schermen
   ------------------------------------------------------------------ */
@media (min-width: 700px) {
    .pk-fotoalbums {
        grid-template-columns: repeat(2, 1fr);
    }

    .pk-fotos {
        gap: 1rem;
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1000px) {
    .pk-fotoalbums {
        grid-template-columns: repeat(3, 1fr);
    }

    .pk-fotos {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Op een telefoon zijn de pijlen in de weg: daar veeg je. */
@media (max-width: 699px) {
    .pk-lightbox {
        grid-template-columns: 1fr;
    }

    .pk-lightbox__beeld {
        grid-column: 1;
    }

    .pk-lightbox__knop--vorige,
    .pk-lightbox__knop--volgende {
        display: none;
    }

    .pk-fotobij {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Mooi meebewegen, maar niet voor wie daar last van heeft. */
@media (prefers-reduced-motion: no-preference) {
    .pk-fotoalbum__beeld,
    .pk-fotos__item img {
        transition: transform .35s ease;
    }

    .pk-fotoalbum:hover .pk-fotoalbum__beeld,
    .pk-fotos__item:hover img {
        transform: scale(1.05);
    }

    .pk-fotos__loep {
        transition: opacity .25s ease;
    }

    .pk-fotos__item:hover .pk-fotos__loep,
    .pk-fotos__item:focus-visible .pk-fotos__loep {
        opacity: 1;
    }

    .pk-lightbox__beeld img {
        transition: transform .2s ease, opacity .2s ease;
    }
}