/* hsa-page-hero.css — Hillside Addon page hero styles */

.hsa-page-hero {
	padding-block: 64px 72px;
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--hsa-line);
	background: var(--hsa-bg);
}

.hsa-page-hero .hsa-wrap {
	position: relative;
	z-index: 1;
}

/* ── Breadcrumb ───────────────────────────────────────────── */
.hsa-crumbs {
	display: flex;
	gap: 10px;
	font-size: 14px;
	color: var(--hsa-muted);
	margin-bottom: 26px;
	flex-wrap: wrap;
}

.hsa-crumbs a {
	text-decoration: none;
	color: var(--hsa-muted);
}

.hsa-crumbs a:hover {
	color: var(--hsa-fg);
}

/* ── Heading ─────────────────────────────────────────────── */
.hsa-page-hero h1 {
	font-size: clamp(40px, 5.4vw, 72px);
	font-weight: 300;
	margin-top: 18px;
	max-width: 13em;
	font-family: var(--hsa-display);
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.hsa-page-hero h1 b {
	color: var(--hsa-brand-text);
}

/* ── Lead ────────────────────────────────────────────────── */
.hsa-page-hero .hsa-lead {
	margin-top: 22px;
	font-family: var(--hsa-body);
	font-size: 20px;
}

/* ── Decorative stripes ──────────────────────────────────── */
.hsa-page-hero::before {
	content: "";
	position: absolute;
	width: 6px;
	top: 0;
	bottom: 0;
	right: 9%;
	background: var(--hsa-yellow);
	opacity: 0.9;
}

.hsa-page-hero::after {
	content: "";
	position: absolute;
	height: 6px;
	right: 0;
	width: 16%;
	top: 42%;
	background: var(--hsa-green);
}

/* ── Variant: hero with image ────────────────────────────── */
.hsa-has-img {
	padding-bottom: 0;
	border: 0;
}

.hsa-page-hero-img {
	margin-top: 48px;
	border-radius: var(--hsa-r) var(--hsa-r) 0 0;
	overflow: hidden;
	aspect-ratio: 21 / 8;
	max-width: 100%;
}

.hsa-page-hero-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1300px) {
	.hsa-page-hero::before,
	.hsa-page-hero::after {
		display: none;
	}
}

@media (max-width: 620px) {
	.hsa-page-hero {
		padding-block: 40px 52px;
	}

	.hsa-page-hero::before,
	.hsa-page-hero::after {
		display: none;
	}

	.hsa-page-hero-img {
		aspect-ratio: 4 / 3;
		margin-top: 36px;
	}
}