/* ============================================================================================================
                                      1. DEFINICJA CZCIONKI ALLER
   ============================================================================================================ */

@font-face {
    font-family: 'Aller';
    src: url('https://fonts.cdnfonts.com/s/12/Aller_Rg.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}





/* ============================================================================================================
                                      2. RESET I PODSTAWY (Times New Roman dla całej strony)
   ============================================================================================================ */


html {
    scroll-behavior: smooth;
}

body, html {
    margin: 0;
    padding: 0;
    min-height: 100%;
    /* Ustawienie Times New Roman jako głównej */
    font-family: "Times New Roman", Times, serif; 
    color: white;
    background: transparent;
    /* Kerning dla całej strony */
    letter-spacing: 2px; 
}





/* ============================================================================================================
                                      3. TŁO WIDEO
   ============================================================================================================ */


#video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    object-fit: cover;
filter: brightness(60%);
}





/* ============================================================================================================
                                      4. GŁÓWNY KONTENER
   ============================================================================================================ */


.content-container {
    display: flex;
    background: transparent;
    position: relative;
    z-index: 1;
}






/* ============================================================================================================
                                      5. MENU PO LEWEJ STRONIE
   ============================================================================================================ */


.side-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 430px;  /* SZEROKOŚĆ KOLUMNY Z SEKCJĄ MENU, MA BYC IDENTYCZNA WARTOŚĆ CO W SEKCJI: 6. PRAWA TREŚĆ - margin-left: ??? px;  */
    height: 100vh;
    padding: 100px 90px;
    display: flex;
    flex-direction: column;
    z-index: 10;
    box-sizing: border-box;
}

.main-logo {
    width: 100%;
    max-width: 173px;
    height: auto;
    margin-bottom: 52px;
    letter-spacing: normal;  
}

.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-links li {
    margin-bottom: 2.5px;
}


/* Styl dla ikonek flag */
.flag-icon {
    width: 18px;         /* Szerokość flagi - możesz zmienić */
    height: auto;        /* Zachowanie proporcji */
    vertical-align: middle; 
    transition: opacity 0.3s ease, transform 0.2s ease;
    opacity: 0.3;        /* Domyślnie lekko przygaszone */
}

/* Tylko wybrana flaga - pełna widoczność, ale rozmiar standardowy */
.lang-switcher a.active .flag-icon {
    opacity: 1;
    transform: scale(1); /* Rozmiar standardowy */
}

/* Efekt najechania - flaga się rozjaśnia i powiększa */
.lang-switcher a:hover .flag-icon {
    opacity: 1;
    transform: scale(1.15); /* Powiększa się tylko przy najechaniu */
    cursor: pointer;
}


/* Usunięcie podkreśleń i innych efektów tekstowych z linków z flagami */
.lang-switcher a {
    display: inline-block;
    line-height: 1;
    text-decoration: none;
}


/* ---     ———————————————————————————————————————————————————————————————     --- */
/* P O D S T A W O W Y   S T A N   L I N K Ó W   W   M E N U   (zawsze białe) */

.nav-links a {
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 20px;      
    font-weight: bold;
    letter-spacing: 4.5px;    
    text-transform: uppercase;
}



/* ---     ———————————————————————————————————————————————————————————————     --- */
/* E F E K T   N A J E C H A N I A   M Y S Z K Ą  (lekkie wyszarzenie / przezroczystość) */

.nav-links a:hover {
    opacity: 0.5;
}



/* ---     ———————————————————————————————————————————————————————————————     --- */
/* E F E K T   K L I K N I Ę C I A   ( A K T Y W N A   K O T W I C A ) - Po kliknięciu w adresie pojawi się np. #reviews, a link prowadzący do tej sekcji zmieni kolor na żółty */

.nav-links a.active-link {
    color: #e0cf8d !important;
    opacity: 1 !important;
}

/* Dodatkowy trik dla przeglądarek: wybór stały po kliknięciu */
:target ~ .content-container .side-menu .nav-links a[href*="#"] {
    /* To zapewnia, że styl zostanie przy wybranym elemencie */
}

/* Najprostsza metoda na "zaznaczenie" wyboru w CSS */
.nav-links a:focus {
    color: #fff9bb !important;
    outline: none;
}



