/* gallery — herbruikbare afbeeldingsgalerij (product- + accommodatie-detail).
   Hoofdbeeld + klikbare thumbnail-strip van ALLE beelden. Klik op het hoofdbeeld
   opent de lightbox (lightbox.css/js). Thema-neutraal: alle kleuren/maten via
   custom properties met een nette fallback. */

.gallery {
    --gallery-aspect: 4 / 3;
    --gallery-radius: var(--ws-radius, 12px);
    --gallery-radius-sm: var(--ws-radius-sm, 6px);
    --gallery-accent: var(--ws-accent, currentColor);
    --gallery-gap: .75rem;
    display: flex;
    flex-direction: column;
    gap: var(--gallery-gap);
    min-width: 0;
}

/* Hoofdbeeld = een echte <button> (opent de lightbox, toetsenbord-toegankelijk). */
.gallery__main {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--gallery-radius);
    overflow: hidden;
    background: color-mix(in srgb, currentColor 4%, transparent);
    box-shadow: var(--ws-shadow, 0 2px 14px rgba(0, 0, 0, .09));
    cursor: zoom-in;
    position: relative;
}

.gallery__main-img {
    width: 100%;
    aspect-ratio: var(--gallery-aspect);
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.gallery__main:hover .gallery__main-img,
.gallery__main:focus-visible .gallery__main-img {
    transform: scale(1.02);
}

/* Kleine "vergroot"-hint rechtsonder op het hoofdbeeld. */
.gallery__main::after {
    content: "";
    position: absolute;
    right: .7rem;
    bottom: .7rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background:
        rgba(0, 0, 0, .55)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E")
        center / 18px no-repeat;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}

.gallery__main:hover::after,
.gallery__main:focus-visible::after {
    opacity: 1;
}

.gallery__main:focus-visible {
    outline: 2px solid var(--gallery-accent);
    outline-offset: 2px;
}

/* Thumbnail-strip: ALLE beelden, horizontaal scrollbaar. */
.gallery__thumbs {
    list-style: none;
    margin: 0;
    padding: 0 0 .25rem;
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    min-width: 0;
    scrollbar-width: thin;
}

.gallery__thumbs > li {
    flex: 0 0 auto;
    width: 4.5rem;
}

.gallery__thumb {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 2px solid transparent;
    border-radius: var(--gallery-radius-sm);
    overflow: hidden;
    background: none;
    cursor: pointer;
    transition: border-color .15s ease, opacity .15s ease;
    opacity: .7;
}

.gallery__thumb:hover {
    opacity: 1;
    border-color: color-mix(in srgb, var(--gallery-accent) 55%, transparent);
}

.gallery__thumb.is-active {
    opacity: 1;
    border-color: var(--gallery-accent);
}

.gallery__thumb:focus-visible {
    outline: 2px solid var(--gallery-accent);
    outline-offset: 1px;
}

.gallery__thumb img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}