/* ==========================================================================
   AUME – 15) Bannery na úvodce                                      [v1.1]
   Pás karet s fotkou nebo videem místo plochého banneru Shoptetu.
   Obsah je v seznamu v hlavičce, logika v 15-bannery.js.
   Vzhled podle vasky.cz, nadpis patkovou Salinou jako zbytek webu.
   Poměr karty je stejný na mobilu i na PC – mění se jen --au-ban-pomer.
   ========================================================================== */

/* Proměnné sedí na obalu, ne na řadě – tečky a šipky jsou sourozenci řady,
   uvnitř řady by je nenašly. */
.aume-bannery-obal {
    /* Poměr karty – stejný na mobilu i PC, menší číslo = vyšší karta.
       2/3 sedí na dodané fotky 620×940, takže se neořezávají. */
    --au-ban-pomer: 2 / 3;
    /* kolik karet je vidět vedle sebe – z toho vychází šířka karty */
    --au-ban-videt: 1;
    --au-ban-mezera: 8px;
    --au-ban-radius: 0;
    /* odsazení pásu od kraje okna a nejširší pás na velkých monitorech;
       obě čte JS, když počítá přesah */
    --au-ban-okraj: 0px;
    --au-ban-pas-max: 1800px;
    /* kolik místa má zůstat pod kartou, aby byla po otevření vidět celá */
    --au-ban-rezerva: 24px;
    --au-ban-nadpis: 30px;
    --au-ban-text: 15px;
    --au-ban-sans: "Red Hat Display", sans-serif;
    --au-ban-serif: "Salina", serif;
    --au-ban-tmava: #222222;
    --au-ban-zoom: 1.05;
    --au-ban-zoom-cas: .9s;

    /* Kontejner šablony má pevných 1378 px i na 4K, takže by karty dál
       nerostly. Přesah měří JS proti body.clientWidth – 100vw počítá
       i posuvník a přidávalo by k vodorovnému přetečení. */
    --au-ban-presah: var(--au-ban-mozny, 0px);

    position: relative;
    margin-bottom: 32px;
    margin-left: calc(var(--au-ban-presah) * -1);
    margin-right: calc(var(--au-ban-presah) * -1);
}

.aume-bannery {
    display: flex;
    gap: var(--au-ban-mezera);
    margin: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.aume-bannery::-webkit-scrollbar {
    display: none;
}

/* když se celá řada vejde, stojí uprostřed; při přetečení auto margin
   nic nepřidá, takže se nic neuřízne zleva */
.aume-bannery > :first-child {
    margin-left: auto;
}

.aume-bannery > :last-child {
    margin-right: auto;
}

/* Původní banner Shoptetu ustoupí, až když náš pás opravdu stojí.
   Třídu dává JS jen té jedné řadě – .banners-row je na webu i v patičce. */
.aume-bannery-ready .aume-bannery-puvodni {
    display: none;
}

.aume-banner {
    position: relative;
    flex: 0 0 calc((100% - (var(--au-ban-videt) - 1) * var(--au-ban-mezera)) / var(--au-ban-videt));
    display: flex;
    align-items: flex-end;
    aspect-ratio: var(--au-ban-pomer);
    overflow: hidden;
    border-radius: var(--au-ban-radius);
    background: var(--color-bg-dark, #efe6db);
    scroll-snap-align: start;
    text-decoration: none;
    color: #fff;
}

.aume-banner img,
.aume-banner video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--au-ban-zoom-cas) cubic-bezier(.22, .61, .36, 1);
}

.aume-banner:hover img,
.aume-banner:hover video,
.aume-banner:focus-visible img,
.aume-banner:focus-visible video {
    transform: scale(var(--au-ban-zoom));
}

@media (prefers-reduced-motion: reduce) {
    .aume-bannery {
        --au-ban-zoom-cas: .3s;
    }
}

/* stín odspodu kvůli čitelnosti – Salina je tenká, bez něj se na světlé
   fotce ztratí */
.aume-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .68) 0%, rgba(0, 0, 0, .38) 26%, rgba(0, 0, 0, .1) 46%, rgba(0, 0, 0, 0) 62%);
}

.aume-banner__stitek {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    font-family: var(--au-ban-sans);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--au-ban-tmava);
}

.aume-banner__obsah {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 22px;
    font-family: var(--au-ban-sans);
}

.aume-banner__nadpis {
    font-family: var(--au-ban-serif);
    font-size: var(--au-ban-nadpis);
    font-weight: 200;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #fff;
}

.aume-banner__text {
    font-size: var(--au-ban-text);
    line-height: 1.4;
    color: rgba(255, 255, 255, .92);
}

.aume-banner__tlacitko {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding: 14px 20px;
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--au-ban-tmava);
}

.aume-banner__tlacitko svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.aume-banner:hover .aume-banner__tlacitko,
.aume-banner:focus-visible .aume-banner__tlacitko {
    background: var(--color-bg-dark, #efe6db);
}

.aume-banner:focus-visible {
    outline: 3px solid #cfb388;
    outline-offset: 3px;
}

/* --- PC ------------------------------------------------------------------
   Šířku karty dává --au-ban-videt, tedy kolik jich má být vedle sebe.
   Poměr zůstává stejný jako na mobilu. */
@media (min-width: 768px) {
    /* vedle sebe tolik karet, kolik je bannerů (nejvýš 4) – počet dává JS */
    .aume-bannery-obal {
        --au-ban-videt: var(--au-ban-pocet, 3);
        --au-ban-okraj: 24px;
        --au-ban-nadpis: 40px;
        margin-bottom: 40px;
    }

    /* Strop šířky dopočítává JS z místa, které pod pásem zbývá do spodku
       okna – karta pak zůstane po otevření stránky vidět celá. Výšku řídí
       dál aspect-ratio, takže se poměr nemění. Bez JS se strop neuplatní. */
    .aume-banner {
        max-width: var(--au-ban-strop, none);
    }

    .aume-banner__obsah {
        padding: 28px;
    }

    .aume-banner__stitek {
        top: 24px;
        left: 24px;
        font-size: 13px;
    }

    .aume-banner__tlacitko {
        padding: 16px 22px;
        font-size: 15px;
    }

    .aume-bannery-obal--sipky .aume-bannery__sipka {
        display: flex;
    }
}

.aume-bannery__sipka {
    position: absolute;
    top: calc(50% - 16px);
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
    color: var(--au-ban-tmava);
    cursor: pointer;
}

.aume-bannery__sipka--vlevo {
    left: 10px;
}

.aume-bannery__sipka--vpravo {
    right: 10px;
}

.aume-bannery__sipka svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.aume-bannery__sipka:hover {
    background: var(--color-bg-dark, #efe6db);
}

/* na kraji řady šipka nemizí, jen zešedne – jinak by obsah poskakoval */
.aume-bannery__sipka[disabled] {
    opacity: .35;
    cursor: default;
}

/* --- tečky pod pásem ----------------------------------------------------- */

.aume-bannery__tecky {
    display: none;
    justify-content: center;
    gap: 8px;
    margin: 16px 0 0;
}

.aume-bannery-obal--sipky .aume-bannery__tecky {
    display: flex;
}

.aume-bannery__tecka {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(34, 34, 34, .22);
    cursor: pointer;
    transition: width .25s ease, background-color .25s ease;
}

.aume-bannery__tecka[aria-current="true"] {
    width: 26px;
    background: var(--au-ban-tmava);
}