/* SYSTEM UI OVERRIDE: SECTION 2 (THE LOGO GATEWAY) */

.logo-gateway-section {
    background-color: #000000;
    padding: 60px 0;
    /* border-bottom removed for seamless flow */
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.gateway-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding: 0 20px;
}

/* ACTION 2: THE TYPOGRAPHY (THE FLEX) */
.gateway-eyebrow {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 24px;
    display: inline-block;
    position: relative;
    z-index: 11;
    padding: 0;
    border: none;
    background: transparent;
    text-shadow: none;
}

/* ACTION 3: THE ENTERPRISE ROSTER */
.gateway-logos {
    display: flex;
    justify-content: space-between; /* Space them out evenly */
    align-items: center;
    flex-wrap: nowrap; /* Prevent wrapping on desktop */
    gap: 40px; /* Reduced gap to fit all */
    position: relative;
    z-index: 10;
    padding: 20px 0; /* Remove side padding to maximize width */
    max-width: 1200px; /* Increased width */
    width: 100%;
    margin: 0 auto;
    overflow-x: auto; /* Allow horizontal scroll on very small screens if needed, but hide scrollbar usually */
    scrollbar-width: none; /* Firefox */
}
.gateway-logos::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* Atmospheric Glow from Top (Bridging Hero) */
.logo-gateway-section::before {
    content: '';
    position: absolute;
    top: 0; /* Align with section top to avoid hard line */
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 100%;
    /* Very subtle gradient */
    background: radial-gradient(ellipse at center, rgba(0, 255, 204, 0.03) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
    filter: blur(60px);
}

/* 
   UNIVERSAL LOGO FIX
   Goal: Make all logos look like white silhouettes on black, regardless of source format.
*/

/* 1. Standard Transparent Logos (PNGs) */
img.gateway-logo-item {
    height: 32px;
    width: auto;
    max-width: 120px; /* Prevent any single logo from taking too much space */
    object-fit: contain;
    flex-shrink: 0; /* Prevent squishing */
    
    /* 
       Force everything to white silhouette:
       brightness(0) -> Turns all non-transparent pixels black
       invert(1) -> Turns that black to white
       opacity(0.5) -> Dims it for the inactive state
    */
    filter: brightness(0) invert(1) opacity(0.5);
    
    transition: all 0.3s ease;
    cursor: default;
    user-select: none;
    padding: 0 15px;
}

/* Hover: "Light turning on" - Full White + Teal Glow */
img.gateway-logo-item:hover {
    filter: brightness(0) invert(1) opacity(1) drop-shadow(0 0 8px rgba(0, 255, 204, 0.6));
    transform: scale(1.05);
}

/* 
   2. White Background Logos (JPGs/PNGs with white bg) 
   Class: .logo-with-bg
   Method: Invert colors + Screen Blend Mode
*/
img.gateway-logo-item.logo-with-bg {
    /* 
       grayscale(100%) -> Remove color
       invert(100%) -> Turns White BG to Black, Dark Text to White
       opacity(0.6) -> Dim slightly (needs to be brighter than transparent ones usually)
    */
    filter: grayscale(100%) invert(100%) opacity(0.6);
    
    /* Screen blend mode makes the Black BG (result of inversion) transparent */
    mix-blend-mode: screen; 
    
    /* Remove base brightness filter override */
    border-radius: 0;
}

/* Hover for White BG logos */
img.gateway-logo-item.logo-with-bg:hover {
    filter: grayscale(100%) invert(100%) opacity(1) drop-shadow(0 0 8px rgba(0, 255, 204, 0.6));
    mix-blend-mode: screen;
    transform: scale(1.05);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .gateway-logos {
        flex-wrap: wrap; /* Allow wrapping on tablet/mobile */
        justify-content: center;
        gap: 30px 40px;
    }
}

@media (max-width: 768px) {
    .gateway-logos {
        gap: 20px 30px;
    }
    
    img.gateway-logo-item {
        height: 24px;
        flex-basis: auto; /* Let them size naturally */
        margin-bottom: 10px;
    }
}