/* ==========================================================================
   Moduł: Top 15 Artists
   Plik: /top15-artist/top15-artists.css
   Wersja: 3.1.1-LTS
   Data utworzenia: 23.08.2026
   Platforma: AMFR Core
   Obsługiwane platformy: WWW, PWA, Universal Client
   Status: ACTIVE
   Opis: Arkusz stylów odpowiedzialny za zewnętrzny box modułu Top 15 Artists, jego nagłówek oraz poziomą taśmę scrollującą kafle, wizualnie wzorowany na boxie Rekomendowanych AMFR 3.1 LTS.
   ========================================================================== */

/* ==========================================================================
   1. Główny kontener sekcji (dostosowany do szerokości Premier/Rekomendowanych)
   ========================================================================== */

.top15-artists-section {
    position: relative;
    width: min(94vw, 1200px);
    max-width: 1200px;
    margin: 18px auto 30px;
    padding: 18px;
    background: linear-gradient(
        180deg,
        rgba(15, 12, 7, .97),
        rgba(3, 3, 3, .98)
    );
    border: 1px solid rgba(215, 166, 60, .65);
    border-radius: 18px;
    box-shadow:
        0 0 18px rgba(215, 166, 60, .16),
        inset 0 0 20px rgba(215, 166, 60, .03);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 120px; /* Zapewnia widoczność pustego boxa */
}

/* ==========================================================================
   2. Nagłówek sekcji
   ========================================================================== */

.top15-artists-header {
    margin-bottom: 20px;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.top15-artists-title {
    margin: 0 0 8px 0;
    color: #f3e5ab;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.6rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.top15-artists-description {
    margin: 0;
    color: #b0b0b0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: .95rem;
    line-height: 1.4;
}

/* ==========================================================================
   3. Kontener poziomego przewijania i taśma kafli (ok. 5 kafli na desktopie)
   ========================================================================== */

.top15-artists-scroll-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 4px 0 12px 0 !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    scroll-snap-type: x mandatory;
}

/* Zapewnienie snapowania oraz ustawienie szerokości kart tak, aby mieściło się ok. 5 sztuk na desktopie */
.top15-artists-scroll-container > .amfr-artist-card {
    scroll-snap-align: start;
    flex: 0 0 calc((100% - (4 * 18px)) / 5) !important;
    min-width: 180px; /* Bezpieczny minimalny rozmiar dla mniejszych ekranów desktopowych */
}

/* Poziomy scrollbar dopasowany do standardów AMFR */
.top15-artists-scroll-container::-webkit-scrollbar {
    height: 8px !important;
}

.top15-artists-scroll-container::-webkit-scrollbar-track {
    background: rgba(20, 20, 20, 0.6) !important;
    border-radius: 4px !important;
}

.top15-artists-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(215, 166, 60, 0.4) !important;
    border-radius: 4px !important;
    transition: background 0.3s ease !important;
}

.top15-artists-scroll-container::-webkit-scrollbar-thumb:hover {
    background: rgba(215, 166, 60, 0.7) !important;
}

/* ==========================================================================
   4. Responsywność
   ========================================================================== */

@media (max-width: 1100px) {
    .top15-artists-section {
        width: 94% !important;
        max-width: 94% !important;
    }
    
    /* Na mniejszych ekranich zmniejszamy liczbę widocznych kart na raz w karuzeli */
    .top15-artists-scroll-container > .amfr-artist-card {
        flex: 0 0 calc((100% - (3 * 18px)) / 4) !important;
    }
}

@media (max-width: 820px) {
    .top15-artists-section {
        width: 94% !important;
        max-width: 94% !important;
        padding: 18px !important;
    }

    .top15-artists-scroll-container {
        gap: 14px !important;
        padding-bottom: 10px !important;
    }

    .top15-artists-scroll-container > .amfr-artist-card {
        flex: 0 0 calc((100% - (2 * 14px)) / 3) !important;
    }
}

@media (max-width: 560px) {
    .top15-artists-section {
        width: 96% !important;
        max-width: 96% !important;
        padding: 14px !important;
    }

    .top15-artists-scroll-container > .amfr-artist-card {
        flex: 0 0 calc((100% - 14px) / 2) !important;
    }
}