/* =============================================================================
   Slider Scroll Trigger for Elementor – v1.3.1
   DEFINITYWNY FIX stackingu: container = transparent, wszystkie slajdy
   ustawiane na position:absolute przez JS → żadne tło kontenera nie prześwieca.
   ============================================================================= */

.sst-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Kontener: background TRANSPARENT.
   Slajd[0] zawsze pokrywa 100% kontenera (ustawiany przez JS na absolute).
   Nikt nie widzi tła kontenera podczas animacji clip-path. */
.sst-slides-container {
    position: relative;
    width: 100%;
    height: 100vh; /* fallback przed inicjalizacją JS */
    overflow: hidden;
    background-color: transparent; /* ← KLUCZOWA ZMIANA vs poprzednie wersje */
}

/* Wszystkie slajdy: position:absolute ustawiane przez JS.
   CSS zachowuje absolute jako domyślne dla n>0 slajdów.
   JS nadpisuje position:absolute również dla slajdu[0]. */
.sst-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* z-index i position ustawiane sekwencyjnie przez JS:
       slide[0] → z:1, slide[1] → z:2, slide[2] → z:3 ...
       Gwarantuje że slide[N-1] zawsze widoczny pod clip-path slide[N]. */
}

/* CSS dla edytora Elementora (JS nie działa w trybie edycji) */
.sst-slide:first-child {
    position: relative; /* Edytor: definiuje wysokość kontenera */
}

/* ---- Tło ---- */
.sst-slide-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.sst-slide.is-active .sst-slide-bg-image,
.sst-slide.is-active .sst-slide-bg-color {
    animation: sst-ken-burns 9s ease-out forwards;
}
@keyframes sst-ken-burns {
    from { transform: scale(1); }
    to   { transform: scale(1.05); }
}

.sst-slide-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ---- Wideo ---- */
.sst-slide-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
.sst-bg-video {
    position: absolute;
    top: 50%; left: 50%;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    pointer-events: none;
}

/* =============================================================================
   Treść – absolute positioning + CSS Custom Props dla X/Y per slajd
   ============================================================================= */
.sst-slide-content {
    position: absolute;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 650px;
    padding: 60px;
    --sst-offset-x: 0px;
    --sst-offset-y: 0px;
}

.sst-content-bottom-left  .sst-slide-content { bottom:0; left:0;  top:auto;  right:auto; transform: translate(var(--sst-offset-x), var(--sst-offset-y)); }
.sst-content-bottom-right .sst-slide-content { bottom:0; right:0; top:auto;  left:auto;  transform: translate(var(--sst-offset-x), var(--sst-offset-y)); }
.sst-content-top-left     .sst-slide-content { top:0;    left:0;  bottom:auto; right:auto; transform: translate(var(--sst-offset-x), var(--sst-offset-y)); }
.sst-content-top-right    .sst-slide-content { top:0;    right:0; bottom:auto; left:auto;  transform: translate(var(--sst-offset-x), var(--sst-offset-y)); }
.sst-content-center       .sst-slide-content {
    top:50%; left:50%; bottom:auto; right:auto;
    align-items:center; text-align:center;
    transform: translate(calc(-50% + var(--sst-offset-x)), calc(-50% + var(--sst-offset-y)));
}

/* ---- Typografia ---- */
.sst-slide-tag {
    display: inline-block;
    font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(255,255,255,0.65);
}
.sst-slide-title {
    font-size: clamp(2rem, 5vw, 4.5rem);
    font-weight: 700; line-height: 1.1;
    color: #fff; margin: 0 0 16px;
}
.sst-slide-description {
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    line-height: 1.7;
    color: rgba(255,255,255,0.8);
    margin: 0 0 28px;
    max-width: 520px;
}
.sst-slide-description p { margin: 0 0 0.8em; }
.sst-slide-description p:last-child { margin-bottom: 0; }
.sst-content-center .sst-slide-description { max-width: 100%; }

/* ---- Przycisk ---- */
.sst-slide-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 32px;
    border: 1px solid rgba(255,255,255,0.5);
    background-color: transparent; color: #fff;
    font-size: 0.9rem; font-weight: 500; letter-spacing: 0.05em;
    text-decoration: none; cursor: pointer; align-self: flex-start;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, gap 0.3s ease;
}
.sst-content-center .sst-slide-btn { align-self: center; }
.sst-slide-btn:hover { gap: 16px; }
.sst-btn-arrow { display: inline-block; transition: transform 0.3s ease; }
.sst-slide-btn:hover .sst-btn-arrow { transform: translateX(4px); }

