/* ==========================================================================
   Second Drive — Model Review Template Styles
   Brand palette per Section 9:
   Navy #0B2545 (primary) / Red #C8102E (accent/CTA)
   Text-secondary #5A6472 / Backgrounds #F2F4F7 / Borders #D8DCE2
   Mobile-first: base styles are phone-width, scaled up via min-width media queries.
   ========================================================================== */

:root {
    --sd-navy: #141414; /* was #0B2545 (navy) — replaced with a near-black
        charcoal as part of the sitewide redesign, chosen to match the
        logo's own dark gradient tones. Variable name kept as-is
        deliberately: renaming it would mean finding and updating every
        single var(--sd-navy) usage across every CSS file, which is far
        riskier than just changing the one value here and letting the
        existing cascade carry it everywhere automatically. It's not
        literally navy anymore, but every file that references it gets
        the new color with zero risk of a missed spot. */
    --sd-red: #C8102E;
    --sd-text-secondary: #5A6472;
    --sd-bg: #F2F4F7;
    --sd-border: #D8DCE2;
    --sd-green: #1E8E3E;
    --sd-amber: #B8860B;

    --sd-font-heading: 'Oswald', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* new — every
        heading sitewide previously had no explicit font-family at all
        and was silently falling back to the browser's own default serif
        (usually Times New Roman), never an intentional design choice.
        This is the first time headings actually have a deliberate font. */
    --sd-font-body: 'Barlow', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* was
        just the system-UI stack with no webfont — Barlow is now the
        primary value, with that same system stack still there as a
        fallback if the webfont fails to load for any reason */
    --sd-radius: 8px;
    --sd-gap: 1rem;
}

/* Sitewide typography — applies the two variables above globally for
   the first time. Previously only .model-review explicitly set
   font-family (to the old system-UI stack); everything else on the
   site, including every heading everywhere, was relying on whatever
   the visitor's browser happened to default to. */
html, body {
    font-family: var(--sd-font-body);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--sd-font-heading);
}

.model-review {
    font-family: var(--sd-font-body);
    color: #1a1a1a;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

/* Two-column layout: main content + sidebar (verdict bar, related list).
   Mobile-first: stacked (sidebar below main) until desktop. */
.model-review-layout {
    max-width: 960px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.model-review-main {
    min-width: 0; /* prevents flex children from overflowing on long content */
}

.model-review-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.model-review section,
.model-review header,
.model-review footer {
    margin-bottom: 2rem;
}

.model-review h1 {
    color: var(--sd-navy);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.model-review h2 {
    color: var(--sd-navy);
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

/* ---------- Photo gallery: large + 4-thumb grid ---------- */
.model-photo-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.gallery-main {
    aspect-ratio: 4 / 3;
    border-radius: var(--sd-radius);
    overflow: hidden;
    background: var(--sd-bg);
}

.gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-photo-pending {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sd-text-secondary);
    font-size: 0.85rem;
}

.gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.gallery-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    background: var(--sd-bg);
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-more-overlay {
    position: absolute;
    inset: 0;
    background: rgba(11, 37, 69, 0.6);
    backdrop-filter: blur(2px);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 0.25rem;
}

/* ---------- Icon meta row: Model Tested / Review Type / Publish Date ---------- */
.model-meta-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.9rem 0;
    border-top: 1px solid var(--sd-border);
    border-bottom: 1px solid var(--sd-border);
    margin-bottom: 1.25rem;
}

.meta-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.meta-icon {
    flex-shrink: 0;
    color: var(--sd-navy);
}

.meta-label {
    display: block;
    font-size: 0.72rem;
    color: var(--sd-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.meta-value {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--sd-navy);
}

/* ---------- Pros / Cons quick-glance ---------- */
.model-pros-cons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    background: var(--sd-bg);
    border-radius: var(--sd-radius);
    padding: 1.1rem;
}

.model-pros-cons h3 {
    font-size: 0.95rem;
    color: var(--sd-navy);
    margin-bottom: 0.5rem;
}

.model-pros-cons ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.model-pros-cons li {
    font-size: 0.85rem;
    padding: 0.3rem 0 0.3rem 1.3rem;
    position: relative;
    line-height: 1.4;
}

.pros-col li::before {
    content: "+";
    position: absolute;
    left: 0;
    color: var(--sd-green);
    font-weight: 700;
}

.cons-col li::before {
    content: "\2212"; /* minus sign */
    position: absolute;
    left: 0;
    color: var(--sd-red);
    font-weight: 700;
}

/* ---------- Sidebar: verdict bar ---------- */
.verdict-bar-card {
    background: var(--sd-bg);
    border-radius: var(--sd-radius);
    padding: 1.25rem;
    text-align: center;
}

.verdict-bar-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sd-navy);
    margin-bottom: 0.5rem;
}

