/**
 * MD-act — Reviewblokken
 * ======================
 * Hoort bij reviews/mdact-reviews.php: [mdact_reviews_home] (raster) en
 * [mdact_reviews_overzicht] (metselwerk).
 *
 * Nagemeten op de Elementor-loop van de homepage (14 sep 2026,
 * md-act.swipe-test2.nl, uitgelogd, 1440 px breed, kolom van 1000 px). Wat daar
 * gemeten is en hier terugkomt:
 *
 *   raster        drie kolommen van 320 px, 20 px ertussen, rijen even hoog
 *                 (grid-auto-rows: 1fr), twee op tablet, een op de telefoon
 *   kaart         320 x 179,5 px, geen randlijn en geen schaduw
 *   vlak          creme #F5EFE6, 20 px rondom, 10 px ronding, 10 px tussen de
 *                 onderdelen
 *   sterren       [mdact_stars size="22"]; zonder cijfer een leeg vak van nul
 *                 pixels, dat kost dan alleen de tussenruimte van 10 px
 *   quote         13/16,9, gewicht 400, cursief, kleur #54595F, groeit mee
 *                 zodat de naam onderaan blijft plakken
 *   naam          13/15,6, gewicht 500, kleur #4A7C6B
 *   functie+org   11/14,3, gewicht 300, kleur #54595F, 5 px ertussen
 *
 * De negatieve ondermarge onder de naam staat er ook in het origineel: hij heft
 * de tussenruimte van 10 px op, zodat de bronregel direct onder de naam staat.
 *
 * Twee klassen in elke selector, met opzet. De Elementor-kit zet
 * .elementor-kit-7 h3 (0,1,1) en dat wint van een losse klasse; een selector
 * met twee klassen (0,2,0) wint daar weer van. Hetzelfde geldt voor de marges
 * op een p en op een ul.
 *
 * Kleuren komen uit de variabelen van mdact-dienstblokken.css (:root), met een
 * hex als terugval voor het geval dat bestand niet geladen is.
 *
 * Er staat bewust geen knop en geen link in een kaartje, net als in het
 * origineel. Komt die er ooit bij, schrijf dan background, border en color
 * expliciet uit voor :hover, :focus en :active, met het element en de klasse
 * samen (a.mdact-review__link, niet .mdact-review__link). Hello Elementor zet
 * in reset.css een roze en een paarse kleur die van een losse klasse wint. De
 * focusring is sitebreed geregeld in style.css; schrijf hier geen eigen outline.
 *
 * Het blok heeft geen eigen achtergrond, geen buitenmarge en geen eigen
 * containerbreedte: de Elementor-sectie eromheen bepaalt dat.
 */

/* ============================================================
   Het raster (homepage)
   ============================================================ */

