/* RP Showcase — logo marquee ([rp_logo_marquee]) */

.rps-lm {
    --rps-row-gap: 8px;
    --rps-col: calc(var(--rps-size) + var(--rps-gap));
    display: flex;
    flex-direction: column;
    gap: var(--rps-row-gap);
    overflow: hidden;
    width: 100%;
}

.rps-lm--fade {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.rps-lm__track {
    display: flex;
    width: max-content;
    animation: rps-lm-scroll var(--rps-duration) linear infinite;
}

.rps-lm--pause-hover:hover .rps-lm__track {
    animation-play-state: paused;
}

.rps-lm__set {
    display: flex;
}

/* Padding, not flex gap, so every set is exactly (columns × --rps-col) wide and the loop seam never jumps. */
.rps-lm__col {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: var(--rps-row-gap);
    width: var(--rps-col);
    padding: 0 calc(var(--rps-gap) / 2);
    box-sizing: border-box;
}

.rps-lm__logo {
    display: block;
    width: var(--rps-size);
    height: var(--rps-size);
    max-width: none;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

/* Brick pattern: the bottom row sits half a column over, so logos don't start out in a grid.
   Shifted left (not right) so the first set looks identical to the next one at the loop seam. */
.rps-lm--together.rps-lm--stagger .rps-lm__logo:nth-child(2),
.rps-lm--offset.rps-lm--stagger .rps-lm__track:nth-child(2) {
    margin-left: calc(var(--rps-col) / -2);
}

@keyframes rps-lm-scroll {
    to { transform: translateX(calc(-100% / var(--rps-copies))); }
}

/* Divi's tablet / phone breakpoints. */
@media (max-width: 980px) {
    .rps-lm {
        --rps-size: 100px !important;
        --rps-gap: 32px !important;
    }
}

@media (max-width: 767px) {
    .rps-lm {
        --rps-size: 84px !important;
        --rps-gap: 20px !important;
    }
}

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