/* ==========================================================================
   Mobile Destination Page Layout
   - Sticky horizontal tab navigation
   - Collapsible accordion sections
   - Swipeable CSS scroll-snap galleries
   - Sticky "Talk to Agent" footer bar on mobile
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sticky horizontal tab navigation on mobile
   -------------------------------------------------------------------------- */
.dest-mobile-tabs {
    display: none;
}

@media (max-width: 768px) {
    .dest-mobile-tabs {
        display: flex;
        position: sticky;
        top: 0;
        z-index: 1020;
        background: white;
        border-bottom: 1px solid #e9ecef;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    }

    .dest-mobile-tabs::-webkit-scrollbar {
        display: none;
    }

    .dest-mobile-tab {
        flex-shrink: 0;
        padding: 12px 16px;
        font-size: 0.85rem;
        font-weight: 600;
        color: #6c757d;
        text-decoration: none;
        white-space: nowrap;
        border-bottom: 3px solid transparent;
        transition: color 0.2s, border-color 0.2s;
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .dest-mobile-tab:hover,
    .dest-mobile-tab:active {
        color: #0077b6;
        text-decoration: none;
    }

    .dest-mobile-tab.active {
        color: #0077b6;
        border-bottom-color: #0077b6;
    }

    .dest-mobile-tab i {
        font-size: 1rem;
    }
}

/* --------------------------------------------------------------------------
   Collapsible accordion sections on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .content-section.mobile-collapsible {
        padding: 0;
        overflow: hidden;
    }

    .content-section.mobile-collapsible h2 {
        padding: 1.25rem 1.5rem;
        margin-bottom: 0;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 56px;
        transition: background 0.2s;
    }

    .content-section.mobile-collapsible h2:active {
        background: #f8f9fa;
    }

    .content-section.mobile-collapsible h2::after {
        content: '\F282'; /* bi-chevron-down */
        font-family: 'bootstrap-icons';
        font-size: 1rem;
        color: #6c757d;
        transition: transform 0.3s ease;
        flex-shrink: 0;
        margin-left: auto;
    }

    .content-section.mobile-collapsible.collapsed h2::after {
        transform: rotate(-90deg);
    }

    .mobile-collapse-content {
        padding: 0 1.5rem 1.5rem;
        transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
        max-height: 2000px;
        opacity: 1;
        overflow: hidden;
    }

    .content-section.mobile-collapsible.collapsed .mobile-collapse-content {
        max-height: 0;
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* --------------------------------------------------------------------------
   Swipeable CSS scroll-snap gallery
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .items-grid.mobile-gallery {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 12px;
        padding-bottom: 12px;
        scrollbar-width: none;
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .items-grid.mobile-gallery::-webkit-scrollbar {
        display: none;
    }

    .items-grid.mobile-gallery .item-card {
        flex-shrink: 0;
        width: 280px;
        scroll-snap-align: start;
    }

    /* Scroll indicators (dots) */
    .gallery-scroll-indicator {
        display: flex;
        justify-content: center;
        gap: 6px;
        padding: 8px 0;
    }

    .gallery-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #dee2e6;
        transition: background 0.2s, transform 0.2s;
    }

    .gallery-dot.active {
        background: #0077b6;
        transform: scale(1.3);
    }
}

/* On desktop, hide gallery indicators */
@media (min-width: 769px) {
    .gallery-scroll-indicator {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Scores grid single-row scroll on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .scores-grid {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 10px;
        scrollbar-width: none;
    }

    .scores-grid::-webkit-scrollbar {
        display: none;
    }

    .scores-grid .score-card {
        flex-shrink: 0;
        min-width: 120px;
        scroll-snap-align: start;
    }
}

/* --------------------------------------------------------------------------
   Season cards row on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .season-breakdown {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 10px;
        scrollbar-width: none;
    }

    .season-breakdown::-webkit-scrollbar {
        display: none;
    }

    .season-breakdown .season-item {
        flex-shrink: 0;
        min-width: 140px;
        scroll-snap-align: start;
    }
}

/* --------------------------------------------------------------------------
   Related destinations horizontal scroll
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .related-grid {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 10px;
        scrollbar-width: none;
    }

    .related-grid::-webkit-scrollbar {
        display: none;
    }

    .related-grid .related-card {
        flex-shrink: 0;
        min-width: 150px;
        scroll-snap-align: start;
    }
}

/* --------------------------------------------------------------------------
   Sticky "Talk to Agent" footer bar on mobile
   -------------------------------------------------------------------------- */
.dest-mobile-footer-bar {
    display: none;
}

@media (max-width: 768px) {
    .dest-mobile-footer-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1010;
        background: white;
        border-top: 1px solid #e9ecef;
        padding: 10px 16px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
        gap: 10px;
        align-items: center;
    }

    .dest-footer-cta {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 16px;
        border: none;
        border-radius: 10px;
        font-weight: 600;
        font-size: 0.95rem;
        cursor: pointer;
        text-decoration: none;
        min-height: 44px;
        transition: all 0.2s;
    }

    .dest-footer-cta.primary {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: white;
    }

    .dest-footer-cta.primary:hover,
    .dest-footer-cta.primary:active {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
        color: white;
        text-decoration: none;
    }

    .dest-footer-cta.secondary {
        background: #f8f9fa;
        color: #333;
        border: 1px solid #dee2e6;
    }

    .dest-footer-cta.secondary:hover,
    .dest-footer-cta.secondary:active {
        background: #e9ecef;
        color: #333;
        text-decoration: none;
    }

    /* Offset page bottom so content is not hidden behind sticky footer */
    .guide-main,
    .guide-content {
        padding-bottom: 80px;
    }

    /* Hide the floating FAB when sticky footer is visible */
    .talk-to-agent-fab {
        bottom: 80px;
    }
}

/* --------------------------------------------------------------------------
   Hero section mobile adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .dest-hero {
        padding: 2.5rem 0 2rem;
    }

    .dest-hero h1 {
        font-size: 1.75rem;
    }

    .hero-cta {
        display: block;
        text-align: center;
        padding: 0.875rem 1.5rem;
    }

    .sidebar-cta {
        display: none; /* Replaced by sticky footer bar */
    }
}

/* --------------------------------------------------------------------------
   Quick facts sidebar on mobile - horizontal scroll
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
    .quick-facts {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 12px;
        scrollbar-width: none;
        margin-left: -12px;
        margin-right: -12px;
        padding: 0 12px;
    }

    .quick-facts::-webkit-scrollbar {
        display: none;
    }

    .quick-facts .quick-facts-card {
        flex-shrink: 0;
        min-width: 260px;
        scroll-snap-align: start;
    }
}