/* Lightbox voor de fotogalerij. De elementen worden door het galerij-script aangemaakt (geen blokken), daarom staat deze CSS globaal. */
.has-lightbox { overflow: hidden; }
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: var(--space-l) var(--space-xxl); border: 0; background: color-mix(in srgb, var(--black) 92%, transparent); color: var(--white); display: none; align-items: center; justify-content: center; }
.lightbox[open] { display: flex; }
.lightbox::backdrop { background: transparent; }
@media (max-width: 767px) { .lightbox { padding: var(--space-xl) var(--space-xs); } }
.lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-s); max-width: 100%; max-height: 100%; }
.lightbox__image { display: block; max-width: 100%; max-height: calc(100dvh - var(--space-xxl) * 2); object-fit: contain; border-radius: var(--radius); }
.lightbox__caption { font-size: var(--text-s); color: var(--white); opacity: 0.8; text-align: center; }
.lightbox__counter { position: absolute; top: var(--space-s); left: var(--space-m); margin: 0; font-size: var(--text-s); color: var(--white); opacity: 0.8; }
.lightbox__button { position: absolute; display: grid; place-items: center; width: var(--space-xl); height: var(--space-xl); padding: 0; border: 0; border-radius: var(--radius-circle, 50%); background: color-mix(in srgb, var(--white) 15%, transparent); color: var(--white); font-size: var(--text-xl); line-height: 1; cursor: pointer; transition: var(--transition); }
.lightbox__button:hover { background: color-mix(in srgb, var(--white) 30%, transparent); }
.lightbox__button:focus-visible { outline: var(--focus-width, 2px) solid var(--white); outline-offset: var(--focus-offset, 2px); }
.lightbox--single .lightbox__button--prev, .lightbox--single .lightbox__button--next { display: none; }
.lightbox__button--prev { left: var(--space-s); top: 50%; transform: translateY(-50%); }
.lightbox__button--next { right: var(--space-s); top: 50%; transform: translateY(-50%); }
.lightbox__button--close { top: var(--space-s); right: var(--space-s); }