/**
 * Homepage Module 2: Partner Logos Section
 *
 * Horizontal row of partner logos with greyscale filter.
 * Cloned from products-testimonials.css partner logos section.
 */

/* ==========================================================================
   SECTION CONTAINER
   ========================================================================== */

.workjam-partner-logos {
    background: #F7F8FA;
    padding: 55px 20px;
}

.workjam-partner-logos__container {
    max-width: 1224px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

/* ==========================================================================
   SECTION TITLE
   ========================================================================== */

.workjam-partner-logos__title {
    font-family: 'Avenir Next', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #2B388F;
    line-height: normal;
    text-align: center;
    margin: 0;
}

/* ==========================================================================
   PARTNER LOGOS GRID
   ========================================================================== */

.workjam-partner-logos__grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    width: 100%;
}

.client-logo {
    height: 89px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* First 5 logos - wider spacing (5 per row) */
.client-logo:nth-child(-n+5) {
    flex: 1 1 16%;
}

/* Logos 6+ - tighter spacing (6 per row) */
.client-logo:nth-child(n+6) {
    flex: 1 1 13%;
}

.client-logo img {
    height: auto;
    max-height: 89px;
    width: 100%;
    object-fit: contain;
    /* Greyscale filter for uniform appearance */
    filter: grayscale(1) opacity(0.85);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Tablet - 980px */
@media (max-width: 980px) {
    .workjam-partner-logos {
        padding: 40px 20px;
    }

    .workjam-partner-logos__grid {
        gap: 32px;
    }

    .client-logo {
        height: 75px;
        flex: 1 1 25%;
    }

    /* Override nth-child rules - uniform 4 logos per row on tablet */
    .client-logo:nth-child(-n+5),
    .client-logo:nth-child(n+6) {
        flex: 1 1 22% !important;
    }

    .client-logo img {
        max-height: 75px;
    }
}

/* Tablet Portrait - 768px */
@media (max-width: 768px) {
    .workjam-partner-logos {
        padding: 35px 20px;
    }

    .workjam-partner-logos__grid {
        gap: 24px;
    }

    .client-logo {
        height: 65px;
    }

    .client-logo img {
        max-height: 65px;
    }
}

/* Mobile - 600px */
@media (max-width: 600px) {
    .workjam-partner-logos {
        padding: 30px 20px;
    }

    .workjam-partner-logos__grid {
        gap: 20px;
    }

    .client-logo {
        height: 60px;
    }

    /* Override nth-child rules - uniform 3 logos per row on mobile */
    .client-logo:nth-child(-n+5),
    .client-logo:nth-child(n+6) {
        flex: 1 1 30% !important;
    }

    .client-logo img {
        max-height: 60px;
    }
}

/* Small Mobile - 400px */
@media (max-width: 400px) {
    .workjam-partner-logos {
        padding: 24px 16px;
    }

    .workjam-partner-logos__title {
        font-size: 14px;
    }

    .workjam-partner-logos__grid {
        gap: 16px;
    }

    .client-logo {
        height: 50px;
    }

    .client-logo img {
        max-height: 50px;
    }
}