/* ---     ———————————————————————————————————————————————————————————————     --- */
/* G Ł Ó W N Y   K O N T E N E R   J Ę Z Y K Ó W */

.lang-switcher {
    margin-top: 38px;
    font-family: "Times New Roman", Times, serif;  
    letter-spacing: 3px;
    font-size: 16px;   
    font-weight: bold;
}

/* STYL DLA WSZYSTKICH LINKÓW (DOMYŚLNIE SZARE) */
.lang-switcher a {
    color: #888;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}

/* STYL DLA LINKÓW PO NAJECHANIU MYSZKĄ */
.lang-switcher a:hover {
    color: white;
}

/* STYL DLA AKTYWNEGO (WYBRANEGO) JĘZYKA - MUSI BYĆ NIŻEJ NIŻ OGÓLNE 'a' */
.lang-switcher a.active {
    color: white; 

}

/* STYL DLA CIENKICH KRESEK | */
.lang-switcher .separator {
    color: #777; 
    font-weight: 100; 
    padding: 0 0.5px;
    font-family: Arial, sans-serif; 
}



/* ---     ———————————————————————————————————————————————————————————————     --- */
/* S T Y L   T Y L K O   D L A   N A P I S U   ' C H O O S E   L A N G U A G E ' */

.lang-switcher p {
    font-family: "Times New Roman", Times, serif;  
    margin-bottom: 4.5px;       /* interlinia */
    font-size: 11.5px;           /* Możesz go zmniejszyć względem linków */
    font-weight: normal;      /* Np. brak pogrubienia */
    letter-spacing: 3px;      /* Zmieniony, mniejszy kerning dla napisu */
    text-transform: lowercase; /* Małe litery, jeśli tak chcesz */
    color: white;
}






/* ============================================================================================================
                                      6. PRAWA STRONA - CAŁA TREŚĆ
   ============================================================================================================ */

   
.main-content {
    margin-left: 430px; /* SZEROKOŚĆ KOLUMNY Z PRAWĄ STRONĄ, CZYLI CAŁĄ TREŚCIĄ, MA BYC IDENTYCZNA WARTOŚĆ CO W SEKCJI: 5. LEWE MENU - width: ??? px;  */
    flex: 1;
    padding: 60px 80px;
    min-height: auto;
    box-sizing: border-box;
    background: transparent;
}

section {
    min-height: auto;
    padding-top: 5px;
    padding-bottom: 10px;
}



/* ---     ——————————————————————————————————————————————————————————————————————————————     --- */
/* ---     S T Y L E   D L A   A L B U M U     --- */

.album-header {
    display: flex;
    gap: 75px; /* Odstęp między okładką a tekstem */
    align-items: flex-start;
    margin-top: 60px;
}

.album-cover {
    width: 100%;
    max-width: 560px; /* Dopasuj wielkość okładki */
    height: auto;
    box-shadow: 0 0px 0px rgba(0,0,0,0); /* Delikatny cień pod płytą jeśli będzie potrzebny */
}

.artist-name {
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 2px;
    margin-top: 50px;
    margin-bottom: 5px;
}

.album-title {
    font-size: 36px;
    font-weight: bold;
    letter-spacing: 2px;
    margin-top: 0;
    margin-bottom: 30px;
}

.album-metadata p {
    font-size: 18px;
    line-height: 1.2;
    margin: 5px 0;
    letter-spacing: 1.5px;
    color: white;
}

.album-metadata strong {
    color: #ccc;
    text-transform: uppercase;
    font-size: 16px;
    margin-right: 10px;
}



/* ---     ——————————————————————————————————————————————————————————————————————————————     --- */
/* ---     U K Ł A D   K O L U M N   D L A   ' I N F O '   I   ' T R A C K L I S T '     --- */

.album-details-grid {
    display: flex;
    gap: 75px; /* Taki sam odstęp jak wyżej dla spójności */
    margin-top: 5px;
}

.details-column {
    flex: 1; /* Obie kolumny będą miały równą szerokość */
    max-width: 560px; /* Ograniczamy szerokość, żeby tekst nie był za długi w jednej linii - TO TA SAMA SZEROKOŚĆ CO SZEROKOŚĆ OKŁADKI */
}

/* ETYKIETY (INFO / TRACKLIST) */
.column-label {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 3px;
    margin-bottom: 10px;
    color: white;
}

/* SEPARATOR (LINIA) */
.column-separator {
    width: 100%;
    max-width: 1195px; 
    height: 1px;
    background-color: rgba(255, 255, 255, 0.5); /* Cienka, półprzezroczysta linia */
    margin-bottom: 20px;
}

/* TEKST W INFO */
.column-text p {
    font-size: 18px;
    line-height: 1.3;  /* line-height to inaczej interlinia */
    margin-top: 15px;
    margin-bottom: 15px;
    color: white;
    letter-spacing: 1.5px;
}



/* ---     ——————————————————————————————————————————————————————————————————————————————     --- */
/* ---     T R A C K L I S T A   —   L I S T A   U T W O R Ó W     --- */

.tracklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ODSTĘPY MIĘDZY UTWORAMI */
.tracklist li {
    font-size: 13px;
    margin-bottom: 10px; /* Odstęp pionowy między utworami - CZYLI INTERLINIA */
    display: flex; /* Pomaga wyrównać ikonkę i teksty w jednej linii */
    align-items: center;
    letter-spacing: 1.5px;
}

/* REGULACJA SZCZEGÓŁOWA */
/* NUMER UTWORU */
.track-number {
    font-size: 16px;    
    color: #ccc;      
    margin-right: 8px;
    letter-spacing: 1.2px;
}

/* TYTUŁ UTWORU */
.track-title {
    font-size: 18px;   
    font-weight: normal;  
    color: #fff;
}

/* CZAS UTWORU */
.track-time {
    font-size: 16px;    
    color: #ccc;        
    margin-left: 8px;
    letter-spacing: 1.2px;
}


.speaker-icon {
    width: 17px;              /* Szerokość ikonki - dopasuj do wielkości tekstu */
    height: auto;             /* Proporcjonalna wysokość */
    margin-right: 14px;       /* Odstęp od tekstu */
    vertical-align: middle;   /* Ważne: wyrównuje ikonkę do środka wysokości tekstu */
}






/* ---     ——————————————————————————————————————————————————————————————————————————————     --- */
/* ---     S E K C J A   R E V I E W S     --- */


#reviews {
    margin-top: 80px; 
}



