/* EM Blog Base v1.1 - editorial design (Fraunces + Inter, off-white + bos-groen + oker) */

/* ---- Resets / base ---- */
.wp-block-group, .wp-block-group__inner-container { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }
body {
	font-feature-settings: "ss01" on, "cv11" on;
	-webkit-font-smoothing: antialiased;
}

/* ---- Wrap helper ---- */
.em-wrap { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; }

/* ---- Header / Brand ---- */
.em-header {
	display: flex; align-items: center; justify-content: space-between;
	gap: 2rem;
	padding: 1rem 0;
}
.em-brand {
	display: inline-flex; align-items: center; gap: 0.75rem;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem; font-weight: 600;
	color: var(--wp--preset--color--primary);
	letter-spacing: -0.01em;
}
.em-brand:hover { color: var(--wp--preset--color--accent-dark); }
.em-brand__mark {
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--cream);
	display: grid; place-items: center;
	overflow: hidden;
	box-shadow: 0 1px 0 var(--wp--preset--color--accent);
	flex-shrink: 0;
}
.em-brand__mark--img {
	width: 40px; height: 40px; object-fit: cover; display: block;
}
.em-brand__mark--letter {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700; font-size: 1.125rem; line-height: 1;
}
.em-brand__textbox {
	display: inline-block;
	vertical-align: middle;
	line-height: 1.15;
	min-width: 0;
}
.em-brand__name {
	display: block !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	letter-spacing: -0.01em;
	line-height: 1.15;
}
.em-brand__tagline {
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-weight: 400;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--tekst-zacht);
	letter-spacing: 0.01em;
	margin-top: 0.125rem;
	max-width: 480px;
	overflow: hidden;
	white-space: normal;
	line-height: 1.3;
}
@media (max-width: 600px) {
	.em-brand__tagline { display: none !important; }
}

/* WP navigation styling */
.wp-block-navigation { gap: 1.75rem !important; }
.wp-block-navigation .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem; font-weight: 500;
	color: var(--wp--preset--color--tekst);
	position: relative; padding: 0.25rem 0;
}
.wp-block-navigation .wp-block-navigation-item__content::after {
	content: ""; position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 2px; background: var(--wp--preset--color--accent);
	transform: scaleX(0); transition: transform .2s ease;
	transform-origin: left;
}
.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
}
.wp-block-navigation .wp-block-navigation-item__content:hover::after {
	transform: scaleX(1);
}

/* ---- Hero (compact) ---- */
.em-hero {
	padding: 3rem 1.5rem 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--rand);
	text-align: center;
	margin: 0;
}
.em-hero__inner {
	max-width: 720px; margin: 0 auto; text-align: center;
}
.em-hero__eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
	font-weight: 600; color: var(--wp--preset--color--accent-dark);
	margin: 0 auto 1rem;
	display: inline-flex; align-items: center; gap: 0.75rem;
	width: fit-content;
}
.em-hero__eyebrow::before, .em-hero__eyebrow::after {
	content: ""; width: 28px; height: 1px;
	background: var(--wp--preset--color--accent);
}
.em-hero__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1.1; letter-spacing: -0.02em;
	font-weight: 600;
	margin: 0 auto 0.75rem;
	max-width: 720px;
	color: var(--wp--preset--color--tekst);
}
.em-hero__title em {
	font-style: italic; font-weight: 400;
	color: var(--wp--preset--color--primary);
	background: linear-gradient(transparent 65%, rgba(193, 154, 91, 0.25) 65%);
}
.em-hero__sub {
	font-size: 1rem;
	color: var(--wp--preset--color--tekst-zacht);
	max-width: 560px; margin: 0 auto;
	line-height: 1.6;
}

/* ---- Section label ---- */
.em-section-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
	font-weight: 700; color: var(--wp--preset--color--accent-dark);
	display: inline-flex; align-items: center; gap: 0.75rem;
	margin: 0 0 1.5rem;
}
.em-section-label::before {
	content: ""; width: 28px; height: 1px;
	background: var(--wp--preset--color--accent);
}
.em-divider {
	border: 0; border-top: 1px solid var(--wp--preset--color--rand);
	margin: 3rem 0 2rem;
}