.mdact-reviews.mdact-reviews--raster,
.mdact-reviews.mdact-reviews--metselwerk {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mdact-reviews.mdact-reviews--raster {
	display: grid;
	grid-template-columns: repeat(var(--mdact-reviews-kolommen, 3), 1fr);
	grid-auto-rows: 1fr;   /* alle rijen even hoog, zoals de loop van Elementor:
	                          de kaart met de langste tekst bepaalt de maat */
	gap: 20px;
}

@media (max-width: 1024px) {
	.mdact-reviews.mdact-reviews--raster {
		grid-template-columns: repeat(var(--mdact-reviews-kolommen-tablet, 2), 1fr);
	}
}

@media (max-width: 767px) {
	.mdact-reviews.mdact-reviews--raster {
		grid-template-columns: repeat(var(--mdact-reviews-kolommen-telefoon, 1), 1fr);
	}
}

.mdact-reviews.mdact-reviews--raster .mdact-review {
	display: flex;
	min-width: 0;   /* zodat een kolom mag krimpen en een lange tekst hem niet
	                   breder maakt dan zijn deel van het raster */
}

/* ============================================================
   Het metselwerk (pagina Reviews)
   ============================================================
   Kolommen in CSS, dus zonder script en zonder plugin. De leesvolgorde loopt
   daardoor per kolom van boven naar beneden in plaats van per rij; bij losse
   reviews maakt dat niet uit.

   De ruimte tussen de kaarten is een ondermarge van 20 px. Bij meer dan een
   kolom laat de browser die marge onderaan een kolom vanzelf vallen; bij een
   kolom (telefoon) doet hij dat niet, en dan blijft er 20 px ruimte onder het
   blok staan. Daarom krijgt de laatste kaart geen marge. Doe dit niet met een
   negatieve marge op het blok zelf: die werkt in de ene stand wel en in de
   andere niet, en trekt dan wat eronder staat over de laatste kaart heen. */

.mdact-reviews.mdact-reviews--metselwerk {
	columns: var(--mdact-reviews-kolommen, 3);
	column-gap: 20px;
}

@media (max-width: 1024px) {
	.mdact-reviews.mdact-reviews--metselwerk {
		columns: var(--mdact-reviews-kolommen-tablet, 2);
	}
}

@media (max-width: 767px) {
	.mdact-reviews.mdact-reviews--metselwerk {
		columns: var(--mdact-reviews-kolommen-telefoon, 1);
	}
}

.mdact-reviews.mdact-reviews--metselwerk .mdact-review {
	display: block;
	break-inside: avoid;            /* een kaartje mag nooit over twee kolommen */
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;       /* oudere browsers */
	margin: 0 0 20px;
}

.mdact-reviews.mdact-reviews--metselwerk .mdact-review:last-child {
	margin-bottom: 0;
}

/* ============================================================
   Het kaartje
   ============================================================ */

.mdact-reviews .mdact-review__vlak {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	padding: 20px;
	border-radius: 10px;
	background: var(--mdact-creme, #F5EFE6);
}

/* Een kaart die nog niet aan de beurt is. De kaart staat op display: flex of
   block, en dat wint van het hidden-attribuut van de browser. */
.mdact-reviews .mdact-review[hidden] {
	display: none !important;
}

/* --- Kleur van de kaartjes ---
   Zelfde conventie als de kennisbank-grids: het woord in de shortcode zegt wat
   je ziet, dus [mdact_reviews_home is-wit] geeft witte kaartjes en is-creme
   geeft creme kaartjes. Zonder woord blijft het creme, zoals het nu op de
   homepage staat.

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

.mdact-reviews.is-tegels-creme .mdact-review__vlak,
.is-tegels-creme .mdact-reviews .mdact-review__vlak,
.mdact-blok.is-wit .mdact-reviews .mdact-review__vlak {
	background: var(--mdact-creme, #F5EFE6);
}

/* Het sterrenvak. Als flex-vak, zodat de hoogte precies de sterren is (22 px)
   en niet de regelhoogte eromheen. Zonder cijfer is het vak leeg en nul pixels
   hoog; er blijft dan alleen de tussenruimte van 10 px over, net als in de
   loop van Elementor. */
.mdact-reviews .mdact-review__sterren {
	display: flex;
	align-items: center;
	line-height: 0;
}

/* De tekst groeit mee tot de kaart vol is, zodat de naam en de bronregel bij
   elke kaart op dezelfde hoogte onderaan staan. */
.mdact-reviews .mdact-review__quote {
	flex: 1 0 auto;
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-style: italic;
	font-weight: 400;
	line-height: 16.9px;
	color: var(--mdact-body, #54595F);
	overflow-wrap: break-word;
}

/* De negatieve ondermarge heft de tussenruimte van 10 px op; zo staat de
   bronregel direct onder de naam, precies als in het origineel. */
.mdact-reviews .mdact-review__naam {
	margin: 0 0 -10px;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 15.6px;
	color: var(--mdact-groen, #4A7C6B);
}

.mdact-reviews .mdact-review__bron {
	display: flex;
	flex-wrap: wrap;
	column-gap: 5px;
	row-gap: 0;
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 300;
	line-height: 14.3px;
	color: var(--mdact-body, #54595F);
}

/* ============================================================
   De knop "Toon meer" onder het metselwerk
   ============================================================
   Dezelfde vorm als de knop onder het artikelraster, maar met een eigen klasse
   en een eigen regel, zodat deze map niet aan die van het artikelraster vast
   komt te zitten.

   Let op de toestanden, er trekken er twee aan deze knop:

   1. Hello Elementor zet in reset.css een kleur op button, button:hover en
      button:focus. Die selector wint van een losse klasse.
   2. De Elementor-kit zet in post-7.css `.elementor-kit-7 button` op goud
      (#E8C89A) met een ronding van 6 px en 14 px letters, en `:hover` en
      `:focus` op #E0C198. Die selector weegt (0,1,1), precies evenveel als
      `button.mdact-reviews__knop`, en post-7.css laadt na de stylesheets van
      het thema. Bij gelijke spel wint dus de kit, en dan is de knop goud.

   Daarom staat de blokklasse er hieronder bij: `.mdact-reviews-blok
   button.mdact-reviews__knop` weegt (0,2,1) en wint wel. En daarom staan
   background, border en color expliciet uitgeschreven voor rust, hover, focus
   en active; zonder dat valt de knop bij het aanwijzen terug op de kit.

   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 deze knop een andere ring dan de rest van de site. */

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

/* Zolang het script niet gedraaid heeft staat de knop er niet; alle reviews
   staan dan gewoon in het blok. */
.mdact-reviews-blok .mdact-reviews__meer button[hidden] {
	display: none !important;
}

/* Het blok krijgt de focus als de knop verdwijnt; zonder dit staat daar een
   tweede ring omheen. */
.mdact-reviews-blok:focus {
	outline: none;
}

.mdact-reviews-blok button.mdact-reviews__knop,
.mdact-reviews-blok button.mdact-reviews__knop:focus,
.mdact-reviews-blok button.mdact-reviews__knop:focus-visible,
.mdact-reviews-blok button.mdact-reviews__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-reviews-blok button.mdact-reviews__knop:hover {
	transform: translateY(-2px);
	background: var(--mdact-groen, #4A7C6B);
	border-color: transparent;
	color: var(--mdact-wit, #FFFFFF);
}