/* ==========================================
   Poster Carousel
========================================== */

.poster-carousel{

    --gap:24px;
    --cards-desktop:4.15;

    display:flex;
    gap:var(--gap);

    width:100%;

    overflow-x:auto;
    overflow-y:hidden;

    scroll-snap-type:x proximity;
    scroll-behavior:smooth;

    padding:4px 0 18px;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:thin;
    scrollbar-color:#10263B #E6E6E6;
}

/* Chrome / Edge / Safari */

.poster-carousel::-webkit-scrollbar{

    height:8px;
}

.poster-carousel::-webkit-scrollbar-track{

    background:#E6E6E6;
    border-radius:999px;
}

.poster-carousel::-webkit-scrollbar-thumb{

    background:#10263B;
    border-radius:999px;
}

/* ==========================================
   Cards
========================================== */

.poster-card{

    flex:0 0 calc(
        (100% - (3 * var(--gap)))
        / var(--cards-desktop)
    );

    scroll-snap-align:start;
}

.poster-card a{

    display:block;
    text-decoration:none;
    color:inherit;
}

.poster-card img{

    width:100%;
    aspect-ratio:2 / 3;

    display:block;

    object-fit:cover;

    border-radius:18px;

    transition:transform .25s ease;
}

.poster-card:hover img{

    transform:translateY(-4px);
}

.poster-card h3{

    margin:14px 0 8px;

    font-size:1rem;
    line-height:1.4;
    font-weight:600;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;

    overflow:hidden;

    min-height:2.8em;
}

.poster-card time{

    display:block;

    font-size:.9rem;
    color:#666;
}

/* ==========================================
   Mobile
========================================== */

@media (max-width:768px){

    .poster-carousel{

        --gap:18px;
    }

    .poster-card{

        flex:0 0 92%;
    }

    .poster-card h3{

        font-size:1.05rem;
    }

}