/*
 * Fortuna UI — fu-front: rubriekpagina met één groot bericht, kaarten ernaast en daaronder twee lijsten.
 * Was op de stijlpagina `sp-front` (proef Wedstrijden, ronde 8: "ziet er goed uit").
 *
 *   <div class="fu-front"><article class="fu-card fu-card--lead">…</article><div class="fu-front__side">…kaarten…</div></div>
 *   <div class="fu-front__onder"><div class="fu-front__more"><div class="fu-cardlist">…</div><div class="fu-cardlist">…</div></div></div>
 */
.fu-front { display: grid; gap: var(--fu-space-8); }
.fu-front__side { display: grid; gap: var(--fu-space-6); align-content: start; }
.fu-front__more { display: grid; gap: var(--fu-space-8); }
.fu-front__onder { margin-top: var(--fu-space-10); }

@media (min-width: 720px) {
	.fu-front__side { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
	.fu-front { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--fu-space-10); }
	.fu-front .fu-card--lead .fu-card__media { aspect-ratio: 5 / 4; }
	.fu-front__side { grid-template-columns: 1fr; }
	.fu-front__more { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fu-space-10); } /* Overzichten: twee even brede kolommen (feedback Patrick 08-10). */
}

/* Rijkaarten in twee even brede kolommen, rij voor rij (1 links, 2 rechts, 3 links …); op een telefoon één kolom.
   Feedback Patrick 08-10: een lijst moet op volgorde lezen, ook van links naar rechts. */
@media (min-width: 1024px) {
	.fu-cardlist--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fu-space-10); }
	.fu-cardlist--twee > .fu-card--row:nth-child(2) { border-top: 0; padding-top: 0; }
}

/* Laatste drie duels bovenaan het programma: ruimte tot de pillen en tot de lijst eronder. */
.fu-front--programma { margin-top: var(--fu-space-8); margin-bottom: var(--fu-space-8); }