/**
 * Partners Component Styles
 * 
 * Vertical logo sliding with transform animations.
 * Each wrapper shows exactly 1 logo at a time, perfectly centered.
 */

/* Decorative elements */
.section--partners {
    position: relative;
    z-index: 2; /* Ensure decorative elements stay above next section */
}

.section--partners:before, .section--partners:after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 40px;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 10; /* Higher z-index to stay above AOS elements */
    
    @media(min-width: 992px){
        background-size: cover;
    }
}

.section--partners:before {
    background-image: url('../../img/brush-line-sand-5.svg');
    top: -40px;
}

.section--partners:after {
    background-image: url('../../img/brush-line-sand-4.svg');
    bottom: -40px;
    background-position: bottom;
}

/* Partners component namespace */
.section--partners {
    
    /* Logo wrapper */
    .logo-wrapper {
        position: relative;
        overflow: hidden;
        height: 14rem; /* h-56 - fixed height container */
        display: flex;
        align-items: flex-start; /* Changed from center to flex-start! */
    }
    
    /* Logo track - contains all logos vertically */
    .logo-track {
        display: flex;
        flex-direction: column;
        will-change: transform;
        transition: transform 1s ease-in-out; /* Slower and smoother: 1s instead of 0.6s */
        width: 100%;
    }
    
    /* Logo items - each takes the inner content height (wrapper - padding) */
    .logo-item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        height: 11rem; /* 14rem wrapper - 3rem padding (1.5rem top + 1.5rem bottom) */
        width: 100%;
    }
    
    /* Image styling */
    .logo-item img {
        max-height: 5rem; /* max-h-20 */
        max-width: 100%;
        width: auto;
        object-fit: contain;
    }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .section--partners .logo-track {
        transition: none;
    }
}