@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900&display=swap');

body, html {
    margin: 0;
    padding: 0;
    height: 100%; 
    font-family: 'Poppins', Optima, Arial, sans-serif;  /* Najpierw Poppins, potem Optima, na końcu Arial */
    background-color: #003aad; /* Niebieski na całe tło */
    color: white;

    display: flex;
    flex-direction: column;
}

section, footer, header {
    width: 100%;
}


/* Górny napis SAVE THE DATE */
.save-the-date {
    width: 100%;
    display: flex;
    justify-content: center; 
    position: absolute;             /* Obrazek będzie NA zdjęciach */
    top: 0;
    left: 0;
    z-index: 100;                   /* Najwyższa warstwa, żeby nic go nie przykryło */
    background-color: transparent;  /* Żeby nie było widać żadnego tła pod obrazkiem */
    pointer-events: none;           /* Cały pasek ignoruje myszkę */
}

.header-img {
    max-width: 480px;               /* Ustaw taką szerokość, jaka Ci pasuje */
    height: auto;                   /* Zachowuje proporcje grafiki */
    display: block;
    pointer-events: auto; 
    user-select: none;              /* Blokuje zaznaczanie (niebieską poświatę) */
    -webkit-user-drag: none;        /* Blokuje fizyczne przeciąganie obrazka myszką */
}






/* Sekcja z DJ-ami - RÓWNOLEGŁE SKOSY I RÓWNE POLA */
.hero-section {
    display: flex;
    position: relative;
    height: 600px;
    overflow: hidden;
    background-color: #000;
    width: 100%;
}

.artist-block {
    flex: 1; /* Każdy zajmuje dokładnie 1/4 szerokości */
    height: 100%;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    margin-right: -100px; /* Stały margines w pikselach zamiast % - to klucz do równych skosów */
}

/* Sztywny z-index */
.artist-block.first  { z-index: 10; }
.artist-block.middle:nth-of-type(2) { z-index: 8; }
.artist-block.middle:nth-of-type(3) { z-index: 6; }
.artist-block.last   { z-index: 4; margin-right: 0; }

.artist-block:hover .artist-img {
    filter: contrast(200%) brightness(110%);
}

.artist-img {
    /* Blokujemy jakiekolwiek sztuczne powiększanie */
    width: 100%;
    height: 100%;
   
    /* Kluczowa zmiana: 'contain' pokaże CAŁE zdjęcie wewnątrz, 
       ale 'cover' z odpowiednim pozycjonowaniem będzie lepsze, 
       pod warunkiem, że szerokość nie będzie przekraczać 100-110% */
    object-fit: cover;
    object-position: center 5%; /* Trzyma twarz na górze */

    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    display: block;
    filter: contrast(100%) brightness(100%);
    transition: filter 0.4s ease;
    pointer-events: none;
}

/* SKOSY - Używamy calc() żeby zachować identyczny kąt niezależnie od szerokości ekranu */
.artist-block.first {
    clip-path: polygon(0 0, 100% 0, calc(100% - 100px) 100%, 0% 100%);
}

.artist-block.middle {
    clip-path: polygon(100px 0, 100% 0, calc(100% - 100px) 100%, 0% 100%);
}

.artist-block.last {
    clip-path: polygon(100px 0, 100% 0, 100% 100%, 0% 100%);
}





/* -------- CZARNA BELKA:  LICZNIK + KONTURY MIAST -------- */
.counter-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 20;
    display: flex;
    flex-direction: column; /* Miasto pod licznikiem, ale wewnątrz kontenera */
    align-items: center;
    pointer-events: none;
    user-select: none;
}

.city-outline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 110%;
    height: 110px; /* Stała wysokość konturów */
    background-image: url('kontury.png');
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: contain;
    z-index: 5; /* POD licznikiem (10 > 5) */
}

#countdown {
    display: flex;  
    flex-direction: row; 
    align-items: center;
    gap: 20px;
    background-color: #000;
    padding: 15px 40px;
    pointer-events: auto;
    position: relative;
    z-index: 10; /* Licznik NAD miastem */
}

.time-unit {
    display: flex;
    flex-direction: column; /* Liczba nad tekstem */
    align-items: center;
    min-width: 90px;
}

.number {
    font-size: 4rem; /* Bardzo duże liczby */
    font-weight: 900; /* Gruby Bold */
    line-height: 1;
    color: #fff;
    font-family: Arial, sans-serif !important;
}

