/* New Vehicles hub — rebuilt to match
   design_handoff_cbm_marketplace/pages/CBM New Vehicles.dc.html exactly
   (see page-templates/template-new-vehicles.php's header comment for the
   full rationale). */

/* The old .cbm-nv-sponsor-row* absolute-overlay hack has been replaced by
   the shared .cbm-textwrap component (components.css) — see
   inc/template-tags.php's cbm_render_intro_textwrap(). */

/* Two independent columns — .cbm-nv-hero-main (image, then the CNVI panel)
   and .cbm-nv-hero-aside (ad space, then the sidebar) — each a flex column
   stacking its own children back-to-back. This replaced an earlier 2-row
   grid where all four pieces were separate grid items sharing the same two
   row tracks: cropping the image shorter left a gap under it because the
   *row* still had to be as tall as the (independently-sized) ad box next
   to it, pushing the panel down to the row's height instead of sitting
   right under the now-shorter image. Splitting into two flex columns means
   each side's height is only ever the sum of its own two children — the
   image and the ad box no longer need to agree on a height at all. */
.cbm-nv-hero-grid {
	padding-block: 20px; display: grid; grid-template-columns: 3fr 1fr; gap: 24px; align-items: start;
}
.cbm-nv-hero-main, .cbm-nv-hero-aside { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
/* Cropped shorter (same width, less height) so the CBW New Vehicles Index
   panel below sits higher on the page without the visitor scrolling —
   object-fit: cover keeps the full-width photo, just trims top/bottom. */
.cbm-nv-hero-image img { width: 100%; aspect-ratio: 2.2 / 1; object-fit: cover; object-position: center 40%; display: block; border-radius: 2px; }
/* Sized on its own terms (aspect-ratio against its own column width), not
   tied to the hero image's height in any way — see the comment above. The
   ratio here (298:600) reproduces its previous rendered size at this row's
   reference (max) width. */
.cbm-nv-hero-adspace { aspect-ratio: 298 / 600; box-sizing: border-box; }
/* The sitewide topbar search box (header.php's .cbm-topbar__search) is a
   compact, content-width widget everywhere else on the site — but on this
   page it sits directly above the ad-space box, and both being anchored to
   the same right edge with different widths left a visible gap on the left
   side. Widened here, on this page only, to exactly the aside column's own
   width (1fr of this row's 3fr/1fr split) so the two boxes form one
   continuous edge, left and right. Only applies at the width this
   hero-grid actually uses that ratio at — below 1024px the grid stacks to
   one column (see the media query below), so the match is desktop-only by
   necessity, not an oversight. */
@media (min-width: 1025px) {
	body.page-template-template-new-vehicles .cbm-topbar__search {
		width: calc((min(100vw, var(--cbm-max-width)) - (var(--cbm-side-padding) * 2) - 24px) / 4);
	}
	body.page-template-template-new-vehicles .cbm-topbar__search input { flex: 1; }
}
.cbm-nv-hero-adspace .cbm-ad-empty-slot {
	background: var(--cbm-fill-light); border: 1px dashed #757880; border-radius: 2px; min-height: 160px;
}

.cbm-nv-panel { padding: 10px 20px 20px; text-align: left; }
.cbm-nv-panel__heading { font-family: var(--cbm-font-heading); font-weight: 700; font-size: 24px; letter-spacing: 0.02em; color: #333; margin-bottom: 7px; }
.cbm-nv-panel__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; align-items: start; }
/* Each column stacks its control with its own caption directly beneath —
   keeps the caption's width locked to that column, so it can never read
   as belonging to (or spilling under) the other column's control. */
.cbm-nv-panel__buttons-col { min-width: 0; }
.cbm-nv-panel__buttons-title {
	font-family: var(--cbm-font-heading); font-weight: 700; font-size: 26px; text-transform: uppercase;
	letter-spacing: 0.04em; color: #333; margin: 0 0 6px;
}
.cbm-nv-panel__btn {
	display: block; width: 100%; box-sizing: border-box; min-height: 54px; font-weight: 700; font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase;
	text-align: center; padding: 12px; border-radius: 2px; border: 1px solid transparent; cursor: pointer;
}
.cbm-nv-panel__btn--red { background: var(--cbm-red); border-color: var(--cbm-red); color: #fff; }
/* CBM's own logo red (#D91E25), not the site's design-token --cbm-red
   (#C8102E) — Scroll is meant to read as the logo's exact colour. */
.cbm-nv-panel__btn--logo-red { background: #D91E25; border-color: #D91E25; color: #fff; }
/* "Scroll the Index" is the manufacturer <select> itself, not a button
   that reveals one below it — styled to read as a button (no native
   dropdown arrow/inset shadow, centred label) while still being a real,
   directly-clickable-and-choosable form control. Same box height as
   "Search the Index" below it (shared min-height on .cbm-nv-panel__btn)
   so the two sit as a visually matched pair. */
.cbm-nv-panel__btn--select {
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	text-align-last: center; text-align: center;
}
.cbm-nv-panel__btn--select:disabled { opacity: 0.5; cursor: not-allowed; }
/* "Search the Index" is likewise the search form itself, styled as one
   rectangle: the "Start typing" input fills the box, a vertical divider
   line separates it from a plain arrowhead trigger on the right — not a
   separate pill-shaped input floating inside a bigger box. */
.cbm-nv-panel__search-deep {
	display: flex; align-items: stretch; padding: 6px; gap: 0; text-align: left; text-transform: none; overflow: hidden;
}
.cbm-nv-panel__search-deep input {
	flex: 1; min-width: 0; border: none; background: #fff; border-radius: 2px 0 0 2px; padding: 0 14px; font-size: 13px; font-weight: 400;
	letter-spacing: normal; text-transform: none; color: var(--cbm-red); outline: none;
}
.cbm-nv-panel__search-deep input::placeholder { color: var(--cbm-red); opacity: 0.7; }
.cbm-nv-panel__search-deep button {
	flex: 0 0 auto; width: 44px; display: flex; align-items: center; justify-content: center;
	border: none; border-left: 1px solid rgba(255,255,255,0.5); background: transparent; cursor: pointer;
}
/* A plain arrowhead — a solid triangle, no shaft/tail — drawn with the
   CSS border trick rather than relying on a Unicode glyph that varies by
   font (most "→"-style characters render with a visible tail/shaft). */
.cbm-nv-panel__search-arrowhead {
	display: block; width: 0; height: 0;
	border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid #fff;
}
.cbm-nv-panel__buttons-caption { font-size: 15px; color: var(--cbm-body-grey); margin: 10px 0 0; }

.cbm-nv-panel__howto { margin-top: 0; margin-bottom: 16px; }

.cbm-nv-panel__featured { margin-top: 32px; }
.cbm-nv-panel__featured-title {
	font-family: var(--cbm-font-heading); font-weight: 700; font-size: 20px; color: #333; margin: 0 0 16px;
}
.cbm-nv-panel__featured-body { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.cbm-nv-panel__featured-photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; display: block; }
.cbm-nv-panel__featured-logo { height: 64px; width: auto; margin-bottom: 12px; }
.cbm-nv-panel__featured-name { font-family: var(--cbm-font-heading); font-weight: 700; font-size: 18px; margin: 0 0 8px; }
.cbm-nv-panel__featured-copy p { font-size: 14px; line-height: 1.6; color: var(--cbm-body-grey); margin: 0 0 14px; }
.cbm-nv-panel__featured-copy .cbm-btn { margin-bottom: 14px; }
.cbm-nv-panel__featured-credit { font-size: 11px; color: var(--cbm-muted-grey); margin: 0; }
@media (max-width: 640px) {
	.cbm-nv-panel__featured-body { grid-template-columns: 1fr; }
}
.cbm-nv-panel__howto p { font-size: 14px; line-height: 1.6; color: var(--cbm-body-grey); margin: 0; }

/* "Search the Index" scope choice — shown after Enter/the arrow button is
   used, before the search actually runs, so the visitor picks whether to
   stay within New Vehicles or search every pillar. See new-vehicles.js. */
.cbm-nv-search-scope-choice { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 10px; border: 1px solid var(--cbm-hairline); border-radius: 2px; background: #fff; }
.cbm-nv-search-scope-choice[hidden] { display: none; }
.cbm-nv-search-scope-choice__prompt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: #333; margin: 0; }
.cbm-nv-search-scope-choice__btn {
	width: 100%; box-sizing: border-box; padding: 8px; border-radius: 2px; border: 1px solid var(--cbm-hairline);
	background: #fff; color: #333; font-size: 13px; font-weight: 700; cursor: pointer; text-align: center;
}
.cbm-nv-search-scope-choice__btn:hover { background: var(--cbm-fill-light); }
.cbm-nv-search-scope-choice__btn--red { background: var(--cbm-red); border-color: var(--cbm-red); color: #fff; }
.cbm-nv-search-scope-choice__btn--red:hover { background: var(--cbm-red-hover); }

.cbm-nv-sidebar { display: flex; flex-direction: column; gap: 16px; }
.cbm-nv-sidebar__featured-btn {
	background: var(--cbm-green); color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 0.01em;
	text-transform: uppercase; text-align: center; padding: 14px 8px; border-radius: 2px; display: block;
}
.cbm-nv-sidebar__contact { border: 1px solid var(--cbm-hairline); border-radius: 2px; padding: 18px; text-align: center; }
.cbm-nv-sidebar__contact-label { font-family: var(--cbm-font-heading); font-size: 16px; color: #555; }
.cbm-nv-sidebar__contact-phone {
	display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px;
	font-family: var(--cbm-font-mono); font-weight: 700; font-size: 17px; color: var(--cbm-red);
}
.cbm-nv-sidebar__contact-phone span {
	width: 26px; height: 26px; border-radius: 50%; background: var(--cbm-green); color: #fff;
	display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-family: initial;
}
.cbm-nv-sidebar__contact-email { font-size: 16px; color: #555; margin-top: 8px; }
.cbm-nv-sidebar__steps { background: #1A1A1A; color: #fff; border-radius: 2px; padding: 20px; }
.cbm-nv-sidebar__steps-title { font-family: var(--cbm-font-heading); font-weight: 700; font-size: 17px; text-align: center; margin-bottom: 16px; }
.cbm-nv-sidebar__step { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; }
.cbm-nv-sidebar__step-num {
	width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.cbm-nv-sidebar__steps-cta { display: block; background: var(--cbm-green); color: #fff; font-weight: 700; font-size: 13px; text-align: center; padding: 10px; border-radius: 2px; margin-top: 4px; }

@media (max-width: 1024px) {
	.cbm-nv-hero-grid { grid-template-columns: 1fr; }
	.cbm-nv-hero-adspace { aspect-ratio: auto; }
}
@media (max-width: 640px) {
	.cbm-nv-panel__buttons { grid-template-columns: 1fr; }
}

/* Manufacturer Page's own vehicle grid (single-manufacturer.php) — separate
   page from the hub above, unaffected by this rebuild. */
.cbm-nv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cbm-gap); }
@media (max-width: 1024px) { .cbm-nv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cbm-nv-grid { grid-template-columns: 1fr; } }
.cbm-nv-card { display: flex; flex-direction: column; border: 1px solid var(--cbm-hairline); border-radius: var(--cbm-radius); overflow: hidden; background: #fff; color: var(--cbm-near-black-alt); }
.cbm-nv-card__media { position: relative; display: block; aspect-ratio: 16/10; background: linear-gradient(135deg,#dcdcdc,#c2c2c2); }
.cbm-nv-card__media img { width: 100%; height: 100%; object-fit: cover; }
.cbm-cbw-tested { position: absolute; top: 10px; left: 10px; background: var(--cbm-green); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; padding: 4px 8px; border-radius: 2px; }
/* B/C/M vehicle-type marker (cbm_new_vehicle_type_marker()) — top-right so
   it doesn't collide with the CBW-Tested badge (top-left) or the "Related"
   search badge (also top-left). */
.cbm-nv-type-marker {
	position: absolute; top: 10px; right: 10px; z-index: 1; background: var(--cbm-near-black);
	color: #fff; font-family: var(--cbm-font-mono); font-size: 11px; font-weight: 700;
	width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
}
.cbm-nv-card__body { padding: 14px 16px 16px; }
.cbm-nv-card__manufacturer { display: block; font-family: var(--cbm-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cbm-muted-grey); }
.cbm-nv-card__title { display: block; font-family: var(--cbm-font-heading); font-weight: 600; font-size: 16px; margin-top: 2px; }
.cbm-nv-card__meta { display: block; font-size: 12px; color: var(--cbm-muted-grey); margin-top: 8px; }
.cbm-nv-card__tco { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--cbm-hairline); font-size: 11px; color: var(--cbm-muted-grey); }
.cbm-nv-card__tco strong { font-family: var(--cbm-font-mono); color: var(--cbm-near-black-alt); }

.cbm-manufacturer-header { display: flex; align-items: center; gap: 20px; padding-block: 32px 24px; }
.cbm-manufacturer-header img { max-height: 60px; }
.cbm-manufacturer-header h1 { font-family: var(--cbm-font-heading); font-size: 28px; margin: 0; }