.verdict-bar-headline {
    font-size: 0.9rem;
    color: var(--sd-text-secondary);
    margin-bottom: 0.9rem;
}

.verdict-bar-percent {
    font-weight: 700;
    color: var(--sd-navy);
}

.verdict-bar-track {
    width: 100%;
    height: 10px;
    background: var(--sd-border);
    border-radius: 999px;
    overflow: hidden;
}

.verdict-bar-fill {
    height: 100%;
    border-radius: 999px;
}

.verdict-bar-fill.gauge-positive {
    background: #3DDC72;
}

.verdict-bar-fill.gauge-mixed {
    background: #E8B923;
}

.verdict-bar-fill.gauge-negative {
    background: #FF4D4D;
}

/* ---------- Sidebar: leaner Related Reviews list ---------- */
.sidebar-related-list {
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius);
    padding: 1.1rem;
}

.sidebar-related-list h3 {
    font-size: 0.95rem;
    color: var(--sd-navy);
    margin-bottom: 0.75rem;
}

.sidebar-related-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: inherit;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--sd-border);
}

.sidebar-related-item:last-child {
    border-bottom: none;
}

.sidebar-related-thumb {
    flex: 0 0 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--sd-bg);
}

.sidebar-related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sidebar-related-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.sidebar-related-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.3;
}

.sidebar-related-date {
    font-size: 0.72rem;
    color: var(--sd-text-secondary);
}

/* ---------- Snapshot block ---------- */
.model-snapshot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    background: var(--sd-bg);
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius);
    padding: 1rem;
}

.snapshot-item {
    display: flex;
    flex-direction: column;
}

.snapshot-item .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--sd-text-secondary);
    margin-bottom: 0.15rem;
}

.snapshot-item .value {
    font-weight: 600;
    color: var(--sd-navy);
}

/* ---------- Verdict gauge ("Would We Buy It?") ----------
   5-dot bar, EACH DOT POSITION has its own fixed color forming a
   red-to-green ramp (1 red, 2 orange, 3 yellow, 4 yellow-green,
   5 green) — a score fills that many dots from the left, so a score
   of 4 lights red→orange→yellow→yellow-green with dot 5 empty. The
   ramp itself never changes; only how many dots are lit does. This
   replaced an earlier version (all filled dots sharing ONE color
   picked by a 3-way score band) per the client's explicit direction
   to match the reference site's per-position color scale exactly. */
.verdict-gauge,
.verdict-gauge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.verdict-gauge-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
}

.verdict-gauge-dots {
    display: flex;
    gap: 4px;
}

.verdict-gauge-dot {
    width: 16px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.25);
}

