/**
 * carousel.css
 * Herbruikbare, afhankelijkheidsvrije horizontale slider (.fleur-carousel).
 * Gebruikt op "Speciale momenten" voor de categorie-tegels (zijpijlen) en het
 * Sinterklaas-productblok (pijlen rechtsboven). JS: assets/js/blocks/carousel.js.
 *
 * Wordt automatisch ingeladen via de assets/css/*.css-glob in functions.php.
 *
 * @package FleurChild
 */

.fleur-carousel {
	--per-view: 4;
	--gap: 22px;
	position: relative;
}

/* Viewport: klipt de track (die via translateX wordt verschoven — infinity). */
.fleur-carousel__viewport {
	overflow: hidden;
}

.fleur-carousel__track {
	display: flex;
	gap: var(--gap);
	margin: 0;
	padding: 0;
	list-style: none;
	will-change: transform;
}
.fleur-carousel__track > * {
	flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
	max-width: calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
}

/* ---- Navigatieknoppen (42×41, radius 5px, zachtroze met aubergine chevron) --- */
.fleur-carousel__nav {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 41px;
	padding: 0;
	border: 0;
	border-radius: 5px;
	background: var(--fleur-pink-soft);
	color: var(--fleur-cream); /* crème caret (Figma 520:4004) */
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}
.fleur-carousel__nav:hover {
	background: var(--fleur-pink);
	color: #fff;
}
.fleur-carousel__nav:disabled {
	opacity: .4;
	cursor: default;
}
.fleur-carousel__nav:disabled:hover {
	background: var(--fleur-pink-soft);
	color: var(--fleur-cream);
}
/* Chevron = de design-caret (Figma down-arrow), geroteerd per richting.
   Grootte ~24px zoals in het design (icoon 26×27 in een 42×41 knop). */
.fleur-carousel__nav svg {
	width: 24px;
	height: 24px;
	display: block;
}
.fleur-carousel__nav--prev svg { transform: rotate(90deg); }
.fleur-carousel__nav--next svg { transform: rotate(-90deg); }

/* ---- Variant: pijlen flankeren de rij (verticaal gecentreerd) ------------- */
.fleur-carousel--sides .fleur-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}
.fleur-carousel--sides .fleur-carousel__nav--prev { left: -12px; }
.fleur-carousel--sides .fleur-carousel__nav--next { right: -12px; }

/* ---- Variant: pijlen in een koprij (rechtsboven, naast de titel) ---------- */
.fleur-carousel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
}
.fleur-carousel__nav-group {
	display: flex;
	gap: 10px;
	flex: none;
}
.fleur-carousel__header .fleur-carousel__nav { position: static; transform: none; }

/* Als er niets te scrollen valt: pijlen tonen zich rustig (geen hover-nadruk). */

@media (max-width: 1024px) {
	.fleur-carousel { --per-view: 3; }
}
@media (max-width: 768px) {
	.fleur-carousel { --per-view: 2; }
	.fleur-carousel--sides .fleur-carousel__nav--prev { left: -6px; }
	.fleur-carousel--sides .fleur-carousel__nav--next { right: -6px; }
}
@media (max-width: 560px) {
	.fleur-carousel { --per-view: 1.35; }
}