/*
 * Fortuna UI — tijdlijn (seizoensoverzichten). Per decennium een kop, daaronder een lijn met punten en kaarten.
 *   <div class="fu-timeline"> pillen · <section class="fu-timeline__decade"> <header class="fu-timeline__head"> · <ol class="fu-timeline__list">
 *     <li class="fu-timeline__item"><span class="fu-timeline__dot"></span><article class="fu-card fu-timeline__card">…
 * De hele kaart is één link (zoals de kaarten op de voorpagina); bij aanwijzen kleurt het punt geel.
 */
.fu-timeline { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fu-space-10); margin-block: var(--fu-space-8); max-width: none; }
.fu-timeline > * { min-width: 0; }

.fu-timeline__decade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fu-space-5); scroll-margin-top: calc(var(--fu-header-h) + var(--fu-space-4)); }

.fu-timeline__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--fu-space-1) var(--fu-space-4); }

.fu-timeline__list {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--fu-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* De lijn door alle punten. */
.fu-timeline__list::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: var(--fu-space-2);
	width: var(--fu-lijn-dik);
	margin-inline-start: calc(var(--fu-lijn-dik) / -2);
	background: var(--fu-c-line-strong);
}

.fu-timeline__item { position: relative; padding-inline-start: var(--fu-space-10); }

.fu-timeline__dot {
	position: absolute;
	inset-block-start: var(--fu-space-4);
	inset-inline-start: var(--fu-space-2);
	width: var(--fu-space-3);
	height: var(--fu-space-3);
	margin-inline-start: calc(var(--fu-space-3) / -2);
	border-radius: var(--fu-r-pill);
	background: var(--fu-c-brand);
	box-shadow: 0 0 0 var(--fu-space-1) var(--fu-c-bg);
	transition: background-color var(--fu-beweging-hover), transform var(--fu-beweging-hover);
}

.fu-timeline__item:hover .fu-timeline__dot,
.fu-timeline__item:focus-within .fu-timeline__dot { background: var(--fu-c-accent); transform: scale(1.4); }

/* Kaart: foto links (klein), titel en korte tekst rechts; zonder foto alleen tekst. */
.fu-timeline__card {
	grid-template-columns: var(--fu-kaart-foto-zij) minmax(0, 1fr);
	align-items: start;
	gap: var(--fu-space-4);
	padding: var(--fu-space-3);
	border: var(--fu-lijn) solid var(--fu-c-line);
	border-radius: var(--fu-r-md);
	background: var(--fu-c-surface);
	transition: border-color var(--fu-beweging-hover), box-shadow var(--fu-beweging-hover);
	--fu-r-parent: var(--fu-r-md);
	--fu-pad: var(--fu-space-3);
}

.fu-timeline__card:not(:has(.fu-card__media)) { grid-template-columns: minmax(0, 1fr); }
.fu-timeline__card:hover { border-color: var(--fu-c-line-strong); box-shadow: var(--fu-shadow-sm); }
.fu-timeline__card .fu-card__media { border-radius: var(--fu-r-binnen); aspect-ratio: 1; }
.fu-timeline__card .fu-card__link::after { border-radius: var(--fu-r-md); }
.fu-timeline__card .fu-card__body { gap: var(--fu-space-2); }
.fu-timeline__card .fu-card__excerpt { font-size: var(--fu-fs-sm); line-height: 1.5; }

@media (min-width: 720px) {
	.fu-timeline__card { grid-template-columns: var(--fu-tijdlijn-foto) minmax(0, 1fr); }
	.fu-timeline__card .fu-card__media { aspect-ratio: 4 / 3; }
	.fu-timeline__card .fu-card__title { font-size: var(--fu-fs-xl); }
}