/* KBH pages styles — content pages (page.html) & posts (single.html).
   Scope: .kbh-article (main group), .kbh-banner (featured image banner),
   and the imported .kbh-image-row grids inside .entry-content.
   Brand: rectangular (0 radius), Koningsblauw headings, Venetiaans Rood on
   hover only, calm/professional. Motion is gated behind prefers-reduced-motion. */

/* ---------------------------------------------------------------- Title */
.kbh-article .wp-block-post-title {
	color: var(--wp--preset--color--koningsblauw);
	font-weight: 700;
	line-height: 1.12;
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
	letter-spacing: -0.01em;
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--30);
}

/* -------------------------------------------------------- Meta (single) */
.kbh-article .kbh-meta {
	align-items: baseline;
	color: #4a4a4a;
}

.kbh-article .kbh-meta .wp-block-post-date,
.kbh-article .kbh-meta .wp-block-post-author {
	color: #4a4a4a;
}

.kbh-article .kbh-meta a {
	color: var(--wp--preset--color--koningsblauw);
	text-decoration: none;
}

.kbh-article .kbh-meta a:hover,
.kbh-article .kbh-meta a:focus-visible {
	color: var(--wp--preset--color--venetiaans-rood);
	text-decoration: underline;
}

/* ---------------------------------------------------------- Banner hero */
/* Featured image with the page title overlaid on it. The hero is full-width
   up to 1400px, then caps and centres on very wide screens (no full-bleed). */
.kbh-article .kbh-page-hero {
	position: relative;
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--50);
	overflow: hidden;
}
/* Full-bleed (edge to edge) up to 1400px; only cap + centre beyond that. */
@media (min-width: 1400px) {
	.kbh-article .kbh-page-hero.alignfull {
		max-width: 1400px;
		margin-left: auto;
		margin-right: auto;
	}
}

.kbh-article .kbh-page-hero .kbh-banner {
	margin: 0;
	line-height: 0; /* kill descender gap under the image */
	background: var(--wp--preset--color--koningsblauw);
}
.kbh-article .kbh-page-hero .kbh-banner img {
	display: block;
	width: 100%;
	height: clamp(260px, 40vw, 520px);
	object-fit: cover;
	object-position: center;
	border-radius: 0;
}

/* the title, overlaid on the lower part of the image */
.kbh-article .kbh-page-hero .kbh-hero-heading {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: clamp(2.5rem, 8vw, 5rem) clamp(1.25rem, 4vw, 3.5rem) clamp(1rem, 2.5vw, 1.75rem);
	color: var(--wp--preset--color--wit);
	text-shadow: 0 2px 18px rgba(10, 14, 35, 0.55);
	background: linear-gradient(to top, rgba(12, 17, 40, 0.85) 0%, rgba(12, 17, 40, 0.45) 45%, rgba(12, 17, 40, 0) 100%);
}

/* Fallback: no featured image -> plain title in the content column. */
.kbh-article .kbh-page-hero:not(:has(img)) {
	overflow: visible;
	margin-top: var(--wp--preset--spacing--50);
}
.kbh-article .kbh-page-hero:not(:has(img)).alignfull {
	max-width: var(--wp--style--global--content-size);
	margin-left: auto;
	margin-right: auto;
}
.kbh-article .kbh-page-hero:not(:has(img)) .kbh-hero-heading {
	position: static;
	padding: 0;
	color: var(--wp--preset--color--koningsblauw);
	background: none;
	text-shadow: none;
	margin-bottom: var(--wp--preset--spacing--30);
}

@media (prefers-reduced-motion: no-preference) {
	.kbh-article .kbh-page-hero .kbh-banner img {
		transition: transform 0.6s ease;
	}
	.kbh-article .kbh-page-hero:hover .kbh-banner img {
		transform: scale(1.03);
	}
}

/* --------------------------------------------------- Content typography */
.kbh-article .entry-content {
	color: var(--wp--preset--color--zwart);
	line-height: 1.7;
}

.kbh-article .entry-content > * + * {
	margin-top: var(--wp--preset--spacing--30);
}

/* Lead: first paragraph reads a touch larger and calmer. */
.kbh-article .entry-content > p:first-of-type {
	font-size: 1.1875rem;
	line-height: 1.6;
	color: #1a1a1a;
}

/* Headings rhythm: generous space above, tight below. */
.kbh-article .entry-content :is(h2, h3, h4) {
	color: var(--wp--preset--color--koningsblauw);
	font-weight: 700;
	line-height: 1.2;
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--20);
}

.kbh-article .entry-content h2 {
	font-size: var(--wp--preset--font-size--large);
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--wp--preset--color--zilvergrijs);
}

