/* ==========================================================================
   Het fotoblok als album: hoofdfoto groot, de rest als strook eronder.
   Hoort bij assets/js/album.js.
   ========================================================================== */

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

section.product .product-gallery[data-stc-album] > .product-gallery__image:first-child {
	border-radius: 30px;
}

/* ---------- De strook met de overige foto's ---------- */

/* Een strook die je opzij schuift in plaats van rijen miniaturen: het blok
   blijft dan een foto plus een strookje hoog, hoeveel foto's er ook zijn. */
section.product .product-gallery__strip {
	display: flex;
	gap: 10px;
	margin-top: 10px;
	overflow-x: auto;
	padding-bottom: 6px;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
}

/* Het thema geeft de eerste foto van een raster de grote uitvoering; binnen de
   strook moet die gewoon een miniatuur blijven. */
section.product .product-gallery .product-gallery__strip .product-gallery__image,
section.product .product-gallery .product-gallery__strip .product-gallery__image:first-child {
	/* De fotokolom is smaller dan een projectpagina, dus iets kleinere
	   miniaturen: dan staan er vier naast elkaar in plaats van drie. */
	flex: 0 0 clamp(84px, 9vw, 118px);
	grid-column: auto;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	scroll-snap-align: start;
}

section.product .product-gallery__telling {
	margin: 10px 0 0;
	font-size: 0.82rem;
	color: rgba(0, 57, 77, 0.55);
}

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

/* Voller en met een randje, zodat hij van de foto loskomt. */
section.product .product-gallery .product-gallery__image .product-gallery__play {
	width: 84px;
	height: 84px;
	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: 28px;
}

/* 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% + 58px);
	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;
}

/* ---------- Telefoon ---------- */

@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 {
		border-radius: 10px;
	}

	section.product .product-gallery[data-stc-album] > .product-gallery__image:first-child {
		border-radius: 20px;
	}

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

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