/*
 * styles.css
 * Updated with:
 * - hover animation
 * - smaller logo height (25px)
 * - drastically reduced gaps
 */

/* --- FLEX CONTAINER --- */
.logo-wall {
    display: flex;
    flex-wrap: wrap;

    /* drastically reduced spacing */
    gap: 0.25rem; 
    width: 100%;

    /* justify full rows */
    justify-content: space-between;
}

/* keeps last row left-aligned */
.logo-wall::after {
    content: "";
    flex: auto;
}

/* --- LOGO TILE --- */
.logo-tile {
    background: #ffffff;
    padding: 0.25rem;           /* reduced padding */
    border-radius: 6px;

    border: 1px solid #e5e5e5;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* --- HOVER ANIMATION --- */
.logo-tile:hover {
    transform: scale(1.5);     /* gentle zoom */
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    z-index: 10;
}

/* --- LOGO IMAGE SIZING --- */
.logo-tile img {
    max-height: 60px;           /* NEW requirement */
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

/* Optional: tighter on very small screens */
@media (max-width: 576px) {
    .logo-wall {
        gap: 0.15rem;
    }
    .logo-tile {
        padding: 0.2rem;
    }
}