/* --- DGK HERO ENGINE STYLES v2.0 --- */

body, html {
    margin: 0;
    padding: 0;
}

/* 1. KONTENER GŁÓWNY - FIXOWANY NA SZTYWNO */
.dgk-hero-swiper {
    position: fixed !important; 
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* Ustawiamy 0, żeby nie wpadło pod spód, ale pamiętaj o przezroczystości sekcji Elementora! */
    z-index: 0; 
    background: #050505; /* Czarny fallback */
    overflow: hidden;
}

/* 2. SLAJD */
.dgk-hero-swiper .swiper-slide {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
    position: relative;
    visibility: hidden; 
}

.dgk-hero-swiper .swiper-slide-active {
    visibility: visible;
}

/* 3. OBRAZEK TŁA (KEN BURNS) */
.dgk-bg-wrap {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1; 
}

.dgk-bg-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center center;
    transform: scale(1);
    transition: transform 8s ease-out; 
}

/* ZOOM aktywny */
.swiper-slide-active .dgk-bg-img {
    transform: scale(1.15);
}

/* 4. OVERLAY (Winieta) */
.dgk-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Zwiększyłem lekko gradient z lewej, żeby tekst był czytelniejszy */
    background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.2) 100%);
    z-index: 2; 
    pointer-events: none;
}

/* 5. TREŚĆ (Teksty) - WERSJA PRECYZYJNA */
.dgk-content {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10; 
    display: flex;
    align-items: center; 
    
    /* --- FIX PRECYZYJNY --- */
    /* 8% to standardowy margines w nowoczesnym webdesignie. */
    /* Jest bezpieczny i wygląda elegancko. */
    padding-left: 8% !important;   
    
    pointer-events: none;
}

/* Na bardzo dużych monitorach (Full HD+) damy ciut więcej */
@media (min-width: 1400px) {
    .dgk-content {
        padding-left: 12% !important; 
    }
}

/* Dodatkowa blokada szerokości tekstu, żeby nie był za długi */
.dgk-text-box {
    max-width: 650px; /* Zwężamy blok tekstu, żeby był bardziej "zbity" */
    color: #fff;
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-out 0.5s; 
}
.swiper-slide-active .dgk-text-box {
    opacity: 1;
    transform: translateY(0);
}

/* Typografia F1 */
.dgk-subtitle {
    font-family: 'Saira', sans-serif; 
    font-size: 14px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #ff3333; /* DIGIKROM RED */
    font-weight: 700;
    margin-bottom: 15px;
}

.dgk-title {
    font-family: 'Saira', sans-serif;
    /* Lekko mniejszy font na start, żeby nie krzyczał */
    font-size: 64px; 
    line-height: 1.0;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 25px;
    color: #fff;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.dgk-desc {
    font-family: 'Saira', sans-serif;
    font-size: 18px;
    color: rgba(255,255,255,0.8);
    font-weight: 300;
    max-width: 600px;
    border-left: 3px solid #ff3333;
    padding-left: 20px;
    line-height: 1.6;
}

/* 6. PAGINACJA */
.dgk-pagination {
    bottom: 40px !important;
    z-index: 20 !important;
}
.dgk-pagination .swiper-pagination-bullet {
    width: 40px; height: 3px; background: rgba(255,255,255,0.3);
    border-radius: 0; opacity: 1; margin: 0 5px;
    transition: all 0.3s;
}
.dgk-pagination .swiper-pagination-bullet-active {
    background: #ff3333; width: 60px;
}

/* MOBILE FIX */
@media (max-width: 768px) {
    .dgk-content { 
        /* Resetujemy padding boczny na mobile */
        padding: 0 20px; 
        justify-content: center; 
        text-align: center; 
    }
    .dgk-text-box {
        max-width: 100%;
    }
    .dgk-title { 
        font-size: 36px; 
    }
    .dgk-desc { 
        border-left: none; 
        border-top: 3px solid #ff3333; 
        padding-top: 15px; 
        padding-left: 0; 
        margin: 0 auto; 
    }
    /* Mniejszy gradient na mobile */
    .dgk-overlay {
        background: rgba(0,0,0,0.6);
    }
}

/* --- NAWIGACJA (STRZAŁKI) --- */
.dgk-arrow {
    color: rgba(255, 255, 255, 0.3) !important; /* Domyślnie subtelne, prawie niewidoczne */
    transition: all 0.3s ease !important;
    width: 60px !important; /* Większy obszar kliknięcia */
    height: 60px !important;
}

/* Ikony strzałek (z fontu Swipera) */
.dgk-arrow::after {
    font-size: 24px !important; /* Małe i eleganckie */
    font-weight: bold;
}

/* HOVER - DIGIKROM RED */
.dgk-arrow:hover {
    color: #ff3333 !important; /* Czerwony */
    transform: scale(1.1); /* Lekkie powiększenie */
    text-shadow: 0 0 10px rgba(255, 51, 51, 0.6); /* Efekt neonu */
}

/* Pozycjonowanie */
.swiper-button-prev.dgk-arrow {
    left: 40px !important;
}

.swiper-button-next.dgk-arrow {
    right: 40px !important;
}

/* Ukrywamy strzałki na telefonach (bo tam się smyra palcem) */
@media (max-width: 768px) {
    .dgk-arrow {
        display: none !important;
    }
}

/* --- RESPONSIVE PICTURE FIX --- */
.dgk-bg-wrap picture {
    width: 100%;
    height: 100%;
    display: block;
}