/*
 * 02, categorieblok: foto boven, naam eronder, op een rij.
 *
 * De maten komen van het blok dat er nu handmatig staat: vijf kolommen met
 * 20 pixels ertussen, 10 pixels tussen de foto en de naam, en de naam op
 * 19 pixels. Het lettertype en de kleur van de kop komen uit Elementor zelf,
 * want dat is een gewone h2.
 */

.swipe-categorieen {
	display: grid;
	grid-template-columns: repeat(var(--swipe-cat-kolommen, 5), 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.swipe-categorie {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-decoration: none;
	color: inherit;
}

/*
 * De verhouding staat vast op 3:4, net als bij de productkaart. De
 * categoriefoto's zijn 480 bij 640, dus die passen precies. Een foto met een
 * andere verhouding wordt bijgesneden en niet uitgerekt, zodat de rij hoe dan
 * ook recht blijft.
 */
.swipe-categorie__beeld {
	display: block;
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--swipe-vlak, #f4f2ed);
}

.swipe-categorie__foto {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.swipe-categorie:hover .swipe-categorie__foto,
.swipe-categorie:focus-visible .swipe-categorie__foto {
	transform: scale(1.03);
}

.swipe-categorie__naam {
	margin: 0;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.3;
}

/*
 * Smallere schermen. Elementor sprong hier van vijf kolommen ineens naar
 * één, dus op een telefoon werd elke foto beeldvullend en moest je vijf keer
 * scrollen voor vijf categorieën. Het gaat nu via drie naar twee.
 *
 * Het aantal komt uit de shortcode, ook hier: vraag je er drie, dan blijven
 * het er drie en worden het er geen vijf.
 */
@media (max-width: 1024px) {
	.swipe-categorieen {
		grid-template-columns: repeat(var(--swipe-cat-kolommen-tablet, 3), 1fr);
	}
}

@media (max-width: 600px) {
	.swipe-categorieen {
		grid-template-columns: repeat(var(--swipe-cat-kolommen-mobiel, 2), 1fr);
		gap: 14px;
	}

	.swipe-categorie__naam {
		font-size: 17px;
	}
}