/*
 * Fortuna UI — wedstrijd: uitslag met clublogo's, en de regels van een wedstrijdblok.
 *   .fu-match            twee ploegen onder elkaar, score rechts (Laatste wedstrijd, wedstrijdblok)
 *   .fu-fixture          één regel: datum | thuis – uit | score of aftraptijd (programma, seizoen)
 *   .fu-events           doelpunten/kaarten met minuut
 * Logo ontbreekt? .fu-crest--initials met de beginletters.
 */
.fu-match { display: grid; gap: var(--fu-space-2-5); }

.fu-match__team {
	display: grid;
	grid-template-columns: var(--fu-crest-m) minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--fu-space-3);
}

.fu-match__name {
	min-width: 0;
	font: 600 var(--fu-fs-md) / 1.25 var(--fu-font-text);
	/* Lange namen (KRC Genk, Go Ahead Eagles) mogen wrappen — niet afkappen met …. */
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

.fu-match__team.is-fortuna .fu-match__name { font-weight: 700; }

.fu-match__score {
	min-width: 1.4ch;
	font-family: var(--fu-font-num);
	font-stretch: var(--fu-display-stretch);
	font-size: var(--fu-fs-2xl);
	font-weight: var(--fu-display-weight);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-align: right;
}

.fu-match__team.is-loser .fu-match__score,
.fu-match__team.is-loser .fu-match__name { color: var(--fu-c-fg-sub); }

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

.fu-match__meta > span { display: inline-flex; align-items: center; gap: var(--fu-space-1-5); }
.fu-match__meta .fu-icon { width: var(--fu-icoon-s); height: var(--fu-icoon-s); }

/*
 * Clublogo op een vaste ronde plaat. Het logo past altijd binnen een vlak van 72% van de plaat
 * (hoge en brede logo's blijven binnen de cirkel), dus hoge (Willem II), brede (AZ) en ronde logo's zijn optisch even groot.
 * Grootte: --fu-crest (standaard --fu-crest-m). Geen logo? .fu-crest--initials met de beginletters.
 */
.fu-crest {
	--fu-crest: var(--fu-crest-m);
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	width: var(--fu-crest);
	height: var(--fu-crest);
	border-radius: var(--fu-r-pill);
	background: var(--fu-c-surface);
	box-shadow: inset 0 0 0 var(--fu-lijn) var(--fu-c-line);
}

.fu-crest img {
	position: absolute;
	inset: 14%;
	width: 72%;
	height: 72%;
	object-fit: contain;
}

.fu-crest--initials {
	color: var(--fu-c-fg-sub);
	font: 700 calc(var(--fu-crest) * 0.3) / 1 var(--fu-font-text);
	letter-spacing: 0.02em;
}

/* Op donkergroen: witte plaat, logo's blijven goed zichtbaar. */
.fu-block--brand .fu-crest { background: var(--fu-c-on-brand); box-shadow: none; }
.fu-block--brand .fu-crest--initials { color: var(--fu-groen-800); }

/* Klein logo naast een clubnaam (tabellen, lijsten): overal waar een club staat. */
.fu-crest--xs { --fu-crest: var(--fu-crest-xs); }
.fu-club { display: inline-flex; align-items: center; gap: var(--fu-space-2-5); min-width: 0; }

/*
 * Programma- of uitslagregel. Eén regel per duel, allemaal even hoog:
 *   datum | logo | tegenstander + Thuis/Uit | uitslag (thuis–uit) + W/G/V
 *   <a class="fu-fixture" href="…verslag"><span class="fu-fixture__date">19 sep</span><span class="fu-crest"><img …></span>
 *     <span class="fu-fixture__club"><span class="fu-fixture__name">Willem II</span><span class="fu-fixture__venue">Uit</span></span>
 *     <span class="fu-fixture__score">0-1<span class="fu-result fu-result--w">W</span></span></a>
 */
.fu-fixture {
	display: grid;
	grid-template-columns: 3.25rem var(--fu-crest-s) minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--fu-space-3);
	min-height: var(--fu-rij-h);
	padding-block: var(--fu-space-2);
	border-top: var(--fu-lijn) solid var(--fu-c-line);
	color: inherit;
	font-family: var(--fu-font-text);
	text-decoration: none;
}

