/*
 * Projectenlijst onderaan de homepage (boven de footer) — enkel op de voorpagina.
 * Per project: grote klantnaam · kadertje met wisselende beelden · jaartal.
 */

.gm-projects {
	padding: 8vh 20px 10vh;
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 1.25vh, 20px);   /* ruimte tussen de rijen (tunable) */
}

.gm-project {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.35em;
	line-height: 1.02;
}

.gm-project__name {
	font-size: clamp(30px, 5.4vw, 62px);
	font-weight: 400;
	letter-spacing: -0.01em;
	color: var(--gm-on-bg, #000);
}

/* Kadertje: vaste hoogte, breedte volgt het beeld — dus nooit gecropt. */
.gm-project__thumb {
	display: inline-flex;
	align-items: center;
	height: clamp(90px, 13vw, 200px);   /* nog groter (tunable) */
	flex: none;
}

.gm-project__img {
	display: block;
	height: 100%;
	width: auto;
	max-width: none;        /* niet inperken door globale/ouder-thema img-regels */
	object-fit: contain;    /* extra garantie: nooit croppen */
	transition: opacity 0.35s ease;
}

/* Enkel het beeld is klikbaar (volgende beeld); de naam niet. */
.gm-project__thumb:focus-visible {
	outline: 2px solid var(--gm-on-bg, #000);
	outline-offset: 3px;
}

.gm-project__year {
	font-size: clamp(15px, 2.3vw, 26px);
	color: var(--gm-on-bg, #000);
}

/* Op zeer grote schermen: de projectenlijst in twee kolommen. */
@media (min-width: 1600px) {
	.gm-projects {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: clamp(48px, 5vw, 120px);
		row-gap: clamp(8px, 1.25vh, 20px);
	}
}