/**
 * WP Magic — Logo Wall widget base styles.
 *
 * Structural layout and animation mechanics only. Colors, spacing sourced
 * from Elementor controls, and per-item opacity/grayscale are driven by the
 * panel, which emits its own scoped {{WRAPPER}} CSS. Enqueued on demand via
 * the widget's get_style_depends(), so it loads only where the widget is
 * used.
 *
 * Animation duration, direction, logo gap, and edge-fade size arrive as CSS
 * custom properties set inline on the wrapper by the widget's render(), so
 * several instances on one page (e.g. stacked rows of a multi-row wall) can
 * each have their own values without colliding.
 */
.wpm-logo-wall {
    position: relative;
    overflow: hidden;
}

.wpm-logo-wall[data-mode="static"] {
    overflow: visible;
}

.wpm-logo-wall[data-edge-fade="yes"] {
    mask-image: linear-gradient(
        to right,
        transparent,
        #000 var(--wpm-lw-fade, 10%),
        #000 calc(100% - var(--wpm-lw-fade, 10%)),
        transparent
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        #000 var(--wpm-lw-fade, 10%),
        #000 calc(100% - var(--wpm-lw-fade, 10%)),
        transparent
    );
}

.wpm-logo-wall__track {
    display: flex;
    width: max-content;
}

.wpm-logo-wall[data-mode="static"] .wpm-logo-wall__track {
    width: 100%;
}

.wpm-logo-wall__group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Static mode has a single group and no seam to protect, so a plain flex
   gap is simplest and wraps cleanly. */
.wpm-logo-wall[data-mode="static"] .wpm-logo-wall__group {
    flex-wrap: wrap;
    width: 100%;
    gap: var(--wpm-lw-gap, 40px);
}

/* Scroll mode uses per-item margin instead of a flex gap on the track/group.
   A flex gap only sits *between* children, so the seam between the two
   duplicated groups would end up with no space at all. Margin lands after
   every item, including each group's last one, so the seam gets the same
   spacing as everywhere else while both groups stay exactly the same width
   — which keeps the translateX(-50%) loop math landing perfectly. */
.wpm-logo-wall[data-mode="scroll"] .wpm-logo-wall__item {
    margin-right: var(--wpm-lw-gap, 40px);
}

.wpm-logo-wall[data-mode="scroll"] .wpm-logo-wall__track {
    animation-name: wpm-logo-wall-scroll;
    animation-duration: var(--wpm-lw-duration, 40s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: var(--wpm-lw-direction, normal);
}

.wpm-logo-wall[data-mode="scroll"][data-pause-hover="yes"]:hover .wpm-logo-wall__track,
.wpm-logo-wall[data-mode="scroll"][data-pause-hover="yes"]:focus-within .wpm-logo-wall__track {
    animation-play-state: paused;
}

@keyframes wpm-logo-wall-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.wpm-logo-wall__item {
    display: inline-flex;
    flex-shrink: 0;
}

.wpm-logo-wall__link {
    display: inline-flex;
}

.wpm-logo-wall__img {
    display: block;
    width: auto;
    height: auto;
}

@media (prefers-reduced-motion: reduce) {
    .wpm-logo-wall--respect-motion[data-mode="scroll"] .wpm-logo-wall__track {
        animation: none;
        transform: none;
    }
}