/* ==========================================================================
   Homepage — hero, featured carousel, reasons, testimonials.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.pm-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	/* Not 100vh: on a phone that reserves space for browser chrome that is not
	   there, and the search widget ends up below the fold on the one device
	   most buyers arrive on. */
	min-height: 88vh;
	min-height: 88svh;
	overflow: hidden;
	background-color: var(--bg-base);
}

.pm-hero__bg {
	position: absolute;
	inset: 0;
}

.pm-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* No photo yet — a deliberate lit gradient rather than a stock car the
   dealership does not own. */
.pm-hero--no-image {
	background-image: radial-gradient(
			90% 80% at 20% 0%,
			rgba(0, 212, 255, 0.12),
			transparent 60%
		),
		linear-gradient(160deg, #16161a 0%, #0a0a0b 60%);
}

.pm-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.pm-hero__scrim--v {
	background-image: linear-gradient(
		to top,
		#0a0a0b 0%,
		#0a0a0b 15%,
		rgba(10, 10, 11, 0.5) 50%,
		transparent 100%
	);
}

.pm-hero__scrim--h {
	background-image: linear-gradient(
		to right,
		rgba(10, 10, 11, 0.85) 0%,
		rgba(10, 10, 11, 0.4) 60%,
		transparent 100%
	);
}

.pm-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-block: 6rem 3rem;
}

.pm-hero__content > .pm-wrap {
	max-width: min(var(--wrap), 100%);
}

.pm-hero__rule {
	display: block;
	width: 2rem;
	height: 2px;
	background-color: var(--accent);
	margin-bottom: 0.75rem;
}

.pm-hero__headline {
	margin-top: 0.75rem;
	font-family: var(--font-display);
	/* Down to 2.75rem at 390px: "Your Next Car Awaits." is the longest phrase
	   and has to hold three lines without overflowing. */
	font-size: clamp(2.75rem, 13vw, 6rem);
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: #fff;
	/* Reserve the line box so the cycling phrases do not shunt the page. */
	min-height: 2.85em;
	max-width: 12ch;
}

.pm-hero__lede {
	margin-top: 1rem;
	max-width: 32rem;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.7);
}

.pm-hero__lede-link {
	color: var(--accent-text);
	font-weight: 700;
}

.pm-hero__search {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 1.5rem;
	padding: 0.75rem;
	max-width: 40rem;
	background-color: rgba(17, 17, 20, 0.7);
	border: 1px solid rgba(30, 30, 36, 0.9);
	border-radius: var(--radius);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.pm-hero__field {
	flex: 1;
	min-width: 0;
}

.pm-hero__field .pm-select {
	width: 100%;
}

.pm-select--pill {
	border-radius: 999px;
	background-color: rgba(22, 22, 26, 0.8);
	padding-inline: 1.25rem 2.5rem;
}

.pm-hero__submit {
	border-radius: 999px;
	white-space: nowrap;
}

.pm-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.pm-hero__scroll {
	position: absolute;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: none;
	flex-direction: column;
	align-items: center;
	color: var(--text-secondary);
	transition: opacity 0.4s var(--ease);
}

.pm-hero__scroll.is-hidden {
	opacity: 0;
}

.pm-hero__scroll-line {
	width: 1px;
	height: 40px;
	background-color: rgba(255, 255, 255, 0.2);
}

.pm-hero__scroll .pm-icon {
	margin-top: 0.25rem;
	animation: pm-bob 1.5s ease-in-out infinite;
}

@keyframes pm-bob {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(6px);
	}
}

@media (min-width: 640px) {
	.pm-hero__search {
		flex-direction: row;
		align-items: center;
	}
}

@media (min-width: 1024px) {
	.pm-hero {
		min-height: 100vh;
		min-height: 100svh;
	}

	.pm-hero__content {
		padding-block: 8rem 4rem;
	}

	.pm-hero__lede {
		font-size: 1rem;
	}

	.pm-hero__scroll {
		display: flex;
	}
}

/* --------------------------------------------------------------------------
   Featured carousel
   -------------------------------------------------------------------------- */

