/* ============================
   HERO SLIDER – SprzedajInstrument
   ============================ */

.si-hero-slider-wrapper {
    width: 100%;
    max-width: 95vw;
    margin-inline: auto;
    overflow: hidden;
}

.si-hero-slider-inner {
    position: relative;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

/* Okno, w którym widać slajdy */
.si-hero-viewport {
    width: 100%;
    overflow: hidden;
    position: relative;
    --hero-edge-fade: clamp(52px, 12vw, 180px);
    --hero-edge-fade-mid: clamp(32px, 8vw, 120px);
    --hero-edge-fade-light: clamp(18px, 5vw, 72px);
    -webkit-mask-image: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0.2) var(--hero-edge-fade-light),
        rgba(0, 0, 0, 0.6) var(--hero-edge-fade-mid),
        rgba(0, 0, 0, 1) var(--hero-edge-fade),
        rgba(0, 0, 0, 1) calc(100% - var(--hero-edge-fade)),
        rgba(0, 0, 0, 0.6) calc(100% - var(--hero-edge-fade-mid)),
        rgba(0, 0, 0, 0.2) calc(100% - var(--hero-edge-fade-light)),
        rgba(0, 0, 0, 0) 100%
    );
    mask-image: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0.2) var(--hero-edge-fade-light),
        rgba(0, 0, 0, 0.6) var(--hero-edge-fade-mid),
        rgba(0, 0, 0, 1) var(--hero-edge-fade),
        rgba(0, 0, 0, 1) calc(100% - var(--hero-edge-fade)),
        rgba(0, 0, 0, 0.6) calc(100% - var(--hero-edge-fade-mid)),
        rgba(0, 0, 0, 0.2) calc(100% - var(--hero-edge-fade-light)),
        rgba(0, 0, 0, 0) 100%
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* Pasek ze slajdami – przesuwamy go w JS */
.si-hero-track {
    display: flex;
    align-items: center;
    transition: transform 0.6s ease;
    will-change: transform;
}

/* Pojedynczy slajd – szerokość ustawiamy z JS */
.si-hero-slide {
    flex: 0 0 auto;
    display: block;
}

/* Obrazek – pełna szerokość slajdu */
.si-hero-slide img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}

/* Strzałki – po bokach środkowego slajdu */
.si-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: #A83F20;
    color: #ffffff;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    z-index: 5;
}

.si-hero-arrow-prev {
    left: 16px;
}

.si-hero-arrow-next {
    right: 16px;
}

.si-hero-arrow:hover {
    background: rgba(17, 24, 39, 0.95);
    transform: translateY(-50%) translateY(-1px);
}

.si-hero-arrow:focus {
    outline: none;
}

/* Kropeczki */
.si-hero-dots {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.si-hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: none;
    background: #d1d5db;
    cursor: pointer;
    padding: 0;
    position: relative;
    overflow: hidden;
    transition: width 0.2s ease, background 0.2s ease;
}

.si-hero-dot-active {
    width: 22px;
    background: #374151;
}

/* progress fill – przesuwa się od lewej do prawej w ciągu 5 s */
.si-hero-dot-active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #A83F1F;
    border-radius: 999px;
    transform-origin: left center;
    transform: scaleX(0);
    animation: dotProgress 5s linear forwards;
}

@keyframes dotProgress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* pauza po najechaniu na slider */
.si-hero-slider-wrapper:hover .si-hero-dot-active::after {
    animation-play-state: paused;
}

/* ============================
   RESPONSYWNOŚĆ
   ============================ */

@media (max-width: 991.98px) {
    .si-hero-arrow-prev {
        left: 10px;
    }
    .si-hero-arrow-next {
        right: 10px;
    }
}

/* Mobile – pełny slajd, bez podglądu sąsiadów */
@media (max-width: 575.98px) {
    .si-hero-slider-inner {
        padding: 0 12px;
    }

    .si-hero-slide img {
        border-radius: 14px;
    }

    .si-hero-viewport {
        -webkit-mask-image: none;
        mask-image: none;
    }
}