/* KBH hero + front-page sections. Self-contained; brand colors, responsive. */

/* Global corner radius for buttons, cards and other surfaces.
   Defined once here; every module reads var(--kbh-radius). */
:root {
	--kbh-radius: 8px;
}

/* ---------- HERO ---------- */
/* The hero is full-bleed and butts against the header, so drop the block-gap
   WordPress adds between top-level site blocks (:where(.wp-site-blocks) > *). */
.kbh-front {
	margin-block-start: 0;
}

.kbh-hero {
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--wit);
}
.kbh-hero .wp-block-cover__image-background {
	object-fit: cover;
}
.kbh-hero .wp-block-cover__inner-container {
	max-width: 820px;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}
.kbh-hero-kicker {
	margin: 0 0 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 700;
	font-size: 0.8rem;
	color: var(--wp--preset--color--goud);
}
.kbh-hero-title {
	color: var(--wp--preset--color--wit);
	font-weight: 700;
	line-height: 1.05;
	font-size: clamp(2rem, 5vw + 1rem, 4rem);
	margin: 0 0 1rem;
}
.kbh-hero-sub {
	color: var(--wp--preset--color--wit);
	font-size: clamp(1rem, 0.6vw + 0.95rem, 1.25rem);
	line-height: 1.5;
	max-width: 46ch;
	margin: 0 auto 2rem;
}

/* ---------- BUTTONS (hero + cta) ---------- */
.kbh-hero-buttons { gap: 1rem; }

.kbh-btn-primary .wp-block-button__link {
	background-color: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--koningsblauw);
	border: 2px solid var(--wp--preset--color--wit);
	border-radius: var(--kbh-radius);
	font-weight: 700;
}
.kbh-btn-primary .wp-block-button__link:hover,
.kbh-btn-primary .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--goud);
	border-color: var(--wp--preset--color--goud);
	color: var(--wp--preset--color--koningsblauw);
}

.kbh-btn-ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--wit);
	border: 2px solid var(--wp--preset--color--wit);
	border-radius: var(--kbh-radius);
	font-weight: 700;
}
.kbh-btn-ghost .wp-block-button__link:hover,
.kbh-btn-ghost .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--koningsblauw);
}

.kbh-btn-ghost-blue .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--koningsblauw);
	border: 2px solid var(--wp--preset--color--koningsblauw);
	border-radius: var(--kbh-radius);
	font-weight: 700;
}
.kbh-btn-ghost-blue .wp-block-button__link:hover,
.kbh-btn-ghost-blue .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--koningsblauw);
	color: var(--wp--preset--color--wit);
}

/* Smooth colour changes on every button (incl. theme.json defaults). */
.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
/* Vertically centre the label: the site's 1.6 line-height leaves a tall line
   box, so a single-line label sat high with empty space below. Flex-centre it
   with a tight line-height (1.15 keeps room for descenders). */
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1.15;
}
@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-block-button__link { transition: none; }
}

/* ---------- ONZE ORKESTEN ---------- */
/* Core blocks: .kbh-orkesten (group grid) > .kbh-orkest-card (group) >
   .kbh-orkest-img (image figure) + .kbh-orkest-label (paragraph with link).
   Editable from Pages -> Home; styling (grid, 4/3 crop, blue band) stays here. */
.kbh-orkesten {
	margin: 2.5rem 0 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
}
.kbh-orkesten > * { margin-block: 0; } /* neutralise flow block-gap on grid items */

.kbh-orkest-card {
	display: flex;
	flex-direction: column;
	height: 100%; /* fill the stretched grid cell so all cards match height */
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--zilvergrijs);
	border-radius: var(--kbh-radius);
	background: var(--wp--preset--color--koningsblauw);
}
.kbh-orkest-card > * { margin-block: 0; } /* image and label sit flush */

.kbh-orkest-img {
	margin: 0;
	display: block;
	line-height: 0;
	flex: 0 0 auto;
}
.kbh-orkest-img img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
	transition: transform 0.4s ease;
}
.kbh-orkest-label {
	display: flex;
	flex: 1 1 auto; /* grows to fill, so the blue band bottoms out evenly */
	margin: 0;
	padding: 0;
	background: var(--wp--preset--color--koningsblauw);
	transition: background-color 0.2s ease;
}
.kbh-orkest-label a {
	display: flex;
	align-items: center; /* center a 1-line label in the filled space */
	width: 100%;
	padding: 0.7rem 0.9rem;
	color: var(--wp--preset--color--wit);
	font-weight: 700;
	text-decoration: none;
}
.kbh-orkest-card:hover .kbh-orkest-img img,
.kbh-orkest-card:focus-within .kbh-orkest-img img { transform: scale(1.06); }
.kbh-orkest-card:hover .kbh-orkest-label,
.kbh-orkest-card:focus-within .kbh-orkest-label { background: var(--wp--preset--color--venetiaans-rood); }

/* Homepage "Laatste nieuws" uses the shared news card styles in news.css. */

/* ---------- SUPPORT CTA ---------- */
/* Optional background image with the same koningsblauw overlay as the hero.
   Solid koningsblauw stays as the fallback when no image is set. */
.kbh-cta {
	background-color: var(--wp--preset--color--koningsblauw);
}
.kbh-cta .wp-block-cover__image-background {
	object-fit: cover;
	object-position: center;
}
.kbh-cta .wp-block-cover__inner-container {
	max-width: 720px;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
}
.kbh-cta .wp-block-buttons { margin-top: 1.75rem; gap: 1rem; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
	.kbh-orkesten { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.kbh-orkesten { grid-template-columns: 1fr; }
	.kbh-hero { min-height: 60vh !important; }
}

/* ---------- MOTION ---------- */
@media (prefers-reduced-motion: no-preference) {
	.kbh-hero .wp-block-cover__inner-container > * { animation: kbh-hero-in 0.6s ease both; }
	.kbh-hero-title { animation-delay: 0.06s; }
	.kbh-hero-sub { animation-delay: 0.12s; }
	.kbh-hero-buttons { animation-delay: 0.18s; }
}
/* Transform-only entrance: content is always visible (never gated by opacity). */
@keyframes kbh-hero-in {
	from { transform: translateY(16px); }
	to   { transform: translateY(0); }
}