/* --- UKŁAD GAZETOWY (MASONRY) --- */

.reviews-masonry {
    column-count: 4;      /* 4 szpalty */
    column-gap: 40px;     /* Odstęp między szpaltami */
    width: 100%;
    max-width: 1195px;
    margin-top: 20px;
}

.review-card {
    display: inline-block; /* Zapobiega rozrywaniu recenzji między kolumny */
    width: 100%;
    margin-bottom: 10px;   /* Odstęp pionowy między recenzjami */
    break-inside: avoid;   /* Dla starszych przeglądarek */
}

.review-quote {
    font-size: 18px;       /* font dla 4 kolumn */
    line-height: 1.5;      /* Większa interlinia dla czytelności w wąskiej szpalcie */
    color: #fff;
    margin-bottom: 10px;
    letter-spacing: 1.0px;
}

.review-author {
    font-weight: bold;
    font-size: 16px;
    color: #d6c78d;        /* Twój złoty kolor */
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* Responsywność */
@media (max-width: 1400px) {
    .reviews-masonry { column-count: 3; }
}

@media (max-width: 1024px) {
    .reviews-masonry { column-count: 2; }
}

@media (max-width: 600px) {
    .reviews-masonry { column-count: 1; }
}



/* --- T A B E L K A   -   P R O F E S S I O N A L   R A T I N G S --- */

.ratings-container {
    margin-top: 15px;
    max-width: 420px; /* Ograniczamy szerokość tabeli */
}

.ratings-title {
    font-size: 18px;
    letter-spacing: 2px;
    color: white;
    margin-top: 0px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.ratings-table {
    width: 100%;
    border-collapse: collapse;
    color: white;
    font-size: 16px;
}

/* WYMIARY TABELKI + PODZIAŁ LEWA/PRAWA */
.ratings-table td {
    border: 1px solid rgba(255, 255, 255, 0.6); /* Wyraźna biała ramka */
    padding: 5.5px 15px;
    vertical-align: middle;
}



/* Kolor dla gwiazdek */
.ratings-table td.stars {
    color: #e0cf8d; 
    letter-spacing: 2px;
    font-size: 16px;
}

/* Kolor dla "pustych" gwiazdek (szary/przezroczysty) */
.ratings-table td.stars span {
    color: rgba(255, 255, 255, 0.4);
}

/* Responsywność dla tabeli */
@media (max-width: 1024px) {
    .ratings-container {
        max-width: 100%;
        margin-top: 40px;
    }
}







/* ---     ——————————————————————————————————————————————————————————————————————————————     --- */
/* ---     S E K C J A   L I S T E N / B U Y     --- */


#listen {
    margin-top: 80px; 
}



.listen-wrapper {
    width: 100%;
    max-width: 1195px;
    margin-bottom: 20px; 
    text-align: left; /* Wymuszenie wyrównania do lewej */
}

.platform-intro p {
    font-size: 18px;
    color: #fff;
    margin: 35px 0 20px 0;
    letter-spacing: 1.5px;
}




/* KONTENER WIDEO - 2/3 szerokości, brak margin: auto */
.video-container {
    width: 66.6%; 
    margin: 0 0 70px 0; /* Margines tylko na dole */
    aspect-ratio: 16 / 9;

    border-radius: 12px;           /* Zaokrąglenie rogów */
    overflow: hidden;              /* Wymusza na wideo przycięcie się do rogów */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Cień */
    position: relative; 
}

.video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block; /* Usuwa zbędne białe znaki pod wideo */
}





