/* ==========================================================================
   Logo Grid Block
   ========================================================================== */

.logo-grid-block {
    padding: 0px;
}

/* Grid layout — columns driven by CSS custom properties from the template */
.lg-grid {
    display: grid;
    grid-template-columns: repeat(var(--lg-cols-desktop, 5), 1fr);
    column-gap: 32px;
    align-items: center;
    justify-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* Individual logo item */
.lg-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 180px;
}

/* SVG sizing */
.lg-logo-item svg {
    width: 100%;
    height: auto;
    max-height: 80px;
    display: block;
}

/* Non-SVG image sizing */
.lg-logo-item img {
    width: 100%;
    height: auto;
    max-height: 80px;
    object-fit: contain;
    display: block;
}

/* SVG color fill — only applied when .lg-has-color class is present */
.lg-has-color .lg-logo-item svg,
.lg-has-color .lg-logo-item svg path,
.lg-has-color .lg-logo-item svg polygon,
.lg-has-color .lg-logo-item svg circle,
.lg-has-color .lg-logo-item svg rect,
.lg-has-color .lg-logo-item svg ellipse,
.lg-has-color .lg-logo-item svg line,
.lg-has-color .lg-logo-item svg polyline {
    fill: var(--lg-logo-color) !important;
}

/* ---------- Tablet (577px – 991px) ---------- */
@media (max-width: 991px) {
    /* .logo-grid-block {
        padding: 40px 16px;
    } */
    .lg-grid {
        grid-template-columns: repeat(var(--lg-cols-tablet, 3), 1fr);
        column-gap: 24px;
    }
}

/* ---------- Mobile (≤576px) ---------- */
@media (max-width: 576px) {
    /* .logo-grid-block {
        padding: 32px 12px;
    } */
    .lg-grid {
        grid-template-columns: repeat(var(--lg-cols-mobile, 2), 1fr);
        column-gap: 16px;
    }
    .lg-logo-item {
        max-width: 140px;
    }
    .lg-logo-item svg,
    .lg-logo-item img {
        max-height: 60px;
    }
}