.label {
    font-size: 0.9rem;
    color: #fff;
    margin-top: 7px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.dots {
    font-size: 3rem;
    color: #003aad; /* Niebieski kolor kropek z Twojego projektu */
    font-weight: bold;
    line-height: 1;
    margin-bottom: 25px; /* Podniesienie kropek do środka liczb */
}

/* Domyślnie ukrywamy licznik mobilny na desktopie */
.mobile-counter {
    display: none !important;
}



/* -------- PŁYWAJĄCY TEKST Z GATUNKAMI -------- */
/* Kontener paska - bez zmian */
.ticker-wrap {
    width: 100%;
    overflow: hidden;
    padding: 1px 0;
    box-sizing: border-box;
    margin-top: -4px;
    user-select: none; 
}

/* Kontener na poruszający się tekst */
.ticker {
    display: flex;
    white-space: nowrap;
    width: max-content;
    animation: marquee-fix 30s linear infinite; /* Czas dostosuj do własnych preferencji */
}

/* Styl samego tekstu - bez zmian */
.ticker span {
    font-weight: bold;
    font-size: 12px;
    color: #000000;
    letter-spacing: 3px;
    word-spacing: 9px;
    padding-right: 0; /* Zerujemy prawy padding, żeby bloki idealnie się łączyły */
}

/* NOWA ANIMACJA: Przesuwamy tylko o 25% (szerokość jednego z czterech bloków) */
@keyframes marquee-fix {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-25%, 0, 0);
    }
}






/* -------- NIEBIESKA STOPKA -------- */
.info-footer {
    background-color: #003aad; /* Dokładnie Twój kolor hex */
    min-height: 200px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0; 
    position: relative;
}



/* Zerowanie marginesów dla tekstu w stopce */
.info-text p {
    margin: 0;
}

.info-text {
    width: 40%;
    font-size: 0.95rem;
    letter-spacing: 0.1px;
    line-height: 1.55;
    padding: 25px 200px 10px 100px;    /* góra prawa dół lewa */
}

.info-text a {
    color: #fff;
    font-weight: 500 !important;  
    text-decoration: underline;
    font-weight: bold;
    transition: all 0.2s ease;
}

.info-text a:hover {
    color: #de1411; /* Zmieni kolor na czerwony po najechaniu */
}

.footer-graphics {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 30px;
}

.headphones {
    height: 175px;
    padding: 30px 0px 0px 100px;    /* góra prawa dół lewa */
    opacity: 1;
    pointer-events: none;           /* Cały pasek ignoruje myszkę */
    user-select: none;              /* Blokuje zaznaczanie (niebieską poświatę) */
    -webkit-user-drag: none;        /* Blokuje fizyczne przeciąganie obrazka myszką */
}

.event-svg {
    height: 175px;
    padding: 0;                        /* padding: 20px 70px 10px 0px;    góra prawa dół lewa */
    pointer-events: none;           /* Cały pasek ignoruje myszkę */
    user-select: none;              /* Blokuje zaznaczanie (niebieską poświatę) */
    -webkit-user-drag: none;        /* Blokuje fizyczne przeciąganie obrazka myszką */
}

/* Ukrywamy dolny blok na komputerach */
.mobile-details {
    display: none !important;
}



/* Kontener pomocniczy, żeby tekst i ikony były w jednej kolumnie */
.details-wrapper {
    display: flex;
    flex-direction: column; /* To wymusza pionowy układ */
    align-items: flex-start; /* Wyrównanie do lewej strony tekstu na obrazku */
    padding: 27px 70px 10px 0px; /* góra prawo dół lewo */
    gap: 15px; /* Odstęp między obrazkiem a ikonami */
}

.social-icons {
    display: flex;
    flex-direction: row; /* Ikony obok siebie */
    gap: 25px;
    padding-left: 25px; 
}

.social-icons img {
    height: 23px; /* Ustawienie wielkości ikonek */
    width: auto;
    transition: transform 0.2s ease;
}

.social-icons img:hover {
    transform: scale(1.2);       /* Efekt powiększenia po najechaniu */
    transition: all 0.2s ease;
}



/* Domyślnie ukrywamy mobilny nagłówek na desktopie */
.mobile-header {
    display: none !important;
}




/* ==========================================================================
   DODATKOWY BEZPIECZNIK DLA ŚREDNICH EKRANÓW (Laptopy 1024px - 1300px)
   ========================================================================== */