/* ---- Featured (één grote) ---- */
.em-featured {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 2.5rem;
	align-items: center;
	margin: 0 0 3rem;
}
.em-featured__thumb {
	display: block;
	aspect-ratio: 16/10;
	border-radius: 6px;
	overflow: hidden;
	background: var(--wp--preset--color--muted);
}
.em-featured__thumb img,
.em-featured__thumb .em-featured__img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover;
	display: block;
	transition: transform .4s;
}
.em-featured__body { min-width: 0; }
.em-featured__meta {
	display: flex; gap: 0.875rem; align-items: center;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--tekst-zacht);
	margin: 0 0 0.875rem;
	flex-wrap: wrap;
}
.em-featured__cat {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--cream);
	padding: 0.25rem 0.625rem;
	border-radius: 3px;
	font-size: 0.6875rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: 0.08em;
}
.em-featured__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.15;
	font-weight: 600;
	margin: 0 0 0.875rem;
	letter-spacing: -0.015em;
}
.em-featured__title a {
	color: var(--wp--preset--color--tekst);
	text-decoration: none;
}
.em-featured__title a:hover {
	color: var(--wp--preset--color--primary);
}
.em-featured__excerpt {
	font-size: 1rem;
	color: var(--wp--preset--color--tekst-zacht);
	line-height: 1.6;
	margin: 0 0 1.25rem;
}
.em-featured__read {
	display: inline-flex; align-items: center; gap: 0.5rem;
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid var(--wp--preset--color--accent);
	padding-bottom: 2px;
}
.em-featured__read::after { content: "→"; }

/* ---- Posts grid (3-koloms gelijke cards) ---- */
.em-posts .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 2.5rem 2rem !important;
	list-style: none;
	padding: 0; margin: 0;
}
.em-posts .wp-block-post-template > li {
	margin: 0;
}
.em-card {
	display: flex !important;
	flex-direction: column;
	text-decoration: none; color: inherit;
}
.em-card .wp-block-post-featured-image,
.em-card__thumb {
	aspect-ratio: 16/11;
	border-radius: 6px;
	overflow: hidden;
	background: var(--wp--preset--color--muted);
	margin: 0 0 0.875rem !important;
	display: block;
}
.em-card .wp-block-post-featured-image a,
.em-card .wp-block-post-featured-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}
.em-card .wp-block-post-title {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: 1.0625rem !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.01em;
	margin: 0 0 0.375rem !important;
}
.em-card .wp-block-post-title a {
	color: var(--wp--preset--color--tekst);
	text-decoration: none;
}
.em-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
}
.em-card .wp-block-post-excerpt {
	margin: 0 0 0.5rem !important;
}
.em-card .wp-block-post-excerpt__excerpt {
	font-size: 0.875rem;
	color: var(--wp--preset--color--tekst-zacht);
	line-height: 1.55;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.em-card .wp-block-post-excerpt__more-text { display: none; }
.em-card .wp-block-post-date {
	font-size: 0.75rem !important;
	color: var(--wp--preset--color--tekst-zacht) !important;
	margin: 0 !important;
}
/* Meta-regel (auteur + datum) staat in de markup boven de titel, omdat de
   classic-grid-variant hem daar nodig heeft. In de standaardopmaak schuift hij
   naar onderen en blijft alleen de datum zichtbaar — precies zoals voorheen. */
.em-card__meta {
	order: 99;
	/* Top auto duwt de regel naar de onderkant van de kaart; links/rechts op 0
	   omdat de constrained layout anders auto-marges geeft en de datum
	   gecentreerd raakt in plaats van links uitgelijnd. */
	margin: auto 0 0 !important;
	justify-content: flex-start;
	gap: 0.5rem;
}
.em-card__meta .wp-block-post-author-name { display: none; }
.em-card .wp-block-read-more { display: none; }
/* De ondertitel (site-tagline) toont alleen de classic-grid-variant. */
.em-section-subtitle { display: none; }
/* Leestijd hoort bij de varianten die er CSS voor hebben; standaard verborgen. */
.em-leestijd { display: none; }
.em-layout-editorial .em-leestijd { display: inline; }

/* ---- Layout-variant: classic-grid --------------------------------------
   Hangt achter .em-layout-classic-grid op <body>, gezet vanuit branding.json
   ("layout": "classic-grid"). Zonder die class verandert er niets, dus de
   overige sites houden hun standaardopmaak.

   Naar het Figma-ontwerp "Classic Blog Grid": gecentreerde bold sans-kop met
   ondertitel, driekolomsraster met afgeronde beelden, per kaart een meta-regel
   met auteur en datum bóven de titel, en een omlijnde READ MORE-knop. Op
   mobiel wordt het één kolom.                                              */

/* Gecentreerde sectiekop met ondertitel. */
.em-layout-classic-grid .em-section-label {
	display: block;
	text-align: center;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.75rem, 3.4vw, 2.375rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--wp--preset--color--tekst);
	margin: 0 0 0.625rem;
}
.em-layout-classic-grid .em-section-label::before { content: none; }
.em-layout-classic-grid .em-section-subtitle {
	display: block;
	text-align: center;
	color: var(--wp--preset--color--tekst-zacht);
	font-size: 1rem;
	font-style: normal;
	margin: 0 auto 3rem;
	max-width: 34rem;
}

