/**
 * Inner-page hero (template-parts/global/page-hero.php).
 * Compact compared with the homepage hero: it introduces a page, it does not
 * fill the screen. It reads as an app header sheet: a lit panel with rounded
 * lower corners that the page content continues beneath. Variants: --type (no
 * photo: a static instrument-dial motif fills the free side), --image,
 * --stock, --sold, --feature (About: a tall, cinematic hero when it has a
 * photo) and --not-found (404, assets/css/pages/not-found.css).
 */

.nscb-page-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: var(--nscb-space-5) var(--nscb-space-7);
	border-bottom: 1px solid var(--nscb-edge);
	border-radius: 0 0 var(--nscb-radius-xl) var(--nscb-radius-xl);
	background-color: var(--nscb-color-bg-secondary);
	background-image: linear-gradient(180deg, var(--nscb-color-bg) 0%, var(--nscb-color-bg-secondary) 100%);
	box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9);
}

.nscb-page-hero__media,
.nscb-page-hero__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.nscb-page-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nscb-page-hero--image .nscb-page-hero__veil {
	background: linear-gradient(0deg, var(--nscb-color-bg) 0%, color-mix(in srgb, var(--nscb-color-bg) 72%, transparent) 45%, color-mix(in srgb, var(--nscb-color-bg) 45%, transparent) 100%);
}

.nscb-page-hero--type .nscb-page-hero__veil {
	background:
		radial-gradient(38% 55% at 92% 8%, color-mix(in srgb, var(--nscb-color-highlight) 13%, transparent), transparent 70%),
		radial-gradient(70% 90% at 85% 0%, color-mix(in srgb, var(--nscb-color-accent) 16%, transparent), transparent 70%);
}

/* Instrument dial: concentric hairline rings (::before) and one lit arc
   (::after), set off the top-right corner. Purely decorative and static. */
.nscb-page-hero--type .nscb-page-hero__veil::before,
.nscb-page-hero--type .nscb-page-hero__veil::after {
	content: "";
	position: absolute;
	top: var(--nscb-dial-top, -12rem);
	right: var(--nscb-dial-right, -10rem);
	width: var(--nscb-dial-size, 20rem);
	aspect-ratio: 1;
	border-radius: 50%;
	transform: var(--nscb-dial-shift, none);
}

