/* =========================================================
   ZT Slider – styl dopasowany do zaloz-firme.pl
   Białe tło, szerokość .hero-inner
   ========================================================= */

#zt-slider-wrap {
    width: 100%;
    background: #fff;
    padding: 0;
    margin: 0 0 8px 0;
}

/* Kontener ograniczony do szerokości .hero-inner */
#zt-slider-wrap .zt-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #fff;
    border-radius: 0;
    box-shadow: none;
}

/* Track – wszystkie slajdy jeden pod drugim, pokazujemy przez opacity */
.zt-track {
    position: relative;
    width: 100%;
    height: 420px;
}

@media (max-width: 768px) {
    .zt-track { height: 240px; }
}

@media (max-width: 480px) {
    .zt-track { height: 200px; }
}

/* Pojedynczy slajd */
.zt-slide {
    position: absolute;
    inset: 0;
    background-color: #f3f4f6;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.65s ease;
    pointer-events: none;
}

.zt-slide.zt-active {
    opacity: 1;
    pointer-events: auto;
}

/* Gradient overlay na dole – dla czytelności tytułu */
.zt-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0)       30%,
        rgba(0,0,0,0.55)    75%,
        rgba(0,0,0,0.78)   100%
    );
}

/* Treść (tytuł) */
.zt-slide-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 28px 28px;
    z-index: 2;
}

.zt-slide-title {
    display: block;
    font-family: inherit;          /* dopasowanie do motywu */
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.35;
    color: #fff !important;
    text-decoration: none !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.45);
    transition: color 0.2s;
}

.zt-slide-title:hover {
    color: #f0c040 !important;
    text-decoration: underline !important;
}

@media (max-width: 600px) {
    .zt-slide-title { font-size: 1.05rem; }
    .zt-slide-content { padding: 14px 16px 18px; }
}

/* ── Nawigacja strzałki ── */
.zt-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255,255,255,0.85);
    border: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 26px;
    line-height: 1;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    transition: background 0.2s, transform 0.2s;
    padding: 0;
}

.zt-nav:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.08);
}

.zt-prev { left: 12px; }
.zt-next { right: 12px; }

@media (max-width: 480px) {
    .zt-nav { width: 32px; height: 32px; font-size: 20px; }
    .zt-prev { left: 6px; }
    .zt-next { right: 6px; }
}

/* ── Kropki ── */
.zt-dots {
    position: absolute;
    bottom: 10px;
    right: 16px;
    z-index: 10;
    display: flex;
    gap: 6px;
}

.zt-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.35);
    cursor: pointer;
    padding: 0;
    transition: background 0.25s, border-color 0.25s;
}

.zt-dot.zt-dot-active,
.zt-dot:hover {
    background: #fff;
    border-color: #fff;
}