/*
 * Fortuna UI — schap: een rij kaarten die je opzij schuift, met twee ronde pijlknoppen (zoals de Apple Store).
 * Rustiger dan de carrousel: geen afspelen, geen puntjes. Gedrag: assets/js/shelf.js.
 *   <div class="fu-shelf" data-fu-shelf> <div class="fu-shelf__track"> <article class="fu-shelf__item">…</article> … </div> </div>
 */
.fu-shelf { position: relative; }

.fu-shelf__track {
	display: grid;
	grid-auto-columns: min(78%, var(--fu-schap-tegel));
	grid-auto-flow: column;
	gap: var(--fu-space-4);
	padding-inline: var(--fu-gutter);
	padding-bottom: var(--fu-space-1);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--fu-gutter);
	scrollbar-width: none;
}

.fu-shelf__track::-webkit-scrollbar { display: none; }

@media (min-width: 1024px) {
	.fu-shelf__track { padding-inline: max(var(--fu-gutter), calc((100% - var(--fu-container)) / 2)); scroll-padding-inline: max(var(--fu-gutter), calc((100% - var(--fu-container)) / 2)); }
}

.fu-shelf__item {
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr;
	min-width: 0;
	min-height: var(--fu-schap-hoogte);
	overflow: hidden;
	border-radius: var(--fu-r-lg);
	background: var(--fu-c-surface);
	scroll-snap-align: start;
	transition: box-shadow var(--fu-beweging-paneel), transform var(--fu-beweging-paneel);
}

.fu-shelf__item:hover { box-shadow: var(--fu-shadow-md); transform: translateY(calc(var(--fu-beweeg-xs) * -1)); }
.fu-shelf__body { display: grid; align-content: start; gap: var(--fu-ritme-tekst); padding: var(--fu-space-6) var(--fu-space-6) var(--fu-space-4); }
.fu-shelf__kicker { color: var(--fu-c-link); font: 600 var(--fu-fs-xs) / 1.2 var(--fu-font-text); letter-spacing: var(--fu-track-label); text-transform: uppercase; }
.fu-shelf__title { margin: 0; color: var(--fu-c-kop, var(--fu-c-fg)); font-family: var(--fu-font-display); font-size: var(--fu-fs-lg); font-weight: var(--fu-display-weight); letter-spacing: -0.015em; line-height: var(--fu-lh-snug); text-wrap: balance; }
.fu-shelf__title a { color: inherit; text-decoration: none; }
.fu-shelf__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--fu-r-lg); }
.fu-shelf__title a:focus-visible { outline: none; }
.fu-shelf__title a:focus-visible::after { outline: var(--fu-focus-breedte) solid var(--fu-c-focus); outline-offset: calc(var(--fu-focus-afstand) * -1); }
.fu-shelf__meta { margin: 0; color: var(--fu-c-fg-sub); font: 400 var(--fu-fs-sm) / 1.4 var(--fu-font-text); }
.fu-shelf__media { position: relative; align-self: end; overflow: hidden; aspect-ratio: 4 / 3; }
/* Watermerkbehandeling zoals kaartfoto's (card.css). */
.fu-shelf__media img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--fu-foto-zoom)); transform-origin: 100% 0; }
.fu-shelf__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--fu-foto-schaduw); }

/* Donkergroene kaart: één per schap, als opener. */
.fu-shelf__item--brand { --fu-c-kop: var(--fu-c-on-brand); background: var(--fu-c-brand); color: var(--fu-c-on-brand); --fu-c-link: var(--fu-c-accent); --fu-c-fg-sub: var(--fu-op-donker-tekst-sub); }

/* Pijlknoppen: rechtsboven, rustig grijs. */
.fu-shelf__nav { display: none; gap: var(--fu-space-2); }

.fu-shelf__btn {
	display: grid;
	place-items: center;
	width: var(--fu-control-s);
	height: var(--fu-control-s);
	padding: 0;
	border: 0;
	border-radius: var(--fu-r-pill);
	background: var(--fu-hover-zacht);
	color: var(--fu-c-fg);
	cursor: pointer;
	transition: background-color var(--fu-beweging-hover), opacity var(--fu-beweging-hover);
}

.fu-shelf__btn:hover { background: var(--fu-hover); }
.fu-shelf__btn:disabled { opacity: 0.35; cursor: default; }
.fu-shelf__btn:focus-visible { outline: var(--fu-focus-breedte) solid var(--fu-c-focus); outline-offset: var(--fu-focus-afstand-klein); }
.fu-shelf__btn .fu-icon { width: var(--fu-icoon-s); height: var(--fu-icoon-s); }

@media (hover: hover) and (pointer: fine) {
	.fu-shelf__nav { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
	.fu-shelf__item, .fu-shelf__item:hover { transform: none; transition: none; }
}