/* ==========================================================================
   Hero banner block
   Real source image is 1895/830. The top 18% is intentionally cropped
   off (client request) — the box ratio is set to the real width over
   82% of the real height, and object-position anchors to the bottom so
   the crop always removes from the top, never the sides or bottom.
   ========================================================================== */

.hero {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--color-bg-dark);
	/* Override the generic `section { padding-block }` rule (global.css) —
	   hero is a full-bleed banner, not a padded content section. Without
	   this, the ambient padding pushed .hero__media inward while
	   .hero__content (absolute, inset: 0) ignored it, so the media box
	   ended up visibly smaller than the section it was measured against. */
	padding-block: 0;
}

/* 1895 / (830 * 0.82) = 1895 / 680.6 — exactly an 18% top-crop.
   min-height is a floor measured against the actual rendered hero
   text (badge + H1 + subtitle + CTA, now vertically centered with
   padding on both top and bottom, worst case across all 9 pages) so
   short/narrow viewports never squeeze the box smaller than the text
   needs — it decreases from ~528px at 320px width down to a ~440px
   floor by ~1024px, past which the 18%-crop aspect-ratio is already
   taller than that floor and takes over on its own. Explicit
   height: auto pairs with aspect-ratio so a stale HTML width/height
   attribute can't win. */
.hero__media {
	position: relative;
	width: 100%;
	aspect-ratio: 1895 / 680.6;
	height: auto;
	min-height: clamp(27.5rem, calc(568px - 12.5vw), 33rem);
	overflow: hidden;
}

.hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
}

/* Persistent scrim: heaviest at the top (where the text now sits),
   fading out toward the bottom, always present regardless of breakpoint. */
.hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(18, 18, 18, 0.88) 0%, rgba(18, 18, 18, 0.55) 40%, rgba(18, 18, 18, 0.1) 75%, rgba(18, 18, 18, 0.4) 100%);
}

.hero__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-block: clamp(1.5rem, 4vw, 3.5rem);
}

.hero .breadcrumb {
	color: rgba(255, 255, 255, 0.75);
	justify-content: center;
}

.hero .breadcrumb a {
	color: rgba(255, 255, 255, 0.75);
}

.hero .breadcrumb a:hover {
	color: var(--color-heading-accent);
}

.hero__rating {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--color-accent-bg);
	color: var(--color-white);
	font-weight: var(--fw-btn);
	font-size: 0.85rem;
	padding: 0.4rem 0.9rem;
	clip-path: var(--clip-corner);
	margin-bottom: 1rem;
}

.hero__rating-stars {
	color: var(--color-heading-accent);
	letter-spacing: 1px;
}

.hero__title {
	color: var(--color-white);
	max-width: 46rem;
	margin-inline: auto;
	margin-bottom: 0.75rem;
}

.hero__subtitle {
	color: var(--color-text-main);
	max-width: 38rem;
	margin-inline: auto;
	font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.1rem);
	margin-bottom: 1.5rem;
}

.hero__cta {
	padding: 1rem 2rem;
}

@media (min-width: 48rem) {
	.hero__content {
		padding-block: clamp(2rem, 5vw, 4.5rem);
	}
}