/* Logo Carousel Frontend Styles */

.logo-carousel-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.logo-carousel-container::before,
.logo-carousel-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}

.logo-carousel-container::before {
    left: 0;
    background: linear-gradient(to right, var(--carousel-bg, #fff) 0%, transparent 100%);
}

.logo-carousel-container::after {
    right: 0;
    background: linear-gradient(to left, var(--carousel-bg, #fff) 0%, transparent 100%);
}

.logo-carousel-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: logoCarouselScroll var(--animation-duration, 30s) linear infinite;
    animation-direction: var(--animation-direction, normal);
}

.logo-carousel-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

@keyframes logoCarouselScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.logo-carousel-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 calc(var(--logo-spacing, 80px) / 2);
}

.logo-carousel-item img {
    height: var(--logo-height, 60px) !important;
    width: auto !important;
    max-width: none !important;
    max-height: var(--logo-height, 60px) !important;
    object-fit: contain;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Pause on hover */
.logo-carousel-container.pause-on-hover:hover .logo-carousel-track {
    animation-play-state: paused;
}

/* Grayscale effect */
.logo-carousel-container.grayscale .logo-carousel-item img {
    filter: grayscale(100%);
    opacity: 0.7;
}

.logo-carousel-container.grayscale.grayscale-hover .logo-carousel-item img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Responsive adjustments */
@media screen and (max-width: 1024px) {
    .logo-carousel-item img {
        height: calc(var(--logo-height, 60px) * 0.85) !important;
        max-height: calc(var(--logo-height, 60px) * 0.85) !important;
    }

    .logo-carousel-item {
        padding: 0 calc(var(--logo-spacing, 80px) * 0.7 / 2);
    }
}

@media screen and (max-width: 768px) {
    .logo-carousel-item img {
        height: calc(var(--logo-height, 60px) * 0.7) !important;
        max-height: calc(var(--logo-height, 60px) * 0.7) !important;
    }

    .logo-carousel-item {
        padding: 0 calc(var(--logo-spacing, 80px) * 0.5 / 2);
    }

    .logo-carousel-container::before,
    .logo-carousel-container::after {
        width: 50px;
    }
}

@media screen and (max-width: 480px) {
    .logo-carousel-item img {
        height: calc(var(--logo-height, 60px) * 0.55) !important;
        max-height: calc(var(--logo-height, 60px) * 0.55) !important;
    }

    .logo-carousel-item {
        padding: 0 calc(var(--logo-spacing, 80px) * 0.4 / 2);
    }

    .logo-carousel-container::before,
    .logo-carousel-container::after {
        width: 30px;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .logo-carousel-track {
        animation: none;
    }

    .logo-carousel-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}