/* SIATKA LOGOTYPÓW - SERWISY STREAMINGOWE - wyrównana do lewej */
.platforms-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 70px 170px; 
    max-width: 800px; /* Ograniczamy szerokość siatki, by nie uciekła za daleko w prawo */
    margin: 40px 0 0 0;   /* Brak auto, trzyma się lewej */
}

.platform-link {
    display: flex;
    justify-content: flex-start; /* Logo wewnątrz komórki do lewej */
    align-items: center;
}

.platform-link img {
    width: auto;
    height: 70px;     /* Stała wysokość sprawi, że logotypy będą równe w linii */
    transition: all 0.4s ease;
}

/* EFEKT: Powiększenie i zmiana na biały */
.platform-link:hover img {
    transform: scale(1.05) translateX(5px); /* Powiększenie + lekki ruch w prawo */
    filter: brightness(0) invert(1);
}

/* Mobile */
@media (max-width: 1024px) {
    .video-container { width: 100%; }
    .platforms-grid { grid-template-columns: repeat(2, 1fr); }
}








/* ---     ——————————————————————————————————————————————————————————————————————————————     --- */
/* ---      S E K C J A   I N T E R V I E W      --- */


#interview {
    margin-top: 80px; 
}



.interview-wrapper {
    width: 100%;
    max-width: 1195px;
    margin-top: 0px; 
    margin-bottom: 0px; 
    text-align: left;
}

/* KONTENER WIDEO - 2/3 szerokości, brak margin: auto */
#interview .video-container {
    width: 66.6%; 
    max-width: 796px;
    margin: 50px 0 0 0;   /* Odstęp między separatorem a wideo */
    aspect-ratio: 16 / 9;

    border-radius: 12px;           /* Zaokrąglenie rogów */
    overflow: hidden;              /* Wymusza na wideo przycięcie się do rogów */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Cień */
    position: relative; 
}

.video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block; /* Usuwa zbędne białe znaki pod wideo */
}


.video-credits {
    margin-top: 20px; /* Zwiększaj tę liczbę, aby napisy zjechały niżej od wideo */
}

.video-credits p {
    font-size: 16px;  
    color: #fff;   
    line-height: 1.3;
    margin: 5px 0 0 0; 
    letter-spacing: 1.5px;
}






/* ---     ——————————————————————————————————————————————————————————————————————————————     --- */
/* ---      S E K C J A   P R E S S      --- */


#press {
    margin-top: 90px; 
}



.press-wrapper {
    width: 100%;
    max-width: 1195px;
    text-align: left;
}




/* STYL DLA BIOGRAFII NA PEŁNĄ SZEROKOŚĆ */
.press-bio {
    width: 100%;
    margin-top: 30px;
    margin-bottom: 50px; /* Odstęp od kolumn poniżej */
}

