/* Marquee Logos Block Styles */

.marquee-logos {
    --marquee-speed: 25s;
    --logo-height: 60px;
    --logo-gap: 4rem;
}

/* Speed variations */
.marquee-logos--slow {
    --marquee-speed: 40s;
}

.marquee-logos--normal {
    --marquee-speed: 25s;
}

.marquee-logos--fast {
    --marquee-speed: 15s;
}

/* Height variations */
.marquee-logos--small {
    --logo-height: 40px;
}

.marquee-logos--medium {
    --logo-height: 60px;
}

.marquee-logos--large {
    --logo-height: 80px;
}

/* Track container */
.marquee-logos__track {
    display: flex;
    width: max-content;
    animation: marquee-scroll var(--marquee-speed) linear infinite;
}

/* Reverse direction */
.marquee-logos--reverse .marquee-logos__track {
    animation-direction: reverse;
}

/* Content wrapper (duplicated for seamless loop) */
.marquee-logos__content {
    display: flex;
    align-items: center;
    gap: var(--logo-gap);
    padding-right: var(--logo-gap);
}

/* Individual logo item */
.marquee-logos__item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

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

/* Links */
a.marquee-logos__item {
    text-decoration: none;
}

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

/* Pause on hover */
.marquee-logos:hover .marquee-logos__track {
    animation-play-state: paused;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .marquee-logos {
        --logo-gap: 2.5rem;
    }

    .marquee-logos--small {
        --logo-height: 30px;
    }

    .marquee-logos--medium {
        --logo-height: 45px;
    }

    .marquee-logos--large {
        --logo-height: 60px;
    }
}