/*
    Front office slider - vlastní engine bez knihoven: CSS scroll-snap dělá
    swipe a plynulé posuny nativně (funguje i bez JS), front.js jen doplňuje
    šipky, tečky a autoplay. Vzhled řídí CSS proměnné --dmslider-*
    (téma webu si je může přebít vlastním CSS bez zásahu do modulu).

    Core Web Vitals: aspect-ratio rezervuje místo (nulový CLS), animace jen
    přes scroll/opacity (žádný reflow), respektuje prefers-reduced-motion.
*/

.dmslider {
    /* Výchozí hodnoty proměnných - přebitelné z webu */
    --dmslider-radius: 0;
    --dmslider-content-bg: rgba(0, 0, 0, 0.45);
    --dmslider-content-text: #fff;
    --dmslider-content-pad: 24px;
    --dmslider-arrow-bg: rgba(255, 255, 255, 0.85);
    --dmslider-arrow-color: #363a41;
    --dmslider-arrow-size: 40px;
    --dmslider-dot-color: rgba(255, 255, 255, 0.6);
    --dmslider-dot-active: #fff;

    position: relative;
    /* width: 100% je NUTNÉ kvůli margin: 0 auto - v grid/flex rodiči (Hummingbird
       .page-content--home je display: grid) auto marginy vypnou natažení položky
       (stretch) a sekce se smrskne na šířku obsahu. Před načtením obrázku je
       obsah 0 px široký -> aspect-ratio slidu spočítá výšku 0 -> po načtení
       obrázku slider naskočí a vše pod ním uskočí (CLS 0,25). S pevnou šířkou
       je výška z aspect-ratio známá už při prvním vykreslení. Režimy full/custom
       si šířku přepisují v .dmslider--bleed. */
    width: 100%;
    max-width: var(--dmslider-max-width, 100%);
    margin: 0 auto;
    border-radius: var(--dmslider-radius);
    overflow: hidden;
}

/* ==================== Šířka na stránce (full-bleed / vlastní %) ==================== */

/*
    Vylomení z užšího sloupce: šířka bloku se počítá z viewportu a blok se
    vycentruje na střed okna. Výkon / CLS: rozložení je čistě CSS (fallback
    100vw se vykreslí hned při prvním paintu, žádný skok layoutu) - front.js
    jen doladí --dmslider-vw na šířku okna bez svislého scrollbaru (~15 px).
    --dmslider-wpct: CELÉ číslo procent (100 = celá obrazovka, 90 = 90 %) -
    dělí se až tady v calc(), aby výstup ze Smarty nezávisel na locale.
    POZOR: nefunguje, když má předek overflow: hidden - blok se ořízne.
*/
.dmslider--bleed {
    width: calc(var(--dmslider-vw, 100vw) * var(--dmslider-wpct, 100) / 100 - 2 * var(--dmslider-bleed-pad, 0px));
    max-width: none;
    margin-left: calc(50% - var(--dmslider-vw, 100vw) * var(--dmslider-wpct, 100) / 200 + var(--dmslider-bleed-pad, 0px));
    margin-right: 0;
}

/* ==================== Pás a slidy (scroll-snap) ==================== */

.dmslider__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.dmslider__track::-webkit-scrollbar {
    display: none;
}

.dmslider__slide {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: start;
    aspect-ratio: var(--dmslider-ar-mobile, 3 / 2);
}

@media (min-width: 768px) {
    .dmslider__slide {
        aspect-ratio: var(--dmslider-ar-desktop, 16 / 6);
    }
}

/* ==================== Karusel - více slidů vedle sebe ==================== */

/*
    Zakulacení (--dmslider-radius) patří v karuselu jednotlivým kartám,
    ne celému pásu - na celku by se zakulatily jen vnější okraje prvního
    a posledního viditelného slidu.
*/
.dmslider--carousel {
    border-radius: 0;
}

.dmslider--carousel .dmslider__slide {
    border-radius: var(--dmslider-radius);
    overflow: hidden;
}

/*
    Šířka karty z adminu je výchozí MAXIMUM - aby nebyla poslední viditelná
    karta useknutá, front.js spočítá, kolik celých karet se do pásu vejde,
    a přesnou (zmenšenou) šířku předá přes --dmslider-slide-fit. Bez JS
    zůstává šířka z adminu; min(, 100%) chrání na obrazovkách užších než karta.
*/
.dmslider--carousel .dmslider__track {
    column-gap: var(--dmslider-gap-mobile, 12px);
}

/*
    Široká obrazovka: všechny karty se vejdou a ještě zbyde místo (karta se
    nesmí zvětšovat, obrázky jsou na přesný rozměr) - zbytek se rozdělí na obě
    strany místo prázdného pruhu vpravo. Třídu dává JS jen ve chvíli, kdy se
    pás nescrolluje; u scrollovatelného pásu by centrování schovalo začátek.
*/
.dmslider--fits .dmslider__track {
    justify-content: center;
}