.press-bio p {
    font-size: 18px;
    line-height: 1.3;
    color: #fff;
    letter-spacing: 1.5px;
}




/* UKŁAD DWUKOLUMNOWY - Tu m.in. zmieniasz proporcje (flex) */
.press-content {
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: 1.5px;
    display: flex;
    gap: 90px;
    margin-top: 40px;
    margin-bottom: 0 !important;
}

.press-left {
    flex: 1; /* ZMIEŃ NA 1 LUB 1.5 DLA INNYCH PROPORCJI */
}

.press-right {
    flex: 1; /* ZMIEŃ NA 1 DLA INNYCH PROPORCJI */
}

.press-content h3 {
    font-size: 14px;
    letter-spacing: 1.6px;
    margin-bottom: 10px; /* Zmniejszyłem margines, by separator był blisko napisu */
    color: #ccc;
}



/* SEPARATORY POD NAPISAMI TRIVIA / PHOTOS */
.sub-separator {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2); /* Szary kolor z opacity 0.3 */
    margin: 10px 0 25px 0; /* Odstęp od treści poniżej */
}




/* GŁOŚNICZEK DO 'POSŁUCHAJ' */
.listen-link {
    text-decoration: none;
    display: inline-flex; 
    align-items: center;  
    color: #ffffff; /* Tekst na start biały */
    transition: all 0.7s ease;

/* TO SĄ TWOJE KAPITAŁKI */
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
}

.trivia-speaker {
    margin-left: 5px;
    position: relative;
    top: 0px; 
    opacity: 1; /* Ikonka na start biała (tak jak tekst) */
    transition: all 0.7s ease;
    vertical-align: middle;
}

/* EFEKT HOVER: Całość płynnie szarzeje */
.listen-link:hover {
    color: rgba(255, 255, 255, 0.5); /* Tekst robi się szary */
}

.listen-link:hover .trivia-speaker {
    opacity: 0.5; /* Ikonka robi się szara w tym samym stopniu */
}

/* Ta reguła sprawi, że cały link nadrzędny zszarzeje na hoverze */
.full-info-link:hover {
    color: rgba(255, 255, 255, 0.5) !important;
}





/* Styl dla całego linku "Więcej informacji TUTAJ" */
.full-info-link {
    text-decoration: none;
    color: #ffffff; /* Bazowy kolor biały */
    transition: all 0.7s ease;
}

/* Gdy najeżdżasz na link, wszystko w środku (w tym .listen-link) dostaje dokładnie ten sam kolor szary */
.full-info-link:hover, 
.full-info-link:hover .listen-link {
    color: rgba(255, 255, 255, 0.5) !important;
}




/* G A L E R I A   Z D J Ę Ć */

/* GŁÓWNY KONTENER GALERII */
.promo-gallery {
    position: relative;
    width: 100%;
    height: 400px; /* Stała wysokość, żeby sekcja nie "znikła" */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: visible; /* Zmienione na visible, żeby nic nie ucinało 3D */
    margin-top: 20px;
}

.gallery-container {
    position: relative;
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
}

/* POJEDYNCZY ELEMENT */
.gallery-item {
    position: absolute;
    width: 320px; /* Rozmiar zdjęcia na środku */
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    z-index: 1;
    opacity: 0;
    pointer-events: none; /* Wyłączone klikanie dla niewidocznych */
}

/* ZDJĘCIE ŚRODKOWE (AKTYWNE) */
.gallery-item.active {
    opacity: 1;
    z-index: 10;
    transform: translateX(0) scale(1.3) translateZ(50px); /* Skala 1.3 powiększa zdjęcie */
    pointer-events: auto;
}

.gallery-item.active img {
    border: 1px solid #222; /* Kolor i grubość ramki */
    box-shadow: 0 30px 60px rgba(0,0,0,0.95), 0 0 20px rgba(255,255,255,0.05); /* Mocny, głęboki cień */
    filter: grayscale(0);
}

/* ZDJĘCIA BOCZNE - chowanie i przewijanie */
.gallery-item.prev, .gallery-item.next {
    opacity: 0.7;
    z-index: 5;
    pointer-events: auto;
}

.gallery-item.prev {
    transform: translateX(-150px) scale(0.80) rotateY(30deg); /* Większy kąt 45 stopni */
}

