/**
 * Styles shared by BOTH the showroom listing page and the vehicle detail
 * page (plan §1.2, §3.6, §4) — the vehicle card partial and the "Message
 * Us" modal are reused on single-vehicle.php's "More Listings" section and
 * fixed contact bar, so their CSS lives here rather than being duplicated
 * across vehicle-listing.css / vehicle-detail.css.
 *
 * Every colour/font value below is a var(--...) reference into the custom
 * properties printed by inc/theme-config.php — no hex code, rgb() value, or
 * font-family string appears anywhere in this file. To rebrand, edit
 * inc/theme-config.php only.
 */

/* ---------------------------------------------------------------------
 * Base / layout
 * ------------------------------------------------------------------- */

body {
    font-family: var(--font-family-base);
    font-size: var(--text-base);
    color: var(--color-black);
}

/* Browsers don't apply an inherited font-family to form controls by default
   (input/select/button/textarea use the UA's own system font unless told
   otherwise) — without this, buttons/selects/checkboxes on these two pages
   could silently render in the browser's default font instead of the
   configured brand font. */
button,
select,
input,
textarea {
    font-family: inherit;
}

.vehicle-content-column {
    width: var(--space-content-column-width);
    max-width: none;
    margin: 0 auto;
}

/* Plain banner — used as-is on the vehicle detail page (single-vehicle.php).
   White background, black text, unchanged from before the listing page's
   banner got a photo background — that change is scoped to
   .vehicle-title-banner--image only (archive-vehicle.php), not this base
   class, so it never affects individual vehicle pages. */
.vehicle-title-banner {
    background: var(--color-white);
    padding: var(--space-section-padding-sm) 5%;
    text-align: center;
}

.vehicle-title-banner h1 {
    color: var(--color-black);
    text-transform: uppercase;
    font-weight: 700;
    font-size: var(--text-3xl);
    margin: 0;
}

@media (min-width: 1024px) {
    .vehicle-title-banner h1 {
        font-size: var(--text-4xl);
    }
}

/* Listing page only ("Pre-Owned Range", archive-vehicle.php): photo
   background sized to match the image's own dimensions exactly (mobile:
   414x650, desktop: 2560x970, as supplied) via aspect-ratio + background-size:
   cover — shows the full image with no cropping, rather than an arbitrary
   padding-based height. The overlay is a semi-transparent black layer
   stacked as a second background (plan-token-driven, no raw color) so the
   white title text stays legible over a busy photo without a separate
   element. */
.vehicle-title-banner--image {
    position: relative;
    background-image:
        linear-gradient(color-mix(in srgb, var(--color-black) 50%, transparent), color-mix(in srgb, var(--color-black) 50%, transparent)),
        url('../images/banner-mobile.webp');
    background-size: cover;
    background-position: center;
    background-color: var(--color-black);
    aspect-ratio: 414 / 650;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5%;
}

@media (min-width: 1024px) {
    .vehicle-title-banner--image {
        background-image:
            linear-gradient(color-mix(in srgb, var(--color-black) 50%, transparent), color-mix(in srgb, var(--color-black) 50%, transparent)),
            url('../images/banner-desktop.webp');
        aspect-ratio: 2560 / 970;
    }
}

.vehicle-title-banner--image h1 {
    color: var(--color-white);
}

.breadcrumbs {
    background: var(--color-white);
    border-bottom: 1px solid color-mix(in srgb, var(--color-black) 6%, transparent);
    padding: 0.6rem 5%;
}

/* Vehicle detail page only, mobile only: with the title banner removed from
   this page, the breadcrumb is now the very first thing after the site
   header — extra top padding here to clear whatever the header does on
   mobile (this is an estimate, not a measured value; adjust if it's off). */
@media (max-width: 767.98px) {
    body.single-vehicle .breadcrumbs {
        padding-top: 5.5rem;
    }
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--text-xs);
}

.breadcrumbs__list li:not(:last-child)::after {
    content: '/';
    margin: 0 0.4rem;
}

.breadcrumbs a {
    color: var(--color-black);
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------
 * Vehicle card (§1.2, §1.2.3, §1.2.4)
 * ------------------------------------------------------------------- */

.vehicle-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card-resting), 0 0 0 1px color-mix(in srgb, var(--color-black) 5%, transparent);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    container-type: inline-size;
}

/* §1.2.3: the reference cursor-entry-point outline draw is nice-to-have
   polish; the plan explicitly allows a plain box-shadow hover as a
   substitute if deprioritised — used here to keep scope reasonable. */
@media (hover: hover) {
    .vehicle-card:hover {
        box-shadow: var(--shadow-card-hover);
        transform: scale(1.015);
    }
}

.vehicle-card__thumb-link {
    display: block;
}

.vehicle-card__thumb {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-grey-off);
}

.vehicle-card__thumb img,
.vehicle-card__thumb-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vehicle-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-card-padding);
}

.vehicle-card__price {
    font-weight: 700;
    font-size: var(--text-xl);
    color: var(--color-black);
    margin: 0 0 0.25rem;
}

.vehicle-card__title {
    margin: 0 0 0.75rem;
    font-size: var(--text-card-title);
    font-weight: 500;
    line-height: 1.3;
}

.vehicle-card__title a {
    color: var(--color-black);
    text-decoration: none;
}

.vehicle-card__attrs {
    margin-top: auto;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.vehicle-card__attrs-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.vehicle-card__attrs-row--shaded {
    background: var(--color-grey-off);
}

.vehicle-card__attr {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem;
    font-size: var(--text-xs);
}

.vehicle-card__icon {
    color: var(--color-accent);
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------
 * Card + bottom-bar CTA buttons, shared (§1.2.2, §3.6, §4.2)
 * ------------------------------------------------------------------- */

/* Card buttons: just "View Vehicle" now (Call/WhatsApp/Message removed from
   the card and the rest of the site per explicit direction). */
.vehicle-card__buttons {
    margin-top: 0.75rem;
}

.cta-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.25s ease;
}

/* "View Vehicle" — the dealer's exact CSS, applied as given (not routed
   through the token system) matching their existing site-wide .calcBtn
   button (style.css) stop-for-stop: skewed clip-path shape, sharp corners,
   the same red HSL gradient. */
.cta-btn--view {
    color: white;
    padding: 10px 25px;
    border-radius: 0px;
    font-weight: 600;
    font-size: 15px;
    width: 100%;
    background: linear-gradient(90deg, hsla(351, 82%, 33%, 1) 41%, hsla(351, 81%, 49%, 1) 100%);
    clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%) !important;
    border: 0px;
}

@media (hover: hover) {
    .cta-btn--view:hover {
        opacity: 0.85;
    }
}