/* ═══ ტრანსპორტი — mobile.css ═══ */

/* TABLET (max 1024px) */
@media (max-width: 1024px) {
    .hero-content {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        padding: 100px 20px 40px !important;
    }
    .hero-text {
        text-align: center;
    }
    .hero-actions {
        justify-content: center;
    }
    .hero-visual {
        display: none !important;
    }
    .routes-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }
    .contact-grid {
        grid-template-columns: 1fr 1fr 1fr !important;
    }
}

/* TABLET (max 900px) */
@media (max-width: 900px) {
    /* Navbar */
    .nav-links {
        display: none !important;
    }
    .nav-toggle {
        display: block !important;
    }
    .nav-container, .navbar-inner {
        padding: 12px 16px !important;
    }

    /* Hero */
    .hero {
        min-height: 70vh !important;
    }
    .hero-content {
        padding: 90px 16px 36px !important;
    }
    .hero h1 {
        font-size: 2rem !important;
        line-height: 1.3 !important;
    }
    .hero p {
        font-size: 14px !important;
    }
    .hero-badge {
        font-size: 12px !important;
        padding: 5px 12px !important;
    }
    .hero-actions {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }
    .hero-actions .btn {
        width: 100% !important;
        max-width: 280px !important;
        justify-content: center !important;
        padding: 12px 24px !important;
        font-size: 14px !important;
    }

    /* Sections */
    .section {
        padding: 50px 16px !important;
    }
    .section-container {
        padding: 0 !important;
    }
    .section-header h2 {
        font-size: 1.5rem !important;
    }
    .section-header p {
        font-size: 14px !important;
    }
    .section-label {
        font-size: 12px !important;
    }

    /* Routes */
    .routes-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .route-card {
        padding: 20px 16px !important;
    }
    .route-top {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .route-name {
        font-size: 15px !important;
    }
    .route-type {
        font-size: 12px !important;
    }
    .route-num-badge {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
    .route-path {
        gap: 12px !important;
        flex-wrap: wrap !important;
    }
    .route-endpoint {
        min-width: 0 !important;
    }
    .ep-name {
        font-size: 14px !important;
    }
    .ep-label {
        font-size: 11px !important;
    }
    .route-meta {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .route-meta-item {
        font-size: 12px !important;
    }

    /* Schedule */
    .schedule-tabs {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .schedule-tab {
        font-size: 13px !important;
        padding: 10px 20px !important;
    }
    .table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .data-table {
        min-width: 600px !important;
        font-size: 13px !important;
    }
    .data-table th,
    .data-table td {
        padding: 10px 8px !important;
        font-size: 12px !important;
    }

    /* Stops */
    .stops-list {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    .stop-item {
        padding: 14px 12px !important;
    }
    .stop-name {
        font-size: 14px !important;
    }
    .stop-routes {
        font-size: 12px !important;
    }

    /* Map */
    .map-container {
        border-radius: 12px !important;
    }
    #transport-map {
        height: 300px !important;
    }

    /* Contact */
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .contact-card {
        padding: 24px 20px !important;
    }
    .contact-card h3 {
        font-size: 15px !important;
    }

    /* Footer */
    .footer {
        padding: 36px 16px 20px !important;
    }
    .footer-inner, .footer-top {
        grid-template-columns: 1fr 1fr !important;
        gap: 24px !important;
    }
    .footer-bottom {
        flex-direction: column !important;
        gap: 8px !important;
        text-align: center !important;
    }
}

/* PHONE (max 600px) */
@media (max-width: 600px) {
    .hero {
        min-height: 60vh !important;
    }
    .hero-content {
        padding: 80px 12px 28px !important;
    }
    .hero h1 {
        font-size: 1.6rem !important;
    }
    .hero p {
        font-size: 13px !important;
    }
    .hero-badge {
        font-size: 11px !important;
    }

    .section {
        padding: 36px 12px !important;
    }
    .section-header h2 {
        font-size: 1.25rem !important;
    }

    .route-card {
        padding: 16px 12px !important;
    }
    .route-path {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .route-arrow {
        transform: rotate(90deg) !important;
        align-self: center !important;
    }
    .route-meta {
        flex-direction: column !important;
        gap: 6px !important;
    }

    .stops-list {
        grid-template-columns: 1fr !important;
    }

    .schedule-tabs {
        width: 100% !important;
    }
    .schedule-tab {
        flex: 1 !important;
        text-align: center !important;
    }
    .data-table {
        min-width: 520px !important;
    }

    #transport-map {
        height: 260px !important;
    }

    .footer-inner, .footer-top {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* SMALL PHONE (max 400px) */
@media (max-width: 400px) {
    .hero {
        min-height: 55vh !important;
    }
    .hero-content {
        padding: 76px 10px 24px !important;
    }
    .hero h1 {
        font-size: 1.4rem !important;
    }
    .hero-actions .btn {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
    .route-num-badge {
        width: 34px !important;
        height: 34px !important;
        font-size: 14px !important;
    }
    .route-name {
        font-size: 13px !important;
    }
}