/*
 * Fortuna UI — kaarten voor berichten. Geen rand of schaduw: hiërarchie komt uit grootte, letter en ruimte.
 *   .fu-card            foto boven, titel eronder (standaard)
 *   .fu-card--lead      het grote bericht bovenaan (titel groter, foto breder)
 *   .fu-card--row       compacte regel: kleine foto links, titel + datum
 *   .fu-card--text      zonder foto (lijsten, meest gelezen)
 * Hele kaart is één link. Hover: foto zoomt licht in, titel krijgt een onderstreping.
 */
.fu-card {
	position: relative;
	display: grid;
	align-content: start;
	gap: var(--fu-ritme-media);
	min-width: 0;
	color: var(--fu-c-fg);
}

.fu-card__link {
	color: inherit;
	text-decoration: none;
}

/* Klikvlak over de hele kaart. */
.fu-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--fu-r-md);
}

.fu-card__link:focus-visible { outline: none; }
.fu-card__link:focus-visible::after { outline: var(--fu-focus-breedte) solid var(--fu-c-focus); outline-offset: var(--fu-focus-afstand); }

.fu-card__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--fu-r-md);
	background: var(--fu-c-bg-sub);
	aspect-ratio: 3 / 2;
	max-width: 100%;
}

.fu-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Watermerk ("© Fortuna Media", linksonder): lichte inzoom vanuit rechtsboven + zachte schaduw (::after hieronder). */
	transform: scale(var(--fu-foto-zoom));
	transform-origin: 100% 0;
	transition: transform var(--fu-beweging-beeld);
}

.fu-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--fu-foto-schaduw);
}

/* Beeld zonder watermerk (kaartje, logo, illustratie): geen inzoom, geen schaduw. */
/* Voor elk fotovlak (kaart, schap, carrousel, gesplitste kaart): zet fu-foto-heel op het vlak. */
.fu-card__media--heel, .fu-foto-heel { --fu-foto-zoom: 1; --fu-foto-schaduw: none; }

.fu-card:hover .fu-card__media img { transform: scale(calc(var(--fu-foto-zoom) + var(--fu-foto-zoom-hover))); }

.fu-card__body {
	display: grid;
	gap: var(--fu-ritme-tekst);
	min-width: 0;
}

.fu-card__kicker {
	display: inline-flex;
	align-items: center;
	gap: var(--fu-space-1-5);
	color: var(--fu-c-link);
	font: 600 var(--fu-fs-sm) / 1.2 var(--fu-font-text);
}

.fu-card__kicker .fu-icon { width: var(--fu-icoon-s); height: var(--fu-icoon-s); }

.fu-card__title {
	margin: 0;
	color: var(--fu-c-kop, var(--fu-c-fg));
	font-family: var(--fu-font-display);
	font-stretch: var(--fu-display-stretch);
	font-size: var(--fu-fs-lg);
	font-weight: var(--fu-display-weight);
	line-height: var(--fu-lh-snug);
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.fu-card__title span {
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% var(--fu-onderstreep);
	transition: background-size var(--fu-beweging-paneel);
}

.fu-card:hover .fu-card__title span { background-size: 100% var(--fu-onderstreep); }

.fu-card__meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fu-space-1) var(--fu-space-3);
	color: var(--fu-c-fg-sub);
	font: 400 var(--fu-fs-sm) / 1.3 var(--fu-font-text);
}

.fu-card__meta .fu-icon { width: var(--fu-icoon-s); height: var(--fu-icoon-s); }

/* Lead */
.fu-card--lead { gap: var(--fu-ritme-media); }
.fu-card--lead .fu-card__media { aspect-ratio: 16 / 10; border-radius: var(--fu-r-lg); }
.fu-card--lead .fu-card__link::after { border-radius: var(--fu-r-lg); }
.fu-card--lead .fu-card__title { font-size: var(--fu-fs-2xl); line-height: var(--fu-lh-tight); letter-spacing: var(--fu-track-display); }
/* Samenvatting onder de titel: zonder marge, de ruimte komt uit de kaart (gap). */
.fu-card__excerpt {
	margin: 0;
	color: var(--fu-c-fg-sub);
	font: 400 var(--fu-fs-base) / 1.5 var(--fu-font-text);
	text-wrap: pretty;
}

