/*
 * Landingsraster — enkel op de voorpagina ingeladen (zie functions.php).
 * Schermvullende overlay: raster van beelden dat traag/afwisselend wisselt,
 * niet gecropt (contain), met door de bezoeker gekozen achtergrondkleur.
 */

:root {
	--gm-gap: clamp(8px, 1vw, 16px);   /* ruimte tussen de cellen */
}
/* --gm-bg / --gm-on-bg staan globaal in style.css; de body-achtergrond ook. */

body.gm-landing-open {
	overflow: hidden;   /* geen scroll achter de overlay */
}

/* ---- overlay ---- */
.gm-landing {
	position: fixed;
	inset: 0;
	z-index: 100000;                 /* boven de vaste #header (z-index:1000) */
	background: var(--gm-bg);
	overflow: hidden;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.gm-landing.gm-dismiss {
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
}

/* ---- raster ---- */
.gm-grid {
	position: absolute;
	inset: 0;
	box-sizing: border-box;          /* Meyer-reset zet dit niet globaal; nodig door de padding */
	display: grid;                   /* kolommen/rijen worden in JS gezet (vast 6×6) */
	gap: var(--gm-gap);              /* ruimte tussen de beelden (in de gekozen kleur) */
	padding: var(--gm-gap);          /* zelfde marge rondom, zodat niets tegen de rand plakt */
}

.gm-cell {
	position: relative;
	overflow: hidden;
	min-width: 0;
	min-height: 0;
}

/* Twee gestapelde beelden per cel voor een zachte crossfade.
   contain = nooit croppen: staand vult de hoogte, liggend de breedte. */
.gm-cell__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	opacity: 0;
	transition: opacity 0.7s ease;
}

.gm-cell__img.on {
	opacity: 1;
}

/* Titel: flat, center-center, geen achtergrond, geen schaduw. Fade via JS. */
.gm-cell__title {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 12px;
	color: #fff;
	font-size: 13px;
	letter-spacing: 0.02em;
	line-height: 1.35;
	opacity: 0;
	pointer-events: none;
}

/* De kleurenslider-stijlen staan in color.css (gedeeld: overlay + homepage). */

/* Touch: geen hover, dus geen titels (tik = homepage). */
@media (hover: none) {
	.gm-cell__title {
		display: none;
	}
}