/* =========================================================
   RotoEdge — homepage poster row under the hero
   CSS-only continuous marquee (no slider script): the track holds the 10 posters twice
   and slides left by exactly one set, so the loop is seamless.
   Per row: 2 (phones) · 3 · 4 · 5 · 6 · 7 (large desktop), 20px gaps, 2:3 posters.
========================================================= */

.re-posters {
    --per: 2;
    --gap: 20px;
    --item: calc((100vw - var(--gap) * (var(--per) - 1)) / var(--per));
    overflow: hidden;
    width: 100%;
}

.re-posters__track {
    display: flex;
    gap: var(--gap);
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: re-posters 60s linear infinite;
    will-change: transform;
}

.re-posters:hover .re-posters__track,
.re-posters:focus-within .re-posters__track {
    animation-play-state: paused;
}

.re-posters__item {
    flex: 0 0 var(--item);
    width: var(--item);
}

.re-posters .tp-gallery-item {
    overflow: hidden;
    border-radius: 10px;
    background: #1a1a1a;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}

.re-posters .tp-gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    object-position: center top;
}

/* one full set = 10 posters + 10 gaps */
@keyframes re-posters {
    to { transform: translateX(calc(-10 * (var(--item) + var(--gap)))); }
}

@media (min-width: 576px)  { .re-posters { --per: 3; } }
@media (min-width: 768px)  { .re-posters { --per: 4; } }
@media (min-width: 992px)  { .re-posters { --per: 5; } }
@media (min-width: 1200px) { .re-posters { --per: 6; } }
@media (min-width: 1400px) { .re-posters { --per: 7; } }

/* smaller screens have a shorter set, so a shorter cycle keeps the same gentle speed */
@media (max-width: 767px) { .re-posters__track { animation-duration: 45s; } }

@media (prefers-reduced-motion: reduce) {
    .re-posters__track { animation: none; }
}