.gallery-item.next {
    transform: translateX(150px) scale(0.80) rotateY(-30deg); /* Większy kąt -45 stopni */
}

.gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    display: block;
    filter: grayscale(0.8);
    transition: 0.4s;
}

/* PODPIS */
.gallery-caption {
    margin-top: 5px;
    margin-bottom: 45px;
    font-size: 12px;
    color: #fff;
    font-style: normal;
    letter-spacing: 1.5px;
    text-align: center;
    opacity: 0.3;
    position: relative;
    z-index: 15; /* Żeby na pewno był nad efektami 3D */
}





/* --- L I G H T B O X  (POWIĘKSZENIE ZDJĘCIA) --- */

.lightbox {
    display: none; /* Domyślnie ukryte */
    position: fixed;
    z-index: 10000; /* Musi być wyżej niż wszystko inne na stronie */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95); /* Bardzo ciemne, niemal czarne tło */
    justify-content: center;
    align-items: center;
    cursor: zoom-out; /* Kursor sugerujący, że kliknięcie zamknie okno */
}

.lightbox img {
    max-width: 90%;
    max-height: 85%;
    border: none;
    box-shadow: 0 0 50px rgba(0, 0, 0, 1); /* Mocny cień pod zdjęciem */
    border-radius: 4px;
    animation: zoomIn 0.3s ease-out; /* Płynne pojawienie się zdjęcia */
}

/* Przycisk zamknięcia (X) */
.close-lightbox {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #fff;
    font-size: 50px;
    font-weight: 300;
    cursor: pointer;
    line-height: 1;
    transition: 0.3s;
}

.close-lightbox:hover {
    color: #ccc; /* Zmiana koloru X po najechaniu */
}

/* Animacja otwierania zdjęcia */
@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}





/* ---     ——————————————————————————————————————————————————————————————————————————————     --- */
/* ---      C O P Y R I G H T      --- */


.footer-sep {
    margin-top: 40px !important;
    margin-bottom: 10px; 
    opacity: 0.3; /* Trochę delikatniejszy niż główne separatory */
}

.copyright-text {
    text-align: right;
    font-size: 11px;
    color: #fff;
    letter-spacing: 1px;
    margin: 10px 0 10px 0;
    opacity: 0.2;
}

/* Dostosowanie do Mobile */
@media (max-width: 1024px) {
    .press-content {
        flex-direction: column; /* Na telefonie kolumny jedna pod drugą */
    }
}


/* ---     ——————————————————————————————————————————————————————————————————————————————     --- */
/* ---      DOWNLOAD FULL PRESS KIT      --- */

/* Kontener, który wyrówna nam przycisk do prawej */
.press-kit-container {
    text-align: right;
    margin-bottom: -14px;
    position: relative;
    top: 14px;
}

.download-press-kit {
    display: inline-block;
    color: rgba(255, 255, 255, 0.4);            
    text-decoration: none;  
    font-size: 13px;         
    font-weight: bold;
    letter-spacing: 1.8px;    
    transition: all 0.7s ease; /* Płynność animacji przy najechaniu */
    backface-visibility: hidden;
    will-change: transform, color;
}

.download-press-kit:hover {
    color: rgba(255, 255, 255, 0.7);            /* Zmiana na czystą biel */
    transform: scale(1.05); /* Delikatne powiększenie o 5% */
}

/* ---  IKONKA  --- */

.press-kit-icon {
    width: 14px;   
    height: 14px;
    margin-right: 5px;   /* Odstęp między ikonką a napisem */
    vertical-align: middle; 
    position: relative;
    top: -1px;           /* Delikatna korekta góra/dół, żeby ikona była w osi liter */
    opacity: 0.4;        /* Startowa przezroczystość ikony */
    transition: all 0.7s ease; /* Płynność taka sama jak dla tekstu */
    will-change: opacity;
}

/* Kiedy najeżdżasz na cały link, ikona też się rozjaśnia */
.download-press-kit:hover .press-kit-icon {
    opacity: 0.7 !important;
}





/* ---     ——————————————————————————————————————————————————————————————————————————————     --- */
/* ---      P R Z Y C I S K   " B A C K   T O   T H E   T O P "      --- */