/* Raster met ruimere tussenruimte. */
.em-layout-classic-grid .em-posts .wp-block-post-template {
	gap: 3rem 2rem !important;
}

/* Kaart: beeld, meta, titel, samenvatting, knop. */
.em-layout-classic-grid .em-card:hover { transform: none; }
.em-layout-classic-grid .em-card .wp-block-post-featured-image {
	aspect-ratio: 16/11;
	border-radius: 8px;
	margin-bottom: 1rem !important;
}

/* Meta-regel naar boven, met zichtbare auteursnaam. */
.em-layout-classic-grid .em-card__meta {
	order: 0;
	margin: 0 auto 0.625rem 0 !important;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
}
.em-layout-classic-grid .em-card__meta .wp-block-post-author-name {
	display: block;
	color: var(--wp--preset--color--tekst);
	font-weight: 500;
}
.em-layout-classic-grid .em-card__meta .wp-block-post-date {
	color: var(--wp--preset--color--tekst-zacht) !important;
	text-transform: none;
	letter-spacing: 0;
	margin: 0 !important;
}

.em-layout-classic-grid .em-card .wp-block-post-title {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: 1.1875rem !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	letter-spacing: -0.01em;
	margin: 0 0 0.5rem !important;
}
.em-layout-classic-grid .em-card .wp-block-post-excerpt__excerpt {
	-webkit-line-clamp: 3;
	font-size: 0.875rem;
	color: var(--wp--preset--color--tekst-zacht);
}

/* READ MORE als omlijnde knop, zoals in het ontwerp. */
.em-layout-classic-grid .em-card .wp-block-read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	align-self: flex-start;
	/* De constrained layout van het kaart-blok geeft kinderen auto-marges;
	   zonder deze reset wordt de knop gecentreerd in plaats van links. */
	margin: 0.875rem auto 0 0 !important;
	width: fit-content;
	padding: 0.5rem 0.875rem;
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: 4px;
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--tekst);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .15s, border-color .15s;
}
.em-layout-classic-grid .em-card .wp-block-read-more::after {
	content: "›";
	font-size: 1rem;
	line-height: 1;
}
.em-layout-classic-grid .em-card .wp-block-read-more:hover {
	background: var(--wp--preset--color--achtergrond);
	border-color: var(--wp--preset--color--tekst-zacht);
}

/* Paginering als losse omlijnde knop ("Load More"-gevoel). */
.em-layout-classic-grid .em-pagination .wp-block-query-pagination-numbers,
.em-layout-classic-grid .em-pagination .wp-block-query-pagination-previous {
	display: none;
}
.em-layout-classic-grid .em-pagination {
	margin-top: 3.5rem !important;
}
.em-layout-classic-grid .em-pagination .wp-block-query-pagination-next {
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: 4px;
	padding: 0.6875rem 1.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--tekst);
	text-decoration: none;
	background: var(--wp--preset--color--achtergrond);
}
.em-layout-classic-grid .em-pagination .wp-block-query-pagination-next:hover {
	background: var(--wp--preset--color--muted);
}

/* Postpagina: titel groot, meta-regel tussen scheidingslijnen, afgerond beeld.

   De volgorde uit het ontwerp (titel → meta → beeld) laten we bewust staan:
   `main` naar flex omzetten om te herordenen gaf alle niet-benoemde blokken
   order 0, waardoor de titel en de content ónder de gerelateerde artikelen
   belandden. De blokvolgorde hoort in het template thuis, niet in CSS. */
.em-layout-classic-grid.single .wp-block-post-featured-image {
	border-radius: 8px;
}

.em-layout-classic-grid.single .wp-block-post-title {
	font-size: clamp(1.875rem, 4vw, 2.625rem) !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.02em;
}
.em-layout-classic-grid.single main .wp-block-group.has-small-font-size {
	border-top: 1px solid var(--wp--preset--color--rand);
	border-bottom: 1px solid var(--wp--preset--color--rand);
	padding: 0.875rem 0;
	justify-content: space-between !important;
}

/* Mobiel: één kolom, zoals de mobiele view van het ontwerp. */
@media (max-width: 781px) {
	.em-layout-classic-grid .em-posts .wp-block-post-template {
		grid-template-columns: 1fr !important;
		gap: 2.5rem !important;
	}
	.em-layout-classic-grid .em-section-label { font-size: 1.5rem; }
}

