/* ===== ROUTE PAGE MOBILE FIX ===== */

/* Main 2-col grid -> 1 col on mobile */
.route-main-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 40px;
    align-items: start;
}

/* Quick info 2-col cards */
.route-info-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 28px;
}

/* Cab card flex row */
.route-cab-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 12px rgba(10,31,68,0.08);
}
.route-cab-card img {
    width: 90px;
    height: 60px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Sticky booking form */
.route-booking-sticky {
    position: sticky;
    top: 100px;
}

@media (max-width: 900px) {
    .route-main-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    .route-booking-sticky {
        position: static !important;
    }
}

@media (max-width: 600px) {
    /* Page hero on mobile */
    .page-hero h1 {
        font-size: 22px !important;
    }
    .page-hero p {
        font-size: 14px !important;
    }

    /* Info cards side by side */
    .route-info-cards {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    /* Cab card: stack image above text on very small screens */
    .route-cab-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 14px !important;
    }
    .route-cab-card img {
        width: 100% !important;
        height: 80px !important;
        object-fit: contain !important;
    }

    /* Booking form padding */
    .route-booking-sticky .booking-form {
        padding: 0 !important;
    }

    /* Form row stack on mobile */
    .form-row {
        grid-template-columns: 1fr !important;
    }

    /* Google maps button */
    .route-gmaps-btn {
        font-size: 13px !important;
        padding: 12px !important;
    }

    /* FAQ */
    .route-faq-q {
        font-size: 13px !important;
        padding: 13px 14px !important;
    }
    .route-faq-a {
        font-size: 13px !important;
        padding: 13px 14px !important;
    }

    /* On call box */
    .route-oncall-box {
        padding: 16px !important;
    }

    /* CTA section */
    .cta-section h2 {
        font-size: 20px !important;
    }
    .cta-buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }
}

@media (max-width: 400px) {
    .route-info-cards {
        grid-template-columns: 1fr !important;
    }
}