/**
 * MD-act — Artikelraster, filters en paginering
 * ============================================
 * Hoort bij [mdact_artikeloverzicht] (met filter en paginanummers) en bij
 * [mdact_artikelgrid] (zonder filter, met een knop "Toon meer"), en bij
 * assets/js/mdact-overzicht.js.
 *
 * De kaart is nagemeten op het handgemaakte loop-kaartje van de kennispagina
 * (14 sep 2026, md-act.swipe-test2.nl/kennis-diensten, uitgelogd, 1440 px
 * breed, kolom van 1000 px). Wat daar gemeten is en hier terugkomt:
 *
 *   raster        drie kolommen, 30 px ertussen (tablet twee, telefoon een)
 *   kaart         313,3 x 439,1 px, geen randlijn en geen schaduw
 *   foto          150 px hoog, cover, bovenaan uitgelijnd, 20 px rond boven
 *   tekstvlak     wit, 20 px rondom, 20 px rond onder, vult de rest
 *   titel         15/18, gewicht 500, kleur #54595F
 *   titel > tekst 16 px
 *   samenvatting  13/22,5, gewicht 300, kleur #54595F
 *
 * Aangepast op 30 september: de pil staat linksboven in de foto, "Lees verder"
 * is weg en de hele kaart is een link (zie mdact_artikel_kaart()).
 *
 * Kleuren komen uit de variabelen van mdact-dienstblokken.css (:root), met een
 * hex als terugval voor het geval dat bestand niet geladen is.
 *
 * LET OP bij elke knop die hier bij komt: Hello Elementor zet in zijn eigen
 * reset.css een kleur op button, button:hover en button:focus. Die selector is
 * sterker dan een losse klasse, dus een knop slaat om naar roze zodra je hem
 * aanwijst. Daarom staat bij elke knop hieronder background, border en color
 * expliciet uitgeschreven voor hover, focus en active, met het element en de
 * klasse samen (button.mdact-filter, niet .mdact-filter).
 *
 * Over de focusring staat hier bewust niets: die is sitebreed geregeld in
 * style.css (donkergroen met een witte binnenring). Schrijf hier geen eigen
 * outline, dan krijgt dit blok een andere ring dan de rest van de site.
 */

/* De sectie heeft geen vaste hoogte: hij loopt mee met wat er na het filteren
   overblijft. */
.mdact-overzicht {
	scroll-margin-top: 100px;   /* de sprong vanaf de knop bovenaan de pagina
	                               komt niet onder een plakkende header uit */
}

/* ============================================================
   Het raster
   ============================================================ */

.mdact-artikelen {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 1fr;   /* alle rijen even hoog, zoals het loop-raster van
	                          Elementor dat ook doet: de kaart met de langste
	                          samenvatting bepaalt de maat van het hele raster */
	gap: 30px;
}

