/* ---------------------------------------------------------------------------
 * Blogoverzicht (home.php): donkere paginakop met breadcrumbs, kop met blauw
 * accent en intro, vink-watermerk en ellipscurve naar licht; daarna het grid
 * van blogkaarten en de meer-laden knop (AJAX, inc/blog.php).
 *
 * Hier staan ook de gedeelde onderdelen: de blogkaart (twee weergaven, ook
 * gebruikt in de artikel-slider van single.php) en de auteursregel.
 * ------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
 * Donkere paginakop met curve
 * ------------------------------------------------------------------------ */

.blog-archief__kop {
	position: relative;
	background: var(--c-donkerblauw);
	color: var(--c-wit);
	padding-top: 71px;
}

.blog-archief__kop-inhoud {
	position: relative;
	z-index: 1;
}

.blog-archief__watermerk {
	position: absolute;
	top: 27px;
	left: 4.4vw;
	width: clamp(160px, 15.7vw, 302px);
	color: var(--c-blauw);
	pointer-events: none;
}

.blog-archief__watermerk svg {
	display: block;
	width: 100%;
	height: auto;
}

.blog-archief__kruimels {
	font-size: 14px;
	font-weight: 600;
	line-height: 32px;
}

.blog-archief__kruimels p {
	margin: 0;
}

.blog-archief__kruimels a {
	color: var(--c-wit);
	text-decoration: none;
	transition: color var(--dur-kort) var(--ease-out);
}

.blog-archief__kruimels a:hover {
	color: var(--c-blauw);
}

.blog-archief__kruimels .separator {
	display: inline-block;
	width: 7px;
	height: 12px;
	margin: 0 10px;
	background: currentColor;
	color: var(--c-wit);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1.4 0 7 6 1.4 12 0 10.6 4.6 6 0 1.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1.4 0 7 6 1.4 12 0 10.6 4.6 6 0 1.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
	font-size: 0;
	line-height: 0;
	vertical-align: middle;
	translate: 0 -1.5px;
}

.blog-archief__titel {
	margin: 67px 0 0;
	font-size: clamp(32px, 3.02vw, 58px);
	line-height: 1.104;
	max-width: 760px;
}

.blog-archief__intro {
	margin-top: 22px;
	max-width: 736px;
	color: var(--c-grijs-3);
}

.blog-archief__curve {
	margin-top: 160px;
}

.blog-archief__curve svg {
	display: block;
	width: 100%;
	height: auto;
}

.blog-archief__curve ellipse {
	fill: var(--c-grijs-1);
}

/* --------------------------------------------------------------------------
 * Inhoud: het grid overlapt de curve (kaarten beginnen op het donkere vlak).
 * ------------------------------------------------------------------------ */

.blog-archief__inhoud {
	position: relative;
	z-index: 2;
	margin-top: calc(-9.95% - 75px);
	padding-bottom: 95px;
}

.blog-archief__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px 23px;
}

.blog-archief__leeg {
	grid-column: 1 / -1;
	margin: 0;
	padding: 60px 0;
	text-align: center;
	color: var(--c-grijs-4);
}

.blog-archief__meer {
	margin-top: 90px;
	text-align: center;
}

.blog-archief__meer[hidden] {
	display: none;
}

.blog-archief__meer .knop.is-laden {
	pointer-events: none;
	opacity: 0.85;
}

/* --------------------------------------------------------------------------
 * AJAX-overgangen: bijgeladen kaarten komen met het reveal-gevoel gestaggerd
 * binnen (is-nieuw + is-in, delay per kaart via JS).
 * ------------------------------------------------------------------------ */

.blog-archief .blog-archief__grid.is-wisselen > * {
	opacity: 0;
	translate: 0 14px;
	transition: opacity 250ms var(--ease-out), translate 250ms var(--ease-out);
	transition-delay: 0ms;
	pointer-events: none;
}

.blog-archief .blog-archief__grid > .is-nieuw {
	opacity: 0;
	translate: 0 24px;
	transition: opacity var(--dur-lang) var(--ease-out), translate var(--dur-lang) var(--ease-out);
}

.blog-archief .blog-archief__grid > .is-nieuw.is-in {
	opacity: 1;
	translate: none;
}

@media (prefers-reduced-motion: reduce) {
	.blog-archief .blog-archief__grid.is-wisselen > *,
	.blog-archief .blog-archief__grid > .is-nieuw {
		opacity: 1;
		translate: none;
		transition: none;
	}
}

/* --------------------------------------------------------------------------
 * Blogkaart (template-parts/blog-kaart.php): witte kaart met foto en vink.
 * Weergave "volledig" (overzicht) toont de paarse categorie-badge en een
 * kleine auteursregel; "compact" (artikel-slider) een Lees meer-regel.
 * ------------------------------------------------------------------------ */

.blog-kaart {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--c-wit);
	border-radius: var(--radius-sectie);
	box-shadow: 5px 5px 25px 0 rgb(0 0 0 / 5%);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
}

.blog-kaart:hover {
	box-shadow: 8px 12px 32px 0 rgb(0 0 0 / 12%);
}

.blog-kaart__beeld {
	position: relative;
	aspect-ratio: 449 / 230;
	overflow: hidden;
	background: var(--c-donkerblauw);
}

