/*
 * MaiMusic Player - Responsive Breakpoints
 */

/* ========== TABLET (max-width: 1024px) ========== */
@media (max-width: 1024px) {
    .player-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .artist-hero { height: 280px; }
    .artist-hero-overlay h1 { font-size: 2.25rem; }

    .album-hero { flex-direction: column; align-items: flex-start; }
    .album-hero-art { width: 180px; height: 180px; }
    .album-hero-info h1 { font-size: 2rem; }

    .playlist-header { flex-direction: column; align-items: flex-start; }
    .playlist-art-large { width: 160px; height: 160px; }

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

    .revenue-row {
        grid-template-columns: 120px 1fr 60px;
    }

    .transparency-row {
        grid-template-columns: 1fr 1fr 1fr 0.5fr;
    }
}

/* ========== MOBILE (max-width: 768px) ========== */
@media (max-width: 768px) {
    :root {
        --player-nav-height: 52px;
        --player-bar-height: 64px;
    }

    /* Nav - mobile */
    .player-nav {
        padding: 0 var(--player-gap);
        gap: var(--player-gap-sm);
    }

    .nav-search {
        max-width: none;
        flex: 1;
    }

    .nav-links {
        display: none;
    }

    /* Mobile bottom nav */
    .mobile-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 56px;
        background: rgba(10, 10, 10, 0.96);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid var(--player-border);
        z-index: var(--player-z-nav);
        justify-content: space-around;
        align-items: center;
        padding: 0 var(--player-gap-sm);
    }

    body.has-now-playing .mobile-nav {
        bottom: var(--player-bar-height);
    }

    body.has-now-playing .player-main {
        padding-bottom: calc(var(--player-bar-height) + 56px);
    }

    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 6px 12px;
        background: none;
        border: none;
        color: var(--player-text-muted);
        font-size: 0.625rem;
        cursor: pointer;
        transition: color var(--player-transition);
    }

    .mobile-nav-item.active { color: var(--player-accent); }
    .mobile-nav-item:hover { color: var(--player-text); }

    /* Content */
    #main-content {
        padding: var(--player-gap);
    }

    .browse-greeting { font-size: 1.5rem; }

    /* Grid */
    .player-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: var(--player-gap-sm);
    }

    /* Track cards */
    .track-card { min-width: 130px; }

    /* Track rows - simplify */
    .track-row {
        grid-template-columns: 24px 1fr auto;
    }

    .track-row-album { display: none; }

    /* Artist view */
    .artist-hero { height: 240px; border-radius: 0; margin: calc(-1 * var(--player-gap)); margin-bottom: var(--player-gap); }
    .artist-hero-overlay h1 { font-size: 1.75rem; }
    .artist-hero-overlay { padding: var(--player-gap); }

    .album-header .album-art { width: 56px; height: 56px; }

    /* Album view */
    .album-hero-art { width: 140px; height: 140px; }
    .album-hero-info h1 { font-size: 1.5rem; }

    /* Now playing bar - compact */
    #now-playing {
        grid-template-columns: 1fr auto;
        padding: 0 var(--player-gap-sm);
        gap: var(--player-gap-sm);
    }

    .np-extra { display: none; }

    .np-controls {
        flex-direction: row;
        gap: var(--player-gap-xs);
    }

    .np-progress-bar { display: none; }

    .np-buttons {
        gap: var(--player-gap-xs);
    }

    .np-btn { width: 28px; height: 28px; }
    .np-play-btn { width: 32px; height: 32px; }

    .np-shuffle-btn, .np-repeat-btn { display: none; }

    .np-art { width: 40px; height: 40px; }

    /* Auth */
    .auth-card { padding: var(--player-gap); }
    .role-selector { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }

    /* Dashboard */
    .dashboard-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-value { font-size: 1.375rem; }

    .revenue-row { grid-template-columns: 1fr 1fr; gap: var(--player-gap-sm); }
    .revenue-bar { display: none; }

    .schedule-grid { grid-template-columns: repeat(2, 1fr); }

    .payment-row, .transparency-row {
        grid-template-columns: 1fr 1fr;
        font-size: 0.75rem;
    }

    /* Search */
    .search-input-large { height: 44px; }

    /* Playlist */
    .playlist-art-large { width: 120px; height: 120px; }
    .playlist-header h1 { font-size: 1.5rem; }
}

/* ========== SMALL MOBILE (max-width: 480px) ========== */
@media (max-width: 480px) {
    .player-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .artist-card { min-width: 100%; max-width: none; }

    .album-hero { gap: var(--player-gap); }
    .album-hero-art { width: 100px; height: 100px; }
    .album-hero-info h1 { font-size: 1.25rem; }

    .dashboard-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--player-gap-sm);
    }

    .stat-card { padding: var(--player-gap); }
    .stat-value { font-size: 1.125rem; }

    .schedule-grid { grid-template-columns: 1fr; }
}

/* ========== DESKTOP OVERRIDES ========== */
@media (min-width: 769px) {
    .mobile-nav { display: none !important; }
}

/* ========== PREFERS REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}