/**
 * ALTA Gallery — front-end stijlen.
 * Kolommen/tussenruimte/rijhoogte/hoekafronding komen uit CSS-variabelen die per
 * instantie (en per breekpunt) gegenereerd worden door build_instance_css() in PHP.
 */

.alta-gallery {
	/* Maakt de eigen breedte opvraagbaar via cqw, zodat de rijhoogte hieronder
	   kan meebewegen met de wérkelijke kolombreedte (in plaats van een vast
	   aantal pixels), op elk schermformaat. */
	container-type: inline-size;

	display: grid;
	grid-template-columns: repeat(var(--ag-columns, 4), 1fr);
	/* 1 rij-eenheid = (kolombreedte / basisverhouding) / 8. De "8" is de vaste
	   fijnheid waarmee tegelsoorten hun eigen verhouding kunnen benaderen
	   (zie RATIO_GRANULARITY in de PHP-klasse) en hoeft hier niet aangepast
	   te worden. */
	grid-auto-rows: calc(
		((100cqw - (var(--ag-columns, 4) - 1) * var(--ag-gap, 10px)) / var(--ag-columns, 4))
			/ var(--ag-ratio-normal, 1) / 8
	);
	grid-auto-flow: dense;
	gap: var(--ag-gap, 10px);
	margin: 1.5em 0;
	padding: 0;
}

/* Val terug op een vaste rijhoogte in browsers zonder container-query-ondersteuning
   (op dit moment een kleine minderheid; de verhoudingen kloppen dan niet precies,
   maar het raster blijft bruikbaar). */
@supports not (container-type: inline-size) {
	.alta-gallery {
		grid-auto-rows: 200px;
	}
}

.alta-gallery__item {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--ag-radius, 8px);
	background: #eceae6;
	font: inherit;
	color: inherit;
	text-align: left;
}

a.alta-gallery__item,
button.alta-gallery__item {
	cursor: pointer;
}

.alta-gallery__item img {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.35s ease;
}
.alta-gallery__item img.alta-gallery__img--loaded {
	opacity: 1;
}

/* Mozaïekpatroon: veilige standaardgrootte. De daadwerkelijke span per tegelsoort
   (afgeleid van de gekozen verhoudingen) wordt per instantie ingesteld via het
   gegenereerde <style>-blok, dat dit — door de hogere specificiteit van een
   ID-selector — automatisch overschrijft. */
.alta-gallery__item--big,
.alta-gallery__item--wide,
.alta-gallery__item--tall,
.alta-gallery__item--normal {
	grid-column: span 1;
	grid-row: span 1;
}

/* Onderschrift */
.alta-gallery__caption {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 1.2em 0.9em 0.7em;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0) 70%);
	color: #fff;
	font-size: 0.85rem;
	line-height: 1.3;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}
.alta-gallery[data-caption="always"] .alta-gallery__caption {
	opacity: 1;
	transform: translateY(0);
}
.alta-gallery[data-caption="hidden"] .alta-gallery__caption {
	display: none;
}

/* Hover-effecten: alleen op apparaten met een écht hover-vermogen (muis/trackpad),
   zodat er op aanraakschermen nooit een "vastzittende" hover-status ontstaat. */
@media (hover: hover) {
	.alta-gallery[data-hover="zoom"] .alta-gallery__item img {
		transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
	}
	.alta-gallery[data-hover="zoom"] .alta-gallery__item:hover img,
	.alta-gallery[data-hover="zoom"] .alta-gallery__item:focus-visible img {
		transform: scale(1.08);
	}

	.alta-gallery[data-hover="darken"] .alta-gallery__item::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background: rgba(0, 0, 0, 0);
		transition: background 0.3s ease;
		pointer-events: none;
	}
	.alta-gallery[data-hover="darken"] .alta-gallery__item:hover::after,
	.alta-gallery[data-hover="darken"] .alta-gallery__item:focus-visible::after {
		background: rgba(0, 0, 0, 0.25);
	}

	.alta-gallery[data-caption="hover"] .alta-gallery__item:hover .alta-gallery__caption,
	.alta-gallery[data-caption="hover"] .alta-gallery__item:focus-visible .alta-gallery__caption {
		opacity: 1;
		transform: translateY(0);
	}
}

.alta-gallery__item:focus-visible {
	outline: 3px solid #4f8ef7;
	outline-offset: 2px;
}

.alta-gallery__empty {
	opacity: 0.7;
	font-style: italic;
}

/* Alleen voor schermlezers zichtbaar (statusmeldingen bij "Laad meer"). */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* "Laad meer" */
.alta-gallery__load-more-wrap {
	margin: 1.5em 0;
	text-align: center;
}
.alta-gallery__load-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.7em 1.6em;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.9rem;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: opacity 0.2s ease, background 0.2s ease;
}
.alta-gallery__load-more:hover {
	background: rgba(0, 0, 0, 0.05);
}
.alta-gallery__load-more:disabled {
	cursor: default;
	opacity: 0.6;
}
.alta-gallery__load-more.is-loading::after {
	content: "";
	width: 0.9em;
	height: 0.9em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: alta-gallery-spin 0.7s linear infinite;
}
@keyframes alta-gallery-spin {
	to {
		transform: rotate(360deg);
	}
}
@media (prefers-reduced-motion: reduce) {
	.alta-gallery__load-more.is-loading::after {
		animation: none;
	}
}

/* Lightbox */
.alta-gallery__lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vh 4vw;
	background: rgba(12, 12, 14, 0.93);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease;
}
.alta-gallery__lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.alta-gallery__lightbox figure {
	max-width: 92vw;
	max-height: 86vh;
	margin: 0;
	text-align: center;
}
.alta-gallery__lightbox img {
	max-width: 92vw;
	max-height: 78vh;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
.alta-gallery__lightbox figcaption {
	margin-top: 0.9rem;
	color: #f4f4f4;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
}

.alta-gallery__lightbox-close,
.alta-gallery__lightbox-prev,
.alta-gallery__lightbox-next {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
.alta-gallery__lightbox-close:hover,
.alta-gallery__lightbox-prev:hover,
.alta-gallery__lightbox-next:hover {
	background: rgba(255, 255, 255, 0.18);
}
.alta-gallery__lightbox-close {
	top: 20px;
	right: 20px;
}
.alta-gallery__lightbox-prev {
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
}
.alta-gallery__lightbox-next {
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
}
.alta-gallery__lightbox-prev:hover {
	transform: translateY(-50%) scale(1.06);
}
.alta-gallery__lightbox-next:hover {
	transform: translateY(-50%) scale(1.06);
}

@media (max-width: 600px) {
	.alta-gallery__lightbox-prev,
	.alta-gallery__lightbox-next {
		width: 38px;
		height: 38px;
		font-size: 1.3rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.alta-gallery *,
	.alta-gallery__lightbox * {
		transition: none !important;
		animation: none !important;
	}
}