.verdict-gauge-dot:nth-child(1).is-filled { background: #E5484D; } /* red */
.verdict-gauge-dot:nth-child(2).is-filled { background: #F0873E; } /* orange */
.verdict-gauge-dot:nth-child(3).is-filled { background: #E8C547; } /* yellow */
.verdict-gauge-dot:nth-child(4).is-filled { background: #A3D939; } /* yellow-green */
.verdict-gauge-dot:nth-child(5).is-filled { background: #3DDC72; } /* green */

/* Pill wrapper — dark background so dots (which assume a dark chip)
   read clearly whether the gauge sits on a photo overlay or a plain card */
.verdict-gauge-pill {
    background: rgba(20, 20, 20, 0.85); /* was rgba(11, 37, 69, 0.85) — the
        old navy's literal RGB values, hardcoded rather than using
        var(--sd-navy), so it silently never picked up the charcoal
        redesign at all. Fixed to match the new palette (#141414). */
    padding: 5px 10px;
    border-radius: 999px;
}

/* Overlay positioning on a photo card (same slot the old badge used) */
.verdict-gauge-overlay {
    position: absolute;
    bottom: 10px;
    left: 10px;
    max-width: calc(100% - 20px); /* new — without this, the pill (which
        has no width constraint of its own, just display:inline-flex)
        can grow as wide as its content needs. Oswald reads noticeably
        wider than the previous font at the same size, and "Would We
        Buy It?" apparently now grows wide enough to dominate the photo
        instead of sitting as a small corner badge. This caps it at the
        card's own width (minus the 10px inset on each side), forcing
        the label to wrap onto a second line if needed rather than
        overflowing outward. */
}

.verdict-gauge-label {
    white-space: normal; /* was relying on default (nowrap via inline-flex
        parent) — now explicitly allowed to wrap within the max-width
        above, so long text breaks onto a second line cleanly instead of
        forcing the pill wider than its constraint allows */
}

/* On the Model page snapshot block, the gauge sits inline rather than
   as a photo overlay, so it needs a light-background variant */
.verdict-gauge-pill.on-light {
    background: var(--sd-navy);
}

/* ---------- Faults ---------- */
.faults-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fault-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--sd-border);
}

.fault-freq-badge {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
}

.freq-common {
    background: rgba(200, 16, 46, 0.1);
    color: var(--sd-red);
}

.freq-occasional {
    background: rgba(184, 134, 11, 0.12);
    color: var(--sd-amber);
}

.freq-rare {
    background: var(--sd-bg);
    color: var(--sd-text-secondary);
}

/* Fallback for a fault line with no recognizable "| frequency" part
   (blank, or an editor typo) — neutral grey rather than unstyled. */
.freq-unspecified {
    background: var(--sd-bg);
    color: var(--sd-text-secondary);
}

/* ---------- Running costs table ---------- */
.costs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.costs-table th,
.costs-table td {
    text-align: left;
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid var(--sd-border);
}

.costs-table th {
    color: var(--sd-text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
}

/* ---------- Insurance gauge ---------- */
.insurance-gauge {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    border-radius: var(--sd-radius);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.gauge-low {
    background: rgba(30, 142, 62, 0.12);
    color: var(--sd-green);
}

.gauge-medium {
    background: rgba(184, 134, 11, 0.12);
    color: var(--sd-amber);
}

.gauge-high {
    background: rgba(200, 16, 46, 0.1);
    color: var(--sd-red);
}

/* ---------- CTAs ---------- */
.cta-button {
    display: inline-block;
    background: var(--sd-red);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    padding: 0.75rem 1.25rem;
    border-radius: var(--sd-radius);
    margin-top: 0.5rem;
}

.cta-button:hover {
    background: #a50d25;
}

.cta-link {
    color: var(--sd-navy);
    font-weight: 600;
    text-decoration: underline;
}

/* ---------- Share buttons ---------- */
.share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.share-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.6rem 1rem;
    border-radius: var(--sd-radius);
    border: 1px solid var(--sd-border);
    background: #fff;
    color: var(--sd-navy);
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
}

.share-button:hover {
    background: var(--sd-bg);
}

/* WhatsApp gets its brand color since it's the primary share path for
   this audience — the other two stay neutral to not compete with it. */
.share-whatsapp {
    background: #25D366;
    border-color: #25D366;
    color: #fff;
}

.share-whatsapp:hover {
    background: #1DA851;
}

/* ---------- Checklist ---------- */
.checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.checklist li {
    position: relative;
    padding-left: 1.75rem;
    padding-bottom: 0.6rem;
    color: #1a1a1a;
}

.checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid var(--sd-navy);
    border-radius: 4px;
}

/* ---------- Related grids ---------- */
.related-grid,
.partner-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.related-card,
.partner-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--sd-navy);
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius);
    overflow: hidden;
    font-weight: 600;
}

.related-card img {
    width: 100%;
    height: auto;
    display: block;
}

.related-card span,
.partner-card {
    padding: 0.6rem;
}

/* ---------- Footer ---------- */
.model-footer {
    border-top: 1px solid var(--sd-border);
    padding-top: 1rem;
    font-size: 0.8rem;
    color: var(--sd-text-secondary);
}

.last-verified {
    margin-bottom: 0.4rem;
}

/* ==========================================================================
   Review Index — hero, floating filter card, photo-led grid
   ========================================================================== */

.review-index {
    max-width: 960px;
    margin: 0 auto;
}

.review-hero {
    background: var(--sd-navy);
    color: #fff;
    text-align: center;
    padding: 2.5rem 1rem 4.5rem;
    margin: 0 -1rem; /* bleed to viewport edge on mobile */
}

