/* Fotoalbums: overzicht en detail gebruiken dezelfde rustige beeldverhoudingen. */
.page-layout:has(.foto-overzicht) { grid-template-columns: minmax(0, 1fr); }
.page-layout:has(.foto-overzicht) > .page-zijnav { display: none; }
.page-content:has(.foto-overzicht) { max-width: none; min-width: 0; }
.foto-overzicht__intro { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.foto-overzicht__intro p { color: var(--kleur-grijs); line-height: 1.8; }
.fotoalbums, .album-fotos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.fotoalbums .fotoalbum-kaart { margin: 0; min-width: 0; }
.fotoalbum-kaart__link { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--kleur-lijn); border-radius: 14px; overflow: hidden; color: var(--kleur-tekst); text-decoration: none; background: #fff; transition: border-color var(--overgang); }
.fotoalbum-kaart__link:hover { border-color: var(--kleur-accent); color: var(--kleur-tekst); }
.fotoalbum-kaart__foto { position: relative; flex: 0 0 auto; aspect-ratio: 3 / 2; overflow: hidden; background: var(--kleur-creme); }
.fotoalbum-kaart__foto picture { position: absolute; inset: 0; display: block; height: 100%; }
.fotoalbum-kaart__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.fotoalbum-kaart__tekst { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 24px; }
.fotoalbum-kaart__tekst h3 { font-size: 1.4rem; line-height: 1.35; margin: 0 0 24px; }
.fotoalbum-kaart__aantal { color: var(--kleur-grijs); font-size: .82rem; margin: 0 0 8px; }
.fotoalbum-kaart__open { display: inline-flex; align-items: center; gap: 12px; color: var(--kleur-accent); font-size: .88rem; font-weight: 600; margin-top: auto; }
.album-kop { background: var(--kleur-creme); padding: clamp(32px, 5vw, 64px) 0; }
.album-kop .breadcrumb { color: var(--kleur-grijs); margin-bottom: 32px; }
.album-kop .breadcrumb a:hover { color: var(--kleur-accent); }
.album-kop .breadcrumb li + li::before { content: '/'; padding: 0 8px; opacity: .5; }
.album-kop h1 { color: var(--kleur-donker); font-size: clamp(2rem, 4vw, 3.2rem); max-width: 24em; }
.album-kop__aantal { color: var(--kleur-grijs); margin-bottom: 0; }
.album-inhoud { padding: clamp(32px, 5vw, 64px) 0; }
.album-inhoud .cb-content { max-width: 780px; margin-bottom: 32px; }
.album-fotos { gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.album-fotos__item { min-width: 0; }
.album-fotos__link { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--kleur-creme); }
.album-fotos__link picture { display: block; height: 100%; }
.album-fotos__link img { width: 100%; height: 100%; object-fit: cover; }
.album-fotos__zoom { display: grid; place-items: center; position: absolute; right: 12px; bottom: 12px; width: 32px; height: 32px; background: #fff; color: var(--kleur-donker); border-radius: 50%; font-size: 1.4rem; line-height: 1; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); }
.album-terug { margin-top: 36px; }
:is(.album-fotos__link, .fotoalbum-kaart__link):focus-visible { outline: 3px solid var(--kleur-accent-donker); outline-offset: 4px; }
@media (min-width: 650px) { .fotoalbums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
    .fotoalbums, .album-fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 399px) { .album-fotos { grid-template-columns: minmax(0, 1fr); } }