/* ==========================================================================
   Het fotoblok op een machinepagina als album: alles op één lijn.
   Hoort bij assets/js/album.js.
   ========================================================================== */

section.product .product-gallery[data-stc-album] {
	display: block;
	position: relative;
}

/* ---------- De strook ---------- */

section.product .product-gallery__strip {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 4px;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

section.product .product-gallery__strip::-webkit-scrollbar {
	display: none;
}

/* Alle foto's even hoog; de breedte volgt de verhouding van de foto zelf. Het
   thema geeft de eerste foto van een raster een grote uitvoering, dus die
   regel zetten we hier expliciet recht. */
section.product .product-gallery .product-gallery__strip .product-gallery__image,
section.product .product-gallery .product-gallery__strip .product-gallery__image:first-child {
	flex: 0 0 auto;
	width: auto;
	height: var(--album-hoogte, 400px);
	min-width: 190px;
	max-width: min(560px, 88%);
	margin: 0;
	grid-column: auto;
	aspect-ratio: var(--album-verhouding, 4 / 3);
	border-radius: 20px;
	scroll-snap-align: start;
	overflow: hidden;
}

section.product .product-gallery .product-gallery__strip .product-gallery__image img {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
}

@supports (mask-image: linear-gradient(#000, #000)) {
	section.product .product-gallery[data-stc-album].is-verder .product-gallery__strip {
		-webkit-mask-image: linear-gradient(to right, #000 88%, rgba(0, 0, 0, 0.15) 100%);
		mask-image: linear-gradient(to right, #000 88%, rgba(0, 0, 0, 0.15) 100%);
	}
}

/* ---------- De regel erboven: telling en pijlen ---------- */

section.product .product-gallery__balk {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 12px;
}

section.product .product-gallery__telling {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.4;
	color: rgba(0, 57, 77, 0.55);
}

section.product .product-gallery__knoppen {
	display: flex;
	gap: 8px;
	flex: 0 0 auto;
}

section.product .product-gallery__knop {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(0, 57, 77, 0.15);
	border-radius: 50%;
	background: #ffffff;
	color: #00394d;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

section.product .product-gallery__knop:hover {
	border-color: rgba(0, 57, 77, 0.3);
	background: #f1f2f4;
}

section.product .product-gallery__knop[disabled] {
	opacity: 0.3;
	cursor: default;
}

section.product .product-gallery__knop svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- De videoknop ---------- */

/* Voller en met een randje, zodat hij van de foto loskomt. */
section.product .product-gallery .product-gallery__image .product-gallery__play {
	width: 76px;
	height: 76px;
	background: rgba(0, 183, 190, 0.92);
	border: 3px solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 8px 30px rgba(0, 22, 30, 0.35);
	font-size: 26px;
}

/* Een tekstlabel eronder: dan is er geen twijfel dat er een video achter zit. */
section.product .product-gallery .product-gallery__videolabel {
	position: absolute;
	left: 50%;
	top: calc(50% + 54px);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 100px;
	background: rgba(0, 22, 30, 0.55);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #ffffff;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
	transform: translateX(-50%);
	pointer-events: none;
}

/* Het rode bolletje van een opname, als knipoog naar "hier zit film achter". */
section.product .product-gallery .product-gallery__videolabel::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #ff4d4d;
}

/* ---------- Tablet en telefoon ---------- */

@media (max-width: 1199px) {
	section.product .product-gallery .product-gallery__strip .product-gallery__image,
	section.product .product-gallery .product-gallery__strip .product-gallery__image:first-child {
		height: var(--album-hoogte, 320px);
	}
}

@media (max-width: 767px) {
	section.product .product-gallery__strip {
		gap: 8px;
	}

	section.product .product-gallery .product-gallery__strip .product-gallery__image,
	section.product .product-gallery .product-gallery__strip .product-gallery__image:first-child {
		height: var(--album-hoogte, 240px);
		min-width: 150px;
		max-width: 90%;
		border-radius: 14px;
	}

	/* Op een telefoon swipe je; dan zijn de pijlen alleen maar in de weg. */
	section.product .product-gallery__knoppen {
		display: none;
	}

	section.product .product-gallery .product-gallery__image .product-gallery__play {
		width: 62px;
		height: 62px;
		font-size: 21px;
	}

	section.product .product-gallery .product-gallery__videolabel {
		top: calc(50% + 44px);
		padding: 6px 12px;
		font-size: 0.72rem;
	}
}


/* ==========================================================================
   Op een breed scherm mag het album groter.

   Tot nu toe bleven de foto's op 400 pixels hoog steken; op een desktop las
   dat als twee bescheiden miniaturen. Vanaf 1200 pixels worden ze fors hoger
   en krijgen ze een zachte schaduw, zodat de eerste foto een blikvanger is en
   de volgende er net naast piept. Het blijft een strook op één lijn.
   ========================================================================== */

@media (min-width: 1200px) {
	/* Ruimte binnen de strook voor de schaduw; die valt anders weg tegen de
	   rand van het schuifvenster. */
	section.product .product-gallery__strip {
		gap: 16px;
		padding: 5px 0 26px;
		margin-bottom: -14px;
	}

	section.product .product-gallery .product-gallery__strip .product-gallery__image,
	section.product .product-gallery .product-gallery__strip .product-gallery__image:first-child {
		height: var(--album-hoogte, 520px);
		max-width: min(760px, 89%);
		border-radius: 24px;
		box-shadow: 0 16px 40px rgba(0, 22, 30, 0.12);
		transition: box-shadow 0.25s ease, transform 0.25s ease;
	}

	section.product .product-gallery .product-gallery__strip .product-gallery__image:hover {
		box-shadow: 0 22px 54px rgba(0, 22, 30, 0.2);
		transform: translateY(-3px);
	}

	section.product .product-gallery__telling {
		font-size: 0.95rem;
		font-weight: 600;
		color: rgba(0, 57, 77, 0.75);
	}

	section.product .product-gallery__knop {
		width: 46px;
		height: 46px;
	}

	section.product .product-gallery__knop svg {
		width: 16px;
		height: 16px;
	}
}

/* Het streepje onder de strook: waar je bent en hoeveel er nog komt. Op een
   telefoon swipe je en is het overbodig. */
section.product .product-gallery__rail {
	display: none;
	position: relative;
	height: 3px;
	margin-top: 4px;
	border-radius: 3px;
	background: rgba(0, 57, 77, 0.1);
	overflow: hidden;
}

section.product .product-gallery__rail i {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	border-radius: 3px;
	background: #00b7be;
	transition: left 0.15s linear, width 0.15s linear;
}

@media (min-width: 992px) {
	section.product .product-gallery[data-stc-album="ja"] .product-gallery__rail {
		display: block;
	}
}


/* ==========================================================================
   De rij miniaturen onder de fotostrook.

   Klik je er een aan, dan schuift die foto vooraan in de strook. Waar je bent
   is gemarkeerd met een teal randje. Hoort bij assets/js/album.js.
   ========================================================================== */

section.product .product-gallery__thumbs {
	display: flex;
	gap: 8px;
	margin-top: 12px;
	padding-bottom: 2px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

section.product .product-gallery__thumbs::-webkit-scrollbar {
	display: none;
}

section.product .product-gallery__thumb {
	position: relative;
	flex: 0 0 auto;
	width: 82px;
	height: 60px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 10px;
	background: none;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

section.product .product-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

section.product .product-gallery__thumb:hover,
section.product .product-gallery__thumb:focus-visible {
	opacity: 1;
}

/* De foto die vooraan in de strook staat. */
section.product .product-gallery__thumb.is-nu {
	opacity: 1;
	border-color: #00b7be;
}

/* Zit er een video achter, dan een klein driehoekje op het duimpje. */
section.product .product-gallery__thumb.is-video::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0;
	height: 0;
	margin: -7px 0 0 -5px;
	border-left: 11px solid #ffffff;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	filter: drop-shadow(0 1px 4px rgba(0, 22, 30, 0.7));
}

@media (max-width: 767px) {
	section.product .product-gallery__thumbs {
		gap: 6px;
		margin-top: 10px;
	}

	section.product .product-gallery__thumb {
		width: 58px;
		height: 44px;
		border-radius: 8px;
	}
}