/* Custom CSS for Client Logos - Uniform Grid Layout */

/* Main container for logo section */
.client-logo.wp-block-columns {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 40px 60px !important;
    margin-bottom: 40px !important;
}

/* Individual logo columns */
.client-logo .wp-block-column {
    flex: 0 0 auto !important;
    width: 150px !important;
    max-width: 150px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Logo figures */
.client-logo .wp-block-image,
.client-logo figure {
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* All logo images - uniform sizing */
.client-logo img {
    width: 150px !important;
    height: auto !important;
    max-width: 150px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Remove spacing between logo rows */
/* .wp-block-spacer[aria-hidden="true"] {
    display: none !important;
} */

/* Responsive adjustments */
@media (max-width: 1200px) {
    .client-logo.wp-block-columns {
        gap: 30px 40px !important;
    }

    .client-logo .wp-block-column {
        width: 140px !important;
        max-width: 140px !important;
    }

    .client-logo img {
        width: 140px !important;
        max-width: 140px !important;
    }
}

@media (max-width: 768px) {
    .client-logo.wp-block-columns {
        gap: 20px 30px !important;
    }

    .client-logo .wp-block-column {
        width: 120px !important;
        max-width: 120px !important;
    }

    .client-logo img {
        width: 120px !important;
        max-width: 120px !important;
    }
}

@media (max-width: 480px) {
    .client-logo.wp-block-columns {
        gap: 25px 15px !important;
        justify-content: center !important;
    }

    .client-logo .wp-block-column {
        width: calc(33.333% - 10px) !important;
        max-width: calc(33.333% - 10px) !important;
        flex: 0 0 calc(33.333% - 10px) !important;
    }

    .client-logo img {
        width: 100% !important;
        max-width: 100px !important;
    }
}