@media (max-width: 1024px) {
	.mdact-artikelen { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.mdact-artikelen { grid-template-columns: 1fr; }
}

/* Een weggefilterde of nog niet aan de beurt zijnde kaart. De kaart staat op
   display: flex, en dat wint van het hidden-attribuut. */
.mdact-artikelen .mdact-kaart[hidden] {
	display: none !important;
}

/* ============================================================
   De kaart
   ============================================================ */

.mdact-kaart {
	position: relative;   /* voor de kaartlink en de pil in de foto */
	display: flex;
	flex-direction: column;
	min-width: 0;
	border-radius: 20px;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Hetzelfde aanwijseffect als de kennistegels (mdact-kb-kennis.css). */
.mdact-kaart:hover,
.mdact-kaart:focus-within {
	box-shadow: 0 6px 18px rgba(30, 30, 26, 0.10);
	transform: translateY(-2px);
}

/*
 * LET OP bij alles hieronder: de Elementor-kit (post-7.css) wordt NA dit bestand
 * geladen en zet op .elementor-kit-7 h3, .elementor-kit-7 a en
 * .elementor-kit-7 button zijn eigen letters, kleuren en knopvorm. Dat is
 * specificiteit 0-1-1, dus een enkele klasse van ons verliest daarvan, ook al
 * staat er iets anders. Daarom staat overal de ouder erbij
 * (.mdact-kaart .mdact-kaart__titel, .mdact-paginering button.mdact-pagina):
 * twee klassen winnen. Geen !important, dat is de werkregel.
 *
 * Zonder dat gebeurde dit op de site (14 sep gemeten): titels werden 22 px in
 * plaats van 15, links werden het lichte groen van de kit, en de filterknop en
 * de paginanummers werden goudgele blokjes met een hoekradius van 6.
 */

/* De foto. Vaste hoogte zoals in het origineel, dus alle kaarten beginnen
   gelijk. */
.mdact-kaart .mdact-kaart__foto {
	display: block;
	height: 150px;
	border-radius: 20px 20px 0 0;
	background-color: var(--mdact-creme, #F5EFE6);   /* terwijl de foto laadt */
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}

.mdact-kaart .mdact-kaart__tekst {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: 20px;
	border-radius: 0 0 20px 20px;
	background: var(--mdact-wit, #FFFFFF);
}

/*
 * De pil staat linksboven in de foto als wit hoekje (Tim, 30 september): hij
 * volgt de ronding van de kaart linksboven (20), heeft rechtsonder dezelfde
 * ronding en de andere twee hoeken recht. Letter een maat kleiner en een
 * gewicht lichter dan de gewone pil. Hij ligt boven de kaartlink, zodat een
 * klik op de pil naar het thema gaat en niet naar het artikel.
 */
.mdact-kaart .mdact-pills {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: auto;
	max-width: calc(100% - 40px);
	margin: 0;
}

/* Donkergroen met witte letters (Tim, 30 september); bij aanwijzen het
   lichtere groen van de site, zodat hij groen blijft. Drie klassen plus a:
   anders wint de !important-kleur uit mdact-pills.css. */
.mdact-kaart .mdact-pills .mdact-pill {
	border-radius: 20px 0 20px 0;
	background-color: var(--mdact-donkergroen, #2C4A3E);
	color: var(--mdact-wit, #FFFFFF);
	font-size: 12px;
	font-weight: 300;
}

.mdact-kaart .mdact-pills a.mdact-pill {
	color: var(--mdact-wit, #FFFFFF) !important;
}

.mdact-kaart .mdact-pills a.mdact-pill:hover,
.mdact-kaart .mdact-pills a.mdact-pill:focus-visible {
	background-color: var(--mdact-groen, #4A7C6B);
}

/* De titel. De link erin spant met ::after over de hele kaart; hij houdt de
   letter en kleur van de titel, niet die van de Elementor-kit. */
.mdact-kaart .mdact-kaart__titel {
	margin: 0 0 16px;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 18px;
	color: var(--mdact-body, #54595F);
}

.mdact-kaart .mdact-kaart__link,
.mdact-kaart .mdact-kaart__link:hover,
.mdact-kaart .mdact-kaart__link:focus,
.mdact-kaart .mdact-kaart__link:active {
	font: inherit;
	color: inherit;
	text-decoration: none;
}

.mdact-kaart .mdact-kaart__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 20px;
}

.mdact-kaart .mdact-kaart__samenvatting {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 300;
	line-height: 22.5px;
	color: var(--mdact-body, #54595F);
}

/* ============================================================
   De filterbalk
   ============================================================ */

/*
 * De knop is zo breed als zijn eigen tekst en niet breder (Tim, 14 september).
 * De balk plakt dus links en loopt niet over de volle kolom. Twintig pixels
 * boven het raster.
 */
.mdact-overzicht__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 100%;
	margin-bottom: 20px;
}

/* Onder de 640 px staan de knoppen onder elkaar over de volle breedte, zodat er
   niets buiten het scherm steekt zodra er een tweede filtergroep bij komt.
   Gecontroleerd op 360 px. */
@media (max-width: 640px) {
	.mdact-overzicht__filters {
		display: grid;
		grid-auto-flow: row;
		width: 100%;
	}
}

/* min-width: 0 zodat een kolom mag krimpen, ook als er ooit een filter bij komt */
.mdact-overzicht__groep {
	position: relative;
	min-width: 0;
}

/* --- De opties, recht onder hun eigen knop ---
   Het paneel heeft links en rechts geen ruimte: een optie loopt van rand tot
   rand, zodat het vlakje bij het aanwijzen de hele breedte pakt. */
.mdact-overzicht__opties {
	position: absolute;
	z-index: 5;
	top: 100%;
	left: 0;
	display: flex;
	flex-direction: column;
	min-width: 100%;
	width: max-content;
	max-width: calc(100vw - 40px);   /* een lange themanaam duwt het paneel
	                                    anders het scherm uit */
	margin-top: 4px;
	padding: 8px 0;
	border-radius: 12px;
	overflow: hidden;   /* het hoverblokje blijft binnen de ronde hoeken */
	background: var(--mdact-wit, #FFFFFF);
	box-shadow: 0 12px 30px rgba(30, 30, 26, 0.14);
}

.mdact-overzicht__opties[hidden] {
	display: none !important;
}

/* --- De knop van een groep ---
   Donkergroen, in elke toestand dezelfde kleur. Hij sloeg anders om zodra de
   muis eroverheen ging op weg naar de opties, en werd goud zodra de kit van
   Elementor eroverheen kwam. */
.mdact-overzicht__filters button.mdact-filter--kop,
.mdact-overzicht__filters button.mdact-filter--kop:hover,
.mdact-overzicht__filters button.mdact-filter--kop:focus,
.mdact-overzicht__filters button.mdact-filter--kop:focus-visible,
.mdact-overzicht__filters button.mdact-filter--kop:active,
.mdact-overzicht__filters button.mdact-filter--kop.is-open {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: auto;
	padding: 10px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--mdact-donkergroen, #2C4A3E);
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mdact-wit, #FFFFFF);
	text-align: left;
	cursor: pointer;
}

/* Het chevronnetje heeft de kleur van de letters ernaast. Stond het op goud,
   dan viel het weg zodra de kit de knop goud kleurde. */
.mdact-overzicht__filters .mdact-filter--kop svg {
	flex: none;
	color: currentColor;
	transition: transform 0.18s ease;
}

.mdact-overzicht__filters .mdact-filter--kop.is-open svg {
	transform: rotate(180deg);
}

/* --- Terug naar publicatiedatum ---
   Alleen te zien als er een thema gekozen is. Omlijnd in plaats van gevuld,
   zodat de gekozen themaknop ernaast de hoofdzaak blijft. */
.mdact-overzicht__filters button.mdact-filter--terug,
.mdact-overzicht__filters button.mdact-filter--terug:focus,
.mdact-overzicht__filters button.mdact-filter--terug:active {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid rgba(44, 74, 62, 0.35);
	border-radius: 999px;
	background: transparent;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--mdact-donkergroen, #2C4A3E);
	cursor: pointer;
}

.mdact-overzicht__filters button.mdact-filter--terug:hover {
	background: rgba(74, 124, 107, 0.07);
	color: var(--mdact-donkergroen, #2C4A3E);
}

.mdact-overzicht__filters button.mdact-filter--terug[hidden] {
	display: none;
}

/* Een optie in het uitgeklapte paneel: geen eigen vlak, alleen tekst. Wat aan
   staat is zwaarder en groen; die keuze staat immers al op de knop erboven. */
.mdact-overzicht__opties button.mdact-filter,
.mdact-overzicht__opties button.mdact-filter:focus,
.mdact-overzicht__opties button.mdact-filter:active {
	width: 100%;
	padding: 9px 20px;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--mdact-body, #54595F);
	text-align: left;
	white-space: normal;   /* lange themanamen mogen afbreken */
	cursor: pointer;
	transition: background 0.14s ease, color 0.14s ease;
}

/* Bij het aanwijzen loopt het vlakje van rand tot rand en blijft het licht:
   geen afronding, geen inspringing (Tim, 14 september). */
.mdact-overzicht__opties button.mdact-filter:hover {
	border-radius: 0;
	background: rgba(74, 124, 107, 0.07);
	color: var(--mdact-donkergroen, #2C4A3E);
}

.mdact-overzicht__opties button.mdact-filter.is-aan,
.mdact-overzicht__opties button.mdact-filter.is-aan:focus,
.mdact-overzicht__opties button.mdact-filter.is-aan:active {
	background: transparent;
	font-weight: 600;
	color: var(--mdact-donkergroen, #2C4A3E);
}

.mdact-overzicht__opties button.mdact-filter.is-aan:hover {
	background: rgba(74, 124, 107, 0.07);
	color: var(--mdact-donkergroen, #2C4A3E);
}

/* ============================================================
   De kop, als die aan staat (kop="ja")
   ============================================================ */

.mdact-overzicht__header {
	margin-bottom: 24px;
}

.mdact-overzicht__eyebrow {
	display: block;
	margin-bottom: 8px;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--mdact-groen, #4A7C6B);
}

.mdact-overzicht__titel {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--mdact-titel, #1E1E1A);
}

/* ============================================================
   De regel als er niets overblijft
   ============================================================ */

.mdact-overzicht__leeg {
	margin: 24px 0 0;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	color: var(--mdact-body, #54595F);
}

.mdact-overzicht__leeg[hidden] {
	display: none !important;
}

/* ============================================================
   De paginanummers
   ============================================================
   Geen vlakjes en geen lijntjes: alleen de cijfers en twee pijltjes, licht en
   strak (Tim, 14 september). Waar je staat is donkergroen en zwaarder, de rest
   is de gewone tekstkleur en wordt donkergroen zodra je hem aanwijst. Alle
   regels staan met .mdact-paginering ervoor, anders maakt de Elementor-kit er
   goudgele knoppen van. */

.mdact-paginering {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 4px;
	margin-top: 40px;
}

.mdact-paginering[hidden] {
	display: none !important;
}

.mdact-paginering button.mdact-pagina,
.mdact-paginering button.mdact-pagina:focus,
.mdact-paginering button.mdact-pagina:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 6px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1;
	color: var(--mdact-body, #54595F);
	cursor: pointer;
	transition: color 0.16s ease;
}

.mdact-paginering button.mdact-pagina:hover {
	background: transparent;
	box-shadow: none;
	color: var(--mdact-donkergroen, #2C4A3E);
}

/* De pagina waar je nu op staat: donkergroen en zwaarder, verder niets. */
.mdact-paginering button.mdact-pagina.is-nu,
.mdact-paginering button.mdact-pagina.is-nu:hover,
.mdact-paginering button.mdact-pagina.is-nu:focus,
.mdact-paginering button.mdact-pagina.is-nu:active {
	background: transparent;
	box-shadow: none;
	font-weight: 600;
	color: var(--mdact-donkergroen, #2C4A3E);
	cursor: default;
}

/* De pijl terug en vooruit. */
.mdact-paginering button.mdact-pagina--pijl svg {
	width: 16px;
	height: 16px;
}

.mdact-paginering button.mdact-pagina[disabled],
.mdact-paginering button.mdact-pagina[disabled]:hover {
	background: transparent;
	box-shadow: none;
	color: var(--mdact-body, #54595F);
	opacity: 0.3;
	cursor: default;
}

/* De drie puntjes tussen ver uit elkaar liggende nummers. */
.mdact-paginering .mdact-paginering__punten {
	padding: 0 4px;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	color: var(--mdact-body, #54595F);
}

/* --- De knop "Toon meer" onder het themaraster --- */

.mdact-meer {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.mdact-meer button[hidden] {
	display: none !important;
}

.mdact-meer button.mdact-knop,
.mdact-meer button.mdact-knop:focus,
.mdact-meer button.mdact-knop:active {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	border: 0;
	border-radius: 1000px;
	background: var(--mdact-donkergroen, #2C4A3E);
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mdact-wit, #FFFFFF);
	cursor: pointer;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.mdact-meer button.mdact-knop:hover {
	transform: translateY(-2px);
	background: var(--mdact-groen, #4A7C6B);
	color: var(--mdact-wit, #FFFFFF);
}

@media (max-width: 640px) {
	.mdact-overzicht__titel {
		font-size: 24px;
	}

	/* De knop blijft ook op een telefoon zo kort als zijn tekst; het paneel
	   eronder mag wel de volle kolom pakken, anders wordt het een smal kokertje. */
	.mdact-overzicht__opties {
		right: 0;
		width: auto;
		max-width: none;
	}
}