/**
 * Paginatie en overzichtsmeldingen voor het pandenoverzicht.
 *
 * Kleuren komen uit variabelen, zodat ze in één regel aan de huisstijl
 * aangepast kunnen worden zonder de rest van dit bestand aan te raken.
 */

.aw-listing {
	--vmb-accent: var(--contrast, #1e2a3a);
	--vmb-border: rgba(0, 0, 0, 0.14);
	--vmb-muted: rgba(0, 0, 0, 0.6);
	--vmb-hover: rgba(0, 0, 0, 0.05);
}

/* Tegelafbeelding

   De afbeelding krijgt nu width- en height-attributen mee (nodig om de browser
   vooraf de juiste ruimte te laten reserveren, zodat de pagina niet verspringt
   tijdens het laden). Deze regel zorgt dat die getallen de weergave niet
   veranderen: de foto blijft de tegel vullen op de hoogte die erbij hoort. */

.aw-listing .aw-image-container img {
	display: block;
	width: 100%;
	height: auto;
}

/* Resultaatteller */

.vmb-listing-count {
	margin: 0 0 1.25em;
	color: var(--vmb-muted);
	font-size: 0.9em;
}

/* Lege staat */

.vmb-listing-empty {
	margin: 2em 0;
	padding: 1.5em;
	border: 1px solid var(--vmb-border);
	border-radius: 6px;
	text-align: center;
	color: var(--vmb-muted);
}

/* Paginatie */

.vmb-pagination {
	margin: 2.5em 0 0;
}

.vmb-pagination__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vmb-pagination__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vmb-pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75em;
	height: 2.75em;
	padding: 0 0.75em;
	border: 1px solid var(--vmb-border);
	border-radius: 6px;
	color: inherit;
	font-size: 0.95em;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.vmb-pagination a.page-numbers:hover,
.vmb-pagination a.page-numbers:focus {
	background-color: var(--vmb-hover);
	border-color: var(--vmb-accent);
}

.vmb-pagination a.page-numbers:focus-visible {
	outline: 2px solid var(--vmb-accent);
	outline-offset: 2px;
}

.vmb-pagination .page-numbers.current {
	background-color: var(--vmb-accent);
	border-color: var(--vmb-accent);
	color: #fff;
	font-weight: 600;
}

.vmb-pagination .page-numbers.dots {
	min-width: auto;
	padding: 0 0.25em;
	border-color: transparent;
	color: var(--vmb-muted);
}

.vmb-pagination .prev,
.vmb-pagination .next {
	font-weight: 500;
}

/* Op smalle schermen alleen vorige/volgende en het actieve nummer tonen,
   zodat de rij niet over meerdere regels breekt. */

@media (max-width: 480px) {
	.vmb-pagination .page-numbers:not(.current):not(.prev):not(.next):not(.dots) {
		display: none;
	}
}