.hero-scroll {
    /* 1. Standardowe zachowanie (pojawia się tylko gdy trzeba) */
    overflow-y: auto; 
    
    /* 2. Standard W3C (Firefox) - nie przyjmuje px! */
    scrollbar-width: thin; 
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent; 
}

/* 3. Webkit (Chrome, Edge, Safari, Opera) */
.hero-scroll::-webkit-scrollbar { 
    width: 5px; 
}

.hero-scroll::-webkit-scrollbar-track { 
    background: transparent; 
}

.hero-scroll::-webkit-scrollbar-thumb { 
    background: rgba(255, 255, 255, 0.1); 
    border-radius: 5px; 
}

/* Trik UX: Lekkie rozjaśnienie paska, gdy użytkownik na niego najedzie */
.hero-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}


.BtnPlayStopNext {
    font-size: 18px; font-weight: 900; color: rgba(255, 255, 255, 0.5);
}

.BtnPlayStopNext:hover {
    color: rgba(255, 255, 255, 0.8);
    transform: scale(1.02);
}

.MiniIconLink{
  opacity: 0.7; 
  width:40px; 
  height:40px; 
  margin:5px;
  padding: 0px; 
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 6px;
     
}
.MiniIconLink:active,
.MiniIconLink:focus,
.MiniIconLink:hover{
  opacity: 1; 
  border: 1px solid;
  border-color: #3078ff ;

  box-shadow: 0px 0px 8px 0px #3078ff; 
}


/* GŁÓWNY KONTENER */
.hero-section {
    position: relative;
    width: 100%;
    height: 70vh; /* Zajmuje 70% wysokości ekranu */
    min-height: 500px;
    overflow: hidden; /* Przycina tło, które będzie się powiększać */
    background-color: #000;
    padding-top: 50px;
}

/* WARSTWY TŁA (Animacja Ken Burns i Przejścia) */
  /* Główne ustawienia tła (bez zmian) */
.hero-bg {
    position: absolute;
    top: -5%; left: -5%;
    width: 110%; height: 110%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    filter: blur(15px);
    transition: opacity 2s ease-in-out, filter 2s ease-in-out;
}

/* MAGIA TUTAJ: Obie te klasy utrzymują płynny ruch! */
.hero-bg.active, 
.hero-bg.fading {
    animation: kenBurns 30s linear forwards; 
}

/* Kiedy jest aktywny - staje się widoczny */
.hero-bg.active {
    opacity: 1;
    filter: blur(1px);
}

/* Kiedy dostanie klasę fading - opacity znika (dzięki transition trwającym 2s), ale animacja działa dalej! */
.hero-bg.fading {
    opacity: 0;
    filter: blur(15px);
}

@keyframes kenBurns {
    0% { transform: scale(1) translate(0, 0); }
    25% { transform: scale(1.1) translate(3%, -5%); } 
    50% { transform: scale(1.2) translate(-5%, -3%); } 
    75% { transform: scale(1.3) translate(6%, 6%); }
    100% { transform: scale(1) translate(0, 0); } 
}

/* ----------------------------------------------------- */
/* NOWA KLASA ZAMRAŻAJĄCA ANIMACJĘ DLA HERO BANNERA      */
/* ----------------------------------------------------- */
.hero-bg.paused {
    animation-play-state: paused !important;
}

/* CIENIUJĄCA WINIETA (Wtapiacz) */
.hero-vignette {
    position: absolute;
    inset: 0;
    /* Rozmyty czarny gradient na krawędziach i od dołu */
    background: radial-gradient(circle, rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%),
                linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 30%);
    pointer-events: none; /* Żeby nie blokowało klikania w przyciski */
}

/* UKŁAD KAFELKÓW (Flexbox) */
.hero-content {
    position: absolute;
    top: 80px;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0%;
    max-width: 1600px;
    margin: 0 auto;
    transition: opacity 0.6s ease-in-out;
}

