/* ==========================================================================
   Sponsor logo marquee — pairs with marquee-sponsor.js
   Combines the original styling (edge fades, 155px cells, 70px logos)
   with the fixes the new script needs.
   ========================================================================== */

.elementor-image-gallery {
    --marquee-item-width: 155px;
    --marquee-logo-height: 70px;
    --marquee-gap: 20px;
    --marquee-row-gap: 30px;
    --marquee-fade: 100px;
    --marquee-fade-color: 255, 255, 255;

    position: relative;
}

/* Edge fades ------------------------------------------------------------- */

.elementor-image-gallery:before,
.elementor-image-gallery:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--marquee-fade);
    z-index: 1;
    pointer-events: none;
}

.elementor-image-gallery:before {
    left: 0;
    background: linear-gradient(90deg,
            rgba(var(--marquee-fade-color), 1) 5%,
            rgba(var(--marquee-fade-color), 0) 100%);
}

.elementor-image-gallery:after {
    right: 0;
    background: linear-gradient(90deg,
            rgba(var(--marquee-fade-color), 0) 0%,
            rgba(var(--marquee-fade-color), 1) 95%);
}

/* Rows -------------------------------------------------------------------- */

.elementor-image-gallery .marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-bottom: var(--marquee-row-gap);

    /* Hidden until the script has measured a real width. */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.elementor-image-gallery .marquee:last-child {
    margin-bottom: 0;
}

.elementor-image-gallery .marquee.is-ready {
    opacity: 1;
}

.elementor-image-gallery .marquee__inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;

    /* Critical: without this the strip is capped at the container width and the
       logos shrink, which makes scrollWidth unmeasurable. */
    width: max-content;

    gap: var(--marquee-gap);
    will-change: transform;
}

/* The animation is only attached once --marquee-width holds a real value.
   This is what stops a row from sliding away into an undefined transform. */
.elementor-image-gallery .marquee.is-ready .marquee__inner {
    animation-name: marquee-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: var(--marquee-duration, 20s);
}

/* Supports either class name the script may emit. */
.elementor-image-gallery .marquee.reverse.is-ready .marquee__inner,
.elementor-image-gallery .marquee--reverse.is-ready .marquee__inner {
    animation-direction: reverse;
}

@keyframes marquee-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(calc(-1 * var(--marquee-width, 0px)), 0, 0);
    }
}

/* Items — neutralise Elementor's gallery grid rules ----------------------- */

.elementor-image-gallery .marquee__inner .gallery-item {
    flex: 0 0 auto;
    /* never let cells compress */
    width: var(--marquee-item-width) !important;
    flex-basis: unset !important;
    max-width: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.elementor-image-gallery .marquee__inner img {
    display: block;
    max-height: var(--marquee-logo-height);
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.elementor-image-gallery .marquee__inner figcaption,
.elementor-image-gallery .marquee__inner .gallery-caption {
    display: none;
}

/* Mobile ------------------------------------------------------------------ */

@media (max-width: 768px) {
    .elementor-image-gallery {
        --marquee-item-width: 110px;
        --marquee-logo-height: 45px;
        --marquee-gap: 16px;
        --marquee-row-gap: 20px;
        --marquee-fade: 40px;
        /* 100px fade swallows a phone screen */
    }
}

@media (prefers-reduced-motion: reduce) {
    .elementor-image-gallery .marquee.is-ready .marquee__inner {
        animation: none;
    }
}