@media (max-width: 1640px) {
.info-text {
    width: 40%;
    font-size: 0.9rem;
    letter-spacing: 0.1px;
    line-height: 1.55;
    padding: 25px 170px 10px 60px;    /* góra prawa dół lewa */
}

.headphones {
    height: 160px;
    padding: 30px 0px 0px 100px;    /* góra prawa dół lewa */
    opacity: 1;
    pointer-events: none;           /* Cały pasek ignoruje myszkę */
    user-select: none;              /* Blokuje zaznaczanie (niebieską poświatę) */
    -webkit-user-drag: none;        /* Blokuje fizyczne przeciąganie obrazka myszką */
}

    .event-svg {
    height: 160px;
    padding: 0;                        /* padding: 20px 70px 10px 0px;    góra prawa dół lewa */
    pointer-events: none;           /* Cały pasek ignoruje myszkę */
    user-select: none;              /* Blokuje zaznaczanie (niebieską poświatę) */
    -webkit-user-drag: none;        /* Blokuje fizyczne przeciąganie obrazka myszką */
    }
}


@media (max-width: 1560px) {
.info-text {
    width: 40%;
    font-size: 0.85rem;
    letter-spacing: 0.1px;
    line-height: 1.55;
    padding: 25px 170px 10px 50px;    /* góra prawa dół lewa */
}

.headphones {
    height: 150px;
    padding: 30px 0px 0px 100px;    /* góra prawa dół lewa */
    opacity: 1;
    pointer-events: none;           /* Cały pasek ignoruje myszkę */
    user-select: none;              /* Blokuje zaznaczanie (niebieską poświatę) */
    -webkit-user-drag: none;        /* Blokuje fizyczne przeciąganie obrazka myszką */
}

.details-wrapper {
    display: flex;
    flex-direction: column; /* To wymusza pionowy układ */
    align-items: flex-start; /* Wyrównanie do lewej strony tekstu na obrazku */
    padding: 27px 50px 10px 0px; /* góra prawo dół lewo */
    gap: 15px; /* Odstęp między obrazkiem a ikonami */
}

    .event-svg {
    height: 150px;
    padding: 0;                     /* padding: 20px 70px 10px 0px;    góra prawa dół lewa */
    pointer-events: none;           /* Cały pasek ignoruje myszkę */
    user-select: none;              /* Blokuje zaznaczanie (niebieską poświatę) */
    -webkit-user-drag: none;        /* Blokuje fizyczne przeciąganie obrazka myszką */
    }
}

@media (max-width: 1500px) {
.info-text {
    width: 40%;
    font-size: 0.8rem;
    letter-spacing: 0.1px;
    line-height: 1.55;
    padding: 25px 160px 10px 50px;    /* góra prawa dół lewa */
}

.headphones {
    height: 140px;
    padding: 30px 0px 0px 100px;    /* góra prawa dół lewa */
    opacity: 1;
    pointer-events: none;           /* Cały pasek ignoruje myszkę */
    user-select: none;              /* Blokuje zaznaczanie (niebieską poświatę) */
    -webkit-user-drag: none;        /* Blokuje fizyczne przeciąganie obrazka myszką */
}

.details-wrapper {
    display: flex;
    flex-direction: column; /* To wymusza pionowy układ */
    align-items: flex-start; /* Wyrównanie do lewej strony tekstu na obrazku */
    padding: 27px 40px 10px 0px; /* góra prawo dół lewo */
    gap: 15px; /* Odstęp między obrazkiem a ikonami */
}

    .event-svg {
    height: 140px;
    padding: 0;                     /* padding: 20px 70px 10px 0px;    góra prawa dół lewa */
    pointer-events: none;           /* Cały pasek ignoruje myszkę */
    user-select: none;              /* Blokuje zaznaczanie (niebieską poświatę) */
    -webkit-user-drag: none;        /* Blokuje fizyczne przeciąganie obrazka myszką */
    }
}

