/* ============================================================
 * LOOP
 * Drie weergaves: list (rijen), grid (kaarten) en editorial
 * (groot beeld naast tekst, om en om). De kaarten delen hun
 * onderdelen — .card__title, .card__meta, .card__figure — zodat
 * een nieuw post type alleen een template nodig heeft, geen CSS.
 * ============================================================ */


/* ------------------------------------------------------------
 * GEDEELDE KAART-ONDERDELEN
 * ---------------------------------------------------------- */
.loop > .section-wrapper{
	row-gap: clamp(1rem, 2vw, 2rem);
}

.card{
	color: inherit;
	text-decoration: none;
}

.card__title a{
	font: inherit;
	font-variation-settings: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	color: inherit;
	margin-bottom: 0;
}

.card__title{
	margin-top: 0;
	margin-bottom: 0;
	font-size: var(--h4-size);
	font-variation-settings: var(--vf-heading-sm);
	letter-spacing: -0.015em;
	line-height: 1.2;
}

.card__meta,
.card__status,
.card__cta{
	margin-bottom: 0;
	font-size: var(--meta-size);
	font-variation-settings: var(--vf-meta);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.4;
}
.card__meta--quiet{ color: var(--fg-quiet); }
.card__nums{ font-variant-numeric: tabular-nums; }

/* Een gesloten expositie mag stiller staan dan een lopende. */
.card__status--past{ color: var(--fg-quiet); }
.card__status--upcoming{ color: var(--fg-muted); }

.card__cta::after{
	content: ' \2192';
	display: inline-block;
	transition: transform var(--transition-mid) var(--ease);
}
.card:hover .card__cta::after{ transform: translateX(6px); }

.card__figure{
	display: block;
	overflow: hidden;
	background-color: var(--wash);
}
.card__figure img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--reveal-duration) var(--ease);
}
.card:hover .card__figure img,
.card__figure:hover img{ transform: scale(1.035); }

.card__figure--wide  { aspect-ratio: 16 / 10; }
.card__figure--tall  { aspect-ratio: 3 / 4; }
.card__figure--square{ aspect-ratio: 1 / 1; }


/* ------------------------------------------------------------
 * LIST — rijen met een haarlijn ertussen
 * ---------------------------------------------------------- */
.loop--list .loop__items{
	border-top: var(--hairline-strong);
}

.card--list{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gallery-gap) var(--gap);
	align-items: baseline;
	padding-block: var(--padding);
	border-bottom: var(--hairline);
	transition: padding var(--transition-mid) var(--ease),
	            background-color var(--transition-fast) var(--ease),
	            color var(--transition-fast) var(--ease);
}

/* De rij keert om. Niet alleen `color`: koppen zetten hun eigen
   `color: var(--fg)` en zouden anders zwart blijven. Daarom draait de hele
   tokenset om, net zoals .bg-dark dat voor een sectie doet. */
.card--list:hover{
	--bg: var(--zwart);
	--fg: var(--wit);
	--fg-muted: var(--wit);
	--fg-quiet: var(--wit);
	background-color: var(--bg);
	color: var(--fg);
	padding-inline: var(--gallery-gap);
}

/* Op een donkere sectie de andere kant op. */
.bg-dark .card--list:hover{
	--bg: var(--wit);
	--fg: var(--zwart);
	--fg-muted: var(--zwart);
	--fg-quiet: var(--zwart);
}

.card__id{
	display: flex;
	align-items: center;
	gap: var(--gallery-gap);
}
.card__id > div{ min-width: 0; }

.card__thumb{
	flex: 0 0 auto;
	width: 4.5rem;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--wash);
}
.card__thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ------------------------------------------------------------
 * GRID
 * ---------------------------------------------------------- */
.loop--grid .loop__items{
	display: grid;
	gap: var(--padding) var(--gap);
}
.loop--cols-1 .loop__items{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
.loop--cols-2 .loop__items{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.loop--cols-3 .loop__items{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.loop--cols-4 .loop__items{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.loop--cols-5 .loop__items{ grid-template-columns: repeat(5, minmax(0, 1fr)); }

.card--grid{
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.card--grid .card__figure{
	margin-bottom: var(--gallery-gap);
}


/* ------------------------------------------------------------
 * EDITORIAL — beeld en tekst naast elkaar, om en om
 * ---------------------------------------------------------- */
.loop--editorial .loop__items{
	display: grid;
	gap: 0;
}
.card--editorial + .card--editorial{
	margin-top: calc(2 * var(--padding));
	padding-top: calc(2 * var(--padding));
	border-top: var(--hairline);
}

.card--editorial{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--padding) var(--section-gap);
	align-items: center;
}
.card--editorial .card__body{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}
/* De gegevens staan als één blok onder de titel, dicht op elkaar. */
.card--editorial .card__facts{
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.card--editorial .card__title{
	margin-bottom: var(--gallery-gap);
}
.card--editorial .card__artists{
	margin-top: var(--gallery-gap);
}
.card--editorial .card__media figure,
.card--editorial .card__media{
	margin: 0;
}
.card--editorial .card__title{
	font-size: var(--h3-size);
	font-variation-settings: var(--vf-heading);
	letter-spacing: -0.02em;
}
.card--editorial .card__intro{
	margin-top: var(--gallery-gap);
}
.card--editorial .card__cta-link,
.card--editorial .buttons{
	margin-top: var(--padding);
}


/* ------------------------------------------------------------
 * KOLOMMEN PER TYPE — vanaf tablet
 * ---------------------------------------------------------- */
@media screen and (min-width: 48rem){
	.card--exhibition.card--list{
		grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) minmax(0, 1fr) auto auto;
	}
	.card--work.card--list{
		grid-template-columns: 2fr 1fr 1fr;
	}
	.card--default.card--list{
		grid-template-columns: minmax(0, 1fr) auto;
	}
	
	.card--editorial{
		grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
	}
	/* Bij een omgekeerde rij verhuist het beeld naar de tweede kolom, dus
	   moeten de sporen mee omwisselen — anders staat het beeld ineens in de
	   smalle track. Het beeld is altijd 60%. */
	.card--editorial:nth-child(even){
		grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
	}
	.card--editorial:nth-child(even) .card__media{ order: 2; }
}


/* ------------------------------------------------------------
 * RESPONSIVE
 * ---------------------------------------------------------- */
@media screen and (max-width: 1200px){
	.loop--cols-3 .loop__items,
	.loop--cols-4 .loop__items,
	.loop--cols-5 .loop__items{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 600px){
	.loop--grid .loop__items{ grid-template-columns: minmax(0, 1fr) !important; }
	.card--list:hover{ padding-inline: 0; }
	.card__id{
		flex-direction: column;
        align-items: flex-start;
	}
}


/* ------------------------------------------------------------
 * SHUFFLE — de pool staat in de HTML, de browser kiest
 * Zonder JS blijft het bij de eerste `n` items; met JS haalt
 * assets/js/shuffle.js de rest gewoon uit de DOM.
 * ---------------------------------------------------------- */
.loop[data-shuffle="1"] .loop__items > :nth-child(n+2),
.loop[data-shuffle="2"] .loop__items > :nth-child(n+3),
.loop[data-shuffle="3"] .loop__items > :nth-child(n+4),
.loop[data-shuffle="4"] .loop__items > :nth-child(n+5),
.loop[data-shuffle="5"] .loop__items > :nth-child(n+6){
	display: none;
}