.pm-carousel {
	position: relative;
	margin-top: 2.5rem;
}

.pm-carousel__track {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 1rem;
	/* The card's hover lift and focus ring would otherwise be clipped by the
	   scroll container. */
	padding-top: 0.5rem;
}

.pm-carousel__track > .pm-card {
	flex: 0 0 auto;
	/* 83% leaves the next card peeking, which is what tells a thumb there is
	   more to swipe. */
	width: 83%;
	scroll-snap-align: start;
	/* .pm-card's height: 100% can't resolve against this scroll track, whose
	   height is set by its contents, and a set height also switches off
	   flex stretch, so each card shrank to its own content. A car with a
	   two-line name ended up taller than its neighbours. Auto height plus
	   stretch makes every card match the tallest. */
	height: auto;
	align-self: stretch;
}

.pm-carousel__arrow {
	position: absolute;
	top: 40%;
	z-index: 3;
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--accent);
	border-radius: 50%;
	background-color: rgba(10, 10, 11, 0.8);
	color: var(--accent-text);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
		opacity 0.2s var(--ease);
}

[data-theme='light'] .pm-carousel__arrow {
	background-color: rgba(255, 255, 255, 0.85);
}

.pm-carousel__arrow:hover {
	background-color: var(--accent);
	color: var(--text-on-accent);
}

.pm-carousel__arrow[disabled] {
	opacity: 0.3;
	pointer-events: none;
}

.pm-carousel__arrow--prev {
	left: -1rem;
}

.pm-carousel__arrow--next {
	right: -1rem;
}

@media (min-width: 640px) {
	.pm-carousel__track > .pm-card {
		width: calc(50% - 0.625rem);
	}
}

@media (min-width: 1024px) {
	.pm-carousel__track {
		gap: 1.5rem;
	}

	.pm-carousel__track > .pm-card {
		width: calc(25% - 1.125rem);
	}

	/* Four across, a long name wraps to two lines while its neighbours fit on
	   one. Reserving two lines for every title keeps the specs and the price
	   level across the row, not just the card edges. */
	.pm-carousel__track .pm-card__title {
		/* 2 × the title's 1.15 line-height, for browsers without lh. */
		min-height: 2.3em;
		min-height: 2lh;
	}

	html.pm-js .pm-carousel__arrow {
		display: flex;
	}
}

/* --------------------------------------------------------------------------
   Today's hot deals — homepage teaser
   -------------------------------------------------------------------------- */

.pm-hot-deals-teaser {
	position: relative;
	overflow: hidden;
	/* Deliberately dark in both themes — same reasoning as the hero scrim
	   (see style.css): this section leans on a moody background photo, not
	   the light page canvas, so its colours are pinned rather than
	   following the theme tokens. The background is the composite of
	   --bg-base (dark) with the amber wash this used to sit on top of, so
	   it renders pixel-identical to how dark mode already looked — see
	   PROJECT-STATE.md "Day seven" for the fix this replaced. */
	color: #f5f5f7;
	background-color: #18130b;
	border-block: 1px solid rgba(245, 158, 11, 0.15);
}

/* Keeps the dark-mode heading glow (style.css) even when the page around
   it is in light mode — same reasoning as every other colour in this
   section: it stays visually identical regardless of theme. */
.pm-hot-deals-teaser .pm-h2 {
	text-shadow: 0 0 24px rgba(0, 212, 255, 0.12);
}

/* Optional, set via Customize -> Pristine Motors -- Homepage -> Hot Deals
   teaser background. Painted low-opacity so the section's own amber tint
   (the background-color above) stays the dominant colour — the photo is
   texture, not a second image competing with the deal card. */
.pm-hot-deals-teaser__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.pm-hot-deals-teaser__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0.16;
}

.pm-hot-deals-teaser__inner {
	position: relative;
	z-index: 1;
	padding-block: 5rem;
	text-align: center;
}

.pm-hot-deals-teaser__heading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.pm-hot-deals-teaser__heading .pm-icon {
	color: #f59e0b;
}

