/**
 * MD-act — Kennisbank-grid, kennis-variant
 * ============================================
 * De home-variant houdt de opmaak die in Elementor staat (Site Settings →
 * Custom CSS). Alles hier is bewust dubbel geklasseerd met
 * .mdact-kb-grid--kennis, zodat het alleen op de kennispagina geldt en de
 * homepagina onaangeroerd blijft.
 *
 * De tegels volgen de stijl van de dienstkaarten op de homepagina: een klein
 * groen labeltje boven, daaronder de titel, dan lopende tekst in de gewone
 * grijstint, en onderaan het aantal artikelen.
 *
 * Kleuren komen uit de variabelen van mdact-dienstblokken.css (:root), met
 * een hex als terugval voor het geval dat bestand niet is geladen.
 */

/* --- De kaart --- */
.mdact-kb-grid--kennis .mdact-kb-card {
	display: flex;
	flex-direction: column;
	padding: 28px;
	border: 0;                     /* geen lijntje om een afgerond vlak */
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(30, 30, 26, 0.06);
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Tegels van een andere pagina ([mdact_gerelateerde_artikelen per_pagina="8"]).
   Drie klassen, anders wint display: flex hierboven van het hidden-attribuut. */
.mdact-kb-grid--kennis .mdact-kb-card[hidden] {
	display: none;
}

.mdact-kb-grid--kennis .mdact-kb-card:hover,
.mdact-kb-grid--kennis .mdact-kb-card:focus-visible {
	box-shadow: 0 6px 18px rgba(30, 30, 26, 0.10);
	transform: translateY(-2px);
}

/* --- Het nummer, als labeltje boven de titel --- */
.mdact-kb-grid--kennis .mdact-kb-number {
	display: block;
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--mdact-groen, #4A7C6B);
}

/* --- Titel --- */
.mdact-kb-grid--kennis .mdact-kb-title {
	margin: 0 0 10px;
	font-size: 18px;
	line-height: 1.35;
	color: var(--mdact-titel, #1E1E1A);
}

/* --- Samenvatting ---
   De hele tegel is een link, dus zonder eigen kleur erft deze tekst het
   groen van de link. Daarom expliciet de lopende-tekstkleur. */
.mdact-kb-grid--kennis .mdact-kb-samenvatting {
	margin: 0 0 20px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--mdact-body, #54595F);
}

/* Geen afkapping meer: de samenvatting mag helemaal uitlopen. De tegels in
   dezelfde rij blijven toch even hoog, dat regelt het grid zelf. */

/* --- Aantal artikelen, altijd onderaan --- */
.mdact-kb-grid--kennis .mdact-kb-count {
	margin-top: auto;
	padding-top: 4px;
	font-size: 14px;
	color: var(--mdact-groen, #4A7C6B);
}

/* --- De balk --- */
.mdact-kb-grid--kennis .mdact-kb-bar {
	display: block;
	margin-top: 12px;
	height: 2px;
	border-radius: 2px;
	background-color: rgba(74, 124, 107, 0.15);
	overflow: hidden;
}

.mdact-kb-grid--kennis .mdact-kb-bar-fill {
	display: block;
	height: 100%;
	background-color: var(--mdact-groen, #4A7C6B);
}


/* --- Kleur van de tegels ---
   Het woord in de shortcode zegt wat de tegels worden, dus
   [mdact_kennisbank_grid_kennis is-wit] geeft witte tegels en is-creme geeft
   creme tegels. Zo staat in de shortcode wat je op het scherm ziet.

   Staat het grid binnen een band van de dienstpagina (.mdact-blok), dan gaat
   het vanzelf en juist tegengesteld aan die band, net als de blokken daar. */
.mdact-kb-grid.is-tegels-wit .mdact-kb-card,
.is-tegels-wit .mdact-kb-grid .mdact-kb-card,
.mdact-blok.is-creme .mdact-kb-grid .mdact-kb-card {
	background-color: var(--mdact-wit, #FFFFFF);
}

.mdact-kb-grid.is-tegels-creme .mdact-kb-card,
.is-tegels-creme .mdact-kb-grid .mdact-kb-card,
.mdact-blok.is-wit .mdact-kb-grid .mdact-kb-card {
	background-color: var(--mdact-creme, #F5EFE6);
}

/* --- Dienstenraster (deel 3 van de kennispagina) ---
   Zelfde kaart als het themagrid. Staat er een subtitel bij de pagina, dan
   wordt de paginatitel het labeltje erboven, net als "COACHING" op de
   dienstkaarten van de homepagina. */
.mdact-kb-grid--diensten .mdact-kb-number {
	text-transform: uppercase;
}

.mdact-kb-grid--diensten .mdact-kb-meer {
	margin-top: auto;
	padding-top: 4px;
	font-size: 14px;
	color: var(--mdact-groen, #4A7C6B);
}

/* Pijltje achter het linkje van het dienstenraster, zodat je het niet in
   elke tekst hoeft mee te typen. */
.mdact-kb-grid--diensten .mdact-kb-meer::after {
	content: " \2192";
}

/* --- Linkje onderaan uitlijnen ---
   De samenvatting rekt mee, zodat het linkje in elke tegel op dezelfde hoogte
   staat, ook als de ene tekst langer is dan de andere. Daarvoor moeten de
   tegels ook even hoog zijn. */
.mdact-kb-grid--kennis,
.mdact-kb-grid--diensten {
	align-items: stretch;
}

.mdact-kb-grid--kennis .mdact-kb-card,
.mdact-kb-grid--diensten .mdact-kb-card {
	height: 100%;
}

.mdact-kb-grid--kennis .mdact-kb-samenvatting,
.mdact-kb-grid--diensten .mdact-kb-samenvatting {
	flex: 1 1 auto;
}

.mdact-kb-grid--diensten .mdact-kb-meer {
	margin-top: auto;
	font-size: 13px;
	font-weight: 500;
	color: #4A7C6B;
}

/* --- Labeltje boven de titel ---
   Exact de typografie van het COACHING-kaartje in Elementor: 12px, half vet,
   hoofdletters en 0,1em letterafstand, in het groen van de huisstijl. */
.mdact-kb-grid--kennis .mdact-kb-number,
.mdact-kb-grid--diensten .mdact-kb-number {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #4A7C6B;
}

/* --- Gerelateerde artikelen (onder een blogbericht) ---
   [mdact_gerelateerde_artikelen] gebruikt dezelfde tegel als het
   dienstenraster: crème of wit vlak, afgeronde hoeken, linkje onderaan.
   Eén verschil: de kop blijft een gewone tegeltitel. Een artikeltitel is een
   hele zin, en die in kleine hoofdletters zetten leest niet. */
.mdact-kb-grid--artikelen {
	align-items: stretch;
}

.mdact-kb-grid--artikelen .mdact-kb-card {
	height: 100%;
}

.mdact-kb-grid--artikelen .mdact-kb-samenvatting {
	flex: 1 1 auto;
}

.mdact-kb-grid--artikelen .mdact-kb-meer {
	margin-top: auto;
	padding-top: 4px;
	font-size: 13px;
	font-weight: 500;
	color: var(--mdact-groen, #4A7C6B);
}

.mdact-kb-grid--artikelen .mdact-kb-meer::after {
	content: " \2192";
}

/* --- Titel van het dienstenraster ---
   Dezelfde typografie als het labeltje in Elementor: 12px, half vet,
   hoofdletters, 0,1em letterafstand, in het groen. Geldt alleen hier; de
   titels in het themagrid blijven gewone koppen. */
.mdact-kb-grid--diensten a.mdact-kb-card h3.mdact-kb-title {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 1.4;
	color: #4A7C6B;
}