/*
==========================================================================
    Component: Overview Supporting Logos
    Enhanced: Featured logo shows in grid on mobile only + individual size control
==========================================================================
*/

.supporting-logo-grid {
    display: grid;
    /* Tighter lower bound for more flexible wrapping */
    grid-template-columns: repeat(auto-fit, minmax(60px, 100px));
    gap: 24px 64px;
    width: 100%;
    align-items: center;
    /* Ensures logo is horizontally centered in its cell */
    justify-items: center;
}

.supporting-logo {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.supporting-logo img {
    max-width: 100px;
    max-height: 70px;
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* --- Size Modifiers (Desktop First) --- */

/* Width-based variants */
.supporting-logo--size-standard-width img {
    max-width: 100px; /* Current default */
}

.supporting-logo--size-small-width img {
    max-width: 80px;
}

.supporting-logo--size-xsmall-width img {
    max-width: 70px;
}

/* Height-based variant */
.supporting-logo--size-standard-height img {
    max-height: 50px; 
}

.supporting-logo--size-small-height img {
    max-height: 40px; 
}


/* --- Featured Logo Mobile Enhancement --- */

/* Hide featured logo in supporting grid on desktop/tablet */
.supporting-logo-grid .featured-logo-mobile {
    display: none;
}

/* Show featured logo in supporting grid only on mobile */
@media (max-width: 767px) {
    .supporting-logo-grid .featured-logo-mobile {
        display: flex;
        /* Inherits all other .supporting-logo and size modifier styles automatically */
    }
}