/* ==========================================================================
   CKM COMPONENT: 12-HERO v0.3.5 (RESTAURACJA GEOMETRII)
   PRO-Comment: Pełna specyfikacja wizualna. Zakaz upraszczania struktury.
   Układ: Zdjęcie 75% szerokości, Panele 58%/63%, 3 linie laserowe.
   ========================================================================== */

.ckm-dynamic-hero {
    position: relative;
    width: 100%;
    height: 380px;
    background-color: #040806; 
    overflow: hidden;
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

/* 1. KINOWY FILTR NA ZDJĘCIE (75% szerokości) */
.ckm-hero-cinematic-bg {
    position: absolute;
    top: 0; 
    right: 0; 
    left: auto; 
    width: 75%; 
    height: 100%;
    z-index: 1;
    filter: grayscale(100%) contrast(140%) brightness(0.4);
    opacity: 0.75; 
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%);
    mask-image: linear-gradient(to right, transparent 0%, black 20%);
    background-repeat: no-repeat;
    /* background-size i background-position są wstrzykiwane przez PHP (v3.9) */
}

.ckm-hero-fallback {
    background: linear-gradient(135deg, #1a2520 0%, #0a110d 100%);
}

/* 2. BAZOWA KLASA DLA SKOSÓW */
.ckm-hero-skew {
    position: absolute;
    top: -10%; 
    height: 120%;
    transform: skewX(-20deg); 
}

/* 3. MULTI-LINIE PO PRAWEJ (Geometria Laserowa) */
.ckm-stripe-right-1 {
    right: 15%; 
    width: 25%;
    background: linear-gradient(90deg, rgba(0,168,89,0) 0%, rgba(0,168,89,0.15) 100%);
    z-index: 2;
}
.ckm-stripe-right-2 {
    right: 5%; 
    width: 10%;
    background: rgba(255,255,255,0.02); 
    z-index: 2;
}
.ckm-stripe-right-3 {
    right: 25%; 
    width: 2px; 
    background: rgba(0,168,89,0.4);
    z-index: 2;
    box-shadow: 0 0 10px rgba(0,168,89,0.5); 
}

/* 4. LEWY GŁÓWNY PANEL (Dark 58%) */
.ckm-panel-dark {
    left: -10%; 
    width: 58%; 
    background: linear-gradient(90deg, #040806 0%, #0a110d 100%);
    border-right: 5px solid #00a859; 
    z-index: 4;
    box-shadow: 15px 0 30px rgba(0,0,0,0.8); 
}

/* 5. GHOST PANEL (Szkło 63%) */
.ckm-panel-ghost {
    left: -10%;
    width: 63%; 
    background: rgba(10,17,13,0.3);
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px);
    border-right: 1px solid rgba(255,255,255,0.08); 
    z-index: 3;
}

/* 6. ZNAK WODNY (Globalny Herb w tle) */
.ckm-hero-global-watermark {
    position: absolute;
    top: -15%;
    right: -2%; 
    height: 130%;
    opacity: 0.04; 
    pointer-events: none; 
    filter: grayscale(100%) contrast(150%); 
    transform: rotate(10deg);
    z-index: 3;
}

/* 7. KONTENER TREŚCI */
.ckm-hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 8. TYPOGRAFIA (Sportowy Styl CKM) */
.ckm-hero-title {
    color: #ffffff;
    font-size: 42px; 
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0;
    text-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.ckm-hero-breadcrumbs {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

/* Naprawa kolorów linków w okruszkach */
.ckm-hero-breadcrumbs a {
    color: #9aa5a0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.ckm-hero-breadcrumbs a:hover {
    color: #ffffff;
}

.ckm-hero-breadcrumbs .sep {
    margin: 0 8px;
    color: #55625c;
    font-weight: 400;
}

.ckm-hero-breadcrumbs .current-section {
    color: #00a859; /* Laserowa zieleń na końcu ścieżki */
}

/* ==========================================================================
   MOBILE (RWD) - Gwarancja czytelności na smartfonach
   ========================================================================== */
@media (max-width: 768px) {
    .ckm-dynamic-hero {
        height: 300px;
    }
    .ckm-panel-dark {
        width: 85%; /* Na mobile panel zajmuje niemal całość */
    }
    .ckm-panel-ghost {
        width: 90%;
    }
    .ckm-stripe-right-1, .ckm-stripe-right-2 {
        display: none; /* Ukrywamy szerokie pasy dla przejrzystości */
    }
    .ckm-stripe-right-3 {
        right: 12%; /* Zostawiamy laserową linię jako akcent */
    }
    .ckm-hero-title {
        font-size: 28px;
        max-width: 85%;
        line-height: 1.2;
    }
    .ckm-hero-global-watermark {
        display: none; /* Herb na mobile często zasłania tekst */
    }
}