/* ═══════════════════════════════════════════════════════════════
   move2nanaimo — responsive.css
   Breakpoint-specific overrides. global.css + components.css
   are already written mobile-first; this file handles the cases
   that can't be solved with clamp()/flex/grid alone.

   Breakpoints:
     --bp-sm: 640px
     --bp-md: 840px
     --bp-lg: 1024px
     --bp-xl: 1280px
   ═══════════════════════════════════════════════════════════════ */


/* ─── Tablet and below (≤ 1024px) ──────────────────────────── */

@media (max-width: 1024px) {

    /* Hide desktop nav links, show hamburger */
    .primary-nav {
        display: none;
    }

    .nav-toggle {
        display: inline-flex;
    }

    /* Header phone hidden on tablet, kept in mobile menu */
    .header-phone {
        display: none;
    }

    /* Footer collapses to 2 columns */
    .site-footer__cols {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6);
    }

    /* Hide brokerage line under logo on tablet — still in mobile menu */
    .site-header__brokerage {
        display: none;
    }

    /* Subscribe strip stacks text above form */
    .footer-subscribe__inner {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    /* Lead capture bar stacks */
    .lead-capture-bar {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .guide-mockup {
        max-width: 340px;
        margin: 0 auto;
    }

    /* Split blocks collapse */
    .split-block {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .split-block--reverse .split-block__media {
        order: 0; /* Always photo on top when stacked */
    }
}


/* ─── Mobile (≤ 768px) ─────────────────────────────────────── */

@media (max-width: 768px) {

    :root {
        --header-height: var(--header-height-mobile);
    }

    html {
        scroll-padding-top: calc(var(--header-height-mobile) + 0.5rem);
    }

    /* Hero a touch shorter on mobile so the CTA is in view */
    .hero {
        min-height: 85vh;
    }

    .hero__title {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    /* Footer → single column */
    .site-footer__cols {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        padding-bottom: var(--space-6);
    }

    /* Subscribe form stacks vertically */
    .footer-subscribe__form {
        grid-template-columns: 1fr;
    }

    .footer-legal__inner {
        flex-direction: column;
        gap: var(--space-2);
    }

    /* Legal links wrap */
    .footer-legal__links {
        gap: var(--space-3);
        flex-wrap: wrap;
    }

    /* Stats grid: 2-up */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Section header left-aligns for readability */
    .section-header {
        text-align: left;
    }

    /* CTA section buttons stack */
    .cta-section__buttons {
        flex-direction: column;
        align-items: stretch;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Site logo slightly smaller */
    .site-logo svg {
        height: 36px;
    }

    /* Quiz options stack */
    .quiz-options {
        grid-template-columns: 1fr;
    }

    /* Comparison table — horizontal scroll */
    .compare-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .compare-table table {
        min-width: 480px;
    }
}


/* ─── Small mobile (≤ 480px) ───────────────────────────────── */

@media (max-width: 480px) {

    .btn {
        font-size: var(--fs-sm);
        padding: 0.75rem 1.25rem;
    }

    .hero__subtitle {
        font-size: var(--fs-base);
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    /* Lead capture form: edge-to-edge */
    .lead-capture-bar {
        border-radius: 0;
        padding: var(--space-5) var(--container-pad);
        margin-left: calc(var(--container-pad) * -1);
        margin-right: calc(var(--container-pad) * -1);
    }

    .testimonial-card {
        padding: var(--space-5);
    }
}


/* ─── Wide screens (≥ 1440px) ─────────────────────────────── */

@media (min-width: 1440px) {

    .container {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }

    /* Slightly larger hero title on big screens — still capped */
    .hero__title {
        font-size: 4rem;
    }
}


/* ─── High-DPI retina tweaks ───────────────────────────────── */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

    /* Subtly sharper borders on retina */
    .card,
    .testimonial-card,
    .stats-grid,
    .compare-table,
    .quiz-shell,
    .calc-shell {
        border-width: 1px;
    }
}