/* 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 var(--cbm-muted-grey); 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; } /* Scoped to the New Buses/Coaches/Minibuses/All Showroom page's sidebar specifically (not the New Vehicles hub, which reuses the same .cbm-nv-panel__buttons-col class in an unrelated 1fr/1fr button pair) — without this, the search box fills the whole ~359px aside column while the skyscraper below it sits at its true 298px, so the two don't line up and the search box reads oddly wide next to it. Matched to .cbm-nvs-skyscraper's own width:298px, per the user (2026-08-26). Both default to the column's left edge already (neither has its own margin/centering), so capping the width alone is enough to line them up. */ .cbm-nvs-col-aside .cbm-nv-panel__buttons-col { width: 298px; max-width: 100%; } /* Ranged right, not left — per the user (2026-08-26): the search box and skyscraper (both a fixed 298px, narrower than this ~359px aside column) should sit flush with the page's true right margin — the same edge the manufacturer bars/vehicle-card grid in the main column already reach on their own side — rather than flush with the aside column's own left edge, which left a ~60px unexplained gap between them and the right margin. flex-direction:column + align-items:flex-end, not a per-child margin-left:auto, so any future addition to this column inherits the same right-alignment automatically. */ .cbm-nvs-col-aside { display: flex; flex-direction: column; align-items: flex-end; } .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-nv-panel__btn--logo-red { background: var(--cbm-red); border-color: var(--cbm-red); color: #fff; } /* "Scroll the Index" is the manufacturer