/* ---- Dekoracja ---- */
.sst-slide-index {
    position: absolute; right:40px; bottom:50px;
    font-size: clamp(4rem,10vw,9rem); font-weight:900; line-height:1;
    color: rgba(255,255,255,0.06);
    pointer-events:none; user-select:none; z-index:2;
}

/* ---- Licznik – 4 pozycje ---- */
.sst-counter {
    position: absolute; z-index:20;
    display:flex; align-items:center; gap:4px;
    pointer-events:none;
    color: rgba(255,255,255,0.7);
    font-size:0.85rem; font-weight:500; letter-spacing:0.1em;
}
.sst-counter-bottom-right { bottom:40px; right:48px; }
.sst-counter-bottom-left  { bottom:40px; left:48px;  }
.sst-counter-top-right    { top:32px;    right:48px; }
.sst-counter-top-left     { top:32px;    left:48px;  }
.sst-counter-current { font-size:1.5rem; font-weight:700; color:#fff; line-height:1; }

/* ---- Progress bar ---- */
.sst-progress-bar { position:absolute; z-index:30; background-color:rgba(255,255,255,0.2); overflow:hidden; }
.sst-progress-bottom { bottom:0; left:0; right:0; width:100%; height:3px; }
.sst-progress-top    { top:0;    left:0; right:0; width:100%; height:3px; }
.sst-progress-left   { top:0; bottom:0; left:0;  width:3px; height:100%; }
.sst-progress-right  { top:0; bottom:0; right:0; width:3px; height:100%; }
.sst-progress-fill { background-color:#fff; will-change:transform; }
.sst-progress-bottom .sst-progress-fill,
.sst-progress-top    .sst-progress-fill { height:100%; width:100%; transform:scaleX(0); transform-origin:left center; }
.sst-progress-left   .sst-progress-fill,
.sst-progress-right  .sst-progress-fill { width:100%; height:100%; transform:scaleY(0); transform-origin:top center; }

/* ---- Kropki ---- */
.sst-dots {
    position:absolute; right:28px; top:50%; transform:translateY(-50%);
    z-index:30; display:flex; flex-direction:column; gap:12px;
}
.sst-dot {
    width:8px; height:8px; border-radius:50%;
    background-color:rgba(255,255,255,0.35);
    border:none; cursor:pointer; padding:0;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.sst-dot.is-active, .sst-dot:hover { background-color:#fff; transform:scale(1.4); }

/* will-change dla animowanych elementów tekstu */
.sst-slide-tag, .sst-slide-title, .sst-slide-description, .sst-slide-btn {
    will-change: transform, opacity;
}

/* =============================================================================
   Edytor Elementora – statyczny podgląd (JS nie działa)
   ============================================================================= */
.elementor-editor-active .sst-slide {
    clip-path: none !important;
    position: relative !important;
    height: auto !important;
    min-height: 60vh;
    z-index: auto !important;
}
.elementor-editor-active .sst-slides-container {
    display: flex; flex-direction: column; height: auto;
}
.elementor-editor-active .sst-slide:not(:first-child) {
    opacity: 0.6;
    border-top: 1px dashed rgba(255,255,255,0.2);
}
.elementor-editor-active .sst-slide-bg { min-height: 60vh; }
.elementor-editor-active .sst-slide-content {
    position: relative !important;
    top:auto !important; left:auto !important;
    bottom:auto !important; right:auto !important;
    transform: none !important;
    max-width: 100%; opacity: 1 !important;
}

/* =============================================================================
   Responsywność
   ============================================================================= */
@media (max-width: 768px) {
    .sst-slide-content { padding: 32px 24px; max-width: 100%; }
    .sst-counter-bottom-right, .sst-counter-bottom-left { bottom: 20px; }
    .sst-counter-bottom-right { right: 24px; }
    .sst-counter-bottom-left  { left: 24px;  }
    .sst-dots { right: 12px; }
    .sst-slide-index { right: 16px; bottom: 16px; }
}
@media (max-width: 480px) {
    .sst-slide-content { padding: 20px 16px; gap: 8px; }
    .sst-slide-title { font-size: clamp(1.5rem, 7vw, 2.5rem); }
    .sst-bg-video { display: none; }
}