/**
 * ==============================================================================
 * CSS: mk-grid-brand-logos (Zero JS - Pure Visual Grid)
 * ==============================================================================
 */

.mk-grid-brand-logos {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: clamp(1.5rem, 3.5vw, 4.5rem) 0;
    background-color: #ffffff;
    font-family: 'Inter', system-ui, sans-serif;
}

.mk-grid-brand-logos__container {
    width: 100%;
    max-width: 75rem; /* 1200px */
    margin: 0 auto;
    padding: 0 1.25rem;
    box-sizing: border-box;
}

/* Grilla Mobile-First: 4 columnas simétricas y compactas (4 x 3 = 12 logos) */
.mk-grid-brand-logos__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem 0.5rem;
    align-items: center;
    justify-items: center;
    width: 100%;
}

.mk-grid-brand-logos__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 3.5rem; /* Altura contenida para mobile */
    padding: 0.25rem 0.5rem;
    box-sizing: border-box;
    user-select: none;
}

.mk-grid-brand-logos__img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 2.25rem; /* Tamaño proporcional para 4 columnas en celular */
    object-fit: contain;
    opacity: 1;
    filter: none;
    transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: block;
    pointer-events: none;
}

/* Desktop intermedio: 4 columnas con mayor holgura */
@media (min-width: 48rem) {
    .mk-grid-brand-logos__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem 1.5rem;
    }

    .mk-grid-brand-logos__item {
        height: 5.5rem;
        padding: 0.5rem 1rem;
    }

    .mk-grid-brand-logos__img {
        max-height: 4rem;
    }
}

/* Desktop Widescreen: 6 columnas simétricas (6 x 2 = 12 logos) */
@media (min-width: 64rem) {
    .mk-grid-brand-logos__grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 2.5rem 1.5rem;
    }

    .mk-grid-brand-logos__item {
        height: 6.5rem;
        padding: 0.75rem 1.25rem;
    }

    .mk-grid-brand-logos__img {
        max-height: 5rem;
    }

    .mk-grid-brand-logos__item:hover .mk-grid-brand-logos__img {
        transform: scale(1.09);
    }
}