/**
 * Hero shell — editorial · conversion · urgent
 */

.hero {
	background: var(--color-surface-soft);
	border-bottom: 1px solid var(--color-border);
	padding-block: var(--section-space);
}

.hero__inner {
	display: grid;
	gap: var(--space-8);
	align-items: center;
}

.hero__inner--split,
.grid-split.hero__inner {
	gap: var(--space-8);
}

@media (min-width: 900px) {
	.hero__inner--split,
	.grid-split.hero__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	}
}

.hero__title {
	font-size: var(--text-h1);
	margin: 0 0 var(--space-4);
	color: var(--color-brand);
	max-width: 20ch;
	line-height: var(--leading-tight);
}

.hero__lead {
	font-size: var(--text-lead);
	color: var(--color-text);
	line-height: var(--leading-body);
	max-width: var(--measure-default);
	margin: 0 0 var(--space-6);
}

.hero__actions {
	margin-bottom: var(--space-4);
}

.hero__media,
.hero__figure {
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-soft);
	background: var(--color-surface);
}

.hero__media img,
.hero__figure img {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}

.hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-5);
	padding-top: 0;
	border: none;
	list-style: none;
}

.hero__trust-item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-small);
	font-weight: 600;
	color: var(--color-text);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
}

/* Editorial — default hero */
.hero--editorial {
	background: var(--color-surface-soft);
}

/* Conversion — form column */
.hero--conversion .hero__aside {
	align-self: start;
}

.hero--conversion .form-shell {
	box-shadow: var(--shadow-soft);
}

/* Urgent — licht, geen full dark */
.hero--urgent {
	background: var(--color-surface);
	border-bottom-color: rgba(214, 40, 40, 0.12);
}

.hero--urgent .hero__title {
	max-width: 24ch;
}

.hero__ticker {
	font-size: var(--text-small);
	font-weight: 600;
	color: var(--color-brand);
	background: var(--color-surface-soft);
	border-bottom: 1px solid var(--color-border);
	padding: var(--space-3) var(--container-pad);
	text-align: center;
}

.hero__ticker a {
	color: var(--color-accent);
	font-weight: 700;
	text-decoration: none;
}

.hero__ticker a:hover {
	text-decoration: underline;
}

@media (max-width: 899px) {
	.hero--conversion .hero__inner--split {
		grid-template-columns: 1fr;
	}

	.hero--conversion .hero__aside {
		order: 3;
	}
}