/**
 * Logo Carousel Styles
 * For Splide.js logo carousel flexible content block
 * MOBILE OVERFLOW FIXED
 */

/* ============================================
   LOGO CAROUSEL BLOCK
   ============================================ */

.mvol-logo-carousel-block {
    margin: 1rem 0;
    max-width: 100%;
    overflow: hidden; /* Prevent block overflow */
}

.mvol-logo-carousel-title {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 2rem 0;
    text-align: center;
}

/* Logo Carousel Container */
.mvol-logo-carousel {
    background: #ffffff;
    padding: 1rem 1.5rem; /* Reduced horizontal padding */
    border-radius: 8px;
    overflow: hidden !important; /* Force prevent overflow */
    max-width: 100%;
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Splide container constraints */
.mvol-logo-carousel .splide {
    max-width: 100%;
    overflow: hidden;
}

/* Prevent horizontal overflow */
.mvol-logo-carousel .splide__track {
    overflow: hidden !important; /* Changed from visible */
    max-width: 100%;
}

.mvol-logo-carousel .splide__list {
    display: flex;
    max-width: 100%;
}

/* Logo Slide */
.mvol-logo-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    border: 1px solid #ddd;
    box-sizing: border-box;
}

/* Logo Container */
.mvol-logo-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* Logo Link */
.mvol-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    transition: all 0.3s ease;
}

.mvol-logo-link:hover {
    transform: scale(1.05);
}

/* Logo Image - MORE SPECIFIC SELECTOR */
.mvol-logo-carousel .mvol-logo-image {
    max-width: 100%;
    max-height: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.mvol-logo-carousel .mvol-logo-link:hover .mvol-logo-image,
.mvol-logo-carousel .mvol-logo-container:hover .mvol-logo-image {
    filter: grayscale(0%);
    opacity: 1;
}

/* Non-linked logos (no hover scale) */
.mvol-logo-container:not(.mvol-logo-link):hover {
    transform: none;
}

/* ============================================
   SPLIDE CUSTOMIZATION FOR LOGO CAROUSEL
   ============================================ */

/* Navigation Arrows */
.mvol-logo-carousel .splide__arrow {
    background: #a2228d;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.mvol-logo-carousel .splide__arrow:hover {
    background: #8a1c76;
    opacity: 1;
}

.mvol-logo-carousel .splide__arrow svg {
    fill: #ffffff;
    width: 1.2rem;
    height: 1.2rem;
}

.mvol-logo-carousel .splide__arrow--prev {
    left: 1rem;
}

.mvol-logo-carousel .splide__arrow--next {
    right: 1rem;
}

/* Pagination Dots */
.mvol-logo-carousel .splide__pagination {
    bottom: -2rem;
    padding: 0;
}

.mvol-logo-carousel .splide__pagination__page {
    background: #ddd;
    width: 10px;
    height: 10px;
    margin: 0 4px;
    opacity: 1;
    transition: all 0.3s ease;
}

.mvol-logo-carousel .splide__pagination__page.is-active {
    background: #a2228d;
    transform: scale(1.2);
}

.mvol-logo-carousel .splide__pagination__page:hover {
    background: #8a1c76;
}

/* Track spacing */
.mvol-logo-carousel .splide__track {
    padding: 1rem 0;
}

/* Slide spacing - NO BORDERS */
.mvol-logo-carousel .splide__slide {
    box-sizing: border-box;
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */

@media (max-width: 1024px) {
    .mvol-logo-carousel-title {
        font-size: 1.75rem;
    }

    .mvol-logo-carousel {
        padding: 1rem; /* Reduced padding */
    }

    .mvol-logo-slide {
        min-height: 100px;
    }

    .mvol-logo-carousel .mvol-logo-image {
        max-height: 80px;
    }

    .mvol-logo-carousel .splide__arrow {
        width: 2rem;
        height: 2rem;
    }

    .mvol-logo-carousel .splide__arrow svg {
        width: 1rem;
        height: 1rem;
    }

    .mvol-logo-carousel .splide__arrow--prev {
        left: 0;
    }

    .mvol-logo-carousel .splide__arrow--next {
        right: 0;
    }
}

/* ============================================
   RESPONSIVE - MOBILE (CRITICAL FIX)
   ============================================ */

@media (max-width: 768px) {
    .mvol-logo-carousel-block {
        margin: 0.5rem 0;
        overflow: hidden; /* Critical for mobile */
    }

    .mvol-logo-carousel-title {
        font-size: 1.5rem;
        margin-bottom: 1rem; /* Reduced */
        padding: 0 0.5rem; /* Add slight padding */
    }

    .mvol-logo-carousel {
        padding: 0.5rem !important; /* Minimal padding on mobile */
        border-radius: 4px; /* Smaller radius */
    }

    .mvol-logo-slide {
        padding: 0.25rem; /* Minimal padding */
        min-height: 80px;
        border: none; /* Remove borders on mobile */
    }

    .mvol-logo-carousel .mvol-logo-image {
        max-height: 60px;
    }

    /* Hide arrows on mobile, show dots instead */
    .mvol-logo-carousel .splide__arrows {
        display: none !important;
    }

    .mvol-logo-carousel .splide__pagination {
        display: flex !important;
        bottom: -1.5rem;
    }

    .mvol-logo-carousel .splide__track {
        padding: 0.5rem 0;
        overflow: hidden !important;
    }

    .mvol-logo-carousel .splide__slide {
        border-right: none;
    }

   
}

@media (max-width: 480px) {
    .mvol-logo-carousel-title {
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
    }

    .mvol-logo-carousel {
        padding: 0.25rem !important; /* Even less padding on small mobile */
    }

    .mvol-logo-slide {
        min-height: 70px;
        padding: 0;
    }

    .mvol-logo-carousel .mvol-logo-image {
        max-height:fit-content;
    }

    .mvol-logo-carousel .splide__pagination {
        bottom: -1rem;
    }

    .mvol-logo-carousel .splide__pagination__page {
        width: 8px;
        height: 8px;
        margin: 0 3px;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

.mvol-logo-link:focus-visible {
    outline: 2px solid #a2228d;
    outline-offset: 4px;
    border-radius: 4px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .mvol-logo-container,
    .mvol-logo-link,
    .mvol-logo-carousel .mvol-logo-image,
    .mvol-logo-carousel .splide__arrow,
    .mvol-logo-carousel .splide__pagination__page {
        transition: none;
    }

    .mvol-logo-link:hover,
    .mvol-logo-carousel .splide__arrow:hover {
        transform: none;
    }
}