/*
 * Diavoorstelling op basis van het standaard Galerij-blok (stijl "Diavoorstelling").
 * Alleen op de website geladen; in de editor blijft de galerij een gewoon raster,
 * zodat foto's makkelijk toe te voegen en te vervangen zijn.
 */

.wp-block-gallery.has-nested-images.is-style-hs-diashow {
	--wp--style--unstable-gallery-gap: 0px;
	display: grid;
	gap: 0;
	overflow: hidden;
	position: relative;
}

.wp-block-gallery.has-nested-images.is-style-hs-diashow figure.wp-block-image:not(#individual-image) {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	transition: opacity 1.2s ease-in-out;
	width: 100%;
}

/* Zonder script: alleen de eerste foto */
.wp-block-gallery.has-nested-images.is-style-hs-diashow figure.wp-block-image:not(#individual-image):first-child {
	opacity: 1;
}

/* Met script: de actieve foto */
.hs-js .wp-block-gallery.has-nested-images.is-style-hs-diashow figure.wp-block-image:not(#individual-image) {
	opacity: 0;
}

.hs-js .wp-block-gallery.has-nested-images.is-style-hs-diashow figure.wp-block-image.is-actief:not(#individual-image) {
	opacity: 1;
}

.wp-block-gallery.has-nested-images.is-style-hs-diashow figure.wp-block-image:not(#individual-image) img {
	aspect-ratio: var(--hs-verhouding, 3 / 2);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.wp-block-gallery.is-style-hs-diashow {
	--hs-interval: 7000;
}

.hs-kop-foto.is-style-hs-diashow {
	--hs-interval: 5000;
	--hs-verhouding: 444 / 250;
}

/* Pauzeknop (toegankelijkheid: bewegende beelden moeten te stoppen zijn) */
.hs-diashow__knop {
	align-items: center;
	background: rgba(26, 74, 60, 0.88);
	border: 2px solid #fff;
	bottom: 0.4rem;
	color: #fff;
	cursor: pointer;
	display: flex;
	height: 2rem;
	justify-content: center;
	padding: 0;
	position: absolute;
	right: 0.4rem;
	width: 2rem;
	z-index: 2;
}

.hs-diashow__knop:hover {
	background: var(--wp--preset--color--groen-donker, #123629);
}

.hs-diashow__knop svg {
	fill: currentColor;
	height: 0.9rem;
	width: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-gallery.has-nested-images.is-style-hs-diashow figure.wp-block-image:not(#individual-image) {
		transition: none;
	}
}