/* ───────────────────────────────────────────────────────────────
   hero.css — Homepage hero band (intro text + slideshow)
   ───────────────────────────────────────────────────────────────
   The markup is in `templates/home.html`.
   The slideshow images are fetched by `assets/js/hero.js`.

   Common edits:
     • hero background color      → `.blik-hero` background
     • hero vertical size         → `.blik-hero-inner` padding
     • hero title size            → `.blik-hero-text h2`
     • image size / aspect ratio  → `.blik-hero-slides` width + aspect-ratio
   ─────────────────────────────────────────────────────────────── */

/* The hero's outer (.blik-hero) is alignfull — it spans 100% of the
   viewport — but it stays transparent so the paper page background
   shows on the sides. The gray panel bg lives on .blik-hero-inner
   which is capped at --blik-max, matching the side margins of the
   article rows below. */
.blik-hero {
	background: transparent;
	border-bottom: 0;
	margin-block-start: 0;
	margin-top: 0;
}

.blik-site-header + .blik-hero {
	margin-block-start: 0;
	margin-top: 0;
}

.wp-site-blocks > .blik-hero {
	margin-block-start: 0;
	margin-top: 0;
}

/* The gray panel is inset from the viewport by --blik-gutter on each
   side — its outer edges sit directly under the header logo and account
   icon above. INSIDE the panel, there's another layer of horizontal
   padding so the heading and the image have breathing room from the
   panel edges. `align-items: flex-end` bottom-aligns the left column. */
.blik-hero-inner {
	background: var(--blik-color-panel);
	display: flex;
	align-items: flex-end;
	gap: clamp(48px, 10vw, 120px);
	width: calc(100% - 2 * var(--blik-gutter));
	max-width: calc(var(--blik-max) - 2 * var(--blik-gutter));
	margin: 0 auto;
	padding: 50px;
	box-sizing: border-box;
}

.blik-hero-inner.is-layout-flex {
	align-items: flex-end;
}

.blik-hero-text {
	align-self: flex-end;
	flex: 1;
	min-width: 0;
}

.blik-hero-text h2 {
	color: var(--blik-color-ink);
	margin: 0 0 var(--blik-spacing-lg);
}

.blik-hero-text p {
	color: var(--blik-color-ink);
	margin: 0 0 var(--blik-spacing-2xl);
	max-width: 440px;
}

.blik-hero-text .wp-block-buttons {
	width: fit-content;
	margin: 0;
}

.blik-hero-text .wp-block-button,
.blik-hero-text .wp-block-button__link {
	width: fit-content;
}

/* Match the header CTA exactly: same inline-flex centering + min-height so the
   inner spacing of the hero "Bijdragen" button reads identically. */
.blik-hero-text .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
}

.blik-hero-slides {
	flex-shrink: 0;
	width: clamp(200px, 27vw, 340px);
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--blik-color-line);
}

.blik-hero-slides img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity var(--blik-transition-slowest);
}

.blik-hero-slides img.is-active {
	opacity: 1;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
	.blik-hero-inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--blik-spacing-2xl);
		padding: 50px;
	}

	.blik-hero-inner.is-layout-flex {
		align-items: stretch;
	}

	.blik-hero-text {
		order: 2;
		flex: none;
		width: 100%;
		align-self: stretch;
	}

	.blik-hero-slides {
		order: 1;
		width: 100%;
		max-width: 420px;
		align-self: center;
	}
}