/* =========================================================
   JET SUPPLY — AIRCRAFT SINGLE (dark range hero)
   Loaded conditionally on is_singular('aircraft') only
   (inc/enqueue.php, D-26 critical-CSS budget firewall).
   Design: "Manifest" direction — navy editorial hero with
   the aircraft's own range contour drawn behind the title
   by assets/js/aircraft-hero.js. Contour radius comes from
   the ACF field aircraft_range_nm; when that field is empty
   the hero renders coastline texture only and the spec strip
   says "On request". Nothing is invented client-side.
   ========================================================= */

/* ---------- Hero shell ---------- */
.ac-hero {
	position: relative;
	background: var(--c-navy-900);
	color: var(--c-ivory);
	overflow: hidden;
}
.ac-hero__map {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 0;
}

/* Legibility scrim — darkens the upper-left behind the title so the H1 reads
   cleanly over the contour map, then fades out to the right and down to keep
   the range contour visible. Pure navy, no new tokens. */
.ac-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--c-navy-900) 62%, transparent) 0%, transparent 24%),
		linear-gradient(96deg, var(--c-navy-900) 2%, color-mix(in srgb, var(--c-navy-900) 58%, transparent) 34%, transparent 62%);
}
/* Gradient stops + coastline take tokens via CSS — SVG attrs can't var(). */
.ac-hero__g-start { stop-color: var(--c-navy-700); }
.ac-hero__g-mid   { stop-color: var(--c-navy-800); }
.ac-hero__g-end   { stop-color: var(--c-navy-900); }
.ac-hero__coast {
	stroke: var(--c-silver);
	stroke-width: 0.8;
	opacity: 0.16;
}

.ac-hero__inner { position: relative; z-index: 2; padding-block: var(--s-5) 0; }

/* ---------- Breadcrumb on navy ---------- */
.ac-hero .ac-crumb__list li,
.ac-hero .ac-crumb__sep { color: var(--c-silver-dim); }
.ac-hero .ac-crumb__list a {
	color: var(--c-silver-dim);
	border-bottom-color: color-mix(in srgb, var(--c-silver) 25%, transparent);
}
.ac-hero .ac-crumb__list a:hover { color: var(--c-ivory); }

/* ---------- Title block ---------- */
.ac-hero__eyebrow { color: var(--c-silver); }
.ac-hero__head { padding-block-start: var(--s-8); }
.ac-hero__title {
	color: var(--c-ivory);
	margin: var(--s-4) 0 var(--s-6);
	max-width: 14ch;
}
.ac-hero__lede {
	font-size: var(--fs-h5);
	line-height: var(--lh-base);
	color: var(--c-silver);
	max-width: 42ch;
}

/* ---------- CTA + departure select row ---------- */
.ac-hero__row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--s-6);
	padding: var(--s-7) 0 var(--s-6);
}
.ac-hero__cta {
	display: inline-block;
	padding: var(--s-3) var(--s-6);
	font-size: var(--fs-small);
	letter-spacing: var(--tr-wide);
	text-decoration: none;
	color: var(--c-ivory);
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--c-silver) 45%, transparent);
	transition: border-color var(--t-quiet, 280ms ease);
}
.ac-hero__cta:hover { border-color: var(--c-silver); }
.ac-hero__cta:focus-visible { outline: 2px solid var(--c-silver); outline-offset: 4px; }

.ac-hero__from-label {
	display: block;
	font-family: var(--ff-mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--tr-luxe);
	text-transform: uppercase;
	color: var(--c-silver-dim);
	margin-bottom: var(--s-2);
}
.ac-hero__selectwrap { position: relative; display: inline-block; }
.ac-hero__selectwrap::after {
	content: "";
	position: absolute;
	right: 4px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-right: 1px solid var(--c-silver-dim);
	border-bottom: 1px solid var(--c-silver-dim);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}
.ac-hero__select {
	appearance: none;
	-webkit-appearance: none;
	min-width: 10rem;
	font-family: var(--ff-sans);
	font-size: var(--fs-small);
	color: var(--c-ivory);
	background: transparent;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--c-silver) 45%, transparent);
	border-radius: 0;
	padding: var(--s-2) var(--s-5) var(--s-2) 0;
	cursor: pointer;
	transition: border-color var(--t-quiet, 280ms ease);
}
.ac-hero__select:hover { border-bottom-color: var(--c-silver); }
.ac-hero__select:focus-visible { outline: 2px solid var(--c-silver); outline-offset: 4px; }
.ac-hero__select option { color: var(--c-ink); background: var(--c-paper); }

/* ---------- Spec strip on the hairline ---------- */
.ac-hero__strip {
	display: flex;
	gap: var(--s-7);
	border-top: 1px solid color-mix(in srgb, var(--c-silver) 25%, transparent);
	padding: var(--s-5) 0 var(--s-7);
}
.ac-hero__cell { flex: 1 1 0; min-width: 0; }
.ac-hero__cell-label {
	font-family: var(--ff-mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--tr-luxe);
	text-transform: uppercase;
	color: var(--c-silver-dim);
	margin-bottom: var(--s-2);
}
.ac-hero__cell-val { font-size: var(--fs-h4); font-variant-numeric: tabular-nums; }
.ac-hero__cell-val--na {
	font-family: var(--ff-serif);
	font-style: italic;
	font-size: var(--fs-h5);
	color: var(--c-silver);
}

/* ---------- Fine print under the hero (light bg) ---------- */
.ac-hero-fineprint {
	margin: var(--s-3) 0 0;
	text-align: right;
	font-family: var(--ff-mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--tr-luxe);
	text-transform: uppercase;
	color: var(--c-text-soft);
}

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
	.ac-hero__row { flex-wrap: wrap; align-items: flex-start; }
	.ac-hero__strip { flex-wrap: wrap; gap: var(--s-5) var(--s-6); }
	.ac-hero__cell { flex: 1 1 40%; }
	.ac-hero__title { max-width: none; }
}