.kbh-article .entry-content h3 {
	font-size: var(--wp--preset--font-size--medium);
}

.kbh-article .entry-content :is(h2, h3, h4):first-child {
	margin-top: 0;
}

/* Links */
.kbh-article .entry-content a {
	color: var(--wp--preset--color--koningsblauw);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
}

.kbh-article .entry-content a:hover,
.kbh-article .entry-content a:focus-visible {
	color: var(--wp--preset--color--venetiaans-rood);
	text-decoration-thickness: 2px;
}

/* Lists */
.kbh-article .entry-content :is(ul, ol) {
	padding-left: 1.25rem;
	margin-top: var(--wp--preset--spacing--30);
}

.kbh-article .entry-content li {
	margin-top: 0.4rem;
	padding-left: 0.25rem;
}

.kbh-article .entry-content li::marker {
	color: var(--wp--preset--color--koningsblauw);
}

/* Bold in-list labels ("Voor wie:", "Wanneer:") pick up the brand blue. */
.kbh-article .entry-content li > strong:first-child {
	color: var(--wp--preset--color--koningsblauw);
}

/* Blockquote */
.kbh-article .entry-content blockquote {
	margin-left: 0;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-left: 4px solid var(--wp--preset--color--koningsblauw);
	background: rgba(35, 56, 142, 0.04);
	color: #1a1a1a;
}

/* -------------------------------------------------- Standalone figures */
.kbh-article .entry-content figure.wp-block-image {
	margin-top: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--40);
	overflow: hidden;
	border-radius: var(--kbh-radius, 8px);
}

.kbh-article .entry-content figure.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--kbh-radius, 8px);
}

@media (prefers-reduced-motion: no-preference) {
	.kbh-article .entry-content figure.wp-block-image img {
		transition: transform 0.5s ease;
	}
	.kbh-article .entry-content figure.wp-block-image:hover img {
		transform: scale(1.03);
	}
}

/* Captions */
.kbh-article .entry-content figcaption {
	margin-top: 0.5rem;
	color: #5a5a5a;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	text-align: left;
}

/* ----------------------------------------- Imported .kbh-image-row grids */
/* Imported markup ships inline grid styles (display:grid; 2 cols; gap:1rem;
   margin-top:2.5rem). We normalise the gap/rhythm and make it collapse to a
   single column on small screens — inline styles win, so !important is used
   deliberately and only where the inline value must be overridden. */
.kbh-article .entry-content .kbh-image-row {
	gap: var(--wp--preset--spacing--30) !important;
	margin-top: var(--wp--preset--spacing--50) !important;
	margin-bottom: var(--wp--preset--spacing--40);
	align-items: start;
}

.kbh-article .entry-content .kbh-image-row figure {
	margin: 0 !important;
	overflow: hidden;
	border-radius: var(--kbh-radius, 8px);
	background: var(--wp--preset--color--zilvergrijs);
}

.kbh-article .entry-content .kbh-image-row img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
	border-radius: var(--kbh-radius, 8px);
}

@media (prefers-reduced-motion: no-preference) {
	.kbh-article .entry-content .kbh-image-row img {
		transition: transform 0.5s ease;
	}
	.kbh-article .entry-content .kbh-image-row figure:hover img {
		transform: scale(1.05);
	}
}

@media (max-width: 600px) {
	.kbh-article .entry-content .kbh-image-row {
		grid-template-columns: 1fr !important;
	}
}

/* --------------------------------------------- SponsorKliks embed (004) */
/* Responsive wrapper for the SponsorKliks commissionshop iframe (Custom HTML
   block). Full content width, no horizontal overflow, tall frame instead of
   an inner scrollbar. Fallback link sits below the frame. */
.kbh-sponsorkliks {
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	margin-top: var(--wp--preset--spacing--40);
}

.kbh-sponsorkliks iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	border: 0;
	min-height: 2400px;
}

.kbh-sponsorkliks p {
	margin-top: var(--wp--preset--spacing--30);
}

.kbh-sponsorkliks a {
	color: var(--wp--preset--color--koningsblauw);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.kbh-sponsorkliks a:hover,
.kbh-sponsorkliks a:focus-visible {
	color: var(--wp--preset--color--venetiaans-rood);
}

/* Auto-linked e-mail addresses (inc/emails.php): clickable + uniform on every
   page, in the site's link colour, breaking mid-address on narrow screens. */
.kbh-email {
	color: var(--wp--preset--color--koningsblauw);
	text-decoration: underline;
	text-underline-offset: 0.12em;
	word-break: break-word;
}
.kbh-email:hover,
.kbh-email:focus-visible {
	color: var(--wp--preset--color--venetiaans-rood);
}