/* Alletop10 Hubs: hub- en reekspagina's. Design: Alletop10 Krantenkop. */

.a10l-hub {
	background: #ffffff;
	color: var(--a10l-ink);
	font-family: "Libre Franklin", system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	padding-bottom: 56px;
}
.a10l-hub *,
.a10l-hub *::before,
.a10l-hub *::after { box-sizing: border-box; }
.a10l-hub a { color: inherit; text-decoration: none; }

/* Kop van de hub: wit, afgesloten met een groene lijn */
.a10l-hero {
	padding: 28px 0 0;
}
.a10l-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
	gap: 32px;
	align-items: end;
	padding-bottom: 22px;
	border-bottom: 3px solid var(--a10l-accent);
}
.a10l-hero__title {
	margin: 0;
	font-size: clamp(34px, 4.6vw, 56px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: var(--a10l-ink);
}
.a10l-hero__meta {
	margin: 8px 0 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--a10l-muted);
}
.a10l-hero__intro {
	margin: 12px 0 0;
	max-width: 62ch;
	font-size: 18px;
	line-height: 1.55;
	color: var(--a10l-muted);
}
.a10l-hero__img {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 2px;
	background: var(--a10l-surface);
}
.a10l-hero__img img { display: block; width: 100%; height: 100%; object-fit: cover; }

.a10l-hub--compact .a10l-hero__grid,
.a10l-hero__grid--text { grid-template-columns: 1fr; }
.a10l-hub--compact .a10l-hero__title { font-size: clamp(28px, 3.6vw, 40px); }

/* Subrubrieken: tekstlinks op een rij */
.a10l-subs {
	margin-top: 0;
	padding-block: 12px;
	border-bottom: 1px solid var(--a10l-line);
}
/* Rubriekbalk (hubs): titel en aantal links, subrubrieken rechts, groene lijn eronder */
.a10l-bar__grid {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 40px;
	padding-bottom: 18px;
	border-bottom: 3px solid var(--a10l-accent);
}
.a10l-bar .a10l-hero__text { flex: none; }
.a10l-bar .a10l-subs {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 0 6px;
	border: 0;
}
.a10l-bar .a10l-subs > ul { justify-content: flex-end; }
.a10l-bar .a10l-subs__panel { left: auto; right: 0; }

/* Korte tekst over de hub onderaan pagina 1, over de volle breedte in twee kolommen */
.a10l-about {
	margin-top: 48px;
	padding-top: 18px;
	border-top: 1px solid var(--a10l-line);
	columns: 2;
	column-gap: 40px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--a10l-muted);
}
.a10l-about p { margin: 0 0 12px; }
.a10l-about a {
	color: var(--a10l-accent-deep);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.a10l-about a:hover { color: var(--a10l-ink); }

/* Auteurpagina */
.a10l-author__head {
	padding-bottom: 22px;
	border-bottom: 3px solid var(--a10l-accent);
}
.a10l-author__id {
	display: flex;
	align-items: center;
	gap: 18px;
}
.a10l-author__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 72px;
	height: 72px;
	border-radius: 999px;
	background: var(--a10l-ink);
	color: var(--a10l-accent);
	font-size: 32px;
	font-weight: 800;
	line-height: 1;
}
.a10l-author__id .a10l-hero__meta { margin-top: 4px; }
.a10l-author__bio {
	margin: 16px 0 0;
	max-width: 70ch;
	font-size: 17px;
	line-height: 1.6;
	color: var(--a10l-muted);
}
@media (max-width: 719px) {
	.a10l-author__badge { width: 56px; height: 56px; font-size: 24px; }
	.a10l-author__bio { font-size: 16px; }
}

