/* Luisterwereld discovery hero 0.5.3 — één component, één bron van waarheid. */
.lw-discovery-hero {
	--hero-header-height: 96px;
	--hero-copy-width: 560px;
	--hero-focus-x: var(--lw-hero-focus-desktop-x, 70%);
	--hero-focus-y: var(--lw-hero-focus-desktop-y, 48%);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 620px;
	height: clamp(620px, calc(100svh - var(--hero-header-height)), 760px);
	max-height: 760px;
	border-radius: 20px;
	background: var(--lw-text, #16324f);
	color: #fff;
	box-shadow: 0 20px 55px rgba(22, 50, 79, .16);
}

/* Alleen op de echte homepage: breek uit een boxed Elementor-container en vul de volledige pagina. */
.lw-discovery-hero--home-fullwidth {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-radius: 0;
}

.admin-bar .lw-discovery-hero {
	--hero-header-height: 128px;
}

.lw-discovery-hero__photo {
	position: absolute;
	z-index: 0;
	inset: 0 0 0 auto;
	width: min(78vw, 1500px);
	overflow: hidden;
}

.lw-discovery-hero__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hero-focus-x) var(--hero-focus-y);
}

.lw-discovery-hero__overlay {
	position: absolute;
	z-index: 1;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgba(22, 50, 79, 1) 0%,
		rgba(22, 50, 79, .99) 30%,
		rgba(22, 50, 79, .94) 40%,
		rgba(22, 50, 79, .76) 51%,
		rgba(10, 35, 56, .28) 65%,
		rgba(10, 35, 56, .04) 79%
	);
}

.lw-discovery-hero__inner {
	position: relative;
	z-index: 2;
	width: min(1180px, calc(100% - 48px));
	height: 100%;
	margin-inline: auto;
}

.lw-discovery-hero__copy {
	display: flex;
	width: 100%;
	max-width: var(--hero-copy-width);
	height: 100%;
	justify-content: center;
	flex-direction: column;
	padding: 48px 0 88px;
	transform: translateY(-2%);
}

.lw-discovery-hero__eyebrow {
	display: block;
	margin-bottom: 14px;
	color: var(--lw-soft, #a9d9f0);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.lw-discovery-hero h1 {
	max-width: var(--hero-copy-width);
	margin: 0;
	font-family: var(--lw-heading-font, Inter, system-ui, sans-serif);
	font-size: clamp(3.2rem, 5.1vw, var(--lw-hero-heading-size, 72px));
	font-weight: 800;
	line-height: .98;
	letter-spacing: -.045em;
	text-wrap: balance;
}

.lw-discovery-hero h1 span,
.lw-discovery-hero h1 strong {
	display: block;
}

.lw-discovery-hero h1 strong {
	color: var(--lw-soft, #a9d9f0);
	font-weight: inherit;
}

.lw-discovery-hero__copy > p {
	max-width: 540px;
	margin: 22px 0 0;
	font-size: var(--lw-hero-body-size, 17px);
	line-height: 1.6;
}

.lw-discovery-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.lw-discovery-hero__actions .lw-button {
	min-height: 48px;
	padding-inline: 22px;
	background: var(--lw-primary, #197d8c);
	color: #fff;
}

.lw-discovery-hero__actions .lw-discovery-hero__secondary-action {
	border-color: rgba(255, 255, 255, .55);
	background: rgba(22, 50, 79, .25);
	color: #fff;
	backdrop-filter: blur(4px);
}

.lw-discovery-hero__actions .lw-button:hover {
	background: color-mix(in srgb, var(--lw-primary, #197d8c), #fff 10%);
}

.lw-discovery-hero__actions .lw-discovery-hero__secondary-action:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .12);
}

.lw-discovery-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	color: rgba(255, 255, 255, .86);
	font-size: .86rem;
}

.lw-discovery-hero__trust li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.lw-discovery-hero__trust svg {
	fill: none;
	stroke: var(--lw-soft, #a9d9f0);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.lw-discovery-hero__trust strong {
	color: #fff;
}

@media (min-width: 1601px) {
	.lw-discovery-hero__photo {
		width: min(76vw, 1500px);
	}
}

@media (max-width: 1024px) {
	.lw-discovery-hero {
		--hero-header-height: 78px;
		--hero-focus-x: var(--lw-hero-focus-tablet-x, 72%);
		--hero-focus-y: var(--lw-hero-focus-tablet-y, 49%);
		min-height: 680px;
		height: clamp(680px, calc(100svh - var(--hero-header-height)), 800px);
		max-height: 800px;
	}

	.admin-bar .lw-discovery-hero {
		--hero-header-height: 110px;
	}

	.lw-discovery-hero__photo {
		width: 100%;
	}

	.lw-discovery-hero__overlay {
		background: linear-gradient(90deg, rgba(22, 50, 79, 1) 0%, rgba(22, 50, 79, .97) 42%, rgba(22, 50, 79, .64) 68%, rgba(10, 35, 56, .18) 100%);
	}

	.lw-discovery-hero__copy {
		max-width: 540px;
		padding-block: 48px 72px;
	}
}

@media (max-width: 600px) {
	.lw-discovery-hero {
		--hero-header-height: 68px;
		--hero-focus-x: var(--lw-hero-focus-mobile-x, 68%);
		--hero-focus-y: var(--lw-hero-focus-mobile-y, 48%);
		height: auto;
		min-height: calc(100svh - var(--hero-header-height));
		max-height: none;
		border-radius: 16px;
	}

	.admin-bar .lw-discovery-hero {
		--hero-header-height: 114px;
	}

	.lw-discovery-hero__inner {
		width: calc(100% - 32px);
		min-height: inherit;
	}

	.lw-discovery-hero__photo {
		width: 100%;
	}

	.lw-discovery-hero__overlay {
		background:
			linear-gradient(180deg, rgba(10, 35, 56, .18) 0%, rgba(22, 50, 79, .72) 38%, rgba(22, 50, 79, .98) 68%, rgba(22, 50, 79, 1) 100%),
			linear-gradient(90deg, rgba(22, 50, 79, .76) 0%, rgba(22, 50, 79, .2) 100%);
	}

	.lw-discovery-hero__copy {
		width: min(96%, 420px);
		max-width: none;
		height: auto;
		min-height: inherit;
		justify-content: flex-end;
		padding: 180px 0 40px;
		transform: none;
	}

	.lw-discovery-hero__eyebrow {
		margin-bottom: 10px;
	}

	.lw-discovery-hero h1 {
		font-size: clamp(2.55rem, 12vw, 3.35rem);
		line-height: 1;
	}

	.lw-discovery-hero__copy > p {
		margin-top: 17px;
		font-size: min(var(--lw-hero-body-size, 17px), 16px);
		line-height: 1.55;
	}

	.lw-discovery-hero__actions {
		display: grid;
		margin-top: 22px;
	}

	.lw-discovery-hero__actions .lw-button {
		width: 100%;
	}

	.lw-discovery-hero__trust {
		gap: 8px 18px;
		margin-top: 22px;
	}
}

@media (max-width: 360px) {
	.lw-discovery-hero__inner {
		width: calc(100% - 24px);
	}

	.lw-discovery-hero__copy {
		padding-top: 150px;
	}

	.lw-discovery-hero h1 {
		font-size: 2.35rem;
	}

	.lw-discovery-hero__trust {
		display: grid;
	}
}