/* ---- Layout-variant: editorial -----------------------------------------
   Hangt achter .em-layout-editorial op <body>, gezet vanuit branding.json
   ("layout": "editorial"). Zonder die class verandert er niets, dus de
   overige sites houden hun standaardopmaak.

   Naar het Figma-ontwerp "Personal Blog Grid": een groot serif statement-intro
   met wisselend contrast, daaronder één grote uitgelichte post met twee
   kleinere ernaast, en vervolgens een tweekolomsraster met alle overige posts.
   Datums zijn het enige kleuraccent.                                       */

/* --- Statement-intro --- */
.em-layout-editorial .em-intro {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.375rem, 2.6vw, 2rem);
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--tekst-zacht);
	margin: 0 0 3.5rem;
	max-width: 54rem;
}
.em-layout-editorial .em-intro__sterk {
	color: var(--wp--preset--color--tekst);
}

/* De standaard-eyebrow verdwijnt; deze variant heeft zijn eigen kop. */
.em-layout-editorial .em-section-label { display: none; }
.em-layout-editorial .em-section-subtitle { display: none; }

/* --- Raster: 1 grote + 2 kleine, daarna drie per rij ---
   Zes kolommen als rekeneenheid: het uitgelichte blok gebruikt 3+3, de posts
   daaronder 2+2+2. Zo passen beide indelingen in één query-loop. */
.em-layout-editorial .em-posts .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(6, 1fr) !important;
	gap: 3rem 2rem !important;
}
.em-layout-editorial .em-posts .wp-block-post-template > li {
	grid-column: span 2;
}

@media (min-width: 900px) {
	.em-layout-editorial .em-posts .wp-block-post-template > li:first-child {
		grid-column: 1 / 4;
		grid-row: 1 / span 2;
	}
	/* align-self: start houdt de twee kleine kaarten bovenaan hun rij; zonder
	   dat rekt de hoge linkerkaart de rijen op en vallen ze ver uit elkaar. */
	.em-layout-editorial .em-posts .wp-block-post-template > li:nth-child(2) {
		grid-column: 4 / 7;
		grid-row: 1;
		align-self: start;
	}
	.em-layout-editorial .em-posts .wp-block-post-template > li:nth-child(3) {
		grid-column: 4 / 7;
		grid-row: 2;
		align-self: start;
	}

	/* De uitgelichte post: groot beeld, forse titel.

	   De hoogte is bewust krap gehouden. De linkerkaart spant beide rijen, dus
	   als hij hoger is dan de twee rechterkaarten samen, rekt hij de rijen op en
	   valt er een gat tussen die twee. Blijft hij korter, dan bepalen de kleine
	   kaarten de rijhoogte en sluiten ze netjes op elkaar aan. */
	.em-layout-editorial .em-posts .wp-block-post-template > li:first-child
		.wp-block-post-featured-image {
		aspect-ratio: 16/9 !important;
	}
	.em-layout-editorial .em-posts .wp-block-post-template > li:first-child
		.wp-block-post-title {
		font-size: clamp(1.375rem, 2.1vw, 1.75rem) !important;
	}
	.em-layout-editorial .em-posts .wp-block-post-template > li:first-child
		.wp-block-post-excerpt__excerpt {
		-webkit-line-clamp: 2;
	}

	/* De twee kleinere: beeld naast de tekst. */
	.em-layout-editorial .em-posts .wp-block-post-template > li:nth-child(2) .em-card,
	.em-layout-editorial .em-posts .wp-block-post-template > li:nth-child(3) .em-card {
		display: grid !important;
		grid-template-columns: 1fr 1.15fr;
		gap: 1.25rem;
		align-items: start;
	}
	.em-layout-editorial .em-posts .wp-block-post-template > li:nth-child(2)
		.wp-block-post-featured-image,
	.em-layout-editorial .em-posts .wp-block-post-template > li:nth-child(3)
		.wp-block-post-featured-image {
		aspect-ratio: 4/3 !important;
		margin: 0 !important;
		grid-row: span 3;
	}
	.em-layout-editorial .em-posts .wp-block-post-template > li:nth-child(2)
		.wp-block-post-excerpt,
	.em-layout-editorial .em-posts .wp-block-post-template > li:nth-child(3)
		.wp-block-post-excerpt { display: none; }

	/* "Latest Post"-scheiding vóór de vierde post. Absoluut gepositioneerd over
	   beide kolommen, zodat de post zelf gewoon in het tweekolomsraster
	   meeloopt en er geen lege cel naast ontstaat. */
	/* Alle drie de posts van de eerste rij ná het uitgelichte blok krijgen
	   dezelfde marge, anders beginnen de buren hoger en valt het kopje
	   erachter. */
	.em-layout-editorial .em-posts .wp-block-post-template > li:nth-child(4),
	.em-layout-editorial .em-posts .wp-block-post-template > li:nth-child(5),
	.em-layout-editorial .em-posts .wp-block-post-template > li:nth-child(6) {
		margin-top: 5.5rem;
	}
	.em-layout-editorial .em-posts .wp-block-post-template > li:nth-child(4) {
		position: relative;
		z-index: 1;
	}
	.em-layout-editorial .em-posts .wp-block-post-template > li:nth-child(4)::before {
		content: var(--em-sectie-label, "Latest Post");
		position: absolute;
		top: -4.25rem;
		left: 0;
		/* Drie kolommen breed: 300% van één kaart plus twee keer de kolomafstand. */
		width: calc(300% + 4rem);
		font-family: var(--wp--preset--font-family--heading);
		font-size: clamp(1.375rem, 2.4vw, 1.875rem);
		font-weight: 500;
		text-align: center;
		color: var(--wp--preset--color--tekst);
	}
}