.nscb-page-hero--type .nscb-page-hero__veil::before {
	background: repeating-radial-gradient(circle, transparent 0 2.25rem, var(--nscb-dial-ring, color-mix(in srgb, var(--nscb-color-text) 8%, transparent)) 2.25rem calc(2.25rem + 1px));
	-webkit-mask: radial-gradient(circle, #000 0 45%, transparent 71%);
	mask: radial-gradient(circle, #000 0 45%, transparent 71%);
}

.nscb-page-hero--type .nscb-page-hero__veil::after {
	background: conic-gradient(from 205deg, transparent 0deg, var(--nscb-dial-arc, var(--nscb-color-highlight)) 1deg 62deg, transparent 63deg);
	-webkit-mask: radial-gradient(circle, transparent 0 calc(58% - 2px), #000 calc(58% - 1.5px) 58%, transparent calc(58% + 0.5px));
	mask: radial-gradient(circle, transparent 0 calc(58% - 2px), #000 calc(58% - 1.5px) 58%, transparent calc(58% + 0.5px));
	opacity: 0.85;
}

/* Sold: a cooler, silver light and a silver arc instead of the accent. */
.nscb-page-hero--sold.nscb-page-hero--type .nscb-page-hero__veil {
	background: radial-gradient(75% 90% at 90% 0%, color-mix(in srgb, var(--nscb-color-text-secondary) 10%, transparent), transparent 70%);
}

.nscb-page-hero--sold.nscb-page-hero--type {
	--nscb-dial-arc: color-mix(in srgb, var(--nscb-color-text-secondary) 60%, transparent);
}

/* Sold: the count in silver; yellow stays with cars that are available. */
.nscb-page-hero--sold .nscb-page-hero__stat-value {
	color: var(--nscb-color-text);
}

.nscb-page-hero .nscb-breadcrumbs {
	margin-bottom: var(--nscb-space-6);
}

.nscb-page-hero__body {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--nscb-space-5) var(--nscb-space-7);
}

.nscb-page-hero__text {
	max-width: 44rem;
	animation: nscb-page-rise 0.7s var(--nscb-ease-out) both;
}

.nscb-page-hero__title {
	font-size: var(--nscb-text-4xl);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
}

.nscb-page-hero__subtext {
	max-width: 46ch;
	margin-top: var(--nscb-space-4);
	color: var(--nscb-color-text-secondary);
	font-size: var(--nscb-text-lg);
}

.nscb-page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nscb-space-3);
	margin-top: var(--nscb-space-6);
}

/* Stat: a raised tile with the figure in the highlight color. */
.nscb-page-hero__stat {
	display: inline-flex;
	align-items: baseline;
	gap: var(--nscb-space-3);
	padding: var(--nscb-space-3) var(--nscb-space-5);
	border: 1px solid var(--nscb-edge);
	border-radius: var(--nscb-radius-lg);
	background-color: color-mix(in srgb, var(--nscb-color-surface) 55%, transparent);
	box-shadow: var(--nscb-edge-light);
	animation: nscb-page-rise 0.7s 0.12s var(--nscb-ease-out) both;
}

.nscb-page-hero__stat-value {
	color: var(--nscb-color-highlight);
	font-family: var(--nscb-font-heading);
	font-size: var(--nscb-text-3xl);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
	line-height: 1;
}

.nscb-page-hero__stat-label {
	color: var(--nscb-color-text-secondary);
	font-size: var(--nscb-text-xs);
	font-weight: 600;
	letter-spacing: var(--nscb-tracking-wide);
	text-transform: uppercase;
}

/* Feature: with a photo, the hero fills most of the first screen and the title sits low. */
.nscb-page-hero--feature.nscb-page-hero--image {
	display: flex;
	min-height: min(78svh, 46rem);
}

.nscb-page-hero--feature.nscb-page-hero--image .nscb-page-hero__inner {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.nscb-page-hero--feature.nscb-page-hero--image .nscb-page-hero__body {
	margin-top: auto;
}

.nscb-page-hero--feature .nscb-page-hero__title {
	font-size: var(--nscb-text-display);
	line-height: 0.95;
}

/* Feature without a photo: a taller sheet so the display title has room to breathe. */
.nscb-page-hero--feature.nscb-page-hero--type {
	padding-bottom: var(--nscb-space-8);
}

.nscb-page-hero--feature.nscb-page-hero--image .nscb-page-hero__media img {
	animation: nscb-page-settle 1.6s var(--nscb-ease-out) both;
}

/* The narrowest phones: keep the arc clear of long titles. */
@media (max-width: 22.5rem) {
	.nscb-page-hero--type {
		--nscb-dial-right: -12rem;
	}
}

@media (min-width: 48rem) {
	.nscb-page-hero--type {
		--nscb-dial-top: -16rem;
		--nscb-dial-right: -10rem;
		--nscb-dial-size: 30rem;
	}
}

@media (min-width: 64rem) {
	.nscb-page-hero {
		padding-block: var(--nscb-space-6) var(--nscb-space-8);
		border-radius: 0 0 var(--nscb-radius-2xl) var(--nscb-radius-2xl);
	}

	.nscb-page-hero .nscb-breadcrumbs {
		margin-bottom: var(--nscb-space-8);
	}

	/* The dial sits fully inside the free right side of the hero. */
	.nscb-page-hero--type {
		--nscb-dial-top: 50%;
		--nscb-dial-right: max(var(--nscb-gutter), calc((100% - var(--nscb-container-xl)) / 2));
		--nscb-dial-size: clamp(20rem, 30vw, 27rem);
		--nscb-dial-shift: translateY(-42%);
	}

	.nscb-page-hero__stat {
		flex-direction: column;
		align-items: flex-end;
		gap: var(--nscb-space-2);
		padding: var(--nscb-space-4) var(--nscb-space-6);
	}

	.nscb-page-hero__stat-value {
		font-size: var(--nscb-text-4xl);
	}
}

@keyframes nscb-page-rise {
	from {
		opacity: 0;
		transform: translateY(1rem);
	}
}

@keyframes nscb-page-settle {
	from {
		transform: scale(1.06);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nscb-page-hero__text,
	.nscb-page-hero__stat,
	.nscb-page-hero--feature.nscb-page-hero--image .nscb-page-hero__media img {
		animation: none;
	}
}

@media (forced-colors: active) {
	.nscb-page-hero--type .nscb-page-hero__veil::before,
	.nscb-page-hero--type .nscb-page-hero__veil::after {
		display: none;
	}
}