/* ── IES Logo Grid Widget ─────────────────────────────────────────────── */

.ies-logo-grid {
    width: 100%;
}

.ies-logo-grid__box {
    width: 100%;
    background-color: var(--ies-white, #fff);
    border-radius: 20px;
    padding: 40px;
    box-sizing: border-box;
}

.ies-logo-grid__box--transparent {
    background-color: transparent !important;
}

/* Default: columns hug each logo so a row of 3 stays grouped in a wide box.
 * --ies-logo-cols comes from “Logos per row”. Horizontal gap is column-gap only. */
.ies-logo-grid__items {
    --ies-logo-cols: 5;
    --ies-logo-count: 5;
    --ies-logo-col-gap: 60px;
    display: grid;
    grid-template-columns: repeat(min(var(--ies-logo-cols), var(--ies-logo-count)), max-content);
    align-items: center;
    justify-content: center;
    justify-items: center;
    column-gap: var(--ies-logo-col-gap);
    row-gap: 50px; /* overridden by Elementor control */
}

/* Equal columns: spread logos across the full box */
.ies-logo-grid--cols-fill .ies-logo-grid__items {
    grid-template-columns: repeat(min(var(--ies-logo-cols), var(--ies-logo-count)), minmax(0, 1fr));
}

.ies-logo-grid__item {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: inherit;
}

.ies-logo-grid__item a {
    display: flex;
    align-items: center;
    justify-content: inherit;
}

.ies-logo-grid__img {
    display: block;
    max-width: 100%;
    height: 70px; /* overridden by Elementor “Logo height” control */
    max-height: 70px;
    width: auto;
    object-fit: contain;
}

/* ── Responsive ──────────────────────────────────────────────────────── */

/* Fallback when the widget CSS vars have not been saved yet (existing instances). */
@media (max-width: 1024px) {
    .ies-logo-grid__items {
        --ies-logo-col-gap: 40px;
        row-gap: 40px;
    }
}

@media (max-width: 767px) {
    /* Flex (not grid) so a leftover last row — e.g. 3×3×2 — can sit as a
     * centered group. Item width still matches “Logos per row”.
     * Gaps / logo size come from the Elementor responsive controls. */
    .ies-logo-grid__items {
        --ies-logo-item-width: calc((100% - (var(--ies-logo-cols) - 1) * var(--ies-logo-col-gap)) / var(--ies-logo-cols));
        display: flex;
        flex-wrap: wrap;
    }

    .ies-logo-grid__item {
        flex: 0 0 var(--ies-logo-item-width);
        max-width: var(--ies-logo-item-width);
        box-sizing: border-box;
    }

    .ies-logo-grid__box {
        padding: 20px;
    }
}