/* Vodorovné řady: šipky, měkké okraje a živější dlaždice. */

.rail-shell {
    position: relative;
}

.rail-shell .stream-row {
    padding-top: 10px;
    margin-top: -8px;
    scroll-behavior: smooth;
}

.rail-shell .stream-row.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
}

.rail-shell .stream-row.is-dragging a {
    pointer-events: none;
}

.rail-shell.has-rail .stream-row {
    --rail-mask: linear-gradient(90deg, transparent 0, #000 54px, #000 calc(100% - 54px), transparent 100%);
    -webkit-mask-image: var(--rail-mask);
    mask-image: var(--rail-mask);
}

.rail-shell.has-rail.at-start .stream-row {
    --rail-mask: linear-gradient(90deg, #000 0, #000 calc(100% - 54px), transparent 100%);
}

.rail-shell.has-rail.at-end .stream-row {
    --rail-mask: linear-gradient(90deg, transparent 0, #000 54px, #000 100%);
}

.rail-shell.has-rail.at-start.at-end .stream-row {
    -webkit-mask-image: none;
    mask-image: none;
}

.rail-arrow {
    position: absolute;
    z-index: 3;
    top: calc(50% - 12px);
    display: none;
    width: 42px;
    height: 42px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--panel-bg-strong);
    color: var(--text);
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    opacity: 0;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
    backdrop-filter: blur(14px);
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.rail-arrow-previous {
    left: -6px;
}

.rail-arrow-next {
    right: -6px;
}

.rail-arrow > span {
    display: block;
    margin-top: -3px;
}

.rail-shell.has-rail .rail-arrow {
    display: grid;
}

.rail-shell.has-rail:hover .rail-arrow,
.rail-shell.has-rail:focus-within .rail-arrow {
    opacity: 1;
}

.rail-arrow:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-50%) scale(1.06);
}

.rail-shell.at-start .rail-arrow-previous,
.rail-shell.at-end .rail-arrow-next {
    pointer-events: none;
    opacity: 0 !important;
}

@media (hover: none), (max-width: 820px) {
    .rail-arrow {
        display: none !important;
    }

    .rail-shell.has-rail .stream-row {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* --- Dlaždice reagují na najetí myší --- */
.shelf-card,
.continue-card {
    transition: transform 200ms ease;
}

.shelf-poster,
.continue-art {
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.shelf-poster img,
.continue-art img {
    transition: transform 320ms ease;
}

.shelf-poster::after {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(to top, rgba(6, 8, 12, .55), rgba(6, 8, 12, .06));
    color: #fff;
    font-size: 25px;
    opacity: 0;
    content: "▶";
    transition: opacity 200ms ease;
}

@media (hover: hover) {
    .shelf-card:hover,
    .continue-card:hover {
        transform: translateY(-5px);
    }

    .shelf-card:hover .shelf-poster,
    .continue-card:hover .continue-art {
        border-color: var(--border-strong);
        box-shadow: 0 20px 44px rgba(0, 0, 0, .3);
    }

    .shelf-card:hover .shelf-poster img,
    .continue-card:hover .continue-art img {
        transform: scale(1.06);
    }

    .shelf-card:hover .shelf-poster::after,
    .shelf-card:focus-visible .shelf-poster::after {
        opacity: 1;
    }

    .shelf-card:hover > strong {
        color: var(--accent);
    }
}

html[data-theme="light"] .shelf-card:hover .shelf-poster,
html[data-theme="light"] .continue-card:hover .continue-art {
    box-shadow: 0 20px 44px rgba(37, 46, 64, .22);
}

/* --- Plakát se objeví plynule, dokud se nenačte, drží místo podklad --- */
.js-poster-reveal .shelf-poster img,
.js-poster-reveal .continue-art img,
.js-poster-reveal .poster-frame img {
    opacity: 0;
    transition: opacity 340ms ease, transform 320ms ease;
}

.js-poster-reveal .shelf-poster img.is-poster-ready,
.js-poster-reveal .continue-art img.is-poster-ready,
.js-poster-reveal .poster-frame img.is-poster-ready {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .shelf-card,
    .continue-card,
    .shelf-poster img,
    .continue-art img,
    .rail-arrow {
        transition: none;
    }

    .shelf-card:hover,
    .continue-card:hover {
        transform: none;
    }

    .shelf-card:hover .shelf-poster img,
    .continue-card:hover .continue-art img {
        transform: none;
    }
}

/* Odznaky kvality a počtu dílů zůstávají nad překryvem s tlačítkem přehrát. */
.shelf-quality,
.shelf-count {
    z-index: 3;
}