/**
 * Categorietegels als carrousel — homepage en de subcategorieën op een categoriepagina.
 *
 * Vervangt het grid uit style.css (daar staat `.cc-cattiles { display: grid }` met
 * kolomregels op 900px en 520px). Die regels doen niets meer zodra hier `display: flex`
 * geldt, maar ze blijven staan als terugval mocht dit bestand niet laden.
 *
 * Zes tegels in beeld op desktop, vier op tablet, op mobiel twee-en-een-beetje zodat
 * zichtbaar is dat er meer naast staat. Vegen is native scrollen; de knoppen zijn
 * alleen een hulpmiddel en worden door cattiles.js zichtbaar gemaakt.
 */

.cc-cattiles-carrousel {
	position: relative;
	margin-top: 2rem;
}

.cc-cattiles-carrousel .cc-cattiles {
	display: flex;
	gap: 1.25rem;
	margin-top: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Ruimte onder de rij, zodat een focusrand niet wordt afgeknipt. */
	padding-bottom: 0.25rem;
}

.cc-cattiles-carrousel .cc-cattiles::-webkit-scrollbar {
	display: none;
}

.cc-cattiles-carrousel .cc-cattile {
	flex: 0 0 calc( ( 100% - 5 * 1.25rem ) / 6 );
	scroll-snap-align: start;
}

/* Knoppen: alleen op muisaanwijzers, en pas als er iets te schuiven valt (zie cattiles.js). */
.cc-cattiles-knop {
	position: absolute;
	top: calc( 50% - 1.5rem );
	transform: translateY( -50% );
	z-index: 2;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var( --wp--preset--color--surface-alt, #e7e3df );
	border-radius: 50%;
	background: #fff;
	color: var( --wp--preset--color--contrast, #1c1c1c );
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.12 );
	transition: background 0.2s ease, color 0.2s ease;
}

.cc-cattiles-knop:hover {
	background: var( --wp--preset--color--terracotta, #c4552f );
	color: #fff;
}

.cc-cattiles-knop--vorige { left: -1.25rem; }
.cc-cattiles-knop--volgende { right: -1.25rem; }

@media ( hover: none ) {
	/* Op touch is vegen natuurlijker; de knoppen zouden alleen tegels afdekken. */
	.cc-cattiles-knop { display: none; }
}

@media ( max-width: 900px ) {
	.cc-cattiles-carrousel .cc-cattile { flex-basis: calc( ( 100% - 3 * 1.25rem ) / 4 ); }
	/*
	 * Knoppen weg op tablet en mobiel. Niet op `hover: none` vertrouwen: hybride apparaten
	 * (en een smal bureaubladvenster) melden gewoon een muisaanwijzer, en dan staken de
	 * knoppen half buiten beeld omdat ze net buiten de rij hangen.
	 */
	.cc-cattiles-knop { display: none; }
}

@media ( max-width: 520px ) {
	.cc-cattiles-carrousel .cc-cattiles { gap: 0.9rem; }
	/* 2,2 tegels in beeld: het randje van de derde laat zien dat er meer is. */
	.cc-cattiles-carrousel .cc-cattile { flex-basis: calc( ( 100% - 2 * 0.9rem ) / 2.2 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.cc-cattiles-carrousel .cc-cattiles { scroll-behavior: auto; }
}

/*
 * Snappen houdt geen rekening met de zijmarge van de rij: bij het laden schoof de rij zichzelf
 * 16px op en stond de eerste tegel tegen de schermrand, terwijl de kop erboven wél inspringt.
 * scroll-padding neemt die marge mee. Alleen aan de linkerkant: rechts mag de volgende tegel
 * juist tegen de rand aanlopen, zodat te zien is dat er meer staat.
 * De marge zelf staat in style.css, op .cc-home .cc-catsection .cc-cattiles (alleen onder 782px).
 */
@media ( max-width: 781px ) {
	.cc-home .cc-catsection .cc-cattiles { scroll-padding-left: 1rem; }
}