/**
 * TGuide Mobile Styles
 * Отдельные стили для мобильных устройств
 *
 * Breakpoints:
 * - Mobile: < 768px
 * - Tablet: 768px - 1024px
 */

/* ==========================================
   TOURS LIST PAGE (/tours)
   ========================================== */

@media (max-width: 767px) {
    /* Tours page container */
    .tours-page .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .tours-page h1.display-4 {
        font-size: 1.75rem;
    }

    .tours-page .lead {
        font-size: 1rem;
    }

    /* Tour cards - full width on mobile */
    .tours-page .card {
        margin-bottom: 1rem;
    }

    .tours-page .card-img-top {
        height: 150px !important;
    }

    .tours-page .card-title {
        font-size: 1.1rem;
    }

    .tours-page .card-text {
        font-size: 0.9rem;
    }
}

/* ==========================================
   TOUR NAVIGATE PAGE
   ========================================== */

@media (max-width: 767px) {
    /* CRITICAL: Vertical layout - map on TOP */
    .tour-navigation > div:nth-child(2) {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Map FIRST (top) */
    .map-column {
        order: 1 !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 45vh !important;
        flex-shrink: 0 !important;
    }

    /* Controls SECOND (bottom) */
    .controls-column {
        order: 2 !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 55vh !important;
        border-left: none !important;
        border-top: 2px solid #28a745 !important;
        overflow-y: auto !important;
    }

    /* Header - compact */
    .tour-navigation .navigation-header {
        padding: 6px 10px !important;
    }

    .tour-navigation .navigation-header h6 {
        font-size: 0.85rem !important;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tour-navigation .navigation-header .btn-sm {
        padding: 3px 6px !important;
        font-size: 0.7rem !important;
    }

    /* Language selector - compact */
    .tour-navigation #lang-selector {
        min-width: 80px !important;
        font-size: 0.75rem !important;
        padding: 2px 4px !important;
    }

    /* HIDE tour info card on mobile - saves space */
    .tour-info-card {
        display: none !important;
    }

    /* HIDE debug and log on mobile */
    #debug-panel,
    .log-section {
        /* display: none !important; */
    }

    /* Story card - compact */
    .story-card {
        padding: 8px !important;
    }

    .story-card .d-flex {
        gap: 8px !important;
    }

    #bottom-point-image {
        width: 40px !important;
        height: 40px !important;
    }

    #current-point-name {
        font-size: 0.85rem !important;
    }

    /* Audio player compact */
    .audio-section {
        padding: 8px !important;
    }

    .audio-section h6 {
        display: none !important;
    }

    #btn-play-audio {
        width: 40px !important;
        height: 40px !important;
    }

    /* Points nav */
    #points-nav {
        padding: 6px !important;
    }

    #points-nav .btn {
        padding: 4px 8px !important;
        font-size: 0.75rem !important;
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
    .tour-navigation .map-column {
        width: 40% !important;
        min-width: 280px !important;
    }

    .tour-navigation .controls-column {
        width: 60% !important;
    }

    .tour-navigation .tour-cover-image {
        width: 120px !important;
    }

    .tour-navigation .log-section {
        max-height: 100px !important;
    }
}

/* ==========================================
   TOUR DETAILS PAGE (/tour/:slug)
   ========================================== */

@media (max-width: 767px) {
    .tour-details-page .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .tour-details-page h1.display-5 {
        font-size: 1.5rem;
    }

    .tour-details-page .lead {
        font-size: 0.95rem;
    }

    /* Action buttons - stack vertically */
    .tour-details-page .d-flex.gap-2.mb-4 {
        flex-wrap: wrap;
    }

    .tour-details-page .btn-lg {
        padding: 10px 16px;
        font-size: 0.95rem;
    }

    /* Language selector */
    .tour-details-page #lang-selector {
        width: 100%;
        margin-top: 10px;
    }

    /* Map */
    .tour-details-page #tourMap {
        height: 250px !important;
    }

    /* Story list items */
    .tour-details-page .list-group-item {
        padding: 12px;
    }

    .tour-details-page .list-group-item h6 {
        font-size: 0.95rem;
    }
}

/* ==========================================
   LANDSCAPE MOBILE (horizontal phone)
   ========================================== */

@media (max-width: 900px) and (orientation: landscape) {
    .tour-navigation > .d-flex.flex-grow-1 {
        flex-direction: row !important;
    }

    .tour-navigation .map-column {
        width: 50% !important;
        height: 100% !important;
    }

    .tour-navigation .controls-column {
        width: 50% !important;
        height: 100% !important;
    }

    .tour-navigation .tour-info-card {
        display: none !important;
    }

    .tour-navigation .log-section {
        display: none !important;
    }
}