/* 404-pagina */
.a10l-404__head {
	padding-bottom: 24px;
	border-bottom: 3px solid var(--a10l-accent);
}
.a10l-404__lead {
	margin: 10px 0 0;
	max-width: 62ch;
	font-size: 17px;
	color: var(--a10l-muted);
}
.a10l-404__search {
	display: flex;
	gap: 8px;
	max-width: 560px;
	margin-top: 18px;
}
.a10l-404__search input {
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--a10l-line);
	border-radius: 2px;
	font: inherit;
	font-size: 16px;
	color: var(--a10l-ink);
	background: #ffffff;
}
.a10l-404__search input:focus { outline: 2px solid var(--a10l-accent); outline-offset: 0; border-color: var(--a10l-accent); }
.a10l-404__search button {
	flex: none;
	height: 46px;
	padding: 0 20px;
	border: 0;
	border-radius: 2px;
	background: var(--a10l-ink);
	color: #ffffff;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}
.a10l-404__search button:hover { background: var(--a10l-accent-deep); }
.a10l-404__hubs ul {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.a10l-404__hubs li { border-bottom: 1px solid var(--a10l-line); }
.a10l-404__hubs a {
	display: block;
	padding: 10px 0;
	font-size: 15px;
	font-weight: 650;
	color: var(--a10l-ink);
}
.a10l-404__hubs a:hover { color: var(--a10l-accent-deep); }
.a10l-404 .a10l-h2 { margin-bottom: 8px; }
@media (max-width: 1023px) { .a10l-404__hubs ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Scheidingslijn na elk item, zodat een nieuwe regel nooit met een lijn begint. */
.a10l-section.a10l-subs { margin-top: 0; }
.a10l-subs ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.a10l-subs li { display: flex; align-items: center; white-space: nowrap; }
.a10l-subs li:not(:last-child)::after {
	content: "";
	flex: none;
	width: 1px;
	height: 14px;
	margin-inline: 14px;
	background: var(--a10l-line);
}
.a10l-subs a {
	font-size: 15px;
	font-weight: 650;
	color: var(--a10l-ink);
}
.a10l-subs a:hover { color: var(--a10l-accent-deep); }

/* Op desktop alleen de 6 grootste; de rest in een paneel achter "+N meer" */
.a10l-subs__extra { display: none !important; }
.a10l-subs__toggle { position: relative; }
.a10l-subs__toggle details { position: relative; }
.a10l-subs__toggle summary {
	list-style: none;
	cursor: pointer;
	font-size: 15px;
	font-weight: 650;
	color: var(--a10l-accent-deep);
}
.a10l-subs__toggle summary::-webkit-details-marker { display: none; }
.a10l-subs__toggle summary::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
}
.a10l-subs__toggle details[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.a10l-subs__panel {
	position: absolute;
	z-index: 20;
	top: calc(100% + 10px);
	left: 0;
	display: block !important;
	min-width: 280px;
	margin: 0 !important;
	padding: 8px 0 !important;
	background: #ffffff;
	border: 1px solid var(--a10l-line);
	border-top: 3px solid var(--a10l-accent);
	border-radius: 2px;
}
.a10l-subs__panel li { display: block; white-space: nowrap; }
.a10l-subs__panel li::after { display: none !important; }
.a10l-subs__panel a { display: block; padding: 7px 16px; }
.a10l-subs__panel a:hover { background: var(--a10l-surface); }
.a10l-subs span {
	font-weight: 400;
	color: var(--a10l-muted);
	font-size: 13px;
}

/* Secties */
.a10l-section { margin-top: 36px; }
.a10l-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 8px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--a10l-ink);
}
.a10l-h2 {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.a10l-h2 a:hover { color: var(--a10l-accent-deep); }

/* Raster als een krantenpagina: kolommen gescheiden door lijnen */
.a10l-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px 0;
}
.a10l-grid > .a10l-card {
	padding-inline: 12px;
	border-left: 1px solid var(--a10l-line);
}
.a10l-grid > .a10l-card:nth-child(4n + 1) { border-left: 0; padding-left: 0; }
.a10l-grid > .a10l-card:nth-child(4n) { padding-right: 0; }

/*
 * Groot eerste artikel op de eerste pagina van een hub (.a10l-grid--lead).
 * Rijen: [1 1 2 3] [1 1 4 5] [6 7 8 9] [10 11 12 13] ...; eerste kolom zonder lijn, laatste zonder rechterruimte.
 */
.a10l-grid--lead > .a10l-card:first-child {
	grid-column: span 2;
	grid-row: span 2;
	padding-left: 0;
	padding-right: 12px;
	border-left: 0;
}
.a10l-grid--lead > .a10l-card:first-child .a10l-card__title {
	font-size: 26px;
	line-height: 1.15;
}
.a10l-grid--lead > .a10l-card:nth-child(n + 2) { border-left: 1px solid var(--a10l-line); padding-inline: 12px; }
.a10l-grid--lead > .a10l-card:nth-child(3),
.a10l-grid--lead > .a10l-card:nth-child(5),
.a10l-grid--lead > .a10l-card:nth-child(4n + 9) { padding-right: 0; }
.a10l-grid--lead > .a10l-card:nth-child(4n + 6) { border-left: 0; padding-left: 0; }

/* Artikelkaart */
.a10l-card__link { display: block; }
.a10l-card__img {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 2px;
	background: var(--a10l-surface);
}
.a10l-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.a10l-card__label {
	display: block;
	margin-top: 10px;
	font-size: 11px;
	font-weight: 750;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--a10l-accent-deep);
}
.a10l-card__title {
	margin: 4px 0 0;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.005em;
	color: var(--a10l-ink);
}
.a10l-card__img + .a10l-card__title { margin-top: 10px; }
.a10l-card__link:hover .a10l-card__title { color: var(--a10l-accent-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Bladeren */
.a10l-all.is-loading .a10l-results { opacity: 0.5; transition: opacity 0.2s; }
/* WordPress geeft de lijst zelf ook de klasse page-numbers; alleen de knoppen (a en span) stylen. */
.a10l-pages ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 36px 0 0;
	padding: 0;
	border: 0;
	list-style: none;
}
.a10l-pages li { margin: 0; }
.a10l-pages a.page-numbers,
.a10l-pages span.page-numbers {
	display: inline-block;
	min-width: 38px;
	padding: 7px 12px;
	border: 1px solid var(--a10l-line);
	border-radius: 2px;
	font-size: 15px;
	font-weight: 650;
	text-align: center;
	color: var(--a10l-ink);
}
.a10l-pages a.page-numbers:hover { border-color: var(--a10l-ink); }
.a10l-pages span.page-numbers.current {
	background: var(--a10l-ink);
	border-color: var(--a10l-ink);
	color: #ffffff;
}
.a10l-empty { color: var(--a10l-muted); }

/* Tablet en mobiel */
@media (max-width: 1023px) {
	.a10l-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.a10l-grid > .a10l-card:nth-child(n),
	.a10l-grid--lead > .a10l-card:nth-child(n) {
		padding-inline: 12px 0;
		border-left: 1px solid var(--a10l-line);
	}
	.a10l-grid > .a10l-card:nth-child(odd) { border-left: 0; padding-inline: 0 12px; }
	.a10l-grid--lead > .a10l-card:nth-child(n) { border-left: 1px solid var(--a10l-line); padding-inline: 12px 0; }
	.a10l-grid--lead > .a10l-card:nth-child(even) { border-left: 0; padding-inline: 0 12px; }
	.a10l-grid--lead > .a10l-card:first-child { grid-column: 1 / -1; grid-row: auto; padding-inline: 0; border-left: 0; }
	.a10l-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 240px); }
}
@media (max-width: 719px) {
	.a10l-hero { padding-top: 20px; }
	.a10l-hero__grid { grid-template-columns: 1fr; gap: 16px; }
	.a10l-hero__img { order: -1; }
	.a10l-hero__intro { font-size: 16px; }
	.a10l-grid { grid-template-columns: 1fr; gap: 0; }
	.a10l-grid > .a10l-card:nth-child(n),
	.a10l-grid--lead > .a10l-card:nth-child(n) {
		padding: 14px 0;
		border-left: 0;
		border-top: 1px solid var(--a10l-line);
	}
	.a10l-grid > .a10l-card:first-child { border-top: 0; padding-top: 0; }
	.a10l-grid > .a10l-card:not(:first-child) .a10l-card__link {
		display: grid;
		grid-template-columns: 112px minmax(0, 1fr);
		gap: 0 12px;
		align-items: start;
	}
	.a10l-grid > .a10l-card:not(:first-child) .a10l-card__img { grid-row: span 2; }
	.a10l-grid > .a10l-card:not(:first-child) .a10l-card__label,
	.a10l-grid > .a10l-card:not(:first-child) .a10l-card__title { margin-top: 0; }
	.a10l-grid--lead > .a10l-card:first-child .a10l-card__title { font-size: 22px; }
	/* Rubriekbalk onder elkaar: titel, dan de veegrij met subrubrieken */
	.a10l-bar__grid { display: block; padding-bottom: 0; }
	.a10l-bar .a10l-subs {
		margin-top: 14px;
		padding: 10px 0;
		border-top: 1px solid var(--a10l-line);
	}
	.a10l-bar .a10l-subs > ul { justify-content: flex-start; }
	.a10l-about { columns: 1; }

	/* Subrubrieken als een rij die je opzij veegt */
	.a10l-subs { padding-block: 10px; }
	.a10l-subs ul {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-inline: -16px;
		padding-inline: 16px;
	}
	.a10l-subs ul::-webkit-scrollbar { display: none; }
	/* Mobiel: alle subrubrieken in de veegrij, geen paneel */
	.a10l-subs__extra { display: flex !important; }
	.a10l-subs__toggle { display: none !important; }
	.a10l-subs li:has(+ .a10l-subs__toggle)::after { display: none; }
	.a10l-subs a { font-size: 14px; }
	.a10l-subs li:not(:last-child)::after { margin-inline: 10px; }
}

