/*
 * Parallax Image Gallery with Thumbnails (Osmo Supply).
 * Osmo's structuur en overgangen ongewijzigd. Aangepast: box-sizing (valkuil 5),
 * hoogte (Osmo: 100vh → hier een 4:5-kader in de kolom), kleuren uit theme.json,
 * en miniaturen zijn knoppen (reset van de knopstijl).
 */

.img-slider,
.img-slider * {
	box-sizing: border-box;
}

.img-slider {
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	border-radius: 0.75rem;
	justify-content: center;
	align-items: flex-end;
	width: 100%;
	aspect-ratio: 4 / 5;
	height: auto;
	/* Nooit hoger dan wat er onder de balk past (28-09): breedte terugrekenen uit 4:5, zodat de foto heel blijft.
	   De miniaturen staan absoluut onderin de galerij, dus die tellen al mee in deze hoogte. */
	max-width: calc(var(--boozt-media-max-h) * 4 / 5);
	margin-inline: auto;
	display: flex;
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--cream, #ebe0d6);
	touch-action: pan-y; /* verticaal scrollen blijft van de pagina; horizontaal slepen van de galerij */
}

.img-slider__list {
	grid-template-rows: 100%;
	grid-template-columns: 100%;
	place-items: center;
	width: 100%;
	height: 100%;
	display: grid;
	overflow: hidden;
}

.img-slide {
	opacity: 0;
	pointer-events: none;
	will-change: transform, opacity;
	grid-area: 1 / 1 / -1 / -1;
	place-items: center;
	width: 100%;
	height: 100%;
	display: grid;
	position: relative;
	overflow: hidden;
}

.img-slide.is--current {
	opacity: 1;
	pointer-events: auto;
}

.img-slider .img-slide__inner { /* twee classes: zie valkuil 11 (WooCommerce img height) */
	object-fit: cover;
	will-change: transform;
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
}

/* Vrijstaand product (transparante PNG): niet bijsnijden, met wat lucht eromheen. */
.img-slide.is--contain .img-slide__inner {
	object-fit: contain;
	padding: 6%;
}

/* Altijd één rij (15-09, Victor): Osmo liet de miniaturen omslaan. De knoppen krimpen
   gelijkmatig (flex-shrink) zodra er te veel zijn voor de breedte. */
.img-slider__nav {
	z-index: 2;
	grid-column-gap: 0.5rem;
	grid-row-gap: 0.5rem;
	pointer-events: none;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	width: 95%;
	max-width: 95%;
	display: flex;
	position: absolute;
	bottom: 1rem;
}

.img-slider__thumb {
	aspect-ratio: 1.5;
	pointer-events: auto;
	cursor: pointer;
	border: 1px solid rgba(235, 224, 214, 0.35);
	border-radius: 0.3125rem;
	flex: 0 1 4.5rem;
	min-width: 0;
	padding: 0;
	margin: 0;
	background: var(--wp--preset--color--base, #f8f5f1);
	transition: border-color 0.2s;
	position: relative;
	overflow: hidden;
	font: inherit;
}

.img-slider__thumb:hover {
	border-color: rgba(27, 11, 9, 0.5);
}

.img-slider__thumb.is--current {
	border-color: var(--wp--preset--color--ink, #1b0b09);
	border-width: 2px;
}

.img-slider__thumb:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink, #1b0b09);
	outline-offset: 2px;
}

.img-slider__thumb .slider-thumb__img { /* twee classes: valkuil 11 */
	object-fit: cover;
	width: 100%;
	height: 100%;
	display: block;
}

@media screen and (max-width: 767px) {
	.img-slider__thumb {
		border-radius: 0.25rem;
		flex-basis: 3.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.img-slide,
	.img-slide__inner {
		will-change: auto;
	}
}

/* ---------------------------------------------------------------- pijlen */

/* Niet iedereen ziet dat je kunt slepen of op de miniaturen kunt klikken (29-09, Maik).
   Door galerij.js aangemaakt, dus ze staan er alleen als ze ook werken. */
.img-slider__pijl {
	position: absolute;
	top: 50%;
	z-index: 3;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	color: var(--wp--preset--color--ink, #1b0b09);
	background-color: color-mix(in srgb, var(--wp--preset--color--base, #f8f5f1) 88%, transparent);
	box-shadow: 0 2px 10px rgba(27, 11, 9, 0.18);
	transition: background-color 0.2s, color 0.2s;
}

.img-slider__pijl svg {
	width: 1.25rem;
	height: 1.25rem;
	display: block;
}

.img-slider__pijl.is--vorige {
	left: 0.75rem;
}

.img-slider__pijl.is--vorige svg {
	transform: rotate(180deg);
}

.img-slider__pijl.is--volgende {
	right: 0.75rem;
}

@media (hover: hover) {
	.img-slider__pijl:hover {
		color: var(--wp--preset--color--base, #f8f5f1);
		background-color: var(--wp--preset--color--ink, #1b0b09);
	}
}

@media screen and (max-width: 781px) {
	.img-slider__pijl {
		width: 2.25rem;
		height: 2.25rem;
	}

	.img-slider__pijl svg {
		width: 1.05rem;
		height: 1.05rem;
	}
}