/* utilities/containers.css - Centralized Container Styles */

/* === GLOBAL SPA CONTAINER === */
#spa-content-container {
    margin: 0 auto;
    padding-top: calc(var(--desktop-header-height) + 20px);
    padding-bottom: calc(var(--player-height) + 20px); /* ДОБАВЛЕНО: bottom padding */
    box-sizing: border-box;
    min-height: calc(100vh - var(--desktop-header-height) - var(--player-height));
}

body {
    padding-bottom: var(--player-height);
    box-sizing: border-box;
}

/* === DESKTOP PAGE-SPECIFIC CONTAINERS === */
.landing-container {
    max-width: var(--desktop-home-max-width, 1400px); /* ИСПРАВЛЕНО: fallback */
    padding-left: var(--desktop-home-container-padding-left, 220px);
    padding-right: var(--desktop-home-container-padding-right, 220px);
    margin: 0 auto; /* ДОБАВЛЕНО */
}

.artist-page,
.album-page {
    max-width: var(--artist-album-max-width, 1600px); /* ИСПРАВЛЕНО: fallback */
    margin: 0 auto;
    padding-left: var(--artist-album-container-padding, 220px);
    padding-right: var(--artist-album-container-padding, 220px);
    box-sizing: border-box;
}

.spa-breadcrumb {
    max-width: var(--artist-album-max-width, 1600px);
    margin: 0 auto 2rem auto;
    padding-left: var(--artist-album-container-padding, 220px);
    padding-right: var(--artist-album-container-padding, 220px);
    font-size: 0.9rem;
    color: var(--secondary-text-color);
    font-family: var(--font-secondary);
    box-sizing: border-box;
}

/* === TABLET LANDSCAPE (768px - 1024px) === */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --tablet-container-padding: 32px;
        --tablet-home-container-padding: 40px;
    }
    
    .landing-container {
        padding-left: var(--tablet-home-container-padding);
        padding-right: var(--tablet-home-container-padding);
    }
    
    .artist-page,
    .album-page,
    .spa-breadcrumb {
        padding-left: var(--tablet-container-padding);
        padding-right: var(--tablet-container-padding);
    }
}

/* ========================================
   MOBILE ADAPTATIONS
   ======================================== */

/* === MOBILE GLOBAL CONTAINER === */
@media (max-width: 768px) {
    #spa-content-container {
        padding-top: calc(var(--mobile-header-height, 60px) + 16px);
        padding-bottom: calc(var(--mobile-player-height, 70px) + 16px); /* ДОБАВЛЕНО */
        min-height: calc(100vh - var(--mobile-header-height, 60px) - var(--mobile-player-height, 70px));
    }
    
    body {
        padding-bottom: var(--mobile-player-height, 70px);
    }
    
    /* === MOBILE LANDING CONTAINER === */
    .landing-container {
        max-width: 100%; /* ИСПРАВЛЕНО: полная ширина на мобильных */
        padding-left: var(--mobile-home-container-padding, 16px);
        padding-right: var(--mobile-home-container-padding, 16px);
    }
    
    /* === MOBILE ARTIST/ALBUM PAGES === */
    .artist-page,
    .album-page {
        max-width: 100%; /* ИСПРАВЛЕНО: полная ширина на мобильных */
        padding-left: var(--mobile-artist-album-container-padding, 16px);
        padding-right: var(--mobile-artist-album-container-padding, 16px);
    }
    
    .spa-breadcrumb {
        max-width: 100%; /* ИСПРАВЛЕНО: полная ширина на мобильных */
        padding-left: var(--mobile-artist-album-container-padding, 16px);
        padding-right: var(--mobile-artist-album-container-padding, 16px);
        margin-bottom: 1.5rem;
        font-size: 0.85rem;
    }
}

/* === SMALL MOBILE DEVICES (320px - 480px) === */
@media (max-width: 480px) {
    #spa-content-container {
        padding-top: calc(var(--mobile-header-height, 60px) + 12px);
        padding-bottom: calc(var(--mobile-player-height, 70px) + 12px); /* ДОБАВЛЕНО */
    }
    
    .landing-container {
        padding-left: var(--mobile-home-container-padding-small, 12px);
        padding-right: var(--mobile-home-container-padding-small, 12px);
    }
    
    .artist-page,
    .album-page,
    .spa-breadcrumb {
        padding-left: var(--mobile-artist-album-container-padding-small, 12px);
        padding-right: var(--mobile-artist-album-container-padding-small, 12px);
    }
    
    .spa-breadcrumb {
        margin-bottom: 1rem;
        font-size: 0.8rem;
    }
}

/* === EXTRA SMALL DEVICES (max-width: 374px) === */
@media (max-width: 374px) {
    #spa-content-container {
        padding-top: calc(var(--mobile-header-height, 60px) + 8px);
        padding-bottom: calc(var(--mobile-player-height, 70px) + 8px); /* ДОБАВЛЕНО */
    }
    
    .landing-container,
    .artist-page,
    .album-page,
    .spa-breadcrumb {
        padding-left: 8px;
        padding-right: 8px;
    }
    
    .spa-breadcrumb {
        font-size: 0.75rem;
        margin-bottom: 0.75rem;
    }
}

/* === MOBILE SAFE AREAS (для устройств с вырезами) === */
@media (max-width: 768px) {
    .landing-container,
    .artist-page,
    .album-page,
    .spa-breadcrumb {
        padding-left: max(var(--mobile-artist-album-container-padding, 16px), env(safe-area-inset-left));
        padding-right: max(var(--mobile-artist-album-container-padding, 16px), env(safe-area-inset-right));
    }
    
    #spa-content-container {
        padding-top: max(calc(var(--mobile-header-height, 60px) + 16px), env(safe-area-inset-top));
        padding-bottom: max(calc(var(--mobile-player-height, 70px) + 16px), env(safe-area-inset-bottom));
    }
}

/* === MOBILE TOUCH OPTIMIZATIONS === */
@media (hover: none) and (pointer: coarse) {
    .spa-breadcrumb {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    .spa-breadcrumb a {
        padding: 0.25rem;
        margin: -0.25rem;
        border-radius: 4px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
}

/* === MOBILE PERFORMANCE OPTIMIZATIONS === */
@media (max-width: 768px) {
    #spa-content-container,
    .landing-container,
    .artist-page,
    .album-page {
        will-change: auto;
        contain: layout;
        transform: translateZ(0); /* ДОБАВЛЕНО: hardware acceleration */
    }
}

/* === LARGE DESKTOP SCREENS === */
@media (min-width: 1600px) {
    .landing-container {
        padding-left: 180px; /* УМЕНЬШЕНО для очень больших экранов */
        padding-right: 180px;
    }
    
    .artist-page,
    .album-page,
    .spa-breadcrumb {
        padding-left: 180px;
        padding-right: 180px;
    }
}

/* === MOBILE DEBUG (раскомментировать для отладки) === */
/*
@media (max-width: 768px) {
    .landing-container { outline: 2px solid red; }
    .artist-page { outline: 2px solid blue; }
    .album-page { outline: 2px solid green; }
    .spa-breadcrumb { outline: 1px solid yellow; }
    #spa-content-container { outline: 3px solid purple; }
}
*/