/* “Logos list” Elementor widget: logos in a grid, no pagination. */

.jits-logo-grid {
    --jits-logo-grid-columns: 6;
    --jits-logo-grid-row-gap: 64px;
    --jits-logo-grid-height: 64px;
    --jits-logo-grid-width: 85%;

    display: grid;
    grid-template-columns: repeat(var(--jits-logo-grid-columns), minmax(0, 1fr));
    gap: var(--jits-logo-grid-row-gap) 2rem;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jits-logo-grid__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--jits-logo-grid-height);
}

.jits-logo-grid__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: 4px;

    /* Width from the column, not from the image: an SVG with only a viewBox has
       no intrinsic width and would collapse to 0. */
    img {
        display: block;
        width: var(--jits-logo-grid-width);
        max-width: 100%;
        height: auto;
        max-height: var(--jits-logo-grid-height);
        object-fit: contain;
        transition: transform 400ms ease;
    }
}

/* Same effect as the speakers grid: slight zoom on hover / keyboard focus. */
a.jits-logo-grid__logo:hover img,
a.jits-logo-grid__logo:focus-visible img {
    transform: scale(1.06);
}

a.jits-logo-grid__logo:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 6px;
}

/* Elementor editor only: no matching post. */
.jits-logo-grid__empty {
    padding: 1.5rem;
    border: 1px dashed currentColor;
    text-align: center;
}

@media (max-width: 767px) {
    .jits-logo-grid {
        column-gap: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jits-logo-grid__logo img {
        transition: none;
    }
}