/* =========================================================================
   Home — Aviator overview. Loaded only on views/home.php.
   ====================================================================== */

.hero {
	position: relative;
	padding-block: clamp(28px, 5vw, 64px) clamp(32px, 5vw, 72px);
	overflow: hidden;
}

/* The plane's contrail glow from the design — one cheap radial, no images. */
.hero__glow {
	position: absolute;
	top: -30%;
	right: -10%;
	width: min(900px, 90vw);
	aspect-ratio: 1;
	pointer-events: none;
	background: radial-gradient(circle, rgba(243, 187, 65, .22) 0%, rgba(255, 158, 22, .08) 40%, transparent 70%);
	filter: blur(10px);
}

.hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(28px, 4vw, 48px);
	align-items: center;
}

@media (min-width: 900px) {
	.hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.hero__eyebrow {
	display: inline-block;
	margin-bottom: 14px;
	padding: 5px 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gold);
	background: rgba(243, 187, 65, .12);
	border: 1px solid rgba(243, 187, 65, .3);
	border-radius: var(--r-pill);
}

.hero__heading { margin-bottom: 18px; }

/* Second line of the H1 picks up the gold sweep — matches the display treatment
   in the design without needing a separate <span> in the markup. */
.hero__heading::first-line { color: var(--text); }

.hero__text { max-width: 62ch; margin-bottom: 26px; }
.hero__text .rich-text { font-size: 17px; }

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 28px;
}

.hero__actions .btn { flex: 1 1 auto; min-width: 200px; }

@media (min-width: 560px) {
	.hero__actions .btn { flex: 0 0 auto; }
}

.hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
}

.hero__meta li { display: flex; flex-direction: column; gap: 3px; }

.hero__meta span {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-3);
}

.hero__meta strong {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 900;
	font-size: 18px;
	text-transform: uppercase;
	color: var(--text);
}

.hero__meta-rating { position: relative; }
.hero__meta-rating strong { color: var(--gold); }
.hero__meta-rating .av-stars { margin-top: 2px; }

.hero__aside { display: grid; gap: 20px; }

.hero__media {
	position: relative;
	display: grid;
	place-items: center;
}

.hero__media::after {
	content: '';
	position: absolute;
	inset: auto 10% -12px 10%;
	height: 40px;
	background: radial-gradient(ellipse at center, rgba(243, 187, 65, .3), transparent 70%);
	filter: blur(12px);
	z-index: -1;
}

.hero__image {
	width: 100%;
	max-width: 520px;
	height: auto;
	filter: drop-shadow(0 24px 44px rgba(5, 7, 24, .6));
}

/* Spec table sits under the artwork on desktop, above the fold on mobile. */
.hero .specs { box-shadow: var(--shadow); }

@media (max-width: 899px) {
	.hero__aside { order: 2; }
	.hero__media { order: 1; }
}

/* ------------------------------------------------------------- Toplist */
.toplist .section__title { max-width: 22ch; }

@media (min-width: 900px) {
	.toplist .section__title { max-width: none; }
}

/* --------------------------------------------------------------- Guides */
.guides .section__title { margin-bottom: 10px; }

/* ------------------------------------------------- Section rhythm tweaks */
.home .block--text + .block--text { padding-top: 0; }

.home .block--features { padding-block: clamp(36px, 5vw, 72px); }

.home .block--cta { padding-block: clamp(28px, 4vw, 56px); }

/* Anchored sections must clear the sticky header + quicknav bar. */
.home .section,
.home .block { scroll-margin-top: calc(var(--header-h) + 62px); }