/*
 * Hubpagina in de stijl van de artikelen: getinte pagina, wit vel met groene lijn bovenaan,
 * lichtgroene band met kruimelpad, titel en rubrieken bovenin, de hubtekst als band onderin.
 */
.a10l-hub--cat { padding-top: 32px; background: #edf1ee; }
.a10l-sheet {
	padding: 0 40px 40px;
	background: #fff;
	border: 1px solid var(--a10l-line);
	border-top: 3px solid var(--a10l-accent);
	border-radius: 2px;
}
.a10l-hub--cat .a10l-hero {
	margin: 0 -40px 32px;
	padding: 28px 40px 24px;
	background: #e6f2eb;
	border-bottom: 1px solid var(--a10l-line);
}
.a10l-hub--cat .a10l-bar__grid { padding-bottom: 0; border-bottom: 0; }
.a10l-hub--cat .a10l-hero__title { font-size: clamp(34px, 4.2vw, 52px); }
/* Kruimelpad als klein grijs label, zonder homelink (zoals bij de artikelen) */
.a10l-hub--cat .a10l-crumbs {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 750;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--a10l-muted);
}
.a10l-hub--cat .a10l-crumbs > :nth-child(-n + 2) { display: none; }
/* Alleen de bovenliggende hub tonen ("GESCHIEDENIS" boven "Oorlog"); de pagina zelf staat er al als titel */
.a10l-hub--cat .a10l-crumbs > :nth-last-child(-n + 2) { display: none; }
.a10l-hub--cat .a10l-crumbs:not(:has(> :nth-child(5))) { display: none; }
.a10l-hub--cat .a10l-crumbs a { color: inherit; text-decoration: none; }
.a10l-hub--cat .a10l-crumbs a:hover { color: var(--a10l-accent-deep); text-decoration: underline; }
.a10l-hub--cat .a10l-section.a10l-all { margin-top: 0; }
.a10l-hub--cat .a10l-about {
	margin: 40px -40px -40px;
	padding: 28px 40px 32px;
	background: #e6f2eb;
	border-top: 1px solid var(--a10l-line);
	color: var(--a10l-ink);
}
@media (max-width: 1023px) {
	.a10l-sheet { padding: 0 28px 32px; }
	.a10l-hub--cat .a10l-hero { margin-inline: -28px; padding-inline: 28px; }
	.a10l-hub--cat .a10l-about { margin: 32px -28px -32px; padding-inline: 28px; }
}
@media (max-width: 719px) {
	.a10l-hub--cat { padding-top: 0; }
	/* Vel van rand tot rand op een telefoon */
	.a10l-sheet { margin-inline: -16px; padding: 0 16px 24px; border-inline: 0; border-radius: 0; }
	.a10l-hub--cat .a10l-hero { margin: 0 -16px 24px; padding: 20px 16px; }
	.a10l-hub--cat .a10l-about { margin: 32px -16px -24px; padding: 22px 16px 24px; }
}