@media (max-width: 1410px) {
.info-text {
    width: 40%;
    font-size: 0.75rem;
    letter-spacing: 0.1px;
    line-height: 1.55;
    padding: 25px 160px 10px 50px;    /* góra prawa dół lewa */
}

.headphones {
    height: 140px;
    padding: 30px 0px 0px 100px;    /* góra prawa dół lewa */
    opacity: 1;
    pointer-events: none;           /* Cały pasek ignoruje myszkę */
    user-select: none;              /* Blokuje zaznaczanie (niebieską poświatę) */
    -webkit-user-drag: none;        /* Blokuje fizyczne przeciąganie obrazka myszką */
}

.details-wrapper {
    display: flex;
    flex-direction: column; /* To wymusza pionowy układ */
    align-items: flex-start; /* Wyrównanie do lewej strony tekstu na obrazku */
    padding: 27px 40px 10px 0px; /* góra prawo dół lewo */
    gap: 15px; /* Odstęp między obrazkiem a ikonami */
}

    .event-svg {
    height: 140px;
    padding: 0;                     /* padding: 20px 70px 10px 0px;    góra prawa dół lewa */
    pointer-events: none;           /* Cały pasek ignoruje myszkę */
    user-select: none;              /* Blokuje zaznaczanie (niebieską poświatę) */
    -webkit-user-drag: none;        /* Blokuje fizyczne przeciąganie obrazka myszką */
    }
}

@media (max-width: 1300px) {
.info-text {
    width: 40%;
    font-size: 0.72rem;
    letter-spacing: 0.1px;
    line-height: 1.55;
    padding: 25px 160px 10px 50px;    /* góra prawa dół lewa */
}

.headphones {
    height: 130px;
    padding: 30px 0px 0px 100px;    /* góra prawa dół lewa */
    opacity: 1;
    pointer-events: none;           /* Cały pasek ignoruje myszkę */
    user-select: none;              /* Blokuje zaznaczanie (niebieską poświatę) */
    -webkit-user-drag: none;        /* Blokuje fizyczne przeciąganie obrazka myszką */
}

.details-wrapper {
    display: flex;
    flex-direction: column; /* To wymusza pionowy układ */
    align-items: flex-start; /* Wyrównanie do lewej strony tekstu na obrazku */
    padding: 27px 30px 10px 0px; /* góra prawo dół lewo */
    gap: 15px; /* Odstęp między obrazkiem a ikonami */
}

    .event-svg {
    height: 130px;
    padding: 0;                     /* padding: 20px 70px 10px 0px;    góra prawa dół lewa */
    pointer-events: none;           /* Cały pasek ignoruje myszkę */
    user-select: none;              /* Blokuje zaznaczanie (niebieską poświatę) */
    -webkit-user-drag: none;        /* Blokuje fizyczne przeciąganie obrazka myszką */
    }
}


@media (max-width: 1210px) {
.info-text {
    width: 40%;
    font-size: 0.67rem;
    letter-spacing: 0.1px;
    line-height: 1.55;
    padding: 25px 100px 10px 50px;    /* góra prawa dół lewa */
}

.headphones {
    height: 120px;
    padding: 30px 0px 0px 100px;    /* góra prawa dół lewa */
    opacity: 1;
    pointer-events: none;           /* Cały pasek ignoruje myszkę */
    user-select: none;              /* Blokuje zaznaczanie (niebieską poświatę) */
    -webkit-user-drag: none;        /* Blokuje fizyczne przeciąganie obrazka myszką */
}

.details-wrapper {
    display: flex;
    flex-direction: column; /* To wymusza pionowy układ */
    align-items: flex-start; /* Wyrównanie do lewej strony tekstu na obrazku */
    padding: 27px 30px 10px 0px; /* góra prawo dół lewo */
    gap: 15px; /* Odstęp między obrazkiem a ikonami */
}

    .event-svg {
    height: 120px;
    padding: 0;                     /* padding: 20px 70px 10px 0px;    góra prawa dół lewa */
    pointer-events: none;           /* Cały pasek ignoruje myszkę */
    user-select: none;              /* Blokuje zaznaczanie (niebieską poświatę) */
    -webkit-user-drag: none;        /* Blokuje fizyczne przeciąganie obrazka myszką */
    }
}


@media (max-width: 1110px) {
.info-text {
    width: 40%;
    font-size: 0.67rem;
    letter-spacing: 0.1px;
    line-height: 1.55;
    padding: 25px 100px 10px 50px;    /* góra prawa dół lewa */
}

.headphones {
    height: 110px;
    padding: 30px 0px 0px 100px;    /* góra prawa dół lewa */
    opacity: 1;
    pointer-events: none;           /* Cały pasek ignoruje myszkę */
    user-select: none;              /* Blokuje zaznaczanie (niebieską poświatę) */
    -webkit-user-drag: none;        /* Blokuje fizyczne przeciąganie obrazka myszką */
}

.details-wrapper {
    display: flex;
    flex-direction: column; /* To wymusza pionowy układ */
    align-items: flex-start; /* Wyrównanie do lewej strony tekstu na obrazku */
    padding: 27px 30px 10px 0px; /* góra prawo dół lewo */
    gap: 15px; /* Odstęp między obrazkiem a ikonami */
}

    .event-svg {
    height: 110px;
    padding: 0;                     /* padding: 20px 70px 10px 0px;    góra prawa dół lewa */
    pointer-events: none;           /* Cały pasek ignoruje myszkę */
    user-select: none;              /* Blokuje zaznaczanie (niebieską poświatę) */
    -webkit-user-drag: none;        /* Blokuje fizyczne przeciąganie obrazka myszką */
    }
}


