/**
 * Populaire categorieën (seizoens-etalage): tegel-grid.
 *
 * De hele pool staat in de HTML; zonder JS tonen de eerste 3 of 4 tegels
 * (nth-child-vangnet), met JS kiest pop-categorien.js een random selectie en
 * krijgt de container de klasse pwc-popcat--js.
 */

.pwc-popcat {
	max-width: 100%;
}

.pwc-popcat__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	max-width: 100%;
}

.pwc-popcat--3 .pwc-popcat__grid {
	grid-template-columns: repeat(3, 1fr);
}

/* Vangnet zonder JS: alleen de eerste N tegels tonen. */
.pwc-popcat--3 .pwc-popcat__tegel:nth-child(n + 4),
.pwc-popcat--4 .pwc-popcat__tegel:nth-child(n + 5) {
	display: none;
}

/* Met JS bepaalt de random selectie wat zichtbaar is. */
.pwc-popcat--js .pwc-popcat__tegel {
	display: none !important;
}

.pwc-popcat--js .pwc-popcat__tegel.pwc-popcat__tegel--zichtbaar {
	display: block !important;
}

.pwc-popcat__tegel {
	display: block;
	max-width: 100%;
	text-decoration: none;
	color: inherit;
}

.pwc-popcat__beeld {
	display: block;
	overflow: hidden;
	border-radius: 8px;
	aspect-ratio: 1 / 1;
	background: rgba(0, 0, 0, 0.04);
}

.pwc-popcat__afbeelding {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	max-width: 100%;
	transition: transform 0.2s ease;
}

.pwc-popcat__naam {
	display: block;
	margin-top: 8px;
	text-align: center;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.pwc-popcat__tegel:hover .pwc-popcat__afbeelding,
.pwc-popcat__tegel:focus-visible .pwc-popcat__afbeelding {
	transform: scale(1.05);
}

.pwc-popcat__tegel:hover .pwc-popcat__naam,
.pwc-popcat__tegel:focus-visible .pwc-popcat__naam {
	text-decoration: underline;
}

.pwc-popcat__tegel:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 8px;
}

/* Mobiel: twee kolommen, nooit breder dan het scherm (wrap-les 2026-08-04). */
@media (max-width: 600px) {
	.pwc-popcat__grid,
	.pwc-popcat--3 .pwc-popcat__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}