/**
 * Maxt Offroad Theme — Vehicle Archive Templates (V0-aligned)
 *
 * Hub page:  taxonomy-vehicle_make.php — mxo-vhub-*
 * Spoke page: taxonomy-vehicle_model.php — mxo-vspoke-*
 *
 * V0 reference:
 *   Hub:   https://v0-maxtoffroad.vercel.app/utv-racks/polaris
 *   Spoke: https://v0-maxtoffroad.vercel.app/utv-racks/polaris/ranger
 *
 * Design tokens from tokens.css (cascade).
 *
 * @package maxtoffroad
 * @since   1.0.0
 */

/* ===================================================================
   SHARED
=================================================================== */
.mxo-main--vehicle-make,
.mxo-main--vehicle-model {
	padding-bottom: 0; /* sections handle own spacing */
}


/* ===================================================================
   HUB PAGE — Vehicle Make (mxo-vhub-*)
=================================================================== */

/* ── Hero ──────────────────────────────────────────────────────────── */
.mxo-vhub-hero {
	background: var(--secondary);
	color: var(--secondary-foreground);
	padding: 3rem 0 4rem;
}

@media (min-width: 1024px) {
	.mxo-vhub-hero {
		padding: 3rem 0 4rem;
	}
}

.mxo-vhub-hero__tagline {
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	/* White, matching the spoke eyebrow. Orange on this --secondary (#222)
	   hero is only 3.3:1 and fails AA for 14px text; white is 15:1. */
	color: var(--secondary-foreground);
	margin: 0 0 0.5rem;
}

.mxo-vhub-hero__title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 1rem;
	color: var(--secondary-foreground);
}

.mxo-vhub-hero__desc {
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--secondary-foreground);
	opacity: 0.8;
	max-width: 60ch;
	margin: 0 0 2rem;
}

.mxo-vhub-hero__desc p {
	margin: 0;
}

.mxo-vhub-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.mxo-vhub-hero__badge {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
}

.mxo-vhub-hero__badge svg {
	color: var(--primary);
	flex-shrink: 0;
}

/* ── Model Selector Grid ──────────────────────────────────────────── */
.mxo-vhub-models {
	padding: 3rem 0;
}

.mxo-vhub-models__title {
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	font-weight: 700;
	color: var(--foreground);
	margin: 0 0 2rem;
}

.mxo-vhub-models__grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 480px) {
	.mxo-vhub-models__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.mxo-vhub-models__grid { grid-template-columns: repeat(3, 1fr); }
}

.mxo-vhub-models__card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 1.5rem;
	text-decoration: none;
	color: var(--foreground);
	transition: border-color 200ms ease, box-shadow 200ms ease;
}

.mxo-vhub-models__card:hover {
	border-color: var(--primary);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.mxo-vhub-models__badge {
	position: absolute;
	top: -0.5rem;
	right: 1rem;
	background: var(--primary);
	color: var(--primary-foreground);
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	z-index: 1;
}

.mxo-vhub-models__card-image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 7.5rem;
	background: var(--muted);
	border-radius: var(--radius);
	margin-bottom: 1rem;
	overflow: hidden;
}

/* Machine photo (make or model hero) fills the card's image space and is
   contained — no crop, no distortion — instead of floating small and centred
   when the source is narrower than the panel. The muted panel reads as the
   backdrop, so the effect matches a background-size:contain treatment while
   the <img> keeps its alt text. Padding keeps the photo off the panel edges. */
.mxo-vhub-models__card-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 0.5rem;
	box-sizing: border-box;
}

.mxo-vhub-models__card-placeholder {
	font-family: var(--font-display);
	font-size: 1.25rem;
	color: var(--muted-foreground);
}

.mxo-vhub-models__card-name {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 0.25rem;
	line-height: 1.3;
	color: var(--foreground);
	transition: color 200ms ease;
}

.mxo-vhub-models__card:hover .mxo-vhub-models__card-name {
	color: var(--primary);
}

.mxo-vhub-models__card-years {
	font-size: 0.875rem;
	color: var(--muted-foreground);
	margin: 0 0 0.75rem;
}