.review-hero h1 {
    color: #fff;
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.review-hero .review-index-intro {
    color: #C7D2E0;
    font-size: 0.95rem;
    max-width: 32rem;
    margin: 0 auto;
}

/* Floating card overlaps the hero via negative margin */
.review-filters-card {
    background: #fff;
    border: 1px solid var(--sd-border);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(11, 37, 69, 0.12);
    padding: 1.25rem;
    margin: -3rem 1rem 1.5rem;
    position: relative;
    z-index: 2;
}

.filters-card-label {
    font-weight: 700;
    color: var(--sd-navy);
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.filters-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.filters-row select {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid var(--sd-border);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--sd-text-secondary);
    background: #fff;
}

.filters-more {
    margin-bottom: 0.6rem;
}

.filters-more summary {
    font-size: 0.85rem;
    color: var(--sd-navy);
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 0.6rem;
}

.cta-search {
    width: 100%;
    text-align: center;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
}

.clear-filters {
    display: block;
    text-align: center;
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: var(--sd-text-secondary);
}

.review-breadcrumb {
    padding: 0 1rem;
    font-size: 0.8rem;
    color: var(--sd-text-secondary);
    margin-bottom: 1rem;
}

.review-breadcrumb a {
    color: var(--sd-text-secondary);
}

/* Mobile (default): a horizontally-scrolling, swipeable single-card
   carousel via CSS scroll-snap — no JS needed. A 2-column grid at
   mobile widths squeezed these cards (which now carry a title,
   excerpt, timestamp, and verdict gauge) too narrow to read
   comfortably. At 640px+ this switches to the normal CSS Grid below,
   where there's actually enough width for multiple columns to work. */
.review-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0.75rem;
    padding: 0 1rem 2rem;
}

.review-grid .review-card {
    flex: 0 0 85%; /* not quite full-width — a sliver of the next card
        peeking in on the right edge signals "swipe for more" without
        needing any separate UI hint */
    scroll-snap-align: center;
}

.review-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--sd-border);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.review-card-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--sd-bg);
    overflow: hidden;
}

/* Verdict gauge now sits as a normal element in the card body, not an
   absolute-positioned overlay on the photo — this was a deliberate
   design change (was .verdict-gauge-overlay-position, absolute
   positioned; removed entirely along with the 'overlay' variant call
   in archive-model.php / front-page.php). Just needs a little breathing
   room below it before the title. */
.review-card-verdict,
.featured-card-verdict {
    margin-bottom: 0.5rem;
}

.review-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.review-card-body {
    padding: 0.85rem 1rem 1rem;
}

.review-card-body h3 {
    font-size: 1rem;
    color: #1a1a1a;
    margin-bottom: 0.15rem;
}

.review-card-years {
    font-size: 0.78rem;
    color: var(--sd-text-secondary);
    margin-bottom: 0.5rem;
}

.review-card-excerpt {
    font-size: 0.82rem;
    color: var(--sd-text-secondary);
    line-height: 1.45;
    margin: 0 0 0.6rem;
    /* Cap at 2 lines so cards in the same row stay a consistent height
       regardless of how long a given excerpt runs. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.review-card-time {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--sd-text-secondary);
    margin: 0;
}

.review-card-clock {
    flex-shrink: 0;
}

/* ---------- Car Listing card additions ----------
   These sit on top of the shared .review-card / .review-card-body
   styles above (same classes, reused) — only what's genuinely
   different about a listing (price, spec line, status badge) needs
   its own rules here. */
.listing-price {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--sd-navy);
    margin: 0 0 0.3rem;
}

.listing-price-note {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--sd-text-secondary);
    margin-left: 0.4rem;
}

.listing-spec-line {
    font-size: 0.82rem;
    color: var(--sd-text-secondary);
    margin: 0;
}

.listing-status-badge {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    color: #fff;
}

.listing-status-reserved {
    background: var(--sd-amber, #B8860B);
}

.listing-status-sold {
    background: var(--sd-text-secondary);
}

/* Price range inputs in the filter card — plain number fields styled
   to match the existing select dropdowns beside them */
.filters-row-price {
    display: flex;
    gap: 0.75rem;
}

.filters-row-price label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.filters-price-label {
    font-size: 0.75rem;
    color: var(--sd-text-secondary);
    font-weight: 600;
}

.filters-row-price input[type="number"] {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--sd-border);
    border-radius: 6px;
    font-size: 0.9rem;
    width: 100%;
}

.no-results {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--sd-text-secondary);
}