/*
 * Pagina 1 van een hub in drie blokken: Uitgelicht (beeld), Top 10 meest gelezen (titels) en
 * compacte rijen. Zo is het geen muur van afbeeldingen meer.
 */
.a10l-block + .a10l-block { margin-top: 44px; }
/* Grote eerste kaart: de foto vult de hele hoogte van twee rijen, geen witruimte eronder */
.a10l-grid--feature > .a10l-card:first-child .a10l-card__link { display: flex; flex-direction: column; height: 100%; }
.a10l-grid--feature > .a10l-card:first-child .a10l-card__img { position: relative; flex: 1 1 auto; min-height: 240px; aspect-ratio: auto; }
/* Absoluut: een staande foto bepaalt anders zelf de hoogte en rekt het hele blok op */
.a10l-grid--feature > .a10l-card:first-child .a10l-card__img img { position: absolute; inset: 0; }

/* Top 10: 1 tot 5 links, 6 tot 10 rechts, groot groen nummer */
.a10l-top {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(5, auto);
	grid-auto-flow: column;
	gap: 0 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.a10l-top li { margin: 0; border-bottom: 1px solid var(--a10l-line); }
.a10l-top a { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
.a10l-top__num {
	flex: none;
	width: 1.5em;
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--a10l-accent-deep);
}
.a10l-top__text { min-width: 0; }
.a10l-top .a10l-card__label,
.a10l-row .a10l-card__label { margin: 0 0 2px; }
.a10l-top__title,
.a10l-row__title {
	display: block;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--a10l-ink);
}
.a10l-top a:hover .a10l-top__title,
.a10l-row__link:hover .a10l-row__title { color: var(--a10l-accent-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Compacte rijen: kleine foto, rubriek en titel, in twee kolommen */
.a10l-rows {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.a10l-row { margin: 0; border-bottom: 1px solid var(--a10l-line); }
.a10l-row__link { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 0; }
.a10l-row__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--a10l-surface); }
.a10l-row__img img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1023px) {
	/* Grote kaart staat hier over de volle breedte: gewone verhouding */
	.a10l-grid--feature > .a10l-card:first-child .a10l-card__img { flex: none; min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 719px) {
	.a10l-block + .a10l-block { margin-top: 32px; }
	.a10l-top,
	.a10l-rows { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
	.a10l-top__num { font-size: 30px; }
	.a10l-row__link { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
}

/*
 * Kop van de hub op één lijn: titel, aantal en rubrieken verticaal gecentreerd.
 * Rubrieken als witte chips met het aantal in een groen bolletje.
 */
.a10l-hub--cat .a10l-bar__grid { align-items: center; }
.a10l-hub--cat .a10l-hero__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.a10l-hub--cat .a10l-hero__text .a10l-crumbs { flex: 0 0 100%; }
.a10l-hub--cat .a10l-hero__meta { margin: 0; }
.a10l-hub--cat .a10l-bar .a10l-subs { padding: 0; }
.a10l-hub--cat .a10l-bar .a10l-subs > ul,
.a10l-hub--cat .a10l-subs--chips > ul { gap: 8px; }
.a10l-hub--cat .a10l-bar .a10l-subs > ul > li::after,
.a10l-hub--cat .a10l-subs--chips > ul > li::after { display: none; }
.a10l-hub--cat .a10l-subs--chips { padding: 0; border: 0; }
.a10l-hub--cat .a10l-subs--chips > ul > li > a { padding-right: 14px; }
.a10l-hub--cat .a10l-subs--chips > ul > li > a,
.a10l-hub--cat .a10l-bar .a10l-subs > ul > li > a,
.a10l-hub--cat .a10l-subs__toggle summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px 6px 14px;
	background: #fff;
	border: 1px solid var(--a10l-line);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--a10l-ink);
	transition: border-color 0.15s, color 0.15s;
}
.a10l-hub--cat .a10l-subs__toggle summary { padding-right: 14px; color: var(--a10l-accent-deep); }
.a10l-hub--cat .a10l-subs--chips > ul > li > a:hover,
.a10l-hub--cat .a10l-bar .a10l-subs > ul > li > a:hover,
.a10l-hub--cat .a10l-subs__toggle summary:hover { border-color: var(--a10l-accent-deep); color: var(--a10l-accent-deep); }
.a10l-hub--cat .a10l-bar .a10l-subs > ul > li > a > span {
	min-width: 22px;
	padding: 2px 7px;
	border-radius: 999px;
	background: #e6f2eb;
	font-size: 12px;
	font-weight: 750;
	line-height: 1.2;
	text-align: center;
	color: var(--a10l-accent-deep);
}
@media (max-width: 719px) {
	.a10l-hub--cat .a10l-hero__text { display: block; }
	.a10l-hub--cat .a10l-hero__meta { margin-top: 6px; }
	.a10l-hub--cat .a10l-bar .a10l-subs { margin-top: 16px; padding: 0; border-top: 0; }
}

/* Groepen op reekspagina's: ankerlinks uit de chips niet onder de vaste mobiele header laten vallen */
.a10l-block[id] { scroll-margin-top: 96px; }
/* Auteurpagina in de lichtgroene band */
.a10l-hub--cat .a10l-author__head { padding: 0; border-bottom: 0; }
.a10l-hub--cat .a10l-author__bio { margin-bottom: 0; }

/* Zoeken: groot zoekveld in de band */
.a10l-searchform { display: flex; gap: 8px; max-width: 640px; margin-top: 16px; }
.a10l-searchform input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	padding: 0 16px;
	background: #fff;
	border: 1px solid var(--a10l-line);
	border-radius: 2px;
	font: inherit;
	font-size: 17px;
	color: var(--a10l-ink);
}
.a10l-searchform input[type="search"]:focus { outline: 2px solid var(--a10l-accent); outline-offset: 0; border-color: var(--a10l-accent); }
.a10l-searchform button {
	flex: none;
	height: 48px;
	padding: 0 22px;
	background: var(--a10l-ink);
	border: 0;
	border-radius: 2px;
	font: inherit;
	font-size: 16px;
	font-weight: 750;
	color: #fff;
	cursor: pointer;
}
.a10l-searchform button:hover { background: var(--a10l-accent-deep); }
.a10l-search .a10l-hero__meta { margin-top: 12px; }