.back-to-top-container {
    width: 100%;
    display: flex;
    justify-content: center; /* Wyśrodkowanie w poziomie */
    margin: 20px 0 0 0;
}

.back-to-top-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 80px; /* Dopasuj wielkość do swoich potrzeb */
    height: 80px;
    padding: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.7;
}

.back-to-top-btn:hover {
    transform: translateY(-5px); /* Lekki ruch do góry przy najechaniu */
    opacity: 1;
}

.back-to-top-btn video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}








/* ============================================================================================================
                                      7. STOPKA - CZCIONKA ALLER
   ============================================================================================================ */


.main-footer {
    background-color: #000000;
    padding: 10px 0;
    text-align: center;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
}

.footer-link {
    color: #ccc;
    text-decoration: none;
    font-family: 'Aller', sans-serif; /* Twoja druga czcionka */
    font-size: 9px;
    letter-spacing: 5px;
}

.footer-link:hover {
    color: #fff;
}






/* ============================================================================================================
                                      8. SYSTEM PRZEŁĄCZANIA JĘZYKÓW
   ============================================================================================================ */


           /* Domyślnie ukrywamy wszystkie treści oznaczone klasą językową */
.content-lang {
    display: none;
    animation: fadeEffect 1s;
}

           /* Ta klasa będzie dodawana przez JavaScript do wybranego języka */
.content-lang.active {
    display: block;
}

           /* Specjalna zasada dla tekstów wewnątrz linii (np. w trackliście), żeby po przełączeniu nie wskakiwały do nowej linii */
span.content-lang.active {
    display: inline;
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}








/* ============================================================================================================
                                      9. MINI PLAYER (TRACK PREVIEW)
   ============================================================================================================ */


/* Kontener dla całej linijki utworu - pozwala na zawijanie paska */
.audio-wrapper {
    position: relative;
    display: flex;
    flex-wrap: wrap; 
    align-items: center;
}

/* Ukryty kontener playera - pojawi się pod tytułem */
.player-container {
    display: none;
    width: 100%;
    max-width: 390px;
    margin-top: 10px;
    margin-bottom: 5px;
    margin-left: 31px; /* Wyrównanie paska do tekstu, omijając ikonkę */
}

/* Tło paska postępu */
.progress-bg {
    width: 100%;
    height: 22px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    border: 1.1px solid rgba(255, 255, 255, 0.2);
}

/* Pasek postępu w kolorze */
.progress-bar {
    width: 0%;
    height: 100%;
    background: #7c5f2b;
    transition: width 0.1s linear;
}

.player-container .content-lang {
    animation: fadeEffectPlayer 0.8s forwards;   /* Nadpisujemy animację tylko dla tekstów wewnątrz playera - 'forwards' sprawia, że zostaje na opacity 0.8 */
}

/* Napis na pasku (PREVIEW) */
.player-label {
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    font-size: 10px;
    color: white;
    text-transform: uppercase;
    pointer-events: none;
    font-family: 'Aller', sans-serif;
    letter-spacing: 1px;
}

/* ANIMACJA: Dedykowana dla player-label, kończąca się na 0.8 */
@keyframes fadeEffectPlayer {
    from { opacity: 0; }
    to { opacity: 0.8; }
}

/* Animacja pulsowania ikonki głośnika podczas grania */
@keyframes pulsowanie {
    0% { opacity: 1; }
    100% { opacity: 0.3; }
}

.ikona-pulsuje {
    animation: pulsowanie 1.2s ease-in-out infinite alternate;
}






/* ============================================================================================================
                                     10. RESPONSIVE DESIGN (MOBILE)
   ============================================================================================================ */