.review-pagination {
    padding: 0 1rem 2rem;
    text-align: center;
}

/* ==========================================================================
   Tablet and up
   ========================================================================== */
@media (min-width: 640px) {
    .model-review h1 {
        font-size: 2rem;
    }

    .model-snapshot {
        grid-template-columns: repeat(4, 1fr);
    }

    .related-grid,
    .partner-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .review-grid {
        display: grid; /* was flex at mobile (the swipeable carousel) —
            explicitly reset here, since this breakpoint only overrode
            grid-template-columns before, which did nothing when the
            base rule wasn't display:grid anymore */
        grid-template-columns: repeat(3, 1fr);
        overflow-x: visible;
        scroll-snap-type: none;
    }

    .review-grid .review-card {
        flex: none; /* clears the mobile carousel's 85% flex-basis so
            CSS Grid's own column sizing takes over cleanly */
        scroll-snap-align: none;
    }

    .filters-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .review-filters-card {
        margin-left: auto;
        margin-right: auto;
        max-width: 640px;
    }
}

/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width: 1024px) {
    .model-review {
        max-width: 860px;
        padding: 0 0 4rem;
    }

    .model-review h1 {
        font-size: 2.25rem;
    }

    .review-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Two real columns: main content + a fixed-width sidebar that stays
       in view while the main column scrolls — same pattern as the
       reference's "Would we buy it?" card staying pinned beside the
       article body. */
    .model-review-layout {
        max-width: 1060px;
        flex-direction: row;
        align-items: flex-start;
        gap: 2.5rem;
    }

    .model-review-main {
        flex: 1 1 auto;
    }

    .model-review-sidebar {
        flex: 0 0 300px;
        position: sticky;
        top: 90px; /* clears the sticky site header */
    }

    /* Gallery: large photo left, 2x2 thumb grid right, matching the
       reference's 1-large + 4-small layout rather than stacking */
    .model-photo-gallery {
        grid-template-columns: 1.6fr 1fr;
        align-items: stretch;
    }

    .gallery-main {
        aspect-ratio: auto;
        height: 100%;
    }

    .gallery-thumbs {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Meta row becomes a horizontal row of three items instead of stacked */
    .model-meta-row {
        flex-direction: row;
        gap: 2.5rem;
    }

    /* Pros/Cons side by side rather than stacked */
    .model-pros-cons {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------- Car Listing single-page additions ----------
   Sits alongside the shared .model-review-sidebar / .model-snapshot
   styles above — only the genuinely listing-specific pieces (price
   box, enquiry form, spec table row layout, inline status badge)
   need their own rules. */

.listing-status-inline {
    display: inline-block;
    margin-left: 0.75rem;
    vertical-align: middle;
    position: static; /* overrides .listing-status-badge's absolute
        positioning from the archive card context — here it's inline
        next to the title, not overlaid on a photo */
}

.listing-price-box {
    background: #fff;
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius);
    padding: 1.5rem;
}

.listing-price-large {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--sd-navy);
    margin: 0 0 0.25rem;
}

.listing-price-note-large {
    font-size: 0.85rem;
    color: var(--sd-text-secondary);
    margin: 0 0 1rem;
}

.listing-unavailable-note {
    font-size: 0.85rem;
    color: var(--sd-text-secondary);
    background: var(--sd-bg);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.listing-unavailable-note a {
    color: var(--sd-navy);
    font-weight: 600;
}

.listing-enquiry-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.listing-enquiry-form label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--sd-navy);
}

.listing-enquiry-form input,
.listing-enquiry-form textarea {
    font-family: inherit;
    font-weight: 400;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--sd-border);
    border-radius: 6px;
    font-size: 0.9rem;
    resize: vertical;
}

.listing-enquiry-form .cta-button {
    width: 100%;
    border: none;
    cursor: pointer;
    margin-top: 0.25rem;
}

.specs-table {
    width: 100%;
    border-collapse: collapse;
}

.specs-table tr {
    border-bottom: 1px solid var(--sd-border);
}

.specs-table tr:last-child {
    border-bottom: none;
}

.specs-table th,
.specs-table td {
    text-align: left;
    padding: 0.6rem 0;
    font-size: 0.9rem;
}

.specs-table th {
    color: var(--sd-text-secondary);
    font-weight: 600;
    width: 40%;
}

.specs-table td {
    color: var(--sd-navy);
    font-weight: 600;
}