/*
 * Fortuna UI — rubriektegels: een rij foto's met naam eronder (zoals de productrij in de Apple Store).
 * Op de telefoon schuift de rij opzij; op desktop past hij op één regel.
 *   <ul class="fu-tiles"><li><a class="fu-tile" href="…"><span class="fu-tile__media"><img …></span><span class="fu-tile__label">Wedstrijden</span></a></li>…</ul>
 */
.fu-tiles {
	display: grid;
	grid-auto-columns: minmax(var(--fu-tegel-min), 1fr); /* telefoon: 3,5 tegel zichtbaar, dus je ziet dat er meer is */
	grid-auto-flow: column;
	gap: var(--fu-space-4);
	margin: 0;
	padding: 0 0 var(--fu-space-1);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.fu-tiles::-webkit-scrollbar { display: none; }
.fu-tiles > li { scroll-snap-align: start; }

.fu-tile {
	display: grid;
	justify-items: center;
	gap: var(--fu-space-2-5);
	color: var(--fu-c-fg);
	text-decoration: none;
}

.fu-tile__media {
	width: 100%;
	max-width: var(--fu-tegel-max);
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--fu-r-md);
	background: var(--fu-c-bg-sub);
}

.fu-tile__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--fu-beweging-beeld);
}

.fu-tile:hover .fu-tile__media img { transform: scale(1.06); }
.fu-tile__label { font: 600 var(--fu-fs-sm) / 1.25 var(--fu-font-text); text-align: center; }
.fu-tile:focus-visible { outline: none; }
.fu-tile:focus-visible .fu-tile__media { outline: var(--fu-focus-breedte) solid var(--fu-c-focus); outline-offset: var(--fu-focus-afstand); }

@media (prefers-reduced-motion: reduce) {
	.fu-tile:hover .fu-tile__media img { transform: none; }
}