/**
 * Raster en lightbox voor het beheerde galerijblok op reportagepagina's.
 *
 * Let op de lange selectors. WordPress levert zelf CSS mee voor
 * `.wp-block-gallery.has-nested-images` — een flexbox-indeling die de
 * afbeeldingen op `width: auto` zet met een specificiteit van (0,3,2). Een
 * kortere selector hier verliest dat gevecht en dan staan de foto's klein en
 * ver uit elkaar. Elke regel hieronder is daarom bewust minstens even
 * specifiek; korter maken breekt de weergave.
 */

.wp-block-gallery.hillegom-reportage-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin: 0 0 1.5em;
	padding: 0;
}

@media (max-width: 1100px) {
	.wp-block-gallery.hillegom-reportage-gallery.has-nested-images {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 780px) {
	.wp-block-gallery.hillegom-reportage-gallery.has-nested-images {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.wp-block-gallery.hillegom-reportage-gallery.has-nested-images {
		grid-template-columns: 1fr;
	}
}

/*
 * Hier is `!important` geen luiheid maar noodzaak. Core zet de breedte van
 * elke figure met deze regel:
 *
 *   .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image)
 *       { width: calc(50% - var(--wp--style--unstable-gallery-gap,16px)/2) }
 *
 * Die `:not(#individual-image)` telt mee als ID-selector. Daarmee komt core op
 * specificiteit (1,3,1), en één ID verslaat elk aantal klassen — een selector
 * van alleen klassen kan dit dus nooit overrulen, hoe lang je hem ook maakt.
 * In een grid moet de cel de breedte bepalen, niet de figure.
 */
.wp-block-gallery.hillegom-reportage-gallery.has-nested-images figure.wp-block-image {
	width: 100% !important;
	max-width: 100%;
	/*
	 * Ook deze `!important` is nodig. Het thema zet de reportage-inhoud in een
	 * `.prose`-container (Tailwind Typography, zie `single-fotoraportage.php`),
	 * en die geeft élke figure een verticale marge. In een grid tellen die
	 * marges op bij de celhoogte: dat waren de brede witte banen tussen de
	 * rijen. De ruimte tussen de foto's hoort van `gap` te komen, niet van
	 * marges op de foto's zelf.
	 */
	margin: 0 !important;
	flex-grow: 0;
	display: block;
}

.wp-block-gallery.hillegom-reportage-gallery.has-nested-images figure.wp-block-image a {
	display: block;
	line-height: 0;
	margin: 0 !important;
}

/*
 * De verhouding volgt bewust die van `hillegom-gallery-thumb` (400x300, dus
 * 4:3). Stond hier 3:2, dan sneed `object-fit: cover` de boven- en onderrand
 * weg om de bredere bak te vullen — en juist rechtsonder staat het watermerk.
 * Dat werd zo half afgekapt. Wijzigt het thumbformaat ooit, pas dit dan mee
 * aan.
 */
.wp-block-gallery.hillegom-reportage-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 4px;
	cursor: zoom-in;
	display: block;
	/* Tailwind Typography zet ook op de afbeelding zelf een verticale marge. */
	margin: 0 !important;
}

/* Lightbox-overlay (gevuld door reportage-lightbox.js). */

.hillegom-lightbox-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(10, 15, 30, 0.92);
}

.hillegom-lightbox-overlay img {
	max-width: min(92vw, 1600px);
	max-height: 88vh;
	width: auto;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.hillegom-lightbox-close,
.hillegom-lightbox-prev,
.hillegom-lightbox-next {
	position: fixed;
	border: 0;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 28px;
	line-height: 1;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hillegom-lightbox-close:hover,
.hillegom-lightbox-prev:hover,
.hillegom-lightbox-next:hover {
	background: rgba(255, 255, 255, 0.28);
}

.hillegom-lightbox-close {
	top: 16px;
	right: 16px;
}

.hillegom-lightbox-prev {
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
}

.hillegom-lightbox-next {
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
}

.hillegom-lightbox-counter {
	position: fixed;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
}

body.hillegom-lightbox-open {
	overflow: hidden;
}