.fu-card--lead .fu-card__excerpt {
	margin: 0;
	max-width: 60ch;
	color: var(--fu-c-fg-sub);
	font: 400 var(--fu-fs-md) / 1.5 var(--fu-font-text);
	text-wrap: pretty;
}

/* Regel */
.fu-card--row {
	grid-template-columns: var(--fu-kaart-foto-zij) minmax(0, 1fr);
	align-items: center; /* titel + datum midden naast de foto, geen lege ruimte onderaan */
	gap: var(--fu-space-3-5);
	padding-block: var(--fu-space-3-5);
	border-top: var(--fu-lijn) solid var(--fu-c-line);
}

.fu-card--row .fu-card__media { border-radius: var(--fu-r-sm); }
.fu-card--row .fu-card__link::after { border-radius: 0; }
.fu-card--row .fu-card__title { font-size: var(--fu-fs-base); line-height: 1.3; letter-spacing: -0.005em; }
.fu-card--row .fu-card__body,
.fu-card--side .fu-card__body { gap: var(--fu-ritme-tekst); }

/* Alleen tekst */
.fu-card--text { gap: var(--fu-ritme-tekst); padding-block: var(--fu-space-3-5); border-top: var(--fu-lijn) solid var(--fu-c-line); }
.fu-card--text .fu-card__title { font-size: var(--fu-fs-md); }

/* Lijst van kaarten zonder dubbele lijn bovenaan. */
.fu-cardlist { display: grid; align-content: start; } /* Rijen niet uitrekken als de andere kolom hoger is. */
.fu-cardlist > .fu-card--row:first-child,
.fu-cardlist > .fu-card--text:first-child { border-top: 0; padding-top: 0; }

/* Rubriek met een stip ervoor (redactioneel, zoals BBC/Newsio). */
.fu-card__kicker--dot::before {
	content: "";
	width: var(--fu-stip);
	height: var(--fu-stip);
	border-radius: var(--fu-r-pill);
	background: var(--fu-c-brand);
}

/*
 * Redactioneel raster met dunne lijnen tussen de kolommen (krant).
 *   <div class="fu-ruled"><div class="fu-ruled__col">…</div><div class="fu-ruled__col fu-ruled__col--lead">…</div>…</div>
 * Telefoon: kolommen onder elkaar met een lijn ertussen; de kolom met --lead komt bovenaan.
 */
.fu-ruled { display: grid; gap: var(--fu-space-6); }
.fu-ruled__col { display: grid; align-content: start; gap: var(--fu-space-6); min-width: 0; padding-top: var(--fu-space-6); border-top: var(--fu-lijn) solid var(--fu-c-line); }
.fu-ruled__col:first-child,
.fu-ruled__col--lead { padding-top: 0; border-top: 0; }
.fu-ruled:has(> .fu-ruled__col--lead) > .fu-ruled__col:first-child:not(.fu-ruled__col--lead) { padding-top: var(--fu-space-6); border-top: var(--fu-lijn) solid var(--fu-c-line); }

/* Zijbericht: op de telefoon een compacte regel, op desktop foto boven. */
@media (max-width: 1023.98px) {
	.fu-ruled__col--lead { order: -1; }
	.fu-card--side { grid-template-columns: var(--fu-kaart-foto-zij) minmax(0, 1fr); align-items: center; gap: var(--fu-space-3-5); }
	.fu-card--side .fu-card__media { border-radius: var(--fu-r-sm); }
	.fu-card--side .fu-card__title { font-size: var(--fu-fs-base); line-height: 1.3; }
}

@media (min-width: 1024px) {
	.fu-ruled { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 3fr); gap: 0; }
	.fu-ruled__col { padding-inline: var(--fu-space-6); }
	.fu-ruled__col:first-child { padding-left: 0; }
	.fu-ruled__col:last-child { padding-right: 0; }
	.fu-ruled__col,
	.fu-ruled:has(> .fu-ruled__col--lead) > .fu-ruled__col:first-child:not(.fu-ruled__col--lead) { padding-top: 0; border-top: 0; }
	.fu-ruled__col + .fu-ruled__col { border-left: var(--fu-lijn) solid var(--fu-c-line); }
}

/* Raster van kaarten (rubriekpagina's): 1 kolom op telefoon, 2 vanaf 720px; --foto: 4 vanaf 1024px. */
.fu-cards { display: grid; gap: var(--fu-space-8) var(--fu-space-6); grid-template-columns: 1fr; }
@media (min-width: 720px) { .fu-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fu-cards--foto { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fu-space-6); } }
/* Vierkante foto (shirts, voorwerpen): zonder inzoom/schaduw gebruik je fu-card__media--heel. */
.fu-card--vierkant .fu-card__media { aspect-ratio: 1; }

