/* P5-06 Netflix-подобные карусели — прогрессивное улучшение поверх .horizontal-scroll.
   Базовый overflow-x задан в styles/app.css; здесь только снап, стрелки и обёртка.
   Если JS отключён — .carousel-wrap не создаётся, ряды скроллятся нативно. */

.horizontal-scroll {
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.horizontal-scroll > .movie-card,
.horizontal-scroll > .grid-movie-card {
    scroll-snap-align: start;
}

/* Обёртка, которую добавляет JS вокруг ряда */
.carousel-wrap {
    position: relative;
}

/* Прячем нативный скроллбар, когда есть стрелки (десктоп) */
.carousel-wrap .horizontal-scroll {
    scrollbar-width: none;
}
.carousel-wrap .horizontal-scroll::-webkit-scrollbar {
    height: 0;
}

.carousel-arrow {
    position: absolute;
    top: 0;
    bottom: 18px; /* компенсируем padding-bottom ряда */
    width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    z-index: 6;
    color: #fff;
    font-size: 22px;
    opacity: 0;
    transition: opacity 0.25s ease, background 0.25s ease;
    background: rgba(20, 18, 30, 0.55);
}

.carousel-arrow:hover {
    background: rgba(20, 18, 30, 0.8);
}

.carousel-arrow:focus-visible {
    outline: 2px solid #5562e7;
    outline-offset: -2px;
    opacity: 1;
}

.carousel-arrow.prev {
    left: 0;
    background: linear-gradient(90deg, rgba(20, 18, 30, 0.85), rgba(20, 18, 30, 0));
}

.carousel-arrow.next {
    right: 0;
    background: linear-gradient(270deg, rgba(20, 18, 30, 0.85), rgba(20, 18, 30, 0));
}

/* Показываем стрелки при наведении на ряд или фокусе внутри */
.carousel-wrap:hover .carousel-arrow,
.carousel-wrap:focus-within .carousel-arrow {
    opacity: 1;
}

/* Скрытая стрелка на краю — не кликабельна */
.carousel-arrow[hidden],
.carousel-wrap:hover .carousel-arrow[hidden] {
    opacity: 0;
    pointer-events: none;
}

/* Drag-курсор */
.horizontal-scroll.is-dragging {
    scroll-behavior: auto;
    scroll-snap-type: none;
    cursor: grabbing;
    user-select: none;
}

/* P6: рельса «Топ-10» — крупный номер ранга слева от постера (стиль Netflix) */
.top10-scroll .top10-card {
    width: auto;
}
.top10-card > a {
    display: flex;
    align-items: flex-end;
    gap: 2px;
}
.top10-rank {
    font-size: 5.5rem;
    line-height: 0.75;
    font-weight: 900;
    color: #1f1d2b;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.55);
    text-stroke: 2px rgba(255, 255, 255, 0.55);
    letter-spacing: -0.08em;
    flex-shrink: 0;
    user-select: none;
}
.top10-poster-wrap {
    width: 120px;
    flex-shrink: 0;
}
.top10-card .movie-info {
    max-width: 120px;
    margin-left: auto;
}

/* На тач-устройствах стрелки не нужны */
@media (hover: none) {
    .carousel-arrow {
        display: none;
    }
    .carousel-wrap .horizontal-scroll {
        scrollbar-width: thin;
    }
    .carousel-wrap .horizontal-scroll::-webkit-scrollbar {
        height: 6px;
    }
}