/* ============================================================
   RESPONSIVE – HIMACHAL TAXI
   ============================================================ */

/* ---- Tablet ---- */
@media (max-width: 960px) {
    .hero-container {
        flex-direction: column;
        padding: 48px 24px 60px;
        align-items: flex-start;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-form-card {
        flex: 0 0 auto;
        width: 100%;
        max-width: 460px;
        align-self: center;
    }
}

/* ---- Mobile nav ---- */
@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }

    .main-nav {
        position: fixed;
        top: var(--header-h);
        left: 0;
        width: 100%;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px 20px 24px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease, transform .25s ease;
    }

    .main-nav.nav-open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: all;
    }

    .nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-bottom: 12px;
    }

    .nav-link {
        padding: 12px 8px;
        font-size: .95rem;
        border-radius: 0;
        border-bottom: 1px solid var(--clr-border);
    }

    .nav-link::after {
        display: none;
    }

    .header-phone-btn {
        margin-left: 0;
        margin-top: 4px;
        justify-content: center;
        padding: 12px 20px;
    }

    .hero-title {
        font-size: clamp(1.9rem, 7vw, 2.6rem);
    }

    .hero-form-card {
        padding: 28px 20px;
    }
}

/* ---- Small mobile ---- */
@media (max-width: 400px) {
    .hero-cta-btn {
        font-size: .8rem;
        padding: 12px 20px;
    }

    .hero-form-card {
        padding: 24px 16px;
    }
}

/* ---- Fleet grid: tablet (2 cols) ---- */
@media (max-width: 900px) {
    .fleet-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* ---- Fleet grid: mobile (1 col) ---- */
@media (max-width: 560px) {

    .fleet-grid,
    .fleet-grid.fleet-featured {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .fleet-section {
        padding: 60px 16px;
    }

    .fleet-slider-track .fleet-card {
        flex: 0 0 280px;
        /* smaller cards on mobile slider */
    }

    /* Modal card full width on small screens */
    .modal-card {
        padding: 32px 20px 24px;
    }
}