.blog-kaart__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
	.blog-kaart__foto {
		transition: scale 700ms var(--ease-out);
	}

	.blog-kaart:hover .blog-kaart__foto {
		scale: 1.05;
	}
}

/* Blauwe vink-decoratie linksboven, afgesneden door de kaartrand. */
.blog-kaart__vink {
	position: absolute;
	top: -41%;
	left: 6.9%;
	width: 51.2%;
	z-index: 2;
	color: var(--c-blauw);
}

.blog-kaart__vink svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Paarse categorie-badge op de foto (zelfde stijl als de case-badges). */
.blog-kaart__badge {
	position: absolute;
	left: 20px;
	bottom: 16px;
	z-index: 3;
	padding: 5px 13px;
	border-radius: 5px;
	background: var(--c-paars);
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
	color: var(--c-wit);
}

.blog-kaart__inhoud {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 33px 47px 27px;
}

.blog-kaart__titel {
	margin: 0;
	font-size: 20px;
	line-height: 26px;
	font-weight: 700;
	color: var(--c-zwart);
}

.blog-kaart__tekst {
	display: block;
	margin: 17px 0 24px;
	font-size: 16px;
	line-height: 26px;
	color: var(--c-grijs-4);
}

.blog-kaart--compact .blog-kaart__tekst {
	margin-bottom: 0;
}

/* Auteursregel onderin de volledige kaart, met deellijn erboven. */
.blog-kaart__auteur {
	margin-top: auto;
	padding-top: 17px;
	border-top: 1px solid var(--c-grijs-2);
}

/* Lees meer-regel in de compacte kaart (ontwerp artikel-slider). */
.blog-kaart__lees {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-top: auto;
	padding-top: 29px;
}

.blog-kaart__lees-tekst {
	font-size: 16px;
	font-weight: 700;
	line-height: 26px;
	color: var(--c-donkerblauw);
}

.blog-kaart__lees-pijl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--c-blauw);
	color: var(--c-wit);
	transition: background-color var(--dur-kort) var(--ease-out);
}

.blog-kaart__lees-pijl svg {
	width: 7px;
	height: 12px;
}

.blog-kaart:hover .blog-kaart__lees-pijl {
	background: color-mix(in srgb, var(--c-blauw) 85%, var(--c-donkerblauw));
}

/* --------------------------------------------------------------------------
 * Auteursregel (gedeeld): avatar, naam, functie en datum met bolletjes.
 * ------------------------------------------------------------------------ */

.auteursregel {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	line-height: 32px;
	color: var(--c-zwart);
}

.auteursregel__foto {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	object-fit: cover;
	margin-right: 6px;
	flex-shrink: 0;
}

.auteursregel__naam {
	font-size: 14px;
}

.auteursregel__bolletje {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

/* Lichte variant voor op het donkere vlak (paginakop). */
.auteursregel--licht {
	color: var(--c-wit);
}

/* Kleine variant voor in de blogkaart. */
.auteursregel--klein {
	gap: 5px;
	font-size: 13px;
	line-height: 24px;
	color: var(--c-grijs-4);
}

.auteursregel--klein .auteursregel__foto {
	width: 22px;
	height: 22px;
	margin-right: 4px;
}

.auteursregel--klein .auteursregel__naam {
	font-size: 13px;
	font-weight: 500;
}

/* --------------------------------------------------------------------------
 * Tablet: twee kolommen.
 * ------------------------------------------------------------------------ */

@media (max-width: 1199px) and (min-width: 768px) {
	.blog-archief__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.blog-archief__curve {
		margin-top: 120px;
	}

	.blog-kaart__inhoud {
		padding: 26px 32px 22px;
	}
}

/* --------------------------------------------------------------------------
 * Mobiel (geen mobiel ontwerp: maten in lijn met de andere blokken).
 * ------------------------------------------------------------------------ */

@media (max-width: 767px) {
	.blog-archief__kop {
		padding-top: 24px;
	}

	.blog-archief__kruimels {
		font-size: 12px;
		line-height: 24px;
	}

	.blog-archief__titel {
		margin-top: 14px;
	}

	.blog-archief__intro {
		margin-top: 14px;
	}

	.blog-archief__watermerk {
		top: 0;
		left: 2vw;
		width: 46vw;
	}

	.blog-archief__curve {
		margin-top: 92px;
	}

	.blog-archief__inhoud {
		margin-top: calc(-9.95% - 34px);
		padding-bottom: 60px;
	}

	.blog-archief__grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.blog-archief__meer {
		margin-top: 50px;
	}

	.blog-kaart__inhoud {
		padding: 22px 26px 20px;
	}

	.blog-kaart__titel {
		font-size: 17px;
		line-height: 23px;
	}

	.blog-kaart__tekst {
		margin: 10px 0 18px;
		font-size: 14px;
		line-height: 22px;
	}

	.blog-kaart--compact .blog-kaart__tekst {
		margin-bottom: 0;
	}

	.blog-kaart__lees {
		padding-top: 20px;
	}

	/* Staat de CTA-balk uit de blogopties onderaan, dan hangt die band in het
	 * donkere vlak: zelfde footer-afstand als site-footer--met-cta (de klasse
	 * heeft-blog-cta komt uit inc/blog.php, want footer.php kent de
	 * blogopties niet). */
	.heeft-blog-cta .site-footer__grid {
		padding-top: 195px;
	}
}