/* ============================================================
   Zero Max — mazda.css (Mazda brand page)
   Prefix: zm-mz-  |  H1→H2→H3 hierarchy enforced
   Color tokens (--zm-orange, --gv-gray-900, --gv-black, etc.)
   come from header.css, already loaded sitewide before this file.
   ============================================================ */

/* ══════════════════════════════════════════
   RESET (mazda.php has no other stylesheet to
   inherit this from — header.css doesn't reset)
   ══════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body {
    font-family: var(--gv-font, 'Poppins', sans-serif);
    background: var(--gv-black, #0A0A0A);
    min-height: 100vh;
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }

/* Shared contained-width wrap, matching the 1380px convention used
   sitewide (home.css, all-cars.css, contact.css, etc.). */
.zm-mz-wrap { max-width: 1380px; margin: 0 auto; padding: 0 32px; }

/* ══════════════════════════════════════════
   HERO / BANNER
   Full-bleed <picture> (MazdaBanner.webp desktop,
   MazdaMobileBanner.webp ≤640px) with the H1 and
   description overlaid as centered pill badges,
   top and bottom.
   ══════════════════════════════════════════ */
.zm-mz-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 660;
    overflow: hidden;
}
.zm-mz-hero picture { display: block; width: 100%; height: 100%; }
.zm-mz-hero-title {
    /* Centered via left/right+auto-margin, not left:50%+transform:
       .nft-reveal.nft-in (see footer.css) also sets `transform` for its
       slide-up animation, and transform isn't composable across two
       separate rules — whichever wins specificity replaces the whole
       property, silently deleting a translateX(-50%) centering hack. */
    position: absolute;
    top: 2%;
    left: 0;
    right: 0;
    z-index: 2;
    width: fit-content;
    max-width: 90%;
    margin: 0 auto;
    text-align: center;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: clamp(20px, 3.6vw, 32px);
    font-weight: 800;
    line-height: 1.25;
    color: var(--gv-white, #fff);
    background: rgba(0, 0, 0, .45);
    padding: 8px 22px;
    border-radius: 28px;
}
.zm-mz-hero-desc {
    /* Same centering approach as .zm-mz-hero-title, same reason. */
    position: absolute;
    bottom: 4%;
    left: 0;
    right: 0;
    z-index: 2;
    width: fit-content;
    max-width: min(90%, 560px);
    margin: 0 auto;
    text-align: center;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: clamp(11px, 1.4vw, 14px);
    font-weight: 600;
    line-height: 1.4;
    color: var(--gv-white, #fff);
    background: rgba(0, 0, 0, .45);
    padding: 8px 18px;
    border-radius: 12px;
}
.zm-mz-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* MazdaBanner.webp is 1920x900 (taller than the other brands' pre-
       cropped 1920x660 banners), so a default center crop against this
       section's shared 1920/660 box shaves the car's wheels off the
       bottom while leaving too much empty sky up top. Shifting the
       focal point down keeps the whole car in frame. Mobile uses its
       own MazdaMobileBanner.webp, already pre-cropped to match its box
       exactly, so this has no effect there. */
    object-position: center 73%;
}

/* ══════════════════════════════════════════
   MAZDA MODELS — same card design as
   home.css's .zm-fleet-card (ported, zm-mz- prefixed)
   ══════════════════════════════════════════ */
.zm-mz-cars {
    background: var(--gv-black, #0A0A0A);
    padding: 64px 0;
}

.zm-mz-cars-heading {
    margin: 0 0 40px;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: clamp(26px, 3.6vw, 40px);
    font-weight: 800;
    text-align: center;
    color: var(--gv-white, #fff);
}

.zm-mz-cars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.zm-mz-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--zm-orange, #FF6A2B);
    border-radius: 12px;
    overflow: hidden;
    background: var(--gv-gray-900, #1A1A1A);
}

.zm-mz-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: var(--gv-white, #fff);
}
.zm-mz-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.zm-mz-namebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: var(--gv-gray-800, #222222);
}

.zm-mz-title-link { min-width: 0; text-decoration: none; }
.zm-mz-card-title {
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--gv-white, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zm-mz-brand-badge { flex-shrink: 0; display: flex; align-items: center; }
.zm-mz-brand-badge img { height: 34px; width: auto; max-width: 90px; object-fit: contain; }

.zm-mz-actions {
    display: flex;
    gap: 8px;
    padding: 12px 14px 14px;
    margin-top: auto;
}

.zm-mz-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    border-radius: 8px;
    color: var(--gv-white, #fff);
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity .25s ease, transform .25s ease;
}
.zm-mz-btn:hover { opacity: .88; transform: translateY(-1px); }
.zm-mz-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.zm-mz-btn-call {
    background: linear-gradient(160deg, var(--zm-orange-light, #FF8A52), var(--zm-orange, #FF6A2B));
}
.zm-mz-btn-wa { background: #25D366; }

.zm-mz-empty {
    text-align: center;
    color: var(--gv-gray-300, #9A9A9A);
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 14.5px;
}

/* Visually hidden but present for SEO/screen readers — same technique
   used elsewhere in this build (see home.css .zm-sr-only). */
.zm-mz-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ══════════════════════════════════════════
   BRAND STRIP — same component as home.css's
   .zm-brands / all-cars.css's .zm-ac-brands
   ══════════════════════════════════════════ */
.zm-mz-brands {
    background: var(--gv-gray-900, #1A1A1A);
    padding: 32px 0;
}
/* All 7 logos in one row down to 769px; below that it becomes a
   centred flex wrap (3, then 2 per row) so the odd last logo sits
   in the middle — same as home.css's .zm-brands. */
.zm-mz-brands-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 14px;
}
.zm-mz-brand-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 2.6 / 1;
    padding: 10px 14px;

    border: 1px solid var(--gv-gray-300, #9A9A9A);
    border-radius: 16px;

    transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
.zm-mz-brand-card:hover {
    border-color: var(--gv-white, #fff);
    background: rgba(255, 255, 255, .04);
    transform: translateY(-3px);
}
.zm-mz-brand-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ══════════════════════════════════════════
   INTRO COPY — un-headed lead paragraph right under
   the H1 hero, before the Models grid.
   ══════════════════════════════════════════ */
.zm-mz-intro { background: var(--gv-black, #0A0A0A); padding: 48px 0 8px; }
.zm-mz-intro p {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 15px;
    line-height: 1.85;
    color: var(--gv-gray-300, #9A9A9A);
}

/* ══════════════════════════════════════════
   GENERIC CONTENT SECTIONS — Advantages, Required
   Documents, Who Can Lease, Why Choose Zero Max.
   Alternates background with .zm-mz-section--alt
   for visual rhythm between stacked sections. Heading
   is centered (matches .zm-why-heading / .zm-faq-heading
   sitewide), body copy lives in a centered card
   (matches .zm-how-box) instead of floating text.
   ══════════════════════════════════════════ */
.zm-mz-section { background: var(--gv-black, #0A0A0A); padding: 56px 0; }
.zm-mz-section--alt { background: var(--gv-gray-900, #1A1A1A); }

.zm-mz-section-heading {
    margin: 0 0 28px;
    text-align: center;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: clamp(22px, 3.2vw, 32px);
    font-weight: 800;
    color: var(--gv-white, #fff);
}

/* Short centered intro line under a heading (e.g. the
   "four straightforward steps" lead-in) — same treatment
   as .zm-why-desc. */
.zm-mz-section-lead {
    max-width: 680px;
    margin: -12px auto 0;
    text-align: center;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--gv-gray-300, #9A9A9A);
}

.zm-mz-section-card {
    max-width: 820px;
    margin: 0 auto;
    background: var(--gv-gray-800, #222222);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    padding: 40px 44px;
    text-align: center;
}
.zm-mz-section--alt .zm-mz-section-card { background: var(--gv-gray-900, #1A1A1A); }

.zm-mz-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    border-radius: 14px;
    background: linear-gradient(160deg, var(--zm-orange-light, #FF8A52), var(--zm-orange, #FF6A2B));
    color: var(--gv-black, #0A0A0A);
}
.zm-mz-section-icon svg { width: 28px; height: 28px; }

.zm-mz-section-text {
    margin: 0;
    text-align: center;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--gv-gray-300, #9A9A9A);
}
.zm-mz-section-text + .zm-mz-section-text { margin-top: 14px; }
.zm-mz-section-text a {
    color: var(--zm-orange, #FF6A2B);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.zm-mz-section-text a:hover { color: var(--zm-orange-light, #FF8A52); }

/* ══════════════════════════════════════════
   HOW IT WORKS — 4 numbered step cards
   ══════════════════════════════════════════ */
.zm-mz-steps-grid {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.zm-mz-step-card {
    background: var(--gv-gray-800, #222222);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    padding: 26px 22px;
    transition: transform .25s ease, border-color .25s ease;
}
.zm-mz-step-card:hover { transform: translateY(-3px); border-color: var(--zm-orange, #FF6A2B); }
.zm-mz-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--zm-orange-light, #FF8A52), var(--zm-orange, #FF6A2B));
    color: var(--gv-white, #fff);
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 15px;
    font-weight: 800;
}
.zm-mz-step-title {
    margin: 16px 0 8px;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 16px;
    font-weight: 700;
    color: var(--gv-white, #fff);
}
.zm-mz-step-desc {
    margin: 0;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--gv-gray-300, #9A9A9A);
}

/* ══════════════════════════════════════════
   LEASING VS BUYING — responsive comparison table
   (horizontal scroll on narrow screens, table
   semantics preserved rather than card-stacking)
   ══════════════════════════════════════════ */
.zm-mz-table-wrap {
    max-width: 980px;
    margin: 28px auto 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
}
.zm-mz-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.zm-mz-table th, .zm-mz-table td {
    padding: 14px 20px;
    text-align: left;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 13.5px;
    line-height: 1.6;
    white-space: normal;
}
.zm-mz-table thead th {
    background: linear-gradient(160deg, var(--zm-orange-light, #FF8A52), var(--zm-orange, #FF6A2B));
    color: var(--gv-white, #fff);
    font-weight: 800;
}
.zm-mz-table tbody td:first-child {
    font-weight: 700;
    color: var(--gv-white, #fff);
}
.zm-mz-table tbody td:not(:first-child) { color: var(--gv-gray-300, #9A9A9A); }
.zm-mz-table tbody tr { background: var(--gv-gray-900, #1A1A1A); }
.zm-mz-table tbody tr:nth-child(even) { background: var(--gv-gray-800, #222222); }
.zm-mz-table tbody tr + tr { border-top: 1px solid rgba(255, 255, 255, .06); }

/* ══════════════════════════════════════════
   FAQ — accordion, mirrors home.css's .zm-faq-*
   component but under the zm-bfaq- prefix driven by
   the shared assets/js/brand-faq.js (reused as-is on
   other brand pages later, this block copied with it).
   ══════════════════════════════════════════ */
.zm-mz-faq { background: var(--gv-black, #0A0A0A); padding: 64px 0; }

.zm-bfaq-list {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.zm-bfaq-card {
    background: var(--gv-gray-800, #222222);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: background .3s ease;
}
.zm-bfaq-item--open .zm-bfaq-card {
    background: linear-gradient(160deg, var(--zm-orange-light, #FF8A52), var(--zm-orange, #FF6A2B));
}
.zm-bfaq-q-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
}
.zm-bfaq-qtext {
    margin: 0;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--gv-white, #fff);
    line-height: 1.4;
}
.zm-bfaq-toggle {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--gv-white, #fff);
    cursor: pointer;
    padding: 0;
}
.zm-bfaq-toggle svg { width: 18px; height: 18px; }
.zm-bfaq-vline { transition: opacity .25s ease; }
.zm-bfaq-item--open .zm-bfaq-vline { opacity: 0; }
.zm-bfaq-answer {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding: 0 22px;
    transition: max-height .4s cubic-bezier(.4, 0, .2, 1), opacity .3s ease, padding .3s ease;
}
.zm-bfaq-item--open .zm-bfaq-answer { opacity: 1; padding-bottom: 20px; }
.zm-bfaq-answer p {
    margin: 0;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .92);
}

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .zm-mz-cars-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .zm-mz-brands-grid { gap: 10px; }
    .zm-mz-brand-card { padding: 8px 10px; border-radius: 12px; }
    .zm-mz-steps-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    /* Brands: 3 per row, centred, so the 7th logo sits in the middle */
    .zm-mz-brands-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
    }
    .zm-mz-brand-card { flex: 0 0 calc((100% - 28px) / 3); }

    .zm-bfaq-list { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    /* Purpose-built portrait banner (1080x1550, see <picture> in
       mazda.php) — sizing the hero to its exact ratio means
       object-fit:cover fits it perfectly with no cropping. */
    .zm-mz-hero { aspect-ratio: 1080 / 1550; background: var(--gv-black, #0A0A0A); }
    .zm-mz-hero img { object-fit: cover; }

    .zm-mz-section { padding: 40px 0; }
    .zm-mz-steps-grid { grid-template-columns: 1fr; gap: 14px; }
    .zm-mz-section-card { padding: 26px 24px; border-radius: 16px; }
    .zm-mz-section-icon { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 16px; }
    .zm-mz-section-icon svg { width: 22px; height: 22px; }
    .zm-mz-table th, .zm-mz-table td { padding: 12px 16px; font-size: 13px; }
}

@media (max-width: 480px) {
    .zm-mz-cars {
        padding: 40px 0;
    }

    .zm-mz-cars-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .zm-mz-brands {
        padding: 28px 0;
    }

    /* Same 2-per-row look, as a centred flex wrap (see 768px rule) */
    .zm-mz-brands-grid {
        gap: 12px;
        width: 100%;
        box-sizing: border-box;
    }

    .zm-mz-brand-card {
        flex: 0 0 calc((100% - 12px) / 2);
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        border-radius: 12px;
        padding: 10px 12px;
    }

    .zm-mz-section { padding: 36px 0; }
    .zm-mz-intro { padding: 36px 0 4px; }
    .zm-mz-steps-grid { grid-template-columns: 1fr; gap: 14px; }
    .zm-mz-faq { padding: 44px 0; }
    .zm-mz-table th, .zm-mz-table td { padding: 12px 16px; font-size: 13px; }
}