/* GRID — independiente de Bootstrap */
.logos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Móvil: 2 por fila */
    gap: 25px;
    justify-items: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
}

.logo-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Imagen: SIN restricciones de altura */
.logos-grid img {
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Tablet */
@media (min-width: 768px) {
    .logos-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Escritorio */
@media (min-width: 992px) {
    .logos-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ===== Scoped mobile-only adjustments (very small phones ≤ 380px) =====
   These rules target only the `.foundation-logos` block and specific utility classes.
   They are intentionally narrow to avoid affecting other logo usages or breakpoints. */
@media (max-width: 380px) {
    .foundation-logos .logos-grid {
        /* keep two columns, but slightly tighter spacing */
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0 8px;
    }

    .foundation-logos .logo-box {
        padding: 6px 0;
        min-height: 72px;
        box-sizing: border-box;
    }

    /* Utility classes to control individual logo sizes on very small phones.
       Apply these classes to the <a class="logo-box ..."> element in the partial.
       These selectors are specific to `.foundation-logos` so they won't affect other logo lists. */
    .foundation-logos .logo-size-xs img {
        max-width: 110px !important;
        max-height: 60px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
    }

    .foundation-logos .logo-size-sm img {
        max-width: 130px !important;
        max-height: 38px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
    }

    .foundation-logos .logo-size-md img {
        max-width: 150px !important;
        max-height: 88px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
    }

    .foundation-logos .logo-size-lg img {
        max-width: 180px !important;
        max-height: 100px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
    }

    .foundation-logos .logo-size-smm img {
        max-width: 180px !important;
        max-height: 73px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
    }

    .foundation-logos .logo-size-lgm img {
        max-width: 180px !important;
        max-height: 130px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
    }

    .foundation-logos .logo-size-mdm img {
        max-width: 180px !important;
        max-height: 120px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* If you prefer to target specific logo positions without touching HTML, use nth-child here
       (uncomment and adjust indexes/values). These overrides are scoped inside .foundation-logos.

    .foundation-logos .logos-grid a:nth-child(2) img { max-width: 150px !important; max-height: 88px !important; }
    .foundation-logos .logos-grid a:nth-child(3) img { max-width: 130px !important; max-height: 72px !important; }
    */
}