/* ===========================================
   MOBILE RESPONSIVE FIXES
   musick.com.au - January 2026
   84% of traffic is mobile - these fixes are critical
   =========================================== */

/* ============================================
   PHASE 1: CRITICAL FIXES
   ============================================ */

/* 1.1 Touch Targets - Minimum 44px for all interactive elements */
@media (max-width: 768px) {
    /* Global touch target minimums */
    button,
    .btn,
    a.btn,
    .genre-tag,
    .year-btn,
    .filter-btn,
    .nav-tab,
    .playlist-add-btn,
    .remove-btn,
    .venue-badge,
    .city-link,
    .tab-btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Genre tags - larger padding for touch */
    .genre-tag {
        padding: 12px 18px;
        font-size: 0.9rem;
    }

    /* Filter buttons */
    .filter-btn,
    .year-btn {
        padding: 12px 16px;
    }

    /* Playlist buttons */
    .playlist-add-btn {
        padding: 12px;
    }

    /* Remove buttons */
    .remove-btn {
        padding: 12px;
    }

    /* Venue badges */
    .venue-badge {
        padding: 10px 16px;
    }

    /* 1.1b HERO TEXT - CRITICAL: Make readable on dark backgrounds */
    .hero h1,
    .hero-content h1,
    section.hero h1 {
        color: #ffffff !important;
        text-shadow: 2px 2px 0 #8338EC,
                     4px 4px 0 #FF006E,
                     0 0 20px rgba(0,0,0,0.9) !important;
    }

    .hero .subtitle,
    .hero p,
    .hero-content .subtitle,
    .hero-content p {
        color: #ffffff !important;
        text-shadow: 0 2px 8px rgba(0,0,0,0.9) !important;
        opacity: 1 !important;
    }
}

/* 1.1c HIDE SOURCE BADGES ON ALL MOBILE/TABLET - use color-coded position instead */
@media (max-width: 1024px) {
    .song-item .source-badge,
    .song-item .source-badge.all-time,
    .song-item .source-badge.annual {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* Color-coded position numbers for National countdown (tablet) */
    .song-item.source-all-time .position {
        color: #FFD700 !important; /* Gold for All Time */
        text-shadow: 0 1px 2px rgba(255, 140, 0, 0.5);
    }

    .song-item.source-annual .position {
        color: #3A86FF !important; /* Blue for Hottest 100 */
        text-shadow: 0 1px 2px rgba(131, 56, 236, 0.5);
    }
}

/* 1.2 SONG CARDS - REDESIGNED FOR MOBILE */
/* Layout: [Album Art with Rank Overlay] [Song Info] [Vertical Icons] */
@media (max-width: 768px) {
    .song-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 10px 12px !important;
        background: var(--bg-card, rgba(30, 30, 50, 0.8));
        border-radius: 12px;
        margin-bottom: 8px;
        min-height: auto;
        position: relative;
    }

    /* Album art wrapper - contains art + rank overlay */
    .song-item .album-art-wrapper,
    .song-item .song-image {
        position: relative;
        flex-shrink: 0;
    }

    /* Album art - 80px square */
    .song-item .album-art {
        display: flex !important;
        width: 80px !important;
        height: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        min-height: 80px !important;
        max-height: 80px !important;
        aspect-ratio: 1/1 !important;
        flex-shrink: 0;
        border-radius: 10px;
        background-size: cover;
        background-position: center;
        background-color: rgba(131, 56, 236, 0.3);
    }

    /* Position/Rank - overlay on album art top-left */
    /* Note: Position is at left:12px padding + 4px offset = 16px, top:10px padding + 4px = 14px */
    .song-item .position {
        position: absolute !important;
        top: 14px;
        left: 16px;
        font-size: 0.75rem;
        font-weight: 700;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.8);
        border-radius: 6px;
        z-index: 2;
        color: #ffffff;
    }

    /* Color-coded position for National countdown */
    .song-item.source-all-time .position {
        color: #FFD700 !important; /* Gold for All Time */
        background: rgba(0, 0, 0, 0.85);
    }

    .song-item.source-annual .position {
        color: #3A86FF !important; /* Blue for Hottest 100 */
        background: rgba(0, 0, 0, 0.85);
    }

    /* Hide source badges on mobile - position color indicates source */
    .song-item .source-badge {
        display: none !important;
    }

    /* Song info - fills remaining space */
    .song-item .song-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
        justify-content: center;
        padding-right: 4px;
    }

    /* Song title - white, allow wrap to 2 lines max */
    .song-item .song-title {
        font-size: 1rem;
        font-weight: 600;
        color: #ffffff !important;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Artist name - light purple */
    .song-item .artist-name {
        font-size: 0.85rem;
        color: #E9D5FF !important;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Genre badge - hide on mobile */
    .song-item .song-genre {
        display: none !important;
    }

    /* Year - subtle, below artist */
    .song-item .song-year {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.5);
        display: block;
    }

    /* Song title row - keep compact */
    .song-item .song-title-row {
        display: block;
        line-height: 1.25;
    }

    /* Song meta row - single line */
    .song-item .song-meta-row {
        display: block;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Actions - VERTICAL column on right */
    .song-item .song-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
    }

    /* Hide heart/playlist button on mobile - no analytics showing usage */
    .song-item .playlist-add-btn {
        display: none !important;
    }

    /* Action buttons - compact icons */
    .song-item .spotify-btn,
    .song-item .youtube-btn,
    .song-item .btn-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        padding: 0;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0; /* Hide text */
        background: rgba(131, 56, 236, 0.3);
        border: none;
    }

    .song-item .spotify-btn::before {
        content: "🎧";
        font-size: 1.1rem;
    }

    .song-item .youtube-btn::before {
        content: "▶️";
        font-size: 1rem;
    }

    /* Find/search button variant */
    .song-item .spotify-btn[style*="opacity"]::before,
    .song-item .search-btn::before {
        content: "🔍";
        font-size: 1rem;
    }
}