/* Foto met tekst en link eroverheen (Louvre, fotoseries): hele kaart is de link, onderop een donkergroene overlay met titel en pijl.
 *   <article class="fu-card fu-card--overlay"><div class="fu-card__media fu-card__media--heel"><img …></div>
 *     <div class="fu-card__overlay"><h3 class="fu-card__title"><a class="fu-card__link" href="…"><span>1999 – 2000</span></a></h3><span class="fu-card__go"><svg …pijl…></svg></span></div></article> */
.fu-card--overlay { position: relative; }
.fu-card--overlay .fu-card__media { aspect-ratio: 1; }

.fu-card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--fu-space-3);
	padding: var(--fu-space-4);
	border-radius: var(--fu-r-md);
	background: linear-gradient(to top, var(--fu-overlay-onder), transparent 55%), var(--fu-overlay);
	color: var(--fu-c-on-brand);
	pointer-events: none;
	transition: background-color var(--fu-beweging-paneel);
}

.fu-card--overlay .fu-card__title { color: var(--fu-c-on-brand); font-size: var(--fu-fs-md); }
.fu-card--overlay .fu-card__link { pointer-events: auto; }

.fu-card__go {
	display: grid;
	place-items: center;
	flex: none;
	width: var(--fu-control-s);
	height: var(--fu-control-s);
	border-radius: var(--fu-r-pill);
	background: var(--fu-c-on-brand);
	color: var(--fu-c-brand);
	transition: transform var(--fu-beweging-hover);
}

.fu-card__go .fu-icon { width: var(--fu-icoon-m); height: var(--fu-icoon-m); }
.fu-card--overlay:hover .fu-card__overlay { background: linear-gradient(to top, var(--fu-overlay-onder), transparent 55%), var(--fu-overlay-hover); }
.fu-card--overlay:hover .fu-card__go { transform: translateX(var(--fu-beweeg-s)); }

/* Video: miniatuur 16:9 met een afspeelknop in het midden en het kanaal linksboven; de speler laadt pas bij een klik.
 *   <article class="fu-card fu-card--video"><div class="fu-card__media"><img …><span class="fu-card__label"><svg youtube/>YouTube</span><span class="fu-card__speel"><svg play/></span></div>… */
.fu-card--video .fu-card__media { aspect-ratio: 16 / 9; }

.fu-card__label {
	position: absolute;
	inset: var(--fu-space-3) auto auto var(--fu-space-3);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: var(--fu-space-1-5);
	min-height: var(--fu-tag-h);
	padding: 0 var(--fu-space-2-5);
	border-radius: var(--fu-r-pill);
	background: var(--fu-c-on-brand);
	color: var(--fu-c-brand);
	font: 600 var(--fu-fs-xs) / 1 var(--fu-font-text);
}

.fu-card__label .fu-icon { width: var(--fu-icoon-s); height: var(--fu-icoon-s); }

.fu-card__speel {
	position: absolute;
	inset: 50% auto auto 50%;
	z-index: 1;
	display: grid;
	place-items: center;
	width: var(--fu-control-xl);
	height: var(--fu-control-xl);
	border-radius: var(--fu-r-pill);
	background: var(--fu-c-on-brand);
	color: var(--fu-c-brand);
	box-shadow: var(--fu-shadow-md);
	transform: translate(-50%, -50%);
	transition: transform var(--fu-beweging-hover);
}

.fu-card__speel .fu-icon { width: var(--fu-icoon-xl); height: var(--fu-icoon-xl); }
.fu-card--video:hover .fu-card__speel { transform: translate(-50%, -50%) scale(var(--fu-hover-schaal)); }
.fu-card--lead .fu-card__body { gap: var(--fu-ritme-tekst-ruim); }

/* Video-miniaturen zijn laag-res: dezelfde donkergroene doorzichtige overlay als de Louvre-kaart, op hover lichter. */
.fu-card--video .fu-card__media::after {
	background: linear-gradient(to top, var(--fu-overlay-onder), transparent 55%), var(--fu-overlay);
	transition: opacity var(--fu-beweging-paneel);
}

.fu-card--video:hover .fu-card__media::after { opacity: 0.55; }