/* "Toon alle N over ..." onder een groep op reekspagina's */
.a10l-more > summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 8px 16px;
	background: #fff;
	border: 1px solid var(--a10l-line);
	border-radius: 999px;
	cursor: pointer;
	list-style: none;
	font-size: 14px;
	font-weight: 750;
	color: var(--a10l-accent-deep);
}
.a10l-more > summary::-webkit-details-marker { display: none; }
.a10l-more > summary::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}
.a10l-more > summary:hover { border-color: var(--a10l-accent-deep); }
.a10l-more[open] > summary { display: none; }

/*
 * Rubrieken in de band op desktop altijd op één regel (4 chips plus "+N meer"). Past het niet naast de
 * titel, dan schuift de hele rij onder de titel in plaats van eroverheen.
 */
@media (min-width: 720px) {
	.a10l-hub--cat .a10l-bar__grid { flex-wrap: wrap; }
	.a10l-hub--cat .a10l-bar .a10l-subs { flex: 0 0 auto; margin-left: auto; }
	.a10l-hub--cat .a10l-bar .a10l-subs > ul { flex-wrap: nowrap; }
}

/* Homepage: bovenin alleen een groot zoekveld, gecentreerd in de band */
.a10l-home .a10l-hero { padding-top: 32px; padding-bottom: 32px; }
.a10l-home .a10l-searchform { max-width: 720px; margin: 0 auto; }
.a10l-home .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.a10l-head__more { font-size: 14px; font-weight: 750; color: var(--a10l-accent-deep) !important; white-space: nowrap; }
.a10l-head__more:hover { text-decoration: underline; }