/* Even smaller screens - reduce album art to 60px */
@media (max-width: 380px) {
    .song-item {
        gap: 10px !important;
        padding: 8px 10px !important;
    }

    .song-item .album-art {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
    }

    /* Adjust position overlay for smaller padding */
    .song-item .position {
        top: 12px;
        left: 14px;
        font-size: 0.65rem;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
    }

    .song-item .song-title {
        font-size: 0.9rem;
    }

    .song-item .artist-name {
        font-size: 0.8rem;
    }

    .song-item .spotify-btn,
    .song-item .youtube-btn,
    .song-item .btn-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
    }
}

/* 1.3 Reduced Header Height on Mobile */
@media (max-width: 768px) {
    .main-nav,
    .site-header,
    header {
        height: 56px !important;
        min-height: 56px !important;
    }

    .nav-logo img {
        height: 32px;
    }

    /* Nav tabs - horizontal scroll instead of stacking */
    .nav-tabs {
        position: relative;
        top: auto;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        white-space: nowrap;
        padding: 8px 16px;
    }

    .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .nav-tabs .tab-btn,
    .nav-tabs .nav-tab {
        display: inline-flex;
        flex-shrink: 0;
    }
}

/* ============================================
   PHASE 2: LAYOUT IMPROVEMENTS
   ============================================ */

/* 2.1 Grid Minimums - Prevent horizontal scroll on small screens */
@media (max-width: 480px) {
    /* Cities grid - single column on very small screens */
    .cities-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    /* Stats grid - 2 columns on mobile */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }

    /* Gig info cards - single column */
    .gig-info-cards {
        grid-template-columns: 1fr !important;
    }

    /* Similar artists grid */
    .similar-artists-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    /* Venue grid */
    .venues-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 600px) {
    /* Cities grid - allow smaller cards */
    .cities-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    /* Stats grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* City cards - smaller padding */
    .city-card {
        padding: 24px 16px;
    }

    .city-card h3 {
        font-size: 1.25rem;
    }

    /* Stat cards - smaller padding */
    .stat-card {
        padding: 16px 12px;
    }

    .stat-card h4 {
        font-size: 1.5rem;
    }
}

/* 2.2 Sidebar Content Reordering - CTAs above fold on mobile */
@media (max-width: 900px) {
    .artist-layout,
    .venue-layout,
    .gig-layout,
    .page-layout {
        display: flex;
        flex-direction: column;
    }

    /* Move important CTAs to top */
    .sidebar .ticket-card,
    .sidebar .streaming-links,
    .sidebar .rsvp-card,
    .sidebar .cta-card {
        order: -1;
    }

    .sidebar {
        order: -1;
        margin-bottom: 24px;
    }
}

/* 2.3 Horizontal Scroll for Filters */
@media (max-width: 768px) {
    .genre-filter,
    .filter-row,
    .year-filter,
    .tabs-container {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
        padding-bottom: 8px;
        flex-wrap: nowrap;
    }

    .genre-filter::-webkit-scrollbar,
    .filter-row::-webkit-scrollbar,
    .year-filter::-webkit-scrollbar,
    .tabs-container::-webkit-scrollbar {
        display: none;
    }

    .genre-filter > *,
    .filter-row > *,
    .year-filter > * {
        flex-shrink: 0;
    }
}

/* ============================================
   PHASE 3: POLISH & ENHANCEMENTS
   ============================================ */

