/*
 * Galleries on the site (module "galleries"). Colours and spacing come from
 * custom properties, so a theme can change them without overriding rules:
 *   --gallery-gap, --gallery-radius, --gallery-lightbox-bg, --gallery-lightbox-ink
 */
.gallery {
    --gap: var(--gallery-gap, 8px);
    display: grid;
    gap: var(--gap);
    margin: 0 0 1.5em;
}
.gallery__item { display: block; overflow: hidden; border-radius: var(--gallery-radius, 0); }
.gallery__item picture, .gallery__image { display: block; width: 100%; height: auto; }
.gallery__item:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }

/* Masonry: columns are filled on the server (always the shortest column). */
.gallery--masonry { display: flex; align-items: flex-start; }
.gallery__column { display: flex; flex: 1 1 0; flex-direction: column; gap: var(--gap); min-width: 0; }

/* Square and grid: the same grid, cropped to 1:1 or 4:3. */
.gallery--square, .gallery--grid { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.gallery--cols-2 { --cols: 2; }
.gallery--cols-3 { --cols: 3; }
.gallery--cols-4 { --cols: 4; }
.gallery--cols-5 { --cols: 5; }
.gallery--cols-6 { --cols: 6; }
.gallery--square .gallery__item { aspect-ratio: 1; }
.gallery--grid .gallery__item { aspect-ratio: 4 / 3; }
.gallery--square .gallery__item picture, .gallery--grid .gallery__item picture { height: 100%; }
.gallery--square .gallery__image, .gallery--grid .gallery__image { height: 100%; object-fit: cover; }

@media (max-width: 1024px) {
    .gallery--cols-4, .gallery--cols-5, .gallery--cols-6 { --cols: 3; }
    .gallery--masonry { flex-wrap: wrap; }
    .gallery--masonry.gallery--cols-4 .gallery__column { flex-basis: calc(50% - var(--gap)); }
}
@media (max-width: 600px) {
    .gallery--square, .gallery--grid { --cols: 2; }
    .gallery--masonry .gallery__column { flex-basis: calc(50% - var(--gap)); }
}

/* Discourage copying (setting "Protect photos"). */
.gallery--protect .gallery__item, .gallery-lightbox--protect .gallery-lightbox__image { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* Overview of galleries (block "Galerij-overzicht"). */
.gallery-tiles { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--gallery-gap, 16px); margin: 0; padding: 0; list-style: none; }
.gallery-tiles--cols-2 { --cols: 2; }
.gallery-tiles--cols-4 { --cols: 4; }
.gallery-tiles__link { display: block; color: inherit; text-decoration: none; }
.gallery-tiles__link picture, .gallery-tiles__image, .gallery-tiles__empty { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: var(--gallery-radius, 0); }
.gallery-tiles__empty { background: rgb(127 127 127 / .15); }
.gallery-tiles__empty[data-locked] { background: rgb(127 127 127 / .15) url("lock.svg") center / 40px no-repeat; }
.gallery-tiles__title { display: block; margin-top: .5em; }
.gallery-tiles__link:hover .gallery-tiles__title, .gallery-tiles__link:focus-visible .gallery-tiles__title { text-decoration: underline; }
@media (max-width: 700px) { .gallery-tiles { --cols: 2; } }
@media (max-width: 420px) { .gallery-tiles { --cols: 1; } }

/* Password form. */
.gallery-lock { max-width: 28rem; margin: 2em auto; text-align: center; }
.gallery-lock__title { font-size: 1.25em; font-weight: 600; margin: 0 0 .5em; }
.gallery-lock__label { display: block; margin-bottom: .75em; }
.gallery-lock__row { display: flex; gap: .5em; }
.gallery-lock__input { flex: 1; min-width: 0; padding: .6em .75em; font: inherit; border: 1px solid currentColor; border-radius: 4px; background: transparent; color: inherit; }
.gallery-lock__button { padding: .6em 1.2em; font: inherit; font-weight: 600; border: 1px solid currentColor; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; }
.gallery-lock__error { margin: .75em 0 0; color: #b3261e; }

/* Share page (/g/…): only the gallery. */
.gallery-share { margin: 0; background: var(--gallery-share-bg, #fff); color: var(--gallery-share-ink, #222); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.gallery-share__main { max-width: 1400px; margin: 0 auto; padding: 24px 16px 48px; }
.gallery-share__title { margin: 0 0 .25em; font-size: 1.75em; font-weight: 600; }
.gallery-share__description { margin: 0 0 1.5em; max-width: 46em; }

/*
 * Lightbox (gallery.js). Looks like the lightbox of the WordPress theme
 * "Mijn Werk Online": light frosted background, thin dark icons that appear
 * on hover, text in a white panel to the right of the photo.
 */
.gallery-lightbox {
    --ink: var(--gallery-lightbox-ink, #333);
    position: fixed;
    inset: 0;
    z-index: 1000;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: var(--gallery-lightbox-bg, rgb(240 240 240 / .9));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--ink);
}
.gallery-lightbox::backdrop { background: transparent; }
.gallery-lightbox:focus { outline: none; }
.gallery-lightbox:not([open]) { display: none; }
.gallery-lightbox[open] { animation: gallery-fade .5s ease; }
.gallery-lightbox__stage { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; touch-action: pan-y; }
.gallery-lightbox__slide { display: flex; align-items: stretch; justify-content: center; max-width: 100%; }
/* The slide can scroll on small screens: give it and the photo pan-y too, or the browser takes the swipe. */
.gallery-lightbox__slide, .gallery-lightbox__image { touch-action: pan-y; }
.gallery-lightbox__image { display: block; width: auto; height: auto; max-width: 100%; max-height: 90vh; min-width: 200px; margin: auto; object-fit: contain; }
.gallery-lightbox__slide--text .gallery-lightbox__image { max-width: calc(100vw - 275px); }
/* Full screen without margins (block option / gallery(..., { full: true })). */
.gallery-lightbox--full .gallery-lightbox__slide { height: 100vh; }
.gallery-lightbox--full .gallery-lightbox__image { max-height: 100vh; min-width: 0; }
.gallery-lightbox__text {
    flex: 0 0 275px;
    width: 275px;
    padding: 30px;
    overflow-y: auto;
    box-sizing: border-box;
    background: #fff;
    color: #333;
    font: 14px/1.6 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.gallery-lightbox__title { display: block; margin: 0 0 1em; font-weight: 600; }
.gallery-lightbox__caption { display: block; margin: 0; white-space: pre-line; }
.gallery-lightbox__text[hidden], .gallery-lightbox__title[hidden], .gallery-lightbox__caption[hidden] { display: none; }
.gallery-lightbox__slide--next { animation: gallery-in-right .3s ease; }
.gallery-lightbox__slide--prev { animation: gallery-in-left .3s ease; }

.gallery-lightbox__button {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    opacity: .6;
    cursor: pointer;
    transition: opacity .25s ease;
}
.gallery-lightbox__button:hover { opacity: 1; }
.gallery-lightbox__button:focus { outline: none; }
.gallery-lightbox__button:focus-visible { opacity: 1; outline: 2px solid var(--ink); outline-offset: 2px; }
.gallery-lightbox__button svg { display: block; width: 18px; height: 18px; fill: currentColor; }
.gallery-lightbox__close { top: 20px; right: 20px; }
.gallery-lightbox__close svg { width: 16px; height: 16px; }
.gallery-lightbox__full { top: 20px; right: 70px; }
.gallery-lightbox__full svg { fill: none; stroke: currentColor; }
.gallery-lightbox__prev, .gallery-lightbox__next { top: 45%; width: 45px; height: 45px; opacity: 0; }
.gallery-lightbox__prev { left: 30px; }
.gallery-lightbox__next { right: 30px; }
.gallery-lightbox:hover .gallery-lightbox__prev, .gallery-lightbox:hover .gallery-lightbox__next { opacity: .6; }
.gallery-lightbox .gallery-lightbox__prev:hover, .gallery-lightbox .gallery-lightbox__next:hover,
.gallery-lightbox__prev:focus-visible, .gallery-lightbox__next:focus-visible { opacity: 1; }
.gallery-lightbox__button[hidden] { display: none; }

@media (max-width: 768px) {
    /* Width from the slide itself, not 100vw (which can be wider than the dialog): no sideways scrolling. */
    .gallery-lightbox__slide { flex-direction: column; align-items: center; width: 100%; max-height: 100%; overflow-x: hidden; overflow-y: auto; }
    .gallery-lightbox__image, .gallery-lightbox__slide--text .gallery-lightbox__image { max-width: 100%; min-width: 0; padding: 0 10px; box-sizing: border-box; }
    .gallery-lightbox__text { flex-basis: auto; width: 100%; }
    .gallery-lightbox__close { top: 10px; right: 10px; }
    .gallery-lightbox__full { top: 10px; right: 60px; }
    .gallery-lightbox__prev, .gallery-lightbox__next { width: 50px; height: 50px; opacity: .6; }
    .gallery-lightbox__prev { left: 0; }
    .gallery-lightbox__next { right: 0; }
    .gallery-lightbox--full .gallery-lightbox__image, .gallery-lightbox--full .gallery-lightbox__slide--text .gallery-lightbox__image { max-width: 100%; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .gallery-lightbox[open], .gallery-lightbox__slide--next, .gallery-lightbox__slide--prev { animation: none; }
}
@keyframes gallery-fade { from { opacity: 0; } }
@keyframes gallery-in-right { from { opacity: 0; transform: translate3d(60%, 0, 0); } }
@keyframes gallery-in-left { from { opacity: 0; transform: translate3d(-60%, 0, 0); } }