/*
 * Hero — Full-bleed hero panel styles
 * Unbreakable · Retro Comic Static Site
 *
 * Simplified: single overlay, no halftone sub-layer, cleaner text treatment.
 */

.c-hero {
	position: relative;
	min-height: 85vh;
	display: flex;
	align-items: center;
	overflow: hidden;
}

/* ── Background image ── */
.c-hero__background {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	z-index: 0;
	will-change: transform;
}

/* ── Dark overlay gradient ── */
.c-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		rgba(10, 10, 10, 0.75) 30%,
		rgba(26, 26, 46, 0.5) 100%
	);
	z-index: 1;
}

/* ── Content area ── */
.c-hero__content {
	position: relative;
	z-index: var(--z-hero-content);
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding: var(--space-2xl) var(--space-lg);
}

/* ── Title ── */
.c-hero__title {
	font-size: var(--fs-hero);
	line-height: 0.95;
	color: var(--color-white);
	text-shadow:
		4px 4px 0 var(--color-ink),
		-2px -2px 0 var(--color-ink),
		2px -2px 0 var(--color-ink),
		-2px 2px 0 var(--color-ink),
		0 8px 0 rgba(0,0,0,0.4);
	-webkit-text-stroke: 1.5px var(--color-ink);
	paint-order: stroke fill;
	margin-bottom: var(--space-lg);
	max-width: 20ch;
}

/* Accent color on key word within title */
.c-hero__title-em {
	color: var(--color-crimson);
}

/* ── Subtitle ── */
.c-hero__subtitle {
	font-size: var(--fs-h3);
	font-family: var(--font-body);
	font-weight: 400;
	color: var(--color-paper);
	line-height: 1.5;
	max-width: 50ch;
	margin-bottom: var(--space-xl);
}

/* ── CTA button ── */
.c-hero__cta {
	display: inline-flex;
}

/* ── Responsive ── */
@media (max-width: 767px) {
	.c-hero { min-height: 70vh; }
	.c-hero__content { padding: var(--space-xl) var(--space-md); }
	.c-hero__title { max-width: none; }
	.c-hero__subtitle {
		font-size: var(--fs-body);
		max-width: none;
	}
}