@media (max-width: 1055px) {
.info-text {
    width: 40%;
    font-size: 0.66rem;
    letter-spacing: 0.1px;
    line-height: 1.55;
    padding: 25px 120px 10px 30px;    /* góra prawa dół lewa */
}

.headphones {
    height: 100px;
    padding: 30px 0px 0px 100px;    /* góra prawa dół lewa */
    opacity: 1;
    pointer-events: none;           /* Cały pasek ignoruje myszkę */
    user-select: none;              /* Blokuje zaznaczanie (niebieską poświatę) */
    -webkit-user-drag: none;        /* Blokuje fizyczne przeciąganie obrazka myszką */
}

.details-wrapper {
    display: flex;
    flex-direction: column; /* To wymusza pionowy układ */
    align-items: flex-start; /* Wyrównanie do lewej strony tekstu na obrazku */
    padding: 27px 30px 10px 0px; /* góra prawo dół lewo */
    gap: 15px; /* Odstęp między obrazkiem a ikonami */
}

    .event-svg {
    height: 100px;
    padding: 0;                     /* padding: 20px 70px 10px 0px;    góra prawa dół lewa */
    pointer-events: none;           /* Cały pasek ignoruje myszkę */
    user-select: none;              /* Blokuje zaznaczanie (niebieską poświatę) */
    -webkit-user-drag: none;        /* Blokuje fizyczne przeciąganie obrazka myszką */
    }
}

@media (max-width: 925px) {
.info-text {
    width: 40%;
    font-size: 0.65rem;
    letter-spacing: 0.1px;
    line-height: 1.55;
    padding: 25px 130px 10px 20px;    /* góra prawa dół lewa */
}

.headphones {
    height: 100px;
    padding: 30px 0px 0px 100px;    /* góra prawa dół lewa */
    opacity: 1;
    pointer-events: none;           /* Cały pasek ignoruje myszkę */
    user-select: none;              /* Blokuje zaznaczanie (niebieską poświatę) */
    -webkit-user-drag: none;        /* Blokuje fizyczne przeciąganie obrazka myszką */
}

.details-wrapper {
    display: flex;
    flex-direction: column; /* To wymusza pionowy układ */
    align-items: flex-start; /* Wyrównanie do lewej strony tekstu na obrazku */
    padding: 27px 30px 10px 0px; /* góra prawo dół lewo */
    gap: 15px; /* Odstęp między obrazkiem a ikonami */
}

    .event-svg {
    height: 100px;
    padding: 0;                     /* padding: 20px 70px 10px 0px;    góra prawa dół lewa */
    pointer-events: none;           /* Cały pasek ignoruje myszkę */
    user-select: none;              /* Blokuje zaznaczanie (niebieską poświatę) */
    -webkit-user-drag: none;        /* Blokuje fizyczne przeciąganie obrazka myszką */
    }
}

@media (max-width: 825px) {
.info-text {
    width: 40%;
    font-size: 0.65rem;
    letter-spacing: 0.1px;
    line-height: 1.55;
    padding: 25px 70px 10px 20px;    /* góra prawa dół lewa */
}

.headphones {
    height: 80px;
    padding: 30px 0px 0px 100px;    /* góra prawa dół lewa */
    opacity: 1;
    pointer-events: none;           /* Cały pasek ignoruje myszkę */
    user-select: none;              /* Blokuje zaznaczanie (niebieską poświatę) */
    -webkit-user-drag: none;        /* Blokuje fizyczne przeciąganie obrazka myszką */
}

.details-wrapper {
    display: flex;
    flex-direction: column; /* To wymusza pionowy układ */
    align-items: flex-start; /* Wyrównanie do lewej strony tekstu na obrazku */
    padding: 27px 15px 10px 0px; /* góra prawo dół lewo */
    gap: 15px; /* Odstęp między obrazkiem a ikonami */
}

    .event-svg {
    height: 80px;
    padding: 0;                     /* padding: 20px 70px 10px 0px;    góra prawa dół lewa */
    pointer-events: none;           /* Cały pasek ignoruje myszkę */
    user-select: none;              /* Blokuje zaznaczanie (niebieską poświatę) */
    -webkit-user-drag: none;        /* Blokuje fizyczne przeciąganie obrazka myszką */
    }
}



