/* GSL Menu Extensions — Brand Grid Variation
 * Extends gsl-mega-menus base styles.
 */

/* Brand grid layout */
.gsl-mega-menu__container--brand {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--gsl-mm-gap, 1rem);
    width: 100%;
}

/* Brand child tile */
.gsl-mega-menu__child--brand {
    aspect-ratio: 1;
    list-style: none;
}

.gsl-mega-menu__child-link--brand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    text-indent: -9999px;
    overflow: hidden;
    background: #fff;
    border-radius: var(--gsl-mm-radius, 0.25rem);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.gsl-mega-menu__child-link--brand::after {
    content: '';
    position: absolute;
    inset: 8%;
    background-image: var(--gsl-mm-brand-image, none);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.gsl-mega-menu__child-link--brand:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Mobile brand grid */
.gsl-mega-menu__mobile-scroll--brand {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
    align-content: start;
}