/**
 * Image Marquee Styles
 */

.image-marquee-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: var(--marquee-height, 100px);
    background: transparent;
}

.image-marquee-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.image-marquee-track {
    display: flex;
    align-items: center;
    height: 100%;
    width: fit-content;
    gap: var(--marquee-gap, 40px);
    animation: marquee-scroll var(--marquee-speed, 30s) linear infinite;
    animation-direction: var(--marquee-direction, normal);
}

.image-marquee-wrapper.marquee-pause-on-hover:hover .image-marquee-track {
    animation-play-state: paused;
}

.image-marquee-item {
    flex-shrink: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}

.image-marquee-item img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.image-marquee-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Left scrolling animation */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Right scrolling animation */
.image-marquee-wrapper[style*="--marquee-direction: right"] .image-marquee-track {
    animation-name: marquee-scroll-right;
}

@keyframes marquee-scroll-right {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .image-marquee-wrapper {
        height: calc(var(--marquee-height, 100px) * 0.75);
    }
    
    .image-marquee-item {
        padding: 0 5px;
    }
    
    .image-marquee-item img {
        max-width: 120px;
    }
}

@media (max-width: 480px) {
    .image-marquee-wrapper {
        height: calc(var(--marquee-height, 100px) * 0.6);
    }
    
    .image-marquee-item {
        padding: 0 3px;
    }
    
    .image-marquee-item img {
        max-width: 80px;
    }
    
    /* Reduce gap on very small screens */
    .image-marquee-track {
        gap: calc(var(--marquee-gap, 40px) * 0.5);
    }
}

/* Optional: Remove grayscale on hover if you want colored logos */
.image-marquee-item img:hover {
    filter: grayscale(0%);
    opacity: 1;
}