.pm-hot-deals-teaser__tagline {
	margin-top: 0.75rem;
	color: #a0a0b0;
}

.pm-hot-deals-teaser__card {
	max-width: 28rem;
	margin: 2rem auto 0;
	padding: 1.5rem;
	background-color: rgba(17, 17, 20, 0.5);
	border: 1px solid rgba(245, 158, 11, 0.25);
	border-radius: var(--radius-lg);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.pm-hot-deals-teaser__meta {
	font-size: 0.875rem;
	color: #8a8a9a;
}

.pm-hot-deals-teaser__name {
	margin-top: 0.5rem;
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #f5f5f7;
}

.pm-hot-deals-teaser__price {
	margin-top: 0.75rem;
	font-family: var(--font-display);
	font-size: 2.25rem;
	font-weight: 900;
	color: #f59e0b;
}

.pm-hot-deals-teaser__inner > .pm-btn {
	margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   Why buyers choose us
   -------------------------------------------------------------------------- */

.pm-reasons {
	border-block: 1px solid var(--border);
}

.pm-reasons__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin: 3rem 0 0;
	padding: 0;
	list-style: none;
}

.pm-reason {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.5rem;
	transition: border-color 0.2s var(--ease);
}

.pm-reason:hover {
	border-color: rgba(0, 212, 255, 0.5);
}

.pm-reason__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--accent-glow);
	color: var(--accent-text);
}

.pm-reason__stat {
	display: block;
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.1;
	color: var(--accent-text);
}

.pm-reason__label {
	display: block;
	margin-top: 0.125rem;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-primary);
}

.pm-reason__sub {
	margin-top: 0.25rem;
	font-size: 0.875rem;
	color: var(--text-secondary);
}

@media (min-width: 640px) {
	.pm-reasons__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.pm-reasons__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

/* --------------------------------------------------------------------------
   Can't Find It? We'll Source It — homepage teaser for /incoming
   -------------------------------------------------------------------------- */

.pm-incoming-teaser {
	position: relative;
	overflow: hidden;
	background-color: var(--bg-elevated);
	padding-block: 6rem;
}

.pm-incoming-teaser__noise {
	z-index: 0;
	opacity: 0.04;
}

.pm-incoming-teaser__glow {
	position: absolute;
	top: 50%;
	left: -8rem;
	z-index: 0;
	width: 24rem;
	height: 24rem;
	transform: translateY(-50%);
	border-radius: 50%;
	background-color: var(--accent-glow);
	filter: blur(64px);
	pointer-events: none;
}

.pm-incoming-teaser__inner {
	position: relative;
	z-index: 1;
	display: grid;
	align-items: center;
	gap: 2.5rem;
}

.pm-incoming-teaser__heading {
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 6vw, 3.75rem);
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--text-primary);
}

.pm-incoming-teaser__body {
	margin-top: 1.25rem;
	max-width: 32rem;
	color: var(--text-secondary);
}

.pm-incoming-teaser__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 2rem;
}

.pm-incoming-teaser__watermark {
	display: none;
	pointer-events: none;
	user-select: none;
	text-align: right;
	font-family: var(--font-display);
	font-size: 4.5rem;
	font-weight: 900;
	line-height: 0.85;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--text-primary);
	/* The reference's 6% reads as invisible rather than "ghost" on most
	   displays — raised for legibility. Still well below the heading's full
	   opacity so it stays background texture, not a second competing
	   headline. */
	opacity: 0.22;
}

@media (min-width: 1024px) {
	.pm-incoming-teaser__inner {
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
	}

	.pm-incoming-teaser__watermark {
		display: block;
	}
}

/* --------------------------------------------------------------------------
   Reviews — a third-party widget (Trustindex or similar) rendered from the
   shortcode in Site Content settings. Its markup belongs to that plugin, so
   this is deliberately just a width/spacing wrapper, not a themed card —
   restyling internals we don't control breaks the moment the provider
   changes their DOM.
   -------------------------------------------------------------------------- */

.pm-reviews {
	margin-top: 3rem;
}