.fu-fixture:first-child { border-top: 0; }
.fu-fixture__date { color: var(--fu-c-fg-sub); font-size: var(--fu-fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fu-fixture .fu-crest { --fu-crest: var(--fu-crest-s); }
.fu-fixture__club { display: grid; gap: var(--fu-space-1); min-width: 0; }
.fu-fixture__name { font-size: var(--fu-fs-base); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; text-wrap: pretty; }
.fu-fixture__venue { color: var(--fu-c-fg-sub); font-size: var(--fu-fs-xs); line-height: 1.2; }
.fu-fixture__score { display: inline-flex; align-items: center; gap: var(--fu-space-2-5); font-family: var(--fu-font-num); font-size: var(--fu-fs-md); font-weight: 650; font-variant-numeric: tabular-nums; }
a.fu-fixture:hover .fu-fixture__name { text-decoration: underline; text-decoration-thickness: var(--fu-onderstreep); text-underline-offset: 0.2em; }
a.fu-fixture:focus-visible { outline: var(--fu-focus-breedte) solid var(--fu-c-focus); outline-offset: var(--fu-focus-afstand-klein); border-radius: var(--fu-r-xs); }

/* Gebeurtenissen */
.fu-events { display: grid; gap: var(--fu-space-2); margin: 0; padding: 0; list-style: none; }

.fu-events li {
	display: grid;
	grid-template-columns: var(--fu-crest-m) 2.25rem minmax(0, 1fr) auto; /* icoon onder het logo, minuut lijnt met de clubnaam */
	align-items: center;
	gap: 0 var(--fu-space-3);
	font-size: var(--fu-fs-base);
}

.fu-events__min { color: var(--fu-c-fg-sub); font-variant-numeric: tabular-nums; }
.fu-events .fu-icon { justify-self: center; width: var(--fu-icoon-m); height: var(--fu-icoon-m); color: var(--fu-c-fg-sub); }
.fu-events li.is-fortuna .fu-icon { color: var(--fu-c-brand); }
.fu-events__stand { font-family: var(--fu-font-num); font-weight: 650; font-variant-numeric: tabular-nums; }

/*
 * Scorebord: één duel over de volle breedte (voorpagina). Logo – naam – score – naam – logo.
 *   <div class="fu-scoreboard"> <div class="fu-scoreboard__team">…</div> <div class="fu-scoreboard__score">1 – 2</div> <div class="fu-scoreboard__team is-uit">…</div> </div>
 */
.fu-scoreboard {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: var(--fu-space-4);
}

.fu-scoreboard__team { display: grid; align-items: center; justify-items: center; gap: var(--fu-space-2-5) var(--fu-space-3-5); min-width: 0; text-align: center; }
.fu-scoreboard__team.is-loser .fu-scoreboard__name { color: var(--fu-c-fg-sub); }
.fu-scoreboard__team .fu-crest { --fu-crest: var(--fu-crest-l); }
.fu-scoreboard__name { font: 600 var(--fu-fs-base) / 1.25 var(--fu-font-text); text-wrap: balance; }

.fu-scoreboard__score {
	font-family: var(--fu-font-num);
	font-stretch: var(--fu-display-stretch);
	font-size: var(--fu-fs-3xl);
	font-weight: var(--fu-display-weight);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	line-height: 1;
	white-space: nowrap;
}

.fu-scoreboard__score span { color: var(--fu-c-fg-sub); font-weight: 400; }

@media (min-width: 720px) {
	.fu-scoreboard { gap: var(--fu-space-8); }
	.fu-scoreboard__team { grid-auto-flow: column; justify-content: end; text-align: right; }
	.fu-scoreboard__team.is-uit { justify-content: start; text-align: left; }
	.fu-scoreboard__team.is-uit .fu-crest { order: -1; }
	.fu-scoreboard__name { font-size: var(--fu-fs-lg); }
}

/* Scheiding in een programmalijst: tussen wat gespeeld is en wat nog komt. */
.fu-fixtures__scheiding { display: flex; align-items: center; gap: var(--fu-space-3); padding-block: var(--fu-space-4) var(--fu-space-2); color: var(--fu-c-fg-sub); font-size: var(--fu-fs-xs); font-weight: 600; letter-spacing: var(--fu-track-label); text-transform: uppercase; }
.fu-fixtures[data-weergave="uitslagen"] [data-soort="nog"],
.fu-fixtures[data-weergave="nog"] [data-soort="uitslag"],
.fu-fixtures:not([data-weergave="alles"]) [data-soort="scheiding"],
.fu-fixtures:not([data-weergave="uitslagen"]) [data-soort="leeg-uitslagen"],
.fu-fixtures:not([data-weergave="nog"]) [data-soort="leeg-nog"] { display: none; }
.fu-fixtures__scheiding::before, .fu-fixtures__scheiding::after { content: ""; flex: 1; border-top: var(--fu-lijn) solid var(--fu-c-line-strong); }
.fu-fixtures__scheiding::before { flex: 0 0 var(--fu-space-6); }
.fu-fixtures__scheiding + .fu-fixture { border-top: 0; }