/* --- Kaarten --- */
.em-layout-editorial .em-card:hover { transform: none; }
.em-layout-editorial .em-card .wp-block-post-featured-image {
	border-radius: 2px;
	aspect-ratio: 3/2 !important;
}
.em-layout-editorial .em-card .wp-block-post-title {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: 1.125rem !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	margin: 0 0 0.375rem !important;
}
.em-layout-editorial .em-card .wp-block-post-excerpt__excerpt {
	font-size: 0.875rem;
	color: var(--wp--preset--color--tekst-zacht);
	-webkit-line-clamp: 2;
}

/* Datum is het enige kleuraccent. */
.em-layout-editorial .em-card__meta {
	order: 99;
	margin: 0.5rem 0 0 !important;
	justify-content: flex-start;
}
.em-layout-editorial .em-card__meta .wp-block-post-author-name { display: none; }
.em-layout-editorial .em-card__meta .wp-block-post-date {
	color: var(--wp--preset--color--accent) !important;
	font-size: 0.75rem !important;
	font-weight: 500;
	letter-spacing: 0.02em;
}
.em-layout-editorial .em-card .wp-block-read-more { display: none; }

/* --- Postpagina --- */
/* De volgorde uit het ontwerp (titel → meta → beeld) wordt in PHP geregeld:
   `render_block` verplaatst het uitgelichte beeld naar vlak vóór de content.
   Met CSS kan het niet: `main` naar flex omzetten geeft de constrained layout
   auto-marges, waardoor titel en meta gecentreerd en versmald raken. */
.em-layout-editorial.single main .wp-block-group.has-small-font-size {
	border-top: 1px solid var(--wp--preset--color--rand);
	border-bottom: 1px solid var(--wp--preset--color--rand);
	padding: 0.875rem 0;
	margin-bottom: var(--wp--preset--spacing--40) !important;
}
.em-layout-editorial.single .wp-block-post-featured-image {
	margin-bottom: var(--wp--preset--spacing--40) !important;
}
.em-layout-editorial .em-leestijd { color: var(--wp--preset--color--tekst-zacht); }

.em-layout-editorial.single .wp-block-post-title {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-weight: 500 !important;
	letter-spacing: -0.01em;
	font-size: clamp(1.875rem, 4vw, 2.75rem) !important;
	line-height: 1.15 !important;
}
.em-layout-editorial.single main .wp-block-group.has-small-font-size
	.wp-block-post-date {
	color: var(--wp--preset--color--accent) !important;
}

/* --- Mobiel: alles onder elkaar, zoals de mobiele view --- */
@media (max-width: 899px) {
	.em-layout-editorial .em-posts .wp-block-post-template {
		grid-template-columns: 1fr !important;
		gap: 2.5rem !important;
	}
	.em-layout-editorial .em-posts .wp-block-post-template > li {
		grid-column: 1 / -1;
	}
	.em-layout-editorial .em-intro { margin-bottom: 2.5rem; }
}

/* ---- Pagination ---- */
.em-pagination {
	display: flex !important;
	justify-content: center;
	gap: 0.5rem !important;
	margin-top: 3rem !important;
}
.em-pagination a,
.em-pagination span,
.em-pagination .wp-block-query-pagination-numbers a,
.em-pagination .wp-block-query-pagination-numbers .current,
.em-pagination .wp-block-query-pagination-previous,
.em-pagination .wp-block-query-pagination-next {
	padding: 0.5rem 0.875rem;
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: 4px;
	color: var(--wp--preset--color--tekst);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 500;
	background: var(--wp--preset--color--cream);
}
.em-pagination .wp-block-query-pagination-numbers .current {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--cream);
	border-color: var(--wp--preset--color--primary);
}
.em-pagination a:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

