/* ========================================
   IMAGES HORIZONTAL MARQUEE WIDGET
   ======================================== */

.wb-images-horizontal-marquee {
    overflow: hidden;
    position: relative;
}

.wb-images-horizontal-marquee__text {
    /* Los estilos de tipografía se manejan automáticamente por add_typography_controls() */
}

.wb-images-horizontal-marquee__component {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
}

.wb-images-horizontal-marquee__list {
    display: flex;
    align-items: center;
    gap: 40px; /* Espaciado entre imágenes */
    width: max-content; /* Cambio importante: max-content en lugar de fit-content */
    will-change: transform;
    /* Evitar que las imágenes se superpongan */
    flex-shrink: 0;
    /* JavaScript manejará la animación para evitar saltos */
    animation: none;
}

.wb-images-horizontal-marquee__wrapper {
    flex-shrink: 0;
    flex-grow: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    /* Asegurar ancho mínimo para evitar colapso */
    min-width: 120px;
    width: auto;
}

/* Enable pointer events and hover effects on links */
.wb-images-horizontal-marquee__link {
    display: block;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.wb-images-horizontal-marquee__link:hover {
    opacity: 0.85;
}

.wb-images-horizontal-marquee__image {
    display: block;
    width: 120px; /* Ancho fijo por defecto */
    height: 60px; /* Alto fijo por defecto */
    object-fit: contain; /* Mantener proporción */
    flex-shrink: 0;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Mobile */
@media (max-width: 767px) {
    .wb-images-horizontal-marquee__component {
        mask-image: linear-gradient(
            to right,
            transparent 0%,
            black 5%,
            black 95%,
            transparent 100%
        );
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0%,
            black 5%,
            black 95%,
            transparent 100%
        );
    }
    
    .wb-images-horizontal-marquee__image {
        max-height: 40px;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .wb-images-horizontal-marquee__image {
        max-height: 50px;
    }
}

/* Desktop */
@media (min-width: 1025px) {
    .wb-images-horizontal-marquee__image {
        max-height: 60px;
    }
}

/* ========================================
   ACCESSIBILITY & PERFORMANCE
   ======================================== */

/* Reducir movimiento para usuarios que lo prefieren */
@media (prefers-reduced-motion: reduce) {
    .wb-images-horizontal-marquee__list {
        animation-duration: 120s !important;
    }
}

/* Pausar animación cuando no está visible (performance) */
.wb-images-horizontal-marquee:not(.elementor-invisible) .wb-images-horizontal-marquee__list {
    animation-play-state: running;
}

/* ========================================
   FALLBACKS Y COMPATIBILIDAD
   ======================================== */

/* Fallback para navegadores sin soporte de mask */
@supports not (mask-image: linear-gradient(to right, black, black)) {
    .wb-images-horizontal-marquee__component::before,
    .wb-images-horizontal-marquee__component::after {
        content: '';
        position: absolute;
        top: 0;
        width: 100px;
        height: 100%;
        z-index: 2;
        pointer-events: none;
    }
    
    .wb-images-horizontal-marquee__component::before {
        left: 0;
        background: linear-gradient(to right, var(--e-global-color-background, #ffffff), transparent);
    }
    
    .wb-images-horizontal-marquee__component::after {
        right: 0;
        background: linear-gradient(to left, var(--e-global-color-background, #ffffff), transparent);
    }
}