/* KBH news — modern horizontal media cards.
   One Query Loop drives it; every item is an equal card: image left, then
   date-kicker + title + excerpt + "Lees meer". No hover state, flush image,
   soft elevation. Markup: .kbh-news-item > (.kbh-news-media, .kbh-news-body). */

:root {
	--kbh-news-blue: var(--wp--preset--color--koningsblauw, #23388e);
	--kbh-news-red: var(--wp--preset--color--venetiaans-rood, #a42a04);
	--kbh-news-border: var(--wp--preset--color--zilvergrijs, #c0c0c0);
	--kbh-news-ink: var(--wp--preset--color--zwart, #000);
}

/* ---- List ----------------------------------------------------------- */
.kbh-news-list.wp-block-post-template {
	list-style: none;
	margin: var(--wp--preset--spacing--40, 1.5rem) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30, 1.25rem);
}

.kbh-news-list > li {
	margin: 0;
}

/* ---- Card ----------------------------------------------------------- */
.kbh-news-item {
	position: relative; /* anchor for the stretched title link */
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	background: #fff;
	border: 1px solid var(--kbh-news-border);
	border-radius: var(--kbh-radius, 8px);
	box-shadow: 0 2px 12px rgba(35, 56, 142, 0.06);
	overflow: hidden; /* image sits flush to the card edge, clipped to the radius */
}

/* A quiet koningsblauw spine keeps it on-brand without needing a hover state. */
.kbh-news-item::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 4px;
	background: var(--kbh-news-blue);
	z-index: 2;
}

/* Kill the flow-layout margins WP injects between children. */
.kbh-news-item > *,
.kbh-news-body > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* ---- Media ---------------------------------------------------------- */
.kbh-news-media {
	position: relative; /* image fills this box absolutely, so cover works at any height */
	flex: 0 0 clamp(160px, 30%, 280px);
	min-width: 0;
	align-self: stretch;
	overflow: hidden;
	background: var(--kbh-news-border);
}

.kbh-news-media .wp-block-post-featured-image {
	position: absolute;
	inset: 0;
}

.kbh-news-media .wp-block-post-featured-image a {
	display: block;
	width: 100%;
	height: 100%;
}

.kbh-news-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Placeholder when a post has no featured image. */
.kbh-news-list > li:not(.has-post-thumbnail) .kbh-news-media {
	background-color: var(--kbh-news-blue);
	background-image: repeating-linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.07) 0,
		rgba(255, 255, 255, 0.07) 2px,
		transparent 2px,
		transparent 14px
	);
}

/* ---- Body ----------------------------------------------------------- */
.kbh-news-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.4rem;
	padding: clamp(1.1rem, 1rem + 1vw, 1.75rem);
}

.kbh-news-kicker {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
	font-size: 0.72rem;
	color: var(--kbh-news-blue);
}

.kbh-news-body .wp-block-post-title {
	line-height: 1.2;
	font-weight: 700;
	font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
	color: var(--kbh-news-blue);
}

.kbh-news-body .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

/* Stretch the title link over the whole card so it is fully clickable. */
.kbh-news-body .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.kbh-news-body .wp-block-post-excerpt {
	color: var(--kbh-news-ink);
	line-height: 1.55;
	margin-top: 0.15rem;
}

.kbh-news-body .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.kbh-news-body .wp-block-post-excerpt__more-text {
	margin-top: 0.6rem;
}

.kbh-news-body .wp-block-post-excerpt__more-link {
	position: relative;
	z-index: 2; /* clickable above the title overlay */
	color: var(--kbh-news-red);
	font-weight: 700;
	text-decoration: none;
}

.kbh-news-body .wp-block-post-excerpt__more-link:hover,
.kbh-news-body .wp-block-post-excerpt__more-link:focus {
	text-decoration: underline;
}

/* ---- Responsive: stack image on top on narrow screens --------------- */
@media (max-width: 640px) {
	.kbh-news-item {
		flex-direction: column;
	}
	.kbh-news-media {
		flex-basis: auto;
		width: 100%;
		aspect-ratio: 16 / 9;
	}
}