/* Logo Marquee Frontend Styles */

.logo-marquee-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 40px 0;
}

.marquee {
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap, 10px);
    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%
    );
}

.marquee__group {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--gap, 10px);
    min-width: 100%;
    animation: scroll-marquee var(--duration, 60s) linear infinite;
}

/* CRITICAL: Uniform height LOGOS (not containers) */
.marquee__item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 20px 30px;  /* Vertical and horizontal padding */
    transition: transform 0.3s ease, background 0.3s ease;
}

.marquee__item:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.1);
}

/* All logos same height - width adjusts automatically */
.marquee__item img {
    height: 60px;  /* Fixed height for ALL logos */
    width: auto;   /* Width adjusts to maintain aspect ratio */
    max-width: 250px;  /* Prevent extremely wide logos */
    object-fit: contain;
    /* iOS Safari fix: use webkit prefix */
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);  /* Makes logos white */
    opacity: 0.8;
    transition: opacity 0.3s ease;
    /* Force hardware acceleration on iOS */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* Backup for iOS: Force filter application */
    will-change: filter;
}

/* iOS Safari-specific fix (if filter still not working) */
@supports (-webkit-touch-callout: none) {
    .marquee__item img {
        -webkit-filter: brightness(0) invert(100%);
        filter: brightness(0) invert(100%);
    }
}

.marquee__item:hover img {
    opacity: 1;
}

/* Pause on hover */
.logo-marquee-wrapper:hover .marquee__group {
    animation-play-state: paused;
}

/* Animation */
@keyframes scroll-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-100% - var(--gap, 10px)));
    }
}

/* Responsive adjustments - logo height scales proportionally */
@media (max-width: 1024px) {
    .marquee__item {
        padding: 18px 25px;
    }
    
    .marquee__item img {
        height: 50px;
        max-width: 220px;
    }
}

@media (max-width: 768px) {
    .marquee__item {
        padding: 15px 20px;
    }
    
    .marquee__item img {
        height: 40px;
        max-width: 180px;
    }
    
    .logo-marquee-wrapper {
        padding: 30px 0;
    }
}

@media (max-width: 480px) {
    .marquee__item {
        padding: 12px 18px;
    }
    
    .marquee__item img {
        height: 35px;
        max-width: 150px;
    }
    
    .logo-marquee-wrapper {
        padding: 20px 0;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: light) {
    .marquee__item {
        background: rgba(0, 0, 0, 0.03);
    }
    
    .marquee__item:hover {
        background: rgba(0, 0, 0, 0.06);
    }
    
    .marquee__item img {
        -webkit-filter: none;  /* Original colors for light mode - iOS fix */
        filter: none;  /* Original colors for light mode */
        opacity: 0.7;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .marquee__group {
        animation: none;
    }
    
    .marquee {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }
    
    .marquee__item {
        scroll-snap-align: center;
    }
}

/* Focus styles for accessibility */
.marquee__item:focus-within {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

/* Performance optimization */
.marquee__group {
    will-change: transform;
    backface-visibility: hidden;
}

/* Alternative style for colored backgrounds */
.logo-marquee-wrapper.style-light .marquee__item {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.logo-marquee-wrapper.style-light .marquee__item img {
    -webkit-filter: none;  /* iOS fix */
    filter: none;
    opacity: 1;
}

.logo-marquee-wrapper.style-light .marquee__item:hover {
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}