/* ============================================================
   listings.css — CarDealsNet Fairfield Chevrolet
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --cdn-gold:        #f5a623;
    --cdn-dark:        #1a1a2e;
    --cdn-blue:        #0d6efd;
    --cdn-call:        #198754;
    --cdn-call-hover:  #157347;
    --card-radius:     10px;
    --photo-ratio:     56.25%;   /* 16:9 */
}

/* ── Global ─────────────────────────────────────────────────── */
body { background: #f4f6f9; color: #212529; }

/* ── Header ─────────────────────────────────────────────────── */
.site-header {
    background: var(--cdn-dark);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

.brand-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.3px;
}

.brand-sub {
    font-size: .85rem;
    color: rgba(255,255,255,.55);
    margin-left: .4rem;
}

.btn-call {
    background: var(--cdn-call);
    color: #fff;
    font-weight: 600;
    border: none;
    white-space: nowrap;
}

.btn-call:hover, .btn-call:focus {
    background: var(--cdn-call-hover);
    color: #fff;
}

/* ── Page heading ────────────────────────────────────────────── */
.listings-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cdn-dark);
}

/* ── Sort / view bar ─────────────────────────────────────────── */
.sort-bar { flex-wrap: wrap; gap: .5rem; }

/* ── Filter sidebar ──────────────────────────────────────────── */
.filter-sidebar {
    background: #fff;
    border-radius: 10px;
    padding: 1.25rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.filter-section {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.filter-heading {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6c757d;
    margin-bottom: .6rem;
}

.price-buckets .form-check,
.body-checks .form-check { margin-bottom: .3rem; }

.price-buckets .form-check-label,
.body-checks .form-check-label { font-size: .875rem; cursor: pointer; }

/* ── Card grid ───────────────────────────────────────────────── */
.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0;           /* Isotope manages spacing via gutter */
}

.vehicle-card-wrap {
    width: 33.333%;
    padding: .5rem;
    box-sizing: border-box;
}

@media (max-width: 1199px) { .vehicle-card-wrap { width: 50%; } }
@media (max-width: 575px)  { .vehicle-card-wrap { width: 100%; } }

.vehicle-card {
    background: #fff;
    border-radius: var(--card-radius);
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    transition: box-shadow .2s, transform .2s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.vehicle-card:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,.13);
    transform: translateY(-2px);
}

/* Photo */
.card-photo-link { display: block; text-decoration: none; }

.card-photo-wrap {
    position: relative;
    padding-top: var(--photo-ratio);
    background: #e9ecef;
    overflow: hidden;
}

.card-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}

.vehicle-card:hover .card-photo { transform: scale(1.04); }

.card-photo-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    font-size: 3rem;
}

/* Badges */
.card-badges {
    position: absolute;
    top: .5rem;
    left: .5rem;
    display: flex;
    gap: .3rem;
}

