/**
 * Logo Carousel V2 Styles
 * Modern continuous ticker with hover effects
 */

.logo-carousel-v2 {
    display: block;
    position: relative;
    padding: 24px 0;
    background: #fff;
    overflow: hidden;
    text-decoration: none;
}

/* When used as a link */
a.logo-carousel-v2 {
    display: block;
    color: inherit;
}

.logo-carousel-v2 .section-header {
    text-align: center;
    margin-bottom: 50px;
}

.logo-carousel-v2 .section-title {
    font-size: 2rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.logo-carousel-v2 .section-subtitle {
    font-size: 1.125rem;
    color: #666;
    margin-bottom: 0;
}

/* Desktop Ticker - shown on desktop, hidden on mobile */
.logo-carousel-v2 .desktop-ticker {
    display: block;
}

@media (max-width: 768px) {
    .logo-carousel-v2 .desktop-ticker {
        display: none !important;
    }
}

.logo-carousel-v2 .desktop-ticker .swiper {
    overflow: hidden;
    mask-image: linear-gradient(
        90deg,
        transparent,
        #fff 20%,
        #fff 80%,
        transparent
    );
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent,
        #fff 20%,
        #fff 80%,
        transparent
    );
}

.logo-carousel-v2 .desktop-ticker .swiper-wrapper {
    align-items: center;
    transition-timing-function: linear !important;
    -webkit-transition-timing-function: linear !important;
}

.logo-carousel-v2 .desktop-ticker .swiper-slide {
    width: auto;
    max-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile Carousels - hidden on desktop, shown on mobile */
.logo-carousel-v2 .mobile-carousels {
    display: none;
    width: 100%;
    overflow: hidden;
}

@media (max-width: 768px) {
    .logo-carousel-v2 .mobile-carousels {
        display: block !important;
    }

    .logo-carousel-v2 .mobile-carousels .swiper {
        width: 100%;
        overflow: hidden;
        mask-image: linear-gradient(
            90deg,
            transparent,
            #fff 20%,
            #fff 80%,
            transparent
        );
        -webkit-mask-image: linear-gradient(
            90deg,
            transparent,
            #fff 20%,
            #fff 80%,
            transparent
        );
    }

    .logo-carousel-v2 .mobile-carousels .swiper-wrapper {
        align-items: center;
        transition-timing-function: linear !important;
        -webkit-transition-timing-function: linear !important;
    }

    .logo-carousel-v2 .mobile-carousels .swiper-slide {
        width: auto;
        max-width: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }
}

/* Logo Images */
.logo-carousel-v2 img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Default: #200981 with 60% opacity (Loss: 2.2) */
    filter: brightness(0) saturate(100%) invert(10%) sepia(52%) saturate(4435%) hue-rotate(247deg) brightness(111%) contrast(122%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

/* Desktop ticker: constrain logo sizes for 11 visible logos */
.logo-carousel-v2 .desktop-ticker img {
    max-width: 105px;
    max-height: 52px;
}

/* Hover state when wrapper is a link */
a.logo-carousel-v2:hover img {
    /* Hover: #4121C7 with 60% opacity (Loss: 1.7) */
    filter: brightness(0) saturate(100%) invert(17%) sepia(100%) saturate(3402%) hue-rotate(250deg) brightness(76%) contrast(109%);
    opacity: 0.6;
}

/* Active/click state when wrapper is a link */
a.logo-carousel-v2:active img {
    /* Click/Active: #3317AA with 60% opacity (Loss: 3.4) */
    filter: brightness(0) saturate(100%) invert(10%) sepia(88%) saturate(4419%) hue-rotate(253deg) brightness(97%) contrast(107%);
    opacity: 0.6;
}

/* Note: Gradient overlays removed - now using mask-image on .swiper containers */

/* Dark theme variant */
.logo-carousel-v2.dark-theme {
    background: #1a1a1a;
}

.logo-carousel-v2.dark-theme .section-title {
    color: #fff;
}

.logo-carousel-v2.dark-theme .section-subtitle {
    color: #ccc;
}

.logo-carousel-v2.dark-theme .logo-link img {
    filter: grayscale(100%) brightness(2);
    opacity: 0.5;
}

.logo-carousel-v2.dark-theme .logo-link:hover img {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .logo-carousel-v2 {
        padding: 0;
    }

    .logo-carousel-v2 .section-header {
        margin-bottom: 30px;
    }

    .logo-carousel-v2 .section-title {
        font-size: 1.5rem;
    }

    .logo-carousel-v2 .logo-link {
        height: 60px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .logo-carousel-v2 .swiper-wrapper {
        animation: none !important;
    }

    .logo-carousel-v2 .logo-link,
    .logo-carousel-v2 .logo-link img {
        transition: none !important;
    }
}