/* Hero component */
.hero {
	position: relative;
	padding-block: var(--space-9);
	background-color: var(--color-brand-primary);
	background-size: cover;
	background-position: center;
	color: var(--color-text-inverse);
	overflow: hidden;
}

.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 100%);
	z-index: 1;
}

.hero > .container {
	position: relative;
	z-index: 2;
}

.hero__headline {
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-inverse);
	margin-block-end: var(--space-3);
	max-width: 48rem;
}

.hero__subheadline {
	font-size: var(--font-size-lg);
	color: rgba(255, 255, 255, 0.85);
	margin-block-end: var(--space-6);
	max-width: 40rem;
	line-height: var(--line-height-normal);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.hero__cta {
	display: inline-flex;
	align-items: center;
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-md);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	transition: filter var(--transition-fast);
}

.hero__cta:hover {
	text-decoration: none;
	filter: brightness(0.9);
}

.hero__cta--primary {
	background-color: var(--color-brand-accent, var(--color-surface-primary));
	color: var(--color-text-primary);
}

.hero__cta--secondary {
	background-color: transparent;
	color: var(--color-text-inverse);
	border: 2px solid var(--color-text-inverse);
}