.mxo-vhub-models__card-cta {
	font-size: 0.875rem;
	color: var(--primary);
	font-weight: 500;
	margin: auto 0 0;
}

/* ── SEO Content ──────────────────────────────────────────────────── */
.mxo-vhub-content {
	padding: 3rem 0;
	border-top: 1px solid var(--border);
	background: var(--muted);
}

.mxo-vhub-content__prose {
	max-width: none;
}

.mxo-vhub-content__prose h2 {
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	font-weight: 700;
	color: var(--foreground);
	margin: 0 0 1rem;
}

.mxo-vhub-content__prose p {
	color: var(--muted-foreground);
	line-height: 1.7;
	margin: 0 0 1rem;
}

.mxo-vhub-content__prose p:last-child {
	margin-bottom: 0;
}

/* ── Other Brands ─────────────────────────────────────────────────── */
.mxo-vhub-brands {
	padding: 3rem 0;
	border-top: 1px solid var(--border);
}

.mxo-vhub-brands__title {
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	font-weight: 700;
	color: var(--foreground);
	margin: 0 0 1.5rem;
}

.mxo-vhub-brands__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.mxo-vhub-brands__pill {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1.25rem;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--foreground);
	text-decoration: none;
	transition: border-color 200ms ease, color 200ms ease;
}

.mxo-vhub-brands__pill:hover {
	border-color: var(--primary);
	color: var(--primary);
}


/* ===================================================================
   SPOKE PAGE — Vehicle Model (mxo-vspoke-*)
=================================================================== */

/* ── Hero ──────────────────────────────────────────────────────────── */
.mxo-vspoke-hero {
	background: var(--secondary);
	color: var(--secondary-foreground);
	padding: 3rem 0 4rem;
}

.mxo-vspoke-hero__grid {
	display: grid;
	gap: 2rem;
	align-items: center;
}

@media (min-width: 1024px) {
	.mxo-vspoke-hero__grid {
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
	}
}

.mxo-vspoke-hero__tagline {
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	/* White, not orange: on the --bg variant this sits over the machine photo,
	   where the scrim composites to ~#50504b behind the glyphs and any orange
	   lands at 1.7-2.3:1. White is 7.6:1 there, 15:1 on the flat hero. */
	color: var(--secondary-foreground);
	margin: 0 0 0.5rem;
}

.mxo-vspoke-hero__title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 1rem;
	color: var(--secondary-foreground);
}

.mxo-vspoke-hero__desc {
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--secondary-foreground);
	opacity: 0.8;
	margin: 0 0 2rem;
}

.mxo-vspoke-hero__desc p {
	margin: 0;
}

.mxo-vspoke-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.mxo-vspoke-hero__badge {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
}

.mxo-vspoke-hero__badge svg {
	color: var(--primary);
	flex-shrink: 0;
}

/* ── Full-bleed machine-photo hero (mxo-vspoke-hero--bg) ──────────────
   Renders when a model has a machine photo (mxo_model_image). The photo
   is a real <img> covering the section (keeps alt/SEO/srcset); a gradient
   scrim over it keeps the left-aligned headline legible over the open-sky
   side of the shot. Falls back to the two-column band when no photo. */
.mxo-vspoke-hero--bg {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 0;
	background: var(--secondary);
	display: flex;
	align-items: center;
	min-height: clamp(300px, 34vw, 460px);
}

/* Scoped under --bg so height:100% beats WooCommerce's `.woocommerce-page img
   { height:auto }` (0,1,1); without the extra class the img renders at full
   intrinsic height, overflows, and clips from the top so object-fit never
   engages and the wheels get chopped. */
.mxo-vspoke-hero--bg .mxo-vspoke-hero__bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Anchor right (the machine) and vertically centre. The heroes are composed
	   for this band (machine centred with sky/ground margin), so a plain
	   right-centre crop trims only the margins. On narrow viewports the right
	   anchor keeps the machine in frame while the open-sky left edge drops. */
	/* Right-anchored (the machine) and vertically centred. Heroes are composed
	   for this wide band (machine centred, minimal sky/ground margin), so a
	   plain right-centre crop shows the machine filling the frame. */
	object-position: right center;
	z-index: -2;
}

