/**
 * Partners Section Styles
 * Marquee animation for partner logos
 *
 * @package Edufin
 */

/* =================================
   SECTION LAYOUT
   ================================= */

.partners-section {
    background-color: var(--color-base-white);
    padding: var(--space-30) 0;
    overflow: hidden;
}

.partners-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.75rem;
    max-width: var(--page-width);
    margin: 0 auto;
}

.partners-title {
    font-family: var(--font-primary);
    font-size: var(--text-3xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    color: var(--color-base-black);
    text-align: center;
    text-transform: capitalize;
    margin: 0;
}

/* =================================
   MARQUEE WRAPPER
   ================================= */

.partners-marquee-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Fade gradient overlays */
.partners-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 7.5rem;
    z-index: 2;
    pointer-events: none;
}

.partners-fade--left {
    left: 0;
    background: linear-gradient(to right, var(--color-base-white) 5%, transparent 95%);
}

.partners-fade--right {
    right: 0;
    background: linear-gradient(to left, var(--color-base-white) 5%, transparent 95%);
}

/* =================================
   MARQUEE ROWS
   ================================= */

.partners-marquee {
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.partners-marquee + .partners-marquee {
    margin-top: var(--space-10);
}

/* =================================
   LOGO ITEMS
   ================================= */

.partners-logo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--space-20);
}

.partners-logo-item img {
    display: block;
    height: auto;
    width: auto;
    max-height: 2.625rem;
    max-width: 10rem;
    object-fit: contain;
    filter: grayscale(0);
    opacity: 1;
    transition: opacity var(--transition-base), filter var(--transition-base);
}

.partners-logo-item:hover img {
    opacity: 0.8;
}

/* Larger logo variant (e.g., Bank Jateng) */
.partners-logo-item--large img {
    max-height: 3.5rem;
    max-width: 12.5rem;
}

/* =================================
   RESPONSIVE ADJUSTMENTS
   ================================= */

@media (max-width: 64rem) {
    .partners-section {
        padding: var(--space-20) 0;
    }

    .partners-container {
        gap: var(--space-12);
    }

    .partners-title {
        font-size: var(--text-2xl);
    }

    .partners-logo-item {
        margin-right: var(--space-12);
    }

    .partners-logo-item img {
        max-height: var(--space-8);
        max-width: 7.5rem;
    }

    .partners-logo-item--large img {
        max-height: 2.625rem;
        max-width: 9.375rem;
    }

    .partners-fade {
        width: var(--space-20);
    }

    .partners-marquee + .partners-marquee {
        margin-top: var(--space-8);
    }
}

@media (max-width: 48rem) {
    .partners-section {
        padding: var(--space-16) 0;
    }

    .partners-container {
        gap: var(--space-10);
    }

    .partners-title {
        font-size: var(--text-xl);
        padding: 0 var(--space-4);
    }

    .partners-logo-item {
        margin-right: var(--space-8);
    }

    .partners-logo-item img {
        max-height: 1.75rem;
        max-width: 6.25rem;
    }

    .partners-logo-item--large img {
        max-height: 2.25rem;
        max-width: 8.125rem;
    }

    .partners-fade {
        width: 3.75rem;
    }

    .partners-marquee + .partners-marquee {
        margin-top: var(--space-6);
    }
}

@media (max-width: 30rem) {
    .partners-logo-item {
        margin-right: var(--space-6);
    }

    .partners-logo-item img {
        max-height: var(--space-6);
        max-width: var(--space-20);
    }

    .partners-logo-item--large img {
        max-height: var(--space-8);
        max-width: 6.875rem;
    }

    .partners-fade {
        width: var(--space-10);
    }
}

/* =================================
   REDUCED MOTION
   ================================= */

@media (prefers-reduced-motion: reduce) {
    .partners-marquee {
        /* Animation will be paused via JS */
    }
}