/* ==========================================================================
   banner-logo.css
   Logo banner ("Trusted by") with heading, responsive logo grid and
   monochrome logos that turn white in inverse sections.

   01. Outer Banner
   02. Header (text and image)
   03. Inverse Mode
   04. Logo Grid
   05. Logo Size per Breakpoint
   06. SVG Color Control
   07. Final Adjustments
   ========================================================================== */

/* ==== 01. Outer Banner ==== */
.banner-logo {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* ==== 02. Header (text and image) ==== */
.banner-logo .header {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 8px;
    line-height: 14px;
    color: inherit; /* allows inverse to flip color */
}

.banner-logo .header .text {
    margin: 0;
    padding: 0;
    color: var(--content-primary);
    text-align: center;
    font-family: var(--typography-font-secondary);
    font-size: 14px;
    font-style: normal;
    font-weight: var(--weight-regular);
    letter-spacing: var(--ls-pos-14);
    text-transform: uppercase;
}

.banner-logo .header .icon img,
.banner-logo .header .icon svg {
    width: 14px;
    height: 14px;
    display: inline-block;
    vertical-align: middle;
}

.banner-logo .header .icon svg,
.banner-logo .header .icon svg * {
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* ==== 03. Inverse Mode ==== */
/* Applies when any ancestor has .inverse */

.inverse .banner-logo .header,
.banner-logo.inverse .header {
    color: var(--color-white-a100) !important;
}

.inverse .banner-logo .header .text,
.banner-logo.inverse .header .text {
    color: var(--color-white-a100) !important;
}

.inverse .banner-logo .header .icon img[src$=".svg"],
.banner-logo.inverse .header .icon img[src$=".svg"] {
    filter: brightness(0) invert(1);
}

/* ==== 04. Logo Grid ==== */

.logo-section {
    width: 100%;
    display: flex;
    justify-content: center;
    color: inherit;
}

.logo-section .logo-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    align-items: center;
    gap: 32px !important;
    column-gap: 32px !important;
    row-gap: 32px !important;
    width: auto;
    margin: 0 !important;
    padding: 0 !important;
    --grid-column-gap: 0;
    --grid-row-gap: 0;
}

/* Children: prevent Elementor from stretching items or adding margins */
.logo-section .logo-grid > .elementor-widget {
    width: auto !important; /* stop 100% width */
    max-width: none !important;
    margin: 0 !important; /* remove default widget margins */
    padding: 0 !important;
    justify-self: center;
    align-self: center;
}

/* ==== 05. Logo Size per Breakpoint ==== */
/* Works for inline <svg> and <img src="...svg"> */

/* Mobile ≤767px: max 120px */
.logo-section .logo-grid .logo svg,
.logo-section .logo-grid .logo img {
    display: block;
    height: auto;
    width: auto; /* do not stretch */
    max-width: 120px;
}

/* Tablet (768–1024px): 6 across, gap 24px, max 90px */
@media (min-width: 768px) and (max-width: 1024px) {
    .logo-section .logo-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 24px !important;
        column-gap: 24px !important;
        row-gap: 24px !important;
    }
    .logo-section .logo-grid .logo svg,
    .logo-section .logo-grid .logo img {
        max-width: 90px;
    }
}

/* Desktop (≥1025px): 5 across, gap 40px, max 140px */
@media (min-width: 1025px) {
    .logo-section .logo-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 40px !important;
        column-gap: 40px !important;
        row-gap: 40px !important;
    }
    .logo-section .logo-grid .logo svg,
    .logo-section .logo-grid .logo img {
        max-width: 140px;
    }
}

/* ==== 06. SVG Color Control ==== */

/* Force inline SVGs to follow currentColor (monochrome) */
.logo-section .logo-grid .logo svg,
.logo-section .logo-grid .logo svg * {
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* Inverse mode: any ancestor with .inverse makes logos white */
.inverse .logo-section,
.logo-section.inverse,
.inverse .logo-section .logo-grid {
    color: var(--color-white-a100) !important;
}

/* Fallback for <img src="...svg"> when not inline: invert to white in inverse mode */
.inverse .logo-section .logo-grid .logo img[src$=".svg"],
.logo-section.inverse .logo-grid .logo img[src$=".svg"] {
    filter: brightness(0) invert(1);
}

/* ==== 07. Final Adjustments ==== */
.logo-section .logo-grid img {
    vertical-align: middle;
}

.logo-section .logo-grid .logo img {
    width: 100%; /* fills grid cell */
    height: auto; /* preserves aspect ratio */
    max-width: none; /* overrides earlier fixed max widths */
    object-fit: contain;
}