.mxo-vspoke-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(11, 16, 21, 0.82) 0%, rgba(11, 16, 21, 0.6) 32%, rgba(11, 16, 21, 0.26) 54%, rgba(11, 16, 21, 0) 72%),
		linear-gradient(0deg, rgba(11, 16, 21, 0.34) 0%, rgba(11, 16, 21, 0) 30%);
}

.mxo-vspoke-hero--bg .mxo-container {
	position: relative;
	z-index: 1;
}

/* Single column: the text sits over the image, no right column. */
.mxo-vspoke-hero--bg .mxo-vspoke-hero__grid {
	display: block;
}

.mxo-vspoke-hero--bg .mxo-vspoke-hero__text {
	max-width: 40rem;
	padding-block: 3.5rem;
}

/* Light type over the photo, regardless of the base secondary-foreground. */
.mxo-vspoke-hero--bg .mxo-vspoke-hero__title,
.mxo-vspoke-hero--bg .mxo-vspoke-hero__desc,
.mxo-vspoke-hero--bg .mxo-vspoke-hero__badge {
	color: #fff;
}

.mxo-vspoke-hero--bg .mxo-vspoke-hero__desc {
	opacity: 0.92;
}

.mxo-vspoke-hero--bg .mxo-vspoke-hero__badge svg {
	color: var(--primary);
}

/* Hero image (right column on desktop) */
.mxo-vspoke-hero__image {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-md);
	overflow: hidden;
}

.mxo-vspoke-hero__img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
}

.mxo-vspoke-hero__placeholder {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--muted);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
}

.mxo-vspoke-hero__placeholder-text {
	font-family: var(--font-display);
	font-size: 1.5rem;
	color: var(--muted-foreground);
	opacity: 0.5;
}

/* ── Trust Badge Bar ──────────────────────────────────────────────── */
.mxo-vspoke-trust {
	border-bottom: 1px solid var(--border);
	background: var(--background);
	padding: 1.5rem 0;
}

.mxo-vspoke-trust__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

@media (min-width: 768px) {
	.mxo-vspoke-trust__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.mxo-vspoke-trust__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	text-align: left;
}

.mxo-vspoke-trust__icon {
	color: var(--primary);
	flex-shrink: 0;
}

.mxo-vspoke-trust__label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--foreground);
	margin: 0;
}

.mxo-vspoke-trust__sub {
	font-size: 0.75rem;
	color: var(--muted-foreground);
	margin: 0;
}

/* ── Product Grid ─────────────────────────────────────────────────── */
.mxo-vspoke-products {
	padding: 3rem 0;
}

.mxo-vspoke-products__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.mxo-vspoke-products__title {
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	font-weight: 700;
	color: var(--foreground);
	margin: 0;
}

.mxo-vspoke-products__count {
	font-size: 0.875rem;
	color: var(--muted-foreground);
}

.mxo-vspoke-products__grid {
	display: grid;
	gap: 1.5rem;
	/* minmax(0, 1fr) — see .mxo-product-grid; a bare 1fr blows the track past
	   the container on the product card's min-content and scrolls sideways. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

@media (min-width: 1024px) {
	.mxo-vspoke-products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.mxo-vspoke-products__empty {
	text-align: center;
	padding: 3rem 1rem;
	background: var(--muted);
	border-radius: var(--radius-md);
}

.mxo-vspoke-products__empty p {
	color: var(--muted-foreground);
	margin-bottom: 1.5rem;
	max-width: 45ch;
	margin-left: auto;
	margin-right: auto;
}

.mxo-vspoke-products__pagination {
	margin-top: 2rem;
}

/* ── SEO Content Guide ────────────────────────────────────────────── */
.mxo-vspoke-content {
	padding: 3rem 0;
	border-top: 1px solid var(--border);
	background: var(--muted);
}

.mxo-vspoke-content__prose {
	max-width: none;
}

.mxo-vspoke-content__prose h2 {
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	font-weight: 700;
	color: var(--foreground);
	margin: 0 0 1rem;
}

.mxo-vspoke-content__prose h3 {
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 2vw, 1.25rem);
	font-weight: 600;
	color: var(--foreground);
	margin: 2rem 0 0.75rem;
}

