/* The overlay colour comes from --hero-overlay (set per site in theme.css);
   the darken classes set its strength. */
.c-hero {
	--hero-dim: 0.3;

	position: relative;
	width: 100%;
	height: clamp(18rem, 60vh, 40rem);
	overflow: hidden;
	margin-bottom: var(--space-4);
}

.c-hero--darken-light {
	--hero-dim: 0.4;
}

.c-hero--darken-medium {
	--hero-dim: 0.5;
}

.c-hero--darken-heavy {
	--hero-dim: 0.75;
}

.c-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--hero-overlay) calc((var(--hero-dim) + 0.25) * 100%), transparent),
		color-mix(in srgb, var(--hero-overlay) calc(var(--hero-dim) * 100%), transparent)
	);
}

.c-hero__caption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 1;
	padding-bottom: var(--space-4);
}

.c-hero__text {
	margin: 0;
	color: #ffffff;
	text-shadow: 0 1px 14px rgb(0 0 0 / 0.45);
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 5vw, 3.75rem);
	font-weight: 700;
	line-height: 1.1;
	text-align: left;
}