.badge-new  { background: var(--cdn-blue);  color: #fff; font-size: .7rem; padding: .2rem .5rem; border-radius: 4px; font-weight: 600; }
.badge-used { background: #fd7e14;           color: #fff; font-size: .7rem; padding: .2rem .5rem; border-radius: 4px; font-weight: 600; }
.badge-cpo  { background: var(--cdn-gold);   color: #000; font-size: .7rem; padding: .2rem .5rem; border-radius: 4px; font-weight: 700; }

/* Card body */
.card-body-inner {
    padding: .875rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-vehicle-title {
    font-size: .975rem;
    font-weight: 700;
    margin-bottom: .2rem;
    line-height: 1.3;
}

.card-vehicle-title a { color: var(--cdn-dark); text-decoration: none; }
.card-vehicle-title a:hover { color: var(--cdn-blue); }

.card-trim {
    font-size: .8rem;
    color: #6c757d;
    margin-bottom: .4rem;
}

.card-meta {
    font-size: .78rem;
    color: #6c757d;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .6rem;
}

.card-footer-inner {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.card-price-wrap { line-height: 1.2; }

.card-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cdn-dark);
    display: block;
}

.card-price-amount {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cdn-dark);
}

.card-price-label {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d;
    display: inline;
    margin-right: .2rem;
    vertical-align: middle;
}

.card-msrp {
    font-size: .75rem;
    color: #adb5bd;
    display: block;
}

.card-price-call {
    font-size: .9rem;
    font-weight: 600;
    color: #6c757d;
}

/* ── Option package badges (cards) ───────────────────────────── */
.card-packages {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-bottom: .5rem;
}

.pkg-badge {
    display: inline-block;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .03em;
    padding: .15rem .4rem;
    border-radius: 3px;
    background: #e9ecef;
    color: #495057;
    border: 1px solid #dee2e6;
    cursor: default;
    white-space: nowrap;
}

/* ── Option packages table (VDP) ─────────────────────────────── */
.vdp-packages { display: flex; flex-direction: column; gap: .4rem; }

.vdp-pkg-row {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding: .35rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.vdp-pkg-row:last-child { border-bottom: none; }

.vdp-pkg-code {
    font-size: .75rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    color: #fff;
    background: var(--cdn-dark);
    padding: .15rem .4rem;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 3rem;
    text-align: center;
}

.vdp-pkg-name { font-size: .875rem; color: #212529; }
.vdp-pkg-unknown { color: #adb5bd; font-style: italic; }

.card-actions { display: flex; gap: .3rem; flex-shrink: 0; }

.btn-details {
    background: var(--cdn-dark);
    color: #fff;
    border: none;
    font-size: .78rem;
}

.btn-details:hover { background: #2d2d4e; color: #fff; }

.btn-call-sm {
    background: var(--cdn-call);
    color: #fff;
    border: none;
    font-size: .85rem;
}

.btn-call-sm:hover { background: var(--cdn-call-hover); color: #fff; }

/* ── List view toggle ────────────────────────────────────────── */
#cardGrid.list-view .vehicle-card-wrap { width: 100%; }

#cardGrid.list-view .vehicle-card {
    flex-direction: row;
}

#cardGrid.list-view .card-photo-wrap {
    width: 220px;
    min-width: 220px;
    padding-top: 0;
    height: 150px;
}

#cardGrid.list-view .card-photo {
    position: static;
    height: 100%;
    width: 100%;
}

#cardGrid.list-view .card-body-inner {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

#cardGrid.list-view .card-vehicle-title { flex: 1 0 100%; margin-bottom: 0; }
#cardGrid.list-view .card-meta          { flex: 1; }
#cardGrid.list-view .card-footer-inner  { margin-top: 0; }

@media (max-width: 575px) {
    #cardGrid.list-view .vehicle-card     { flex-direction: column; }
    #cardGrid.list-view .card-photo-wrap  { width: 100%; height: auto; padding-top: var(--photo-ratio); }
    #cardGrid.list-view .card-photo       { position: absolute; }
}

/* ── Footer ──────────────────────────────────────────────────── */
.site-footer {
    background: var(--cdn-dark);
    color: rgba(255,255,255,.7);
    font-size: .85rem;
}

.site-footer a { color: rgba(255,255,255,.7); }
.site-footer a:hover { color: #fff; }
.footer-phone { white-space: nowrap; }

/* ── No-results message ──────────────────────────────────────── */
#noResults { border-radius: var(--card-radius); }

/* ── Offcanvas sidebar ───────────────────────────────────────── */
.offcanvas { max-width: 300px; }

/* ============================================================
   VDP — listing-detail
   ============================================================ */

/* Title row */
.vdp-title-row { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.vdp-title     { font-size: 1.6rem; font-weight: 700; color: var(--cdn-dark); margin-bottom: .15rem; }
.vdp-trim      { font-size: 1.1rem; font-weight: 400; color: #6c757d; margin-left: .3rem; }
.vdp-badges    { display: flex; flex-wrap: wrap; gap: .35rem; }

/* Gallery */
.vdp-gallery { border-radius: var(--card-radius); overflow: hidden; background: #000; }

.vdp-swiper-main { border-radius: var(--card-radius); }

.vdp-main-photo {
    width: 100%;
    height: 480px;
    object-fit: contain;   /* show full vehicle; gallery bg fills the bars */
    background: #000;
    display: block;
}

@media (max-width: 767px) {
    .vdp-main-photo {
        height: auto;
        aspect-ratio: 4 / 3;   /* phones: match source photo ratio, no bars */
        object-fit: cover;
    }
}

.vdp-swiper-thumbs {
    margin-top: .4rem;
    height: 72px;
}

.vdp-swiper-thumbs .swiper-slide {
    width: 100px;
    cursor: pointer;
    opacity: .55;
    transition: opacity .2s;
    border-radius: 4px;
    overflow: hidden;
}

.vdp-swiper-thumbs .swiper-slide-thumb-active { opacity: 1; outline: 2px solid var(--cdn-blue); }

.vdp-thumb-photo {
    width: 100%;
    height: 72px;
    object-fit: cover;
    display: block;
}

/* No-photo placeholder */
.vdp-no-photo {
    background: #e9ecef;
    border-radius: var(--card-radius);
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    font-size: 4rem;
}

/* Spec sections */
.vdp-section { background: #fff; border-radius: var(--card-radius); padding: 1.25rem; box-shadow: 0 1px 4px rgba(0,0,0,.07); }

.vdp-section-heading {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #6c757d;
    margin-bottom: .9rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid #e9ecef;
}

.vdp-spec-grid { display: flex; flex-wrap: wrap; }

.vdp-spec-cell {
    width: 50%;
    padding: .45rem .5rem;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
}

.vdp-spec-cell--full { width: 100%; }

.spec-label  { font-size: .7rem; color: #9aa0a6; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .1rem; }
.spec-value  { font-size: .9rem; font-weight: 600; color: var(--cdn-dark); }
.spec-vin    { font-family: 'Courier New', monospace; font-size: .82rem; letter-spacing: .03em; word-break: break-all; }

@media (max-width: 575px) { .vdp-spec-cell { width: 100%; } }

/* Features list */
.vdp-features ul.vdp-features-list {
    margin: 0;
    padding-left: 1.25rem;
    columns: 2;
    column-gap: 2rem;
}

.vdp-features ul.vdp-features-list li {
    font-size: .875rem;
    color: #495057;
    line-height: 1.6;
    margin-bottom: .2rem;
    break-inside: avoid;
}

@media (max-width: 575px) {
    .vdp-features ul.vdp-features-list { columns: 1; }
}

/* Description paragraphs */
.vdp-description p {
    font-size: .9rem;
    color: #495057;
    line-height: 1.7;
    margin-bottom: .75rem;
}

.vdp-description p:last-child { margin-bottom: 0; }

/* CTA card */
.vdp-cta-card {
    background: #fff;
    border-radius: var(--card-radius);
    padding: 1.5rem;
    box-shadow: 0 2px 12px rgba(0,0,0,.1);
}

.vdp-cta-price      { font-size: 2rem; font-weight: 800; color: var(--cdn-dark); line-height: 1.1; }
.vdp-cta-price-amount { font-size: 2rem; font-weight: 800; color: var(--cdn-dark); }
.vdp-cta-price-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6c757d; display: inline; margin-right: .3rem; vertical-align: middle; }
.vdp-cta-msrp       { font-size: .85rem; color: #adb5bd; }
.vdp-cta-price-call { font-size: 1.4rem; font-weight: 700; color: #6c757d; }

.vdp-cta-summary li { font-size: .9rem; padding: .2rem 0; }

/* ── Footer disclaimer ───────────────────────────────────────── */
/* ── Series · Trim line ─────────────────────────────────────── */
.card-sub {
    font-size: .8rem;
    font-weight: 600;
    color: var(--cdn-dark);
    margin: .1rem 0 .15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vdp-series {
    font-size: .95rem;
    font-weight: 600;
    color: #495057;
    margin: -.2rem 0 .5rem;
}

.disclaimer-text {
    font-size: .72rem;
    line-height: 1.55;
    color: rgba(255,255,255,.4) !important;
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: .75rem;
    margin-bottom: 0;
}


/* ── MSRP sub-label (shown below selling price for new vehicles) ─ */
.card-msrp {
    display: block;
    font-size: .75rem;
    color: #999;
    font-weight: 400;
    margin-top: .1rem;
}

.vdp-cta-msrp {
    font-size: .8rem;
    color: #999;
    margin-top: .15rem;
}

.vdp-sidebar-sticky {
    position: sticky;
    top: 1rem;
}
.vdp-calc-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: var(--card-radius);
    padding: 1.25rem;
}

.vdp-calc-heading {
    font-size: .95rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--cdn-dark);
}

.vdp-calc-price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: .75rem;
}

.vdp-calc-result {
    background: var(--cdn-dark);
    color: #fff;
    border-radius: .4rem;
    padding: .85rem 1rem;
    text-align: center;
    margin-bottom: .75rem;
}

.vdp-calc-result-label {
    font-size: .75rem;
    opacity: .7;
    margin-bottom: .15rem;
}

.vdp-calc-result-amount {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.vdp-calc-disclaimer {
    font-size: .68rem;
    color: #999;
    line-height: 1.4;
    margin-bottom: 0;
    text-align: center;
}