.mxo-vspoke-content__prose p {
	color: var(--muted-foreground);
	line-height: 1.7;
	margin: 0 0 1rem;
}

.mxo-vspoke-content__prose ul {
	list-style: none;
	padding: 0;
	margin: 1rem 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.mxo-vspoke-content__prose ul li {
	color: var(--muted-foreground);
	line-height: 1.6;
}

.mxo-vspoke-content__prose ul li strong {
	color: var(--foreground);
}

/* ── Sibling Models ───────────────────────────────────────────────── */
.mxo-vspoke-siblings {
	padding: 3rem 0;
	border-top: 1px solid var(--border);
}

.mxo-vspoke-siblings__title {
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	font-weight: 700;
	color: var(--foreground);
	margin: 0 0 1.5rem;
}

.mxo-vspoke-siblings__grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.mxo-vspoke-siblings__grid { grid-template-columns: repeat(3, 1fr); }
}

.mxo-vspoke-siblings__card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	text-decoration: none;
	color: var(--foreground);
	transition: border-color 200ms ease;
}

.mxo-vspoke-siblings__card:hover {
	border-color: var(--primary);
}

.mxo-vspoke-siblings__card-name {
	font-weight: 600;
	color: var(--foreground);
	transition: color 200ms ease;
}

.mxo-vspoke-siblings__card:hover .mxo-vspoke-siblings__card-name {
	color: var(--primary);
}

.mxo-vspoke-siblings__card-years {
	display: block;
	font-size: 0.875rem;
	color: var(--muted-foreground);
	margin-top: 0.125rem;
}

.mxo-vspoke-siblings__arrow {
	color: var(--muted-foreground);
	flex-shrink: 0;
	transition: color 200ms ease;
}

.mxo-vspoke-siblings__card:hover .mxo-vspoke-siblings__arrow {
	color: var(--primary);
}

/* ── Help CTA ─────────────────────────────────────────────────────── */
.mxo-vspoke-cta {
	background: var(--primary);
	color: var(--primary-foreground);
	padding: 3rem 0;
	text-align: center;
}

.mxo-vspoke-cta__title {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	margin: 0 0 0.75rem;
	color: var(--primary-foreground);
}

.mxo-vspoke-cta__desc {
	font-size: 1rem;
	/* No opacity: it faded the inherited white to ~#fbebe8 on the --primary
	   background = 4.17:1, an AA fail. Full white is 4.82:1. */
	max-width: 50ch;
	margin: 0 auto 2rem;
}

.mxo-vspoke-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

.mxo-vspoke-cta__btn {
	border-color: var(--primary-foreground) !important;
	color: var(--primary-foreground) !important;
}

.mxo-vspoke-cta__btn:hover {
	background: var(--primary-foreground) !important;
	color: var(--primary) !important;
}


/* ===================================================================
   BRAND LOGOS (inc/brand-logos.php — term meta mxo_make_logo)
   Manufacturer marks replace the grey text placeholders on the make
   cards, the hub hero, and the spoke hero. Makes without a logo keep
   the styled-text fallback rules above.
=================================================================== */

/* Make card on /vehicles/ — logo contained on the light card panel */
.mxo-vhub-models__card-image--logo {
	padding: 0.875rem 1.25rem;
}

.mxo-vhub-models__card-logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 4rem; /* 64px cap on cards */
	object-fit: contain;
}

/* Hub hero brand mark — hero bg is dark, logos are drawn for light
   backgrounds, so the mark sits on a light plate */
.mxo-vhub-hero__brandmark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--background);
	border-radius: var(--radius);
	padding: 0.625rem 1rem;
	margin-bottom: 1rem;
}

.mxo-vhub-hero__brandmark-img {
	display: block;
	width: auto;
	height: auto;
	max-width: 11rem;
	max-height: 3rem;
	object-fit: contain;
}

/* Spoke hero placeholder — make brand mark instead of grey text */
.mxo-vspoke-hero__placeholder--logo .mxo-vspoke-hero__placeholder-logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 60%;
	max-height: 45%;
	object-fit: contain;
}