/* ---- Footer / copyright ---- */
.em-copyright {
	text-align: center;
	font-size: 0.875rem;
	color: var(--wp--preset--color--tekst-zacht);
	padding: 0; margin: 0;
}

/* ---- Infobox (kernfeiten bovenaan een artikel) ----
 * Gerenderd door tools/infobox_parser.py als <aside class="em-infobox"> met een
 * <dl>. Kleuren komen uit de style variation van de klant, dus deze regels
 * werken op alle sites zonder aanpassing.
 */
.em-infobox {
	margin: 0 0 2rem;
	padding: 1.25rem 1.5rem;
	background: var(--wp--preset--color--muted);
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: 12px;
}

.em-infobox__titel {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tekst-zacht);
	margin: 0 0 0.85rem;
}

.em-infobox__lijst {
	margin: 0;
	padding: 0;
}

/* Rij = label + waarde naast elkaar. Grid i.p.v. float zodat lange waarden
 * netjes doorlopen onder hun eigen kolom. */
.em-infobox__rij {
	display: grid;
	grid-template-columns: minmax(6rem, 34%) 1fr;
	gap: 0.25rem 1rem;
	padding: 0.5rem 0;
	border-top: 1px solid var(--wp--preset--color--rand);
}

.em-infobox__rij:first-child {
	border-top: 0;
	padding-top: 0;
}

.em-infobox__label {
	margin: 0;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--tekst-zacht);
}

.em-infobox__waarde {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--tekst);
}

/* Op smalle schermen onder elkaar: twee kolommen wordt daar onleesbaar. */
@media (max-width: 480px) {
	.em-infobox__rij {
		grid-template-columns: 1fr;
		gap: 0.1rem;
	}
}

/* ---- Hub-links (Meer middenvelders / Meer spelers uit Argentinie) ----
 * Gerenderd door inc/hub-links.php uit de hub-categorieen. Kolommen vullen zich
 * naar beschikbare breedte, dus een site met twee hub-assen ziet er net zo goed
 * uit als een met vier.
 */
.em-hub-links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.5rem 2rem;
	margin: 2.5rem 0 0;
	padding-top: 1.75rem;
	border-top: 1px solid var(--wp--preset--color--rand);
}

/* Kopje boven het hele blok; grid-column: 1/-1 zodat het de volle breedte pakt
 * en niet als eerste kolom meetelt. */
.em-hub-links__intro {
	grid-column: 1 / -1;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tekst-zacht);
	margin: 0;
}

.em-hub-links__titel {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 0.6rem;
	line-height: 1.3;
}

.em-hub-links__titel a {
	color: var(--wp--preset--color--tekst);
	text-decoration: none;
}

.em-hub-links__titel a:hover,
.em-hub-links__titel a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.em-hub-links__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
}

.em-hub-links__item {
	margin: 0 0 0.3rem;
	line-height: 1.45;
}

.em-hub-links__item a {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.em-hub-links__item a:hover,
.em-hub-links__item a:focus-visible {
	text-decoration: underline;
}

/* ---- Footer-navigatie (Over ons, Privacy, ...) ---- */
.em-footer-nav {
	margin: 0 0 0.75rem;
}

.em-footer-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.em-footer-nav__item {
	margin: 0;
}

.em-footer-nav__item a {
	font-size: 0.875rem;
	color: var(--wp--preset--color--tekst-zacht);
	text-decoration: none;
}

.em-footer-nav__item a:hover,
.em-footer-nav__item a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* ---- Single post ---- */
.wp-block-post-content {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--wp--preset--color--tekst);
}
.wp-block-post-content h2,
.wp-block-post-content h3 {
	font-family: var(--wp--preset--font-family--heading);
}
.wp-block-post-content a {
	color: var(--wp--preset--color--primary);
	border-bottom: 1px solid var(--wp--preset--color--accent);
}
.wp-block-post-content a:hover {
	color: var(--wp--preset--color--accent-dark);
}

/* ---- Breadcrumbs ---- */
.em-breadcrumbs {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--tekst-zacht);
	margin: 1.5rem 0;
}
.em-breadcrumbs__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.em-breadcrumbs__item + .em-breadcrumbs__item::before {
	content: "/";
	margin-right: 0.5rem;
	color: var(--wp--preset--color--rand);
}
.em-breadcrumbs__item a {
	color: var(--wp--preset--color--tekst-zacht);
	text-decoration: none;
}
.em-breadcrumbs__item a:hover {
	color: var(--wp--preset--color--primary);
}
.em-breadcrumbs__item.is-current {
	color: var(--wp--preset--color--tekst);
	font-weight: 500;
}