/* Odwracanie układu dla co drugiego slajdu (naprzemiennie) */
.hero-content.layout-reversed {
    flex-direction: row-reverse;
}

/* SZKLANE KAFELKI (Glassmorphism) */
.glass-tile {
    background: rgba(20, 20, 20, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 30px;
    color: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.main-tile {
    width: 55%; /* Główny zajmuje więcej miejsca */
}

.promo-tile {
    width: 35%; /* Promocyjny jest mniejszy */
    background: rgba(30, 40, 60, 0.4); /* Lekko inny odcień dla partnerów */
}

/* Przyciski w kafelkach */
.btn-play {
    display: inline-block;
    background: #e50914; /* Akcent */
    color: #fff;
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 20px;
    transition: transform 0.2s;
}
.btn-play:hover { transform: scale(1.05); }


.tile-title {
    font-size: 40px;
    font-weight: 900;
}






/* --- WARIANT 1: Siatka 3 małych kafelków --- */
.promo-grid { display: flex; gap: 10px; margin-top: 15px; }
.promo-grid-item { position: relative; flex: 1; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); transition: transform 0.3s ease, border-color 0.3s ease; text-decoration: none; color: #fff; display: block; }
.promo-grid-item:hover { transform: scale(1.05); border-color: rgba(255,255,255,0.4); z-index: 2; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.promo-grid-bg { width: 100%; height: 100%; background-size: cover; background-position: center; }
.promo-grid-overlay { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: linear-gradient(transparent, rgba(0,0,0,0.9)); 
    padding: 8px; 
    font-size: 11px; 
    font-weight: bold; 
    text-align: center; 
    
    /* Zabezpieczenie przed wychodzeniem tekstu z obrazka */
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}


/* --- WARIANT 2: Pionowa lista (Top 3) --- */
.promo-list { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
.promo-list-item { display: flex; align-items: center; gap: 15px; padding: 10px; background: rgba(0,0,0,0.3); border: 1px solid transparent; border-radius: 8px; transition: background 0.3s, border-color 0.3s; text-decoration: none; color: #fff; }
.promo-list-item:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.2); }
.promo-list-img { 
    width: 50px; 
    height: 50px; /* Idealny kwadrat */
    flex-shrink: 0; /* Zabezpieczenie flexboxa: zabrania ściskania obrazka przy długim tekście */
    border-radius: 6px; /* Lekkie zaokrąglenie pasujące do szkła */
    background-size: contain; /* Zmiana z 'cover' na 'contain' - logo stacji nie zostanie ucięte, jeśli ma nietypowe marginesy */
    background-position: center; 
    background-repeat: no-repeat;
    background-color: rgba(0,0,0,0.5); /* Tło pod logo, jeśli jest przezroczystym PNG */
    border: 1px solid rgba(255,255,255,0.1); 
}
/* Kontener na teksty obok ikonki */
.promo-list-text { 
    flex: 1; 
    /* MAGIA FLEXBOXA: To wymusza na kontenerze kurczenie się, 
       nawet jeśli tekst wewnątrz jest od niego szerszy! */
    min-width: 0; 
}
/* Główny tytuł */
.promo-list-title { 
    font-size: 14px; 
    font-weight: bold; 
    margin: 0 0 3px 0; 
    
    /* Zablokowanie łamania i dodanie 3 kropek */
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
/* Podtytuł/Opis */
.promo-list-sub { 
    font-size: 11px; 
    color: #aaa; 
    margin: 0; 
    
    /* Robimy to samo dla opisu, bo on też może być za długi */
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
.promo-list-icon { font-size: 14px; color: #3087ff; /* Użyłem Twojego niebieskiego z wcześniejszych paneli! */ opacity: 0.7; transition: opacity 0.3s, transform 0.3s; }
.promo-list-item:hover .promo-list-icon { opacity: 1; transform: translateX(3px); }

/* --- WARIANT 3: Główny "Feature" nadawcy --- */
.promo-feature { margin-top: 15px; text-decoration: none; display: block; color: #fff; transition: transform 0.3s; }
.promo-feature:hover { transform: translateY(-5px); }
.promo-feature-img { width: 100%; aspect-ratio: 21/9; border-radius: 8px; background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,0.1); margin-bottom: 12px; position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.promo-feature-badge { position: absolute; top: 10px; left: 10px; background: #e50914; color: #fff; font-size: 10px; font-weight: bold; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 2px 5px rgba(0,0,0,0.5); }
.promo-feature-title { font-size: 16px; font-weight: bold; margin: 0 0 5px 0; }
.promo-feature-desc { font-size: 13px; color: #bbb; line-height: 1.4; }




@media (max-width: 1400px) {
  .promo-grid {
        flex-direction: column;
        gap: 12px; /* Dałem ciut więcej oddechu w pionie */
        align-items: center;
    }

    /* === TO JEST NASZA NAPRAWA ZGNIECIONYCH KAFELKÓW === */
    .promo-grid-item {
        flex: none; /* Wyłączamy wymuszanie wysokości przez flexbox */
        width: 60%; /* Każdy kafelek zajmuje całą szerokość kolumny */
    }




/* ========================================= */
/* --- RESPONSYWNOŚĆ: Poniżej 1024px --- */
/* ========================================= */
@media (max-width: 1024px) {
    
    .hero-content {
        padding: 0 0%; 
    }

    .main-tile {
        width: 58%; 
    }
    
    .promo-tile {
        width: 39%; 
    }

    .glass-tile {
        padding: 20px; 
    }

    .promo-list {
        gap: 6px; 
    }
    
    
}



/* ========================================= */
/* --- RESPONSYWNOŚĆ: Poniżej 720px --- */
/* ========================================= */
@media (max-width: 720px) {
    
    /* 1. Uwalniamy wysokość głównego tła, żeby objęło kolumnę */
    .hero-section {
        height: auto;
        min-height: 100vh; /* Na komórkach niech zajmuje cały ekran */
    }

    /* 2. Złamanie w kolumnę (nadpisuje klasę layout-reversed z JavaScriptu!) */
    .hero-content, 
    .hero-content.layout-reversed {
        flex-direction: column;
        justify-content: center;
        gap: 15px; /* Odstęp w pionie między Hit a Promo */
      /*  padding-top: 100px;  Marginesy od góry i dołu 
        padding-bottom: 60px;
        margin-top: 60px;          */
    }

    /* 3. Główne szkła zajmują całą szerokość */
    .main-tile, 
    .promo-tile {
        width: 100%;
    }

    /* 4. Powrót 3 małych zdjęć do rzędu poziomego */
    .promo-grid {
        flex-direction: row; 
    }
    
    .promo-grid-item {
        flex: 1; /* Znów dzielą się miejscem po równo */
      /*  width: auto;  Zdejmujemy 100% wymuszone przy 1024px */
        width: 80%;
    }
}

/* ========================================= */
/* --- RESPONSYWNOŚĆ: Poniżej 560px --- */
/* ========================================= */
@media (max-width: 560px) {
    
    /* 1. Ekstremalne zmniejszenie marginesów bocznych (odzyskanie miejsca) */
    .hero-content, 
    .hero-content.layout-reversed {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* 2. Zmniejszenie odstępów wewnątrz samego szkła */
    .glass-tile {
        padding: 15px; 
    }
    
    /* 3. Drobna korekta czcionek na bardzo małe ekrany */
    .tile-title {
        font-size: 1.5rem; /* Żeby długie tytuły nie były gigantyczne na smartfonie */
    }
    /* 4. Powrót 3 małych zdjęć do rzędu poziomego */
    .promo-grid {
        flex-direction: row; 
    }
    
    .promo-grid-item {
        flex: 1; /* Znów dzielą się miejscem po równo */
        width: auto; /* Zdejmujemy 100% wymuszone przy 1024px */
    }
}