/* ==========================================================================
   STYLE RESPONSYWNE DLA SMARTFONÓW (Ekran do 768px szerokości)
   ========================================================================== */
@media (max-width: 768px) {
    
    body {
        height: auto; 
        display: flex;
        flex-direction: column; 
    }

    /* 1. UKRYWANIE I POKAZYWANIE ELEMENTÓW */
    .desktop-header { display: none !important; }
    .mobile-header { display: block !important; }
    .hide-mobile { display: none !important; } /* Ukrywa stary licznik i słuchawki */

    /* 2. BIAŁA BELKA NA GÓRZE */
    .save-the-date {
        position: relative; 
        background-color: #ffffff; 
        padding: 10px 0;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        pointer-events: auto;
        
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .save-the-date a {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
    }

    .header-img {
        max-width: 90%; 
    }

    /* 3. IDEALNA KOLEJNOŚĆ WERSJI MOBILNEJ DLA CAŁEJ STRONY */
    .save-the-date     { order: 1; } /* 1. Biały nagłówek */
    .info-footer       { order: 2; } /* 2. Tekst zaproszenia */
    .mobile-counter    { order: 3; } /* 3. NOWY LICZNIK MOBILNY (W JEDNEJ LINII NAD DJ-AMI) */
    .hero-section      { order: 4; } /* 4. Zdjęcia DJ-ów */
    .mobile-details    { order: 5; } /* 5. Niebieska grafika z socialami */
    .ticker-wrap       { order: 6; } /* 6. Pasek z gatunkami na samym dole */

    /* 4. DOSTOSOWANIE SEKCJI STOPKI */
    .info-footer {
        display: flex;
        flex-direction: column; 
        align-items: center;
        min-height: auto;
        padding: 20px 20px;
        box-sizing: border-box;
    }

    .info-text {
        width: 100%; 
        padding: 10px 15px; 
        box-sizing: border-box;
        word-wrap: break-word;
    }

    .mobile-details {
        display: flex !important; 
        background-color: #003aad; 
        width: 100%;
        box-sizing: border-box;
        flex-direction: column; 
        align-items: center; 
        padding: 20px 0 30px 0; 
        gap: 20px;
    }

    /* 5. GRAFIKA EVENT-DETAILS NA SAMYM DOLE */
    .event-svg {
        width: 100%;
        height: auto; 
        max-width: 400px;
        display: block;
        margin: 0 auto;
        border: none; /* Zabezpieczenie przed ramką linku */
    }

    .social-icons {
        padding-left: 0; 
        gap: 35px; 
        justify-content: center; 
        width: 100%;
    }

    /* 6. UKŁAD DJ-ów 2x2 */
    .hero-section {
        display: grid;
        grid-template-columns: 1fr 1fr; 
        grid-template-rows: 1fr 1fr;    
        height: auto;
        min-height: 500px;
        background-color: #000;
    }

    .artist-block {
        width: 100%;
        height: 250px; 
        margin-right: 0 !important; 
        clip-path: none !important; 
    }

    .artist-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        position: relative;
        left: 0;
        transform: none;
    }

    /* 7. STYLIZACJA NOWEGO LICZNIKA MOBILNEGO – SZTYWNA JEDNA LINIA */
    .mobile-counter {
        display: flex !important; /* Pokazujemy licznik na mobile */
        position: relative;
        background-color: #000;
        padding: 5px 5px 5px 5px; 
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }

    #countdown-mobile {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px; 
        padding: 5px;
        flex-wrap: nowrap !important; /* Totalny zakaz łamania linii */
        width: 100%;
    }

    .mobile-counter .time-unit {
        min-width: 55px; 
        text-align: center;
    }

    .mobile-counter .number {
        font-size: 2.2rem; /* Bezpieczny rozmiar dopasowany do ekranu telefonu */
        font-weight: 900;
        line-height: 1;
        color: #fff;
        font-family: Arial, sans-serif !important;
    }

    .mobile-counter .label {
        font-size: 0.75rem;
        color: #fff;
        margin-top: 4px;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .mobile-counter .dots {
        font-size: 1.8rem;
        color: #003aad;
        font-weight: bold;
        line-height: 1;
        margin-bottom: 18px; 
    }
}