/* 3.1 Mobile Menu - Full screen scrollable overlay */
@media (max-width: 768px) {
    .mobile-menu {
        position: fixed;
        top: 56px; /* Below header */
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bg-primary, #0a0a1a);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        transform: translateX(100%);
        transition: transform 0.3s ease-out;
        z-index: 999;
        padding: 20px;
        padding-bottom: 100px; /* Extra space at bottom for safe area */
    }

    .mobile-menu.active {
        transform: translateX(0);
    }

    /* Prevent body scroll when menu open */
    body.mobile-menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        top: 0;
        left: 0;
        right: 0;
        touch-action: none !important;
        -webkit-overflow-scrolling: auto !important;
    }

    /* Ensure mobile menu captures all touch events */
    .mobile-menu.active {
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .mobile-menu-overlay {
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    .mobile-menu-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
}

/* 3.2 Improved Typography for Mobile */
@media (max-width: 768px) {
    h1 {
        font-size: 1.75rem;
        line-height: 1.2;
    }

    h2 {
        font-size: 1.4rem;
    }

    h3 {
        font-size: 1.15rem;
    }

    .hero-title {
        font-size: 2rem;
    }

    .page-title {
        font-size: 1.5rem;
    }

    /* Container padding */
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* 3.3 Cards and Content Blocks */
@media (max-width: 768px) {
    .card,
    .content-card,
    .info-card {
        padding: 16px;
        border-radius: 12px;
    }

    /* Gig cards */
    .gig-card {
        padding: 14px;
    }

    .gig-card .gig-title {
        font-size: 1rem;
    }

    /* Artist cards */
    .artist-card {
        padding: 12px;
    }

    /* Venue cards */
    .venue-card {
        padding: 14px;
    }
}

/* 3.4 Tables - Horizontal scroll */
@media (max-width: 768px) {
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 500px;
    }

    th, td {
        padding: 10px 8px;
        font-size: 0.9rem;
    }
}

/* 3.5 Forms on Mobile */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    select,
    textarea {
        min-height: 44px;
        padding: 12px;
        font-size: 16px; /* Prevents iOS zoom */
    }

    .form-group {
        margin-bottom: 16px;
    }

    .form-row {
        flex-direction: column;
        gap: 16px;
    }
}

/* 3.6 Modal/Dialog on Mobile */
@media (max-width: 768px) {
    .modal,
    .dialog {
        width: 95%;
        max-width: none;
        margin: 16px;
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* ============================================
   SPECIFIC PAGE FIXES
   ============================================ */

/* Homepage */
@media (max-width: 768px) {
    .hero-section {
        padding: 40px 16px;
    }

    .hero-title {
        font-size: 1.75rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }
}

/* City Page */
@media (max-width: 768px) {
    .city-header {
        padding: 24px 16px;
    }

    .countdown-section {
        padding: 16px;
    }

    /* Hero title size for city pages */
    .hero h1 {
        font-size: 1.8rem !important;
    }

    /* Year links in subtitle */
    .hero .subtitle a,
    .hero p a {
        color: #FFD93D !important;
        text-decoration: underline;
    }
}

/* Artist Page */
@media (max-width: 768px) {
    .artist-header {
        flex-direction: column;
        text-align: center;
    }

    .artist-image {
        width: 150px;
        height: 150px;
        margin: 0 auto 16px;
    }

    .artist-bio {
        font-size: 0.95rem;
        line-height: 1.6;
    }
}

/* Gig Page */
@media (max-width: 768px) {
    .gig-header {
        padding: 20px 16px;
    }

    .gig-details {
        font-size: 0.95rem;
    }

    .ticket-btn {
        width: 100%;
        padding: 16px;
        font-size: 1.1rem;
    }
}

/* Charts Page */
@media (max-width: 768px) {
    .chart-item {
        padding: 12px;
    }

    .chart-position {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
}

/* ============================================
   UTILITY CLASSES FOR MOBILE
   ============================================ */

@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }

    .show-mobile-flex {
        display: flex !important;
    }

    .mobile-full-width {
        width: 100% !important;
    }

    .mobile-text-center {
        text-align: center !important;
    }

    .mobile-stack {
        flex-direction: column !important;
    }

    .mobile-gap-sm {
        gap: 8px !important;
    }

    .mobile-p-sm {
        padding: 12px !important;
    }
}

/* Hide on desktop, show on mobile */
.show-mobile,
.show-mobile-flex {
    display: none;
}

/* ============================================
   PREVENT HORIZONTAL SCROLL
   ============================================ */

html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

@media (max-width: 768px) {
    * {
        max-width: 100%;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    pre, code {
        overflow-x: auto;
        max-width: 100%;
    }
}