/* Rubrieken als fototegels: naam en aantal op de foto, de hele tegel linkt naar de hub */
.a10l-hubtiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
.a10l-hubtile {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 2px;
	background: var(--a10l-ink);
}
.a10l-hubtile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.a10l-hubtile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(21, 27, 23, 0.88) 0%, rgba(21, 27, 23, 0.35) 45%, rgba(21, 27, 23, 0) 70%);
}
.a10l-hubtile__text {
	position: absolute;
	z-index: 1;
	right: 14px;
	bottom: 12px;
	left: 14px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.a10l-hubtile__name { font-size: 20px; font-weight: 800; line-height: 1.15; color: #fff; }
.a10l-hubtile__count { font-size: 13px; font-weight: 650; color: var(--a10l-bar-ink); }
.a10l-hubtile:hover img { transform: scale(1.04); }
.a10l-hubtile:hover .a10l-hubtile__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.a10l-hubtile:focus-visible { outline: 3px solid var(--a10l-accent); outline-offset: 2px; }
@media (max-width: 1023px) {
	.a10l-hubtiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
	.a10l-home .a10l-hero { padding-top: 20px; padding-bottom: 20px; }
	.a10l-home .a10l-searchform button { padding: 0 16px; }
	.a10l-hubtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	/* Net verschenen op de homepage: ook het eerste lijstje als compacte rij, niet groot */
	.a10l-home .a10l-grid > .a10l-card:first-child .a10l-card__link {
		display: grid;
		grid-template-columns: 112px minmax(0, 1fr);
		gap: 0 12px;
		align-items: start;
	}
	.a10l-home .a10l-grid > .a10l-card:first-child .a10l-card__img { grid-row: span 2; }
	.a10l-home .a10l-grid > .a10l-card:first-child .a10l-card__label,
	.a10l-home .a10l-grid > .a10l-card:first-child .a10l-card__title { margin-top: 0; }
	.a10l-hubtile__name { font-size: 16px; }
	.a10l-hubtile__count { font-size: 12px; }
	.a10l-hubtile__text { right: 10px; bottom: 9px; left: 10px; }
}
}