/* Slideshow-stijl op het Galerij-blok (core/gallery).
 * Registratie: inc/patterns.php · gedrag/pijlen: assets/js/gallery-slideshow.js
 * Zonder JS blijft het een veeg-/scroll-slideshow (CSS scroll-snap); de JS
 * voegt de vorige/volgende-pijlen en toetsenbordbediening toe. */

.slideshow-wrap {
    position: relative;
}

.wp-block-gallery.is-style-slideshow {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    aspect-ratio: 3 / 2;                 /* vaste slideshow-verhouding */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;               /* Firefox: scrollbar verbergen */
    border-radius: 6px;
    background: var(--plum-soft, #efe7e7);
}
.wp-block-gallery.is-style-slideshow::-webkit-scrollbar {
    display: none;                       /* WebKit: scrollbar verbergen */
}

/* Elke foto vult precies één beeld. */
.wp-block-gallery.is-style-slideshow figure.wp-block-image {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    margin: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
.wp-block-gallery.is-style-slideshow figure.wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;                 /* volledige foto, geen bijsnijden */
    display: block;
}
/* Onderschriften horen niet bij deze slideshow-variant. */
.wp-block-gallery.is-style-slideshow figcaption {
    display: none;
}

/* Vorige/volgende-pijlen — door de JS toegevoegd aan .slideshow-wrap, zodat ze
 * niet mee-scrollen met de foto's. */
.slideshow-wrap .slideshow-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(28, 18, 20, 0.5);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.slideshow-wrap .slideshow-nav:hover,
.slideshow-wrap .slideshow-nav:focus-visible {
    background: rgba(28, 18, 20, 0.78);
    outline: none;
}
.slideshow-wrap .slideshow-nav svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.slideshow-wrap .slideshow-prev { left: 12px; }
.slideshow-wrap .slideshow-next { right: 12px; }