/**
 * Altus — categoriebanner met subcategorieën bovenaan een archiefpagina.
 *
 * De banner zelf is een gewoon Bricks-element in het archiefsjabloon (container
 * "Categoriebanner" met een Terms-lus over de subcategorieën): inhoud, volgorde
 * en aantal pas je aan in de Bricks-builder. Dit bestand regelt enkel de opmaak
 * via de klassen .altus-cat-banner / .altus-cat-tegel; de pijltjes komen uit
 * altus-categorie-banner.js. Vaste px (html staat op 10px).
 *
 * Alle tegels zijn exact even breed en even hoog (ook zonder afbeelding of met
 * een korte/lange naam), en schuiven in één rij.
 */

.altus-cat-banner-wrap {
	position: relative;
	width: 100%;
	max-width: 1160px;
	margin: 36px auto 4px;
	box-sizing: border-box;
}

.altus-cat-banner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 16px;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 auto !important;
	/* Ruimte rond de tegels, zodat rand en schaduw bij het schuiven niet worden afgesneden. */
	padding: 6px 4px 12px !important;
	box-sizing: border-box;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.altus-cat-banner::-webkit-scrollbar {
	display: none;
}

/* Zonder wrapper (bv. vóór het script laadt) en zonder subcategorieën: niets tonen. */
.altus-cat-banner:not(:has(.altus-cat-tegel)) {
	display: none !important;
}

.altus-cat-banner-wrap:not(:has(.altus-cat-tegel)) {
	display: none;
}

.altus-cat-tegel {
	flex: 0 0 200px !important;
	width: 200px !important;
	height: 236px !important;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
	padding: 20px 16px !important;
	background: #fff;
	border: 1px solid #e2e6ec;
	border-radius: 12px;
	text-decoration: none;
	text-align: center;
	box-sizing: border-box;
	scroll-snap-align: start;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.altus-cat-tegel:hover {
	border-color: var(--altus-oranje, #ff6a00);
	box-shadow: 0 4px 14px rgba(34, 58, 128, 0.12);
	transform: translateY(-2px);
}

/* Vast afbeeldingsvlak; heeft een categorie geen afbeelding, dan blijft dat vlak leeg. */
.altus-cat-tegel__img {
	flex: 0 0 112px;
	width: 100%;
	height: 112px;
	object-fit: contain;
	margin: 0;
}

.altus-cat-tegel:not(:has(img))::before {
	content: "";
	flex: 0 0 112px;
	display: block;
}

.altus-cat-tegel__naam {
	margin: 0 !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--altus-navy, #223a80) !important;
	/* Naam krijgt altijd 2 regels ruimte, langere namen worden netjes afgekapt. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
}

.altus-cat-tegel:hover .altus-cat-tegel__naam {
	color: var(--altus-oranje, #ff6a00) !important;
}

/* Pijltjes — enkel zichtbaar als er iets te schuiven valt (script haalt [hidden] weg). */
.altus-cat-banner__pijl {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid #e2e6ec;
	border-radius: 50%;
	background: #fff;
	color: var(--altus-navy, #223a80);
	box-shadow: 0 2px 8px rgba(34, 58, 128, 0.18);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.altus-cat-banner__pijl[hidden] {
	display: none;
}

.altus-cat-banner__pijl:hover {
	background: var(--altus-navy, #223a80);
	color: #fff;
}

.altus-cat-banner__pijl--vorige {
	left: -52px;
}

.altus-cat-banner__pijl--volgende {
	right: -52px;
}

/* Te smal voor pijltjes naast de banner: ze komen dan over de rand van de tegels. */
@media (max-width: 1260px) {
	.altus-cat-banner__pijl--vorige {
		left: 4px;
	}

	.altus-cat-banner__pijl--volgende {
		right: 4px;
	}
}

@media (max-width: 767px) {
	.altus-cat-banner-wrap {
		margin-top: 20px;
	}

	.altus-cat-banner {
		padding: 6px 16px 12px !important;
		gap: 12px;
		scroll-padding-left: 16px;
	}

	.altus-cat-tegel {
		flex-basis: 170px !important;
		width: 170px !important;
		height: 216px !important;
	}

	.altus-cat-tegel__img,
	.altus-cat-tegel:not(:has(img))::before {
		flex-basis: 96px;
		height: 96px;
	}

	/* Op telefoon: vingerzwiepen, geen pijltjes. */
	.altus-cat-banner__pijl {
		display: none !important;
	}
}