/* ---- TOC + FAQ (overgenomen, ingepast in nieuwe stijl) ---- */
.em-toc {
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: 6px;
	padding: 1.5rem; margin: 2rem 0;
}
.em-toc__list { margin: 0; padding-left: 1.25rem; }
.em-toc__list li { margin: 0.25rem 0; }
.em-toc__list a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.em-toc__list a:hover {
	color: var(--wp--preset--color--accent-dark);
	text-decoration: underline;
}
.em-faq__item {
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: 6px;
	padding: 1rem 1.25rem;
	margin-bottom: 0.75rem;
	background: var(--wp--preset--color--cream);
}
.em-faq__item[open] { background: var(--wp--preset--color--muted); }
.em-faq__q {
	cursor: pointer; font-weight: 600;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	list-style: none;
	display: flex; justify-content: space-between; align-items: center;
}
.em-faq__q::-webkit-details-marker { display: none; }
.em-faq__q::after {
	content: "+";
	font-size: 1.25rem; font-weight: 400;
	color: var(--wp--preset--color--accent);
}
.em-faq__item[open] .em-faq__q::after { content: "−"; }
.em-faq__a { margin-top: 0.75rem; color: var(--wp--preset--color--tekst); }

/* ---- Affiliate box (overgenomen, ingepast) ---- */
.em-affiliate-box {
	background: var(--wp--preset--color--cream) !important;
	border: 1px solid var(--wp--preset--color--rand) !important;
	border-left: 4px solid var(--wp--preset--color--accent) !important;
	border-radius: 6px !important;
	transition: box-shadow .15s;
}
.em-affiliate-box:hover {
	box-shadow: 0 4px 16px rgba(31, 26, 20, 0.08);
}