.dmslider--carousel .dmslider__slide {
    flex: 0 0 var(--dmslider-slide-fit, min(var(--dmslider-slide-w-mobile, 80%), 100%));
}

@media (min-width: 768px) {
    .dmslider--carousel .dmslider__track {
        column-gap: var(--dmslider-gap-desktop, 20px);
    }

    .dmslider--carousel .dmslider__slide {
        flex: 0 0 var(--dmslider-slide-fit, min(var(--dmslider-slide-w-desktop, 25%), 100%));
    }
}

.dmslider__media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dmslider__link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* Focus po KLIKNUTÍ bez rámečku nezávisle na šabloně (novější Chrome kreslí
   outline i z pravidel šablony typu a:focus). Klávesnice (Tab) rámeček
   dostane přes :focus-visible - ten Chrome při kliku myší nenastavuje. */
.dmslider a:focus,
.dmslider button:focus {
    outline: none;
    box-shadow: none;
}

.dmslider a:focus-visible,
.dmslider button:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: -3px;
}

/* ==================== Přechod prolnutím (fade) ==================== */

/* Fade variantu zapíná JS (bez JS zůstává scroll-snap posun) */
.dmslider--fade.dmslider--js .dmslider__track {
    display: grid;
    overflow: hidden;
}

.dmslider--fade.dmslider--js .dmslider__slide {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity var(--dmslider-speed, 600ms) ease;
    pointer-events: none;
}

.dmslider--fade.dmslider--js .dmslider__slide.is-current {
    opacity: 1;
    pointer-events: auto;
}

/* ==================== Obsah slidu - mřížka 3x3 ==================== */

/* Kotva v dané zóně + zarovnání textu dle sloupce (l/c/r). Box je ukotvený
   left+right přes celou šířku slidu (minus okraje) a smršťuje se na obsah
   (fit-content) - šířku textu tak omezuje JEN slide, ne zvolená pozice;
   do zóny ho tlačí auto marginy dle sloupce. */
.dmslider__content {
    position: absolute;
    left: 4%;
    right: 4%;
    width: -moz-fit-content;
    width: fit-content;
    padding: var(--dmslider-content-pad);
    background: var(--dmslider-content-bg);
    color: var(--dmslider-content-text);
    border-radius: 4px;
}

/* Podklad pod textem vypnutý u slidu (volba v adminu) */
.dmslider__content--nobg {
    padding: 0;
    background: none;
    border-radius: 0;
}

.dmslider__slide--tl .dmslider__content,
.dmslider__slide--cl .dmslider__content,
.dmslider__slide--bl .dmslider__content { margin-right: auto; text-align: left; }

.dmslider__slide--tc .dmslider__content,
.dmslider__slide--cc .dmslider__content,
.dmslider__slide--bc .dmslider__content { margin-left: auto; margin-right: auto; text-align: center; }

.dmslider__slide--tr .dmslider__content,
.dmslider__slide--cr .dmslider__content,
.dmslider__slide--br .dmslider__content { margin-left: auto; text-align: right; }

.dmslider__slide--tl .dmslider__content,
.dmslider__slide--tc .dmslider__content,
.dmslider__slide--tr .dmslider__content { top: 8%; }

.dmslider__slide--cl .dmslider__content,
.dmslider__slide--cc .dmslider__content,
.dmslider__slide--cr .dmslider__content { top: 50%; transform: translateY(-50%); }

.dmslider__slide--bl .dmslider__content,
.dmslider__slide--bc .dmslider__content,
.dmslider__slide--br .dmslider__content { bottom: 8%; }

.dmslider__desc {
    font-size: 0.95rem;
    line-height: 1.45;
}

.dmslider__desc p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .dmslider__content {
        padding: 12px 16px;
    }

    .dmslider__content--nobg {
        padding: 0;
    }

    .dmslider__desc {
        font-size: 0.85rem;
    }
}

/* ==================== Šipky (vkládá front.js) ==================== */

.dmslider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--dmslider-arrow-size);
    height: var(--dmslider-arrow-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--dmslider-arrow-bg);
    color: var(--dmslider-arrow-color);
    cursor: pointer;
    padding: 0;
    z-index: 2;
    transition: opacity 150ms ease;
}

.dmslider__arrow:hover {
    opacity: 0.85;
}

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

.dmslider__arrow svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.dmslider__arrow[disabled] {
    opacity: 0.35;
    cursor: default;
}

/* ==================== Tečky (vkládá front.js) ==================== */

.dmslider__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 2;
}

.dmslider__dot {
    width: 10px;
    height: 10px;
    border: 0;
    border-radius: 50%;
    background: var(--dmslider-dot-color);
    cursor: pointer;
    padding: 0;
}

.dmslider__dot.is-current {
    background: var(--dmslider-dot-active);
}

/* ==================== Přístupnost ==================== */

@media (prefers-reduced-motion: reduce) {
    .dmslider__track {
        scroll-behavior: auto;
    }

    .dmslider--fade.dmslider--js .dmslider__slide {
        transition: none;
    }
}