/* Gdy ekran jest mniejszy niż 1024px (tablety i telefony) */
@media (max-width: 1024px) {
    
    .content-container {
        flex-direction: column; /* Układ pionowy zamiast poziomego */
    }

    .side-menu {
        position: relative;    /* Menu przestaje być "przypięte" */
        width: 100%;           /* Zajmuje pełną szerokość */
        height: auto;          /* Wysokość dopasowuje się do treści */
        padding: 40px 20px;    /* Mniejszy padding na telefonie */
        align-items: center;   /* Wyśrodkowanie loga i linków */
        text-align: center;
    }

    .main-logo {
        margin-bottom: 30px;
        max-width: 140px;      /* Nieco mniejsze logo na telefonie */
    }

    .main-content {
        margin-left: 0;        /* Likwidujemy margines, bo menu już nie zasłania lewej strony */
        padding: 20px;         /* Mniejszy padding dla treści */
        width: 100%;
    }

    /* Układ albumu (okładka i dane) */
    .album-header {
        flex-direction: column; /* Okładka nad tekstem */
        align-items: center;
        gap: 30px;
        margin-top: 20px;
    }

    .album-cover {
        max-width: 100%;       /* Okładka dopasowuje się do ekranu */
    }

    /* Układ sekcji INFO i TRACKLISTA */
    .album-details-grid {
        flex-direction: column; /* Jedna kolumna pod drugą */
        gap: 40px;
    }

    .details-column {
        max-width: 100%;       /* Kolumny zajmują całą szerokość */
    }

    /* Poprawka dla playera na telefonie */
    .player-container {
        margin-left: 0;        /* Pasek postępu wyśrodkowany lub od lewej bez marginesu ikonki */
        max-width: 100%;
    }
    
    /* Linia REVIEWS/LISTEN też musi się dopasować */
    .reviews-wrapper {
        max-width: 100%;
    }

/* --- P o p r a w k a   d l a   w i d e o   o r a z   l o g o t y p ó w   n a   t e l e f o n y   i   t a b l e t y --- */
    
    .video-container, 
    #interview .video-container { 
        width: 100% !important;     /* Rozciąga wideo na całą szerokość ekranu telefonu */
        max-width: 100% !important; /* Usuwa blokadę 796px, żeby nie ucinało obrazu */
        margin-top: 20px;           /* Zmniejsza lukę nad wideo na małych ekranach */
    }

    /* Dopasowanie logotypów streamingowych na telefonie */
    .platforms-grid { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 30px !important; 
    }



/* Dodatkowa poprawka dla bardzo małych ekranów */
    @media (max-width: 550px) {
        .platforms-grid {
            gap: 25px 15px !important; /* Mniejszy odstęp między kolumnami */
            padding: 0 10px;            /* Lekki margines po bokach, żeby loga nie dotykały krawędzi */
        }

        .platform-link img {
            height: auto !important;
            /* Logo będzie miało szerokość 35% szerokości całego ekranu */
            width: 35vw !important;  
            max-width: 150px !important; /* Zwiększyłem limit, żeby nie były za małe na starcie */
            min-width: 80px !important;  /* Zabezpieczenie, żeby nie stały się mikroskopijne */
            object-fit: contain;
        }
        
        .platform-link {
            justify-content: center !important; /* Na małych ekranach lepiej wyśrodkować logo w komórce */
        }

                        #listen .video-container { 
                        margin-top: 35px !important; 
                        margin-bottom: 30px !important; 
                        }

                        #interview .video-container { 
                        margin-top: 35px !important; 
                        margin-bottom: 30px !important; 
                        }

                        #interview p { 
                        font-size: 14px !important;  /* Zmniejszamy font (standardowo pewnie masz 16px lub 18px) */
                        line-height: 1.4;            /* Odrobinę ciaśniejsza interlinia, żeby tekst był zwarty */
                        opacity: 0.9;                /* Opcjonalnie: lekko przygaszony kolor (szary), żeby nie odciągał uwagi od wideo */
                        }

    }


/* --- R e s p o n s y w n o ś ć   d l a   g a l e r i i   f o t o --- */

@media (max-width: 550px) {
    .gallery-item {
        width: 70%; /* Zdjęcie zajmie 70% szerokości ekranu */
    }

    /* Zmniejszamy rozstaw, żeby zdjęcia zmieściły się na wąskim ekranie */
    .gallery-item.prev {
        transform: translateX(-80px) scale(0.7) rotateY(30deg);
    }

    .gallery-item.next {
        transform: translateX(80px) scale(0.7) rotateY(-30deg);
    }
    
    /* Zmniejszamy skalę głównego zdjęcia na mobile, żeby nie uciekło z kontenera */
    .gallery-item.active {
        transform: translateX(0) scale(1.1) translateZ(50px);
    }
    
    .promo-gallery {
        height: 250px; /* Nieco niższa galeria na telefonie */
        margin-top: -5px;
    }
}



}