/**
 * Stolmar Slider v3
 */

/* ── Variables ─────────────────────────────────────────── */
.stslider {
    --stsl-primary:      #6ab04c;
    --stsl-primary-dark: #5a9940;
    --stsl-transition:   0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Shell ─────────────────────────────────────────────── */
.stslider {
    position: relative;
    width: 100%;
    height: var(--stsl-height, 580px);
    overflow: hidden;
    background: #1a1a1a;
    user-select: none;
    -webkit-user-select: none;
}

/* ── Track ─────────────────────────────────────────────── */
.stslider__track { position: relative; width: 100%; height: 100%; }

/* ── Slides ────────────────────────────────────────────── */
.stslider__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--stsl-transition), visibility var(--stsl-transition);
    color: var(--stsl-text-color, #ffffff);
}
.stslider__slide--active  { opacity: 1; visibility: visible; z-index: 1; }
.stslider__slide--leaving { opacity: 0; visibility: visible; z-index: 0; }

/* ── BG image ──────────────────────────────────────────── */
.stslider__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 8s ease;
    transform: scale(1.04);
}
.stslider__slide--active .stslider__img { transform: scale(1.00); }

/* Image link wrapper */
a.stslider__img-link {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 1;
}
a.stslider__img-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 8s ease;
    transform: scale(1.04);
    position: absolute;
    inset: 0;
}
.stslider__slide--active a.stslider__img-link img { transform: scale(1); }

/* ── Overlay ───────────────────────────────────────────── */
.stslider__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,var(--stsl-overlay,0.45));
    pointer-events: none;
    z-index: 2;
}

/* ── Content ───────────────────────────────────────────── */
.stslider__content {
    position: absolute;
    z-index: 3;
    padding: clamp(24px,5vw,72px);
    max-width: min(680px,90%);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.stslider__content--left   { text-align:left;   align-items:flex-start; }
.stslider__content--center { text-align:center; align-items:center; }
.stslider__content--right  { text-align:right;  align-items:flex-end; }

.stslider__content--center       { top:50%; left:50%; transform:translate(-50%,-50%); }
.stslider__content--center-left  { top:50%; left:0;   transform:translateY(-50%); }
.stslider__content--center-right { top:50%; right:0;  transform:translateY(-50%); left:auto; }
.stslider__content--top-left     { top:10%; left:0; }
.stslider__content--top-center   { top:10%; left:50%; transform:translateX(-50%); }
.stslider__content--bottom-left  { bottom:15%; left:0; top:auto; }
.stslider__content--bottom-center{ bottom:15%; left:50%; transform:translateX(-50%); top:auto; }

/* Entrance animation */
.stslider__slide--active .stslider__badge,
.stslider__slide--active .stslider__title,
.stslider__slide--active .stslider__subtitle,
.stslider__slide--active .stslider__btns {
    animation: stsl-fadein 0.7s ease both;
}
.stslider__slide--active .stslider__title    { animation-delay:.10s; }
.stslider__slide--active .stslider__subtitle { animation-delay:.20s; }
.stslider__slide--active .stslider__btns     { animation-delay:.30s; }
@keyframes stsl-fadein { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }

/* ── Badge ─────────────────────────────────────────────── */
.stslider__badge {
    display: inline-block;
    background: var(--stsl-badge-bg, var(--stsl-primary));
    color: var(--stsl-badge-color, #fff);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 100px;
    line-height: 1;
}

/* ── Title ─────────────────────────────────────────────── */
.stslider__title {
    margin: 0;
    font-size: clamp(26px,4.5vw,62px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--stsl-title-color, inherit);
    text-shadow: 0 2px 20px rgba(0,0,0,.3);
}
.stslider__title span { color: var(--stsl-primary); }

/* ── Subtitle ──────────────────────────────────────────── */
.stslider__subtitle {
    margin: 0;
    font-size: clamp(14px,1.6vw,20px);
    font-weight: 400;
    line-height: 1.55;
    color: var(--stsl-subtitle-color, inherit);
    opacity: .90;
    max-width: 520px;
    text-shadow: 0 1px 8px rgba(0,0,0,.25);
}

/* ── Buttons ───────────────────────────────────────────── */
.stslider__btns { display:flex; flex-wrap:wrap; gap:12px; margin-top:4px; }
.stslider__btn {
    display: inline-flex;
    align-items: center;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: background .2s, color .2s, border-color .2s, transform .15s;
    min-height: 48px;
    white-space: nowrap;
}
.stslider__btn:active { transform:scale(.97); }
.stslider__btn:focus-visible { outline:3px solid var(--stsl-primary); outline-offset:3px; }

.stslider__btn--primary {
    background: var(--stsl-btn1-bg, var(--stsl-primary));
    color:      var(--stsl-btn1-color, #fff);
    border-color: var(--stsl-btn1-bg, var(--stsl-primary));
}
.stslider__btn--primary:hover {
    background: var(--stsl-btn1-hover, var(--stsl-primary-dark));
    border-color: var(--stsl-btn1-hover, var(--stsl-primary-dark));
    color: var(--stsl-btn1-color, #fff);
}

.stslider__btn--outline {
    background: rgba(255,255,255,.12);
    color: var(--stsl-btn2-color, #fff);
    border-color: var(--stsl-btn2-border, rgba(255,255,255,.6));
    backdrop-filter: blur(4px);
}
.stslider__btn--outline:hover {
    background: rgba(255,255,255,.22);
    border-color: #fff;
    color: var(--stsl-btn2-color, #fff);
}

/* ── Arrows ────────────────────────────────────────────── */
.stslider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 52px; height: 52px;
    border: none; border-radius: 50%;
    background: rgba(255,255,255,.15);
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, transform .2s;
    backdrop-filter: blur(6px);
}
.stslider__arrow:hover { background:rgba(255,255,255,.30); transform:translateY(-50%) scale(1.08); }
.stslider__arrow:focus-visible { outline:3px solid var(--stsl-primary); outline-offset:3px; }
.stslider__arrow--prev { left:20px; }
.stslider__arrow--next { right:20px; }

/* ── Indicators ────────────────────────────────────────── */
.stsl-indicators {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 10px;
    align-items: center;
}

.stsl-ind {
    position: relative;
    border: none;
    background: rgba(0,0,0,.40);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255,255,255,.55);
    padding: 10px 22px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    min-width: 110px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s, color .25s;
    overflow: visible;
}
.stsl-ind:hover {
    background: rgba(0,0,0,.55);
    color: rgba(255,255,255,.80);
}
.stsl-ind--active {
    background: rgba(0,0,0,.55);
    color: #fff;
}
.stsl-ind:focus-visible { outline:3px solid var(--stsl-primary); outline-offset:3px; }

/* SVG border */
.stsl-ind__svg {
    position: absolute;
    inset: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    pointer-events: none;
    overflow: visible;
}

/* Static border — always visible, dim on inactive */
.stsl-ind__rect-bg {
    fill: none;
    stroke: rgba(255,255,255,.15);
    stroke-width: 1.5;
}
.stsl-ind--active .stsl-ind__rect-bg {
    stroke: rgba(255,255,255,.25);
}

/* Animated progress border */
.stsl-ind__rect-progress {
    fill: none;
    stroke: var(--stsl-primary, #6ab04c);
    stroke-width: 2.5;
    /* butt = no rounded cap → no dot artifact at 0 length */
    stroke-linecap: butt;
    stroke-dasharray: 0 480;
    stroke-dashoffset: 0;
}

@keyframes stsl-border-draw {
    from { stroke-dasharray: 0 480; }
    to   { stroke-dasharray: 480 0; }
}

/* ── Pause / Play button ───────────────────────────────── */
.stsl-pause-btn {
    position: absolute;
    bottom: 24px;
    right: 20px;
    z-index: 10;
    width: 40px; height: 40px;
    border: none; border-radius: 50%;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(6px);
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, transform .2s;
}
.stsl-pause-btn:hover { background: rgba(0,0,0,.55); transform: scale(1.1); }
.stsl-pause-btn:focus-visible { outline:3px solid var(--stsl-primary); outline-offset:3px; }
.stsl-pause-btn--paused { background: rgba(106,176,76,.5); }

.stsl-pause-icon,
.stsl-play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.stsl-play-icon { display: none; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 768px) {
    .stslider { --stsl-height: clamp(260px,60vw,420px) !important; }
    .stslider__arrow { width:40px; height:40px; }
    .stslider__arrow--prev { left:10px; }
    .stslider__arrow--next { right:10px; }
    .stslider__btn { padding:11px 22px; font-size:14px; }
    .stsl-indicators { gap:6px; }
    .stsl-ind { min-width:80px; padding:8px 12px; font-size:11px; }
}

@media (max-width: 480px) {
    .stslider__btn { padding:10px 18px; font-size:13px; }
    .stslider__arrow { display:none; }
    .stsl-indicators { bottom:12px; }
    .stsl-pause-btn { bottom:12px; right:12px; }
}

/* ── Reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .stslider__img,
    .stslider__slide,
    .stslider__slide--active .stslider__badge,
    .stslider__slide--active .stslider__title,
    .stslider__slide--active .stslider__subtitle,
    .stslider__slide--active .stslider__btns,
    .stsl-ind__rect-progress { transition:none !important; animation:none !important; }
}