/* ---- Sticky CTA bar ---- */
.em-sticky-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--cream);
	box-shadow: 0 -4px 16px rgba(0,0,0,.15);
	transform: translateY(100%); transition: transform .25s;
}
.em-sticky-bar.is-visible { transform: translateY(0); }
.em-sticky-bar.is-dismissed { display: none; }
.em-sticky-bar__inner {
	max-width: 1240px; margin: 0 auto;
	padding: .75rem 1rem;
	display: flex; align-items: center; gap: 1rem;
}
.em-sticky-bar__text { flex: 1; min-width: 0; }
.em-sticky-bar__text strong {
	display: block; font-size: .9375rem; font-weight: 700;
	font-family: var(--wp--preset--font-family--heading);
}
.em-sticky-bar__text span {
	display: block; font-size: .8125rem; opacity: .85;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.em-sticky-bar__cta {
	background: var(--wp--preset--color--cta-bg);
	color: var(--wp--preset--color--cta-text);
	padding: .625rem 1.25rem; border-radius: 4px;
	font-weight: 600; text-decoration: none; white-space: nowrap;
}
.em-sticky-bar__cta:hover {
	background: var(--wp--preset--color--accent-dark);
	color: var(--wp--preset--color--cream);
}
.em-sticky-bar__close {
	background: transparent; border: 0;
	color: var(--wp--preset--color--cream);
	font-size: 1.5rem; line-height: 1; cursor: pointer;
	padding: .25rem .5rem; opacity: .6;
}
.em-sticky-bar__close:hover { opacity: 1; }
@media (min-width: 768px) { .em-sticky-bar { display: none; } }

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.em-featured { grid-template-columns: 1fr; }
	.em-posts .wp-block-post-template { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
	.em-posts .wp-block-post-template { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------------------------
   Hubs als ingang op de homepage ([em_hubs])

   Een kaart per as, niet per hub, en de hubs zelf als chips. De eerste
   versie gaf elke hub een eigen kaart met omschrijving; dat werden
   twintig blokken met twintig keer dezelfde zin. De tweede versie zette
   ze als volle regels in omlijnde kaarten, en dat nam op een site met
   twee assen van elk zes hubs nog steeds het halve scherm in beslag,
   nog voor het eerste artikel.

   Rendert niets op sites zonder hub-structuur, dus deze regels raken die
   sites ook niet.
   ------------------------------------------------------------------ */
.em-hubs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: 1.5rem 2.5rem;
	margin: 0 0 2.5rem;
}
.em-hubs__as {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.em-hubs__titel {
	margin: 0 0 0.6rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tekst-zacht);
}
.em-hubs__lijst {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.em-hubs__item {
	margin: 0;
}
.em-hubs__link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0.28rem 0.7rem;
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: 999px;
	font-size: 0.85rem;
	text-decoration: none;
	color: inherit;
}
.em-hubs__link:hover,
.em-hubs__link:focus-visible {
	border-color: var(--wp--preset--color--tekst-zacht);
}
.em-hubs__naam {
	font-weight: 500;
	line-height: 1.3;
}
.em-hubs__aantal {
	flex: none;
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
	opacity: 0.5;
}
.em-hubs__meer {
	margin-top: 0.55rem;
	font-size: 0.82rem;
	font-weight: 500;
	text-decoration: none;
}
.em-hubs__meer::after {
	content: " \2192";
}
.em-hubs__meer:hover,
.em-hubs__meer:focus-visible {
	text-decoration: underline;
}

/* ==================================================================
   OPMAAKVARIANTEN PER NICHEGROEP

   Elke variant hangt achter de body-class die functions.php zet vanuit
   de WP-option em_layout, gevoed uit branding.json. Welke site welke
   variant draait staat in data/nichegroepen.json.

   Na de eerste beoordelingsronde zijn drie regels hard geworden:
   - niets beweegt als de cursor erover gaat; dat zat in de basis en is
     daar verwijderd, niet per variant
   - beelden blijven klein, want te grote foto's waren de hoofdklacht
   - er passen minstens 24 artikelen op de homepage

   Alle varianten gebruiken uitsluitend palet-tokens. Een style variation
   VERVANGT het palet, dus een hardgecodeerde kleur zou op de ene site
   kloppen en op de andere niet.
   ================================================================== */

/* ------------------------------------------------------------------
   magazine — e-commerce-niches. Beeld voert, zonder kaders.
   ------------------------------------------------------------------ */
.em-layout-magazine .em-posts .wp-block-post-template {
	gap: 2rem 1.75rem !important;
}
.em-layout-magazine .em-card {
	border: 0;
	padding: 0;
	background: transparent;
}
.em-layout-magazine .em-card .wp-block-post-featured-image {
	border-radius: 10px;
}
.em-layout-magazine .em-card .wp-block-post-title {
	font-size: 1.02rem !important;
	line-height: 1.3 !important;
	letter-spacing: -0.01em;
}
.em-layout-magazine .em-card__meta {
	order: -1;
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tekst-zacht);
}
.em-layout-magazine .em-card .wp-block-post-excerpt,
.em-layout-magazine .em-card .wp-block-read-more {
	display: none;
}

/* ------------------------------------------------------------------
   compact — ondernemen, geld en techniek. Zoveel mogelijk artikelen in
   beeld: klein liggend beeld, geen samenvatting.
   ------------------------------------------------------------------ */
.em-layout-compact .em-posts .wp-block-post-template {
	gap: 1.5rem !important;
}
.em-layout-compact .em-card {
	border: 0;
	padding: 0;
	background: transparent;
}
.em-layout-compact .em-card .wp-block-post-featured-image {
	aspect-ratio: 16/9 !important;
	border-radius: 4px;
	margin-bottom: 0.6rem !important;
}
.em-layout-compact .em-card .wp-block-post-title {
	font-size: 0.92rem !important;
	line-height: 1.35 !important;
	margin: 0 0 0.2rem !important;
}
.em-layout-compact .em-card .wp-block-post-excerpt,
.em-layout-compact .em-card .wp-block-read-more {
	display: none;
}
.em-layout-compact .em-card__meta {
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--tekst-zacht);
}

/* ------------------------------------------------------------------
   verhalend — plaatsen, geschiedenis en cultuur. Zelfde dichtheid, maar
   met samenvatting en rustiger typografie.
   ------------------------------------------------------------------ */
.em-layout-verhalend .em-posts .wp-block-post-template {
	gap: 2.25rem 1.75rem !important;
}
.em-layout-verhalend .em-card {
	border: 0;
	padding: 0;
	background: transparent;
}
.em-layout-verhalend .em-card .wp-block-post-featured-image {
	aspect-ratio: 3/2 !important;
	border-radius: 2px;
}
.em-layout-verhalend .em-card .wp-block-post-title {
	line-height: 1.3 !important;
}
.em-layout-verhalend .em-card .wp-block-post-excerpt__excerpt {
	-webkit-line-clamp: 2;
	color: var(--wp--preset--color--tekst-zacht);
	line-height: 1.6;
}
.em-layout-verhalend .em-card__meta {
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.em-layout-verhalend .em-card .wp-block-read-more {
	display: none;
}