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

   Het thema zet alle foto's even groot onder elkaar in rijen. Bij tien of meer
   foto's wordt dat een lappendeken die het halve scherm vult.

   Hier krijgt de eerste foto de volle breedte en schuift de rest in één strook
   eronder die je opzij scrolt. Het blok is daarmee nog maar een foto plus een
   regel hoog, en de lightbox toont nog steeds alle foto's.

   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;
}

body section.gallery .gallery-grid[data-stc-album] > .gallery-image:first-child {
	display: block;
	width: 100%;
	margin-bottom: 10px;
	aspect-ratio: 16 / 9;
	border-radius: 30px;
}

/* De strook: op een telefoon swipe je hem opzij, op een breed scherm passen de
   meeste foto's er in één keer op. */
body section.gallery .gallery-strip {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 6px;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
}

body section.gallery .gallery-strip .gallery-image {
	flex: 0 0 clamp(92px, 16vw, 150px);
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	scroll-snap-align: start;
}

body section.gallery .gallery-hint {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: rgba(0, 57, 77, 0.6);
}

@media (max-width: 767px) {
	body section.gallery .gallery-grid[data-stc-album] > .gallery-image:first-child {
		aspect-ratio: 4 / 3;
		border-radius: 20px;
	}
}