/*
 * Logo Wall
 * Layout: template-parts/flex/logo_wall.php
 * Auto-enqueued by functions.php after css/theme.css.
 */

.logo-wall__heading {
    margin: 0 0 var(--space-xl);
    text-align: center;
    font-size: var(--text-2);
}

/* Fixed-width tiles that wrap, centred, so a short last row sits in the middle. */
.logo-wall__list {
    --tile-width: 10rem;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
}

/* Every logo gets the same landscape tile, so wildly different upload sizes still line up. min-height: 0 stops a tall logo growing its row. */
.logo-wall__item {
    flex: 0 0 var(--tile-width);
    aspect-ratio: 3 / 2;
    min-height: 0;
    padding: var(--space-md);
    border: 0px solid var(--color-contrast);
    border-radius: .75rem;
    background-color: var(--color-muted);
}

/*
 * Logos scale to fit inside the tile, never crop.
 * Multiply blend makes a white background disappear into the tile, so
 * transparent and white-background uploads look the same.
 */
.logo-wall__logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

@media screen and (max-width: 768px) {

    .logo-wall__list {
        --tile-width: 7rem;
    }

    .logo-wall__item {
        padding: var(--space-sm);
    }

}