/* =======================================================================
   Het fotoblok als album.

   Het thema zet alle foto's in een raster. Bij tien of meer foto's wordt dat
   een lappendeken die het halve scherm vult, en met een grote foto plus een
   rijtje kleine blokjes eronder blijft het onrustig.

   Hier staat alles op één lijn: één strook, alle foto's even hoog, die je
   opzij schuift. Het blok is daarmee altijd één foto hoog, of er nu acht of
   veertig foto's in staan. De breedte van een foto volgt zijn eigen verhouding
   (staand of liggend), zodat er niets vervelend afgesneden wordt.

   Alles hangt aan [data-stc-album], dat fotoalbum.js pas zet nadat de strook
   gemaakt is. Zonder script blijft het thema dus gewoon zijn eigen raster
   tonen.
   ========================================================================== */

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

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

body section.gallery .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;
}

body section.gallery .gallery-strip::-webkit-scrollbar {
	display: none;
}

/* Alle foto's even hoog. De breedte volgt de verhouding van de foto zelf,
   begrensd zodat een staande foto geen reepje wordt en een panorama de strook
   niet overneemt. */
body section.gallery .gallery-strip .gallery-image,
body section.gallery .gallery-strip .gallery-image:first-child {
	flex: 0 0 auto;
	width: auto;
	height: var(--album-hoogte, 340px);
	min-width: 200px;
	max-width: min(560px, 82%);
	margin: 0;
	aspect-ratio: var(--album-verhouding, 4 / 3);
	border-radius: 20px;
	scroll-snap-align: start;
	overflow: hidden;
}

body section.gallery .gallery-strip .gallery-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Aan de rechterkant vervaagt de laatste foto een beetje: dat laat zien dat er
   nog meer staat. Aan het eind van de strook halen we het weg. */
@supports (mask-image: linear-gradient(#000, #000)) {
	body section.gallery .gallery-grid[data-stc-album].is-verder .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 ---------- */

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

body section.gallery .gallery-albumbar .gallery-telling {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.4;
	color: rgba(0, 57, 77, 0.6);
}

body section.gallery .gallery-albumknoppen {
	display: flex;
	gap: 8px;
	flex: 0 0 auto;
}

body section.gallery .gallery-albumknop {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	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;
}

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

body section.gallery .gallery-albumknop[disabled] {
	opacity: 0.3;
	cursor: default;
}

body section.gallery .gallery-albumknop svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Het blok staat vaak onder een kop van het thema; die kop en deze regel
   horen bij elkaar, dus houden we de ruimte ertussen klein. */
body section.gallery .gallery-header + .gallery-grid[data-stc-album] {
	margin-top: 4px;
}

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

@media (max-width: 1199px) {
	body section.gallery .gallery-strip .gallery-image,
	body section.gallery .gallery-strip .gallery-image:first-child {
		height: var(--album-hoogte, 280px);
	}
}

@media (max-width: 767px) {
	body section.gallery .gallery-strip {
		gap: 8px;
	}

	body section.gallery .gallery-strip .gallery-image,
	body section.gallery .gallery-strip .gallery-image:first-child {
		height: var(--album-hoogte, 220px);
		min-width: 150px;
		max-width: 88%;
		border-radius: 14px;
	}

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