/* =========================================================================
   referenceSlider 1.0 — styly
   Veškeré rozměry se řídí CSS proměnnými na .rs-root, JS si je jen přečte.
   Chceš jiné velikosti? Přepiš proměnné, JS se přizpůsobí sám.
   ========================================================================= */

.rs-root {
    /* rozměry */
    --rs-size:        270px;   /* neaktivní čtverec */
    --rs-active-size: 330px;   /* aktivní čtverec (scale se dopočítá) */
    --rs-step:        270px;   /* rozestup středů = o kolik se položky posouvají */
    --rs-pad:         20px;    /* volné místo nad/pod trackem (stíny) */

    /* animace */
    --rs-duration: 450ms;
    --rs-ease:     cubic-bezier(.22, .61, .36, 1);

    /* šipky */
    --rs-arrow-size:   48px;
    --rs-arrow-offset: 8px;
    --rs-arrow-color:  #1c1c1c;
    --rs-arrow-bg:     #fff;

    position: relative;
    width: 100%;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.rs-root:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }

.rs-track {
    position: relative;
    width: 100%;
    overflow: hidden;
    transition: transform 250ms var(--rs-ease);
    will-change: transform;
}

.rs-horizontal .rs-track { touch-action: pan-y; }
.rs-vertical   .rs-track { touch-action: pan-x; }
.rs-horizontal .rs-track { cursor: grab; }
.rs-root.rs-dragging .rs-track { cursor: grabbing; }

/* během tažení jedou položky přesně za prstem, transition by je zpožďovala;
   po puštění se třída sundá a CSS dojede zbytek cesty */
.rs-root.rs-dragging .rs-item {
    transition: none !important;
}

/* ------------------------------------------------------------- položky */

.rs-item {
    position: absolute;
    left: 50%;
    top: 50%;
    width:  var(--rs-size);
    height: var(--rs-size);
    margin-left: calc(var(--rs-size) / -2);
    margin-top:  calc(var(--rs-size) / -2);
    box-sizing: border-box;
    transform-origin: 50% 50%;
    backface-visibility: hidden;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    transition:
        transform  var(--rs-duration) var(--rs-ease),
        opacity    var(--rs-duration) var(--rs-ease),
        filter     var(--rs-duration) var(--rs-ease),
        box-shadow var(--rs-duration) var(--rs-ease);
}

/* stav, kdy se položka „teleportuje“ přes konec smyčky */
.rs-item.rs-no-anim { transition: none !important; }

/* opacity řídí JS inline (plynulý náběh přijíždějící položky) */
.rs-item.rs-hidden { pointer-events: none; }

/* --rs-t nastavuje JS: 1 = položka je přesně uprostřed, 0 = na sousedním slotu.
   Potlačení neaktivních položek se tak prolíná spolu s tažením prstu.
   Nechceš ztmavení? Smaž tenhle blok. */
.rs-item {
    --rs-t: 0;
    filter: saturate(calc(.75 + .25 * var(--rs-t))) brightness(calc(.94 + .06 * var(--rs-t)));
}

/* ------------------------------------------------------------- šipky */

.rs-arrow {
    position: absolute;
    z-index: 200;
    width:  var(--rs-arrow-size);
    height: var(--rs-arrow-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--rs-arrow-bg);
    color: var(--rs-arrow-color);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .18);
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.rs-arrow:hover  { transform: scale(1.08) translate(0, 0); box-shadow: 0 4px 20px rgba(0, 0, 0, .24); }
.rs-arrow:active { transform: scale(.96); }

/* šipka samotná */
.rs-arrow span {
    position: absolute;
    left: 50%; top: 50%;
    width: 11px; height: 11px;
    border-left:   2px solid currentColor;
    border-bottom: 2px solid currentColor;
    margin: -6px 0 0 -4px;
}

.rs-horizontal .rs-arrow { top: 50%; margin-top: calc(var(--rs-arrow-size) / -2); }
.rs-horizontal .rs-arrow--prev { left:  var(--rs-arrow-offset); }
.rs-horizontal .rs-arrow--next { right: var(--rs-arrow-offset); }
.rs-horizontal .rs-arrow--prev span { transform: rotate(45deg);  margin-left: -3px; }
.rs-horizontal .rs-arrow--next span { transform: rotate(-135deg); margin-left: -7px; }

.rs-vertical .rs-arrow { left: 50%; margin-left: calc(var(--rs-arrow-size) / -2); }
.rs-vertical .rs-arrow--prev { top:    0; }
.rs-vertical .rs-arrow--next { bottom: 0; }
.rs-vertical .rs-arrow--prev span { transform: rotate(135deg); margin: -3px 0 0 -6px; }
.rs-vertical .rs-arrow--next span { transform: rotate(-45deg); margin: -8px 0 0 -6px; }

/* ------------------------------------------------- breakpointy (BS5) */

/* < 768px — vertikální režim, menší čtverce, ať se vejdou na výšku */
@media (max-width: 767.98px) {
    .rs-root {
        --rs-size:        200px;
        --rs-active-size: 244px;
        --rs-step:        196px;
    }
}

/* 768–991px — velikosti zůstávají, ale sousedi se nasunou blíž pod aktivní */
@media (min-width: 768px) and (max-width: 991.98px) {
    .rs-root {
        --rs-size:        270px;
        --rs-active-size: 330px;
        --rs-step:        200px;   /* 200 + 135 = 335px na každou stranu => 670px celkem */
    }
}

/* 992–1399px — cílový stav ze zadání: přesah aktivní položky 30px na každou stranu */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .rs-root {
        --rs-size:        270px;
        --rs-active-size: 330px;
        --rs-step:        270px;
    }
}

/* >= 1400px — prostor navíc, klidně si čísla uprav */
@media (min-width: 1400px) {
    .rs-root {
        --rs-size:        300px;
        --rs-active-size: 366px;
        --rs-step:        300px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rs-root { --rs-duration: 1ms; }
    .rs-track { transition: none; }
}

/* =========================================================================
   Volitelný vzhled karty — smaž nebo přepiš vlastním designem
   ========================================================================= */

.rs-root .rs-item.rs-card {
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 30px rgba(18, 22, 33, .10);
}

.rs-root .rs-item.rs-card.is-active {
    box-shadow: 0 18px 46px rgba(18, 22, 33, .22);
}

.rs-root .rs-item.rs-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}