/* Logo Grid Styles - Updated for dynamic max-width and improved centering */
.elg-logo-grid {
    display: grid;
    gap: 20px;
    align-items: center;
    justify-items: center;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    /* Default grid template - will be overridden by Elementor selectors */
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
}

.elg-logo-item {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    position: relative;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

/* Single spacer div for centering - invisible and no visual impact */
.elg-spacer {
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    visibility: hidden !important;
    pointer-events: none !important;
    grid-column: span 1;
    grid-row: span 1;
}

/* Use calculated width from CSS custom property for flexible sizing */
.elg-logo-item[style*="--calculated-width"] {
    /* Apply the calculated width to the container */
    width: var(--calculated-width);
    max-width: var(--calculated-width);
}

/* Override aspect-ratio to allow images to fill allocated space */
.elg-logo-item img {
    aspect-ratio: unset !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
    max-width: 100%;
    display: block;
}

/* Override any Elementor styles that might interfere */
.elementor-widget-elg-logo-grid .elg-logo-item img,
.elg-logo-item img {
    aspect-ratio: unset !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    min-width: unset !important;
    min-height: unset !important;
    object-fit: contain !important;
    display: block !important;
}

/* Force override any inline styles */
.elg-logo-item img[style*="aspect-ratio"] {
    aspect-ratio: unset !important;
    width: 100% !important;
    height: auto !important;
}

/* Apply calculated width to images for proportional sizing - override Elementor styles */
.elg-logo-item[style*="--calculated-width-value"] img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
}

/* Padding-based logo sizing based on aspect ratio */
/* 1:1 logos get 25% padding on each side */
.elg-logo-item[data-aspect-ratio="1.00"] {
    padding-left: 25%;
    padding-right: 25%;
}

/* 1:2 logos get 20% padding on each side */
.elg-logo-item[data-aspect-ratio="2.00"] {
    padding-left: 20%;
    padding-right: 20%;
}

/* 1:3 logos get 15% padding on each side */
.elg-logo-item[data-aspect-ratio="3.00"] {
    padding-left: 15%;
    padding-right: 15%;
}

/* 1:4 logos get 10% padding on each side */
.elg-logo-item[data-aspect-ratio="4.00"] {
    padding-left: 10%;
    padding-right: 10%;
}

/* 1:5 logos get 5% padding on each side */
.elg-logo-item[data-aspect-ratio="5.00"] {
    padding-left: 5%;
    padding-right: 5%;
}

/* 1:6+ logos get no padding */
.elg-logo-item[data-aspect-ratio="6.00"],
.elg-logo-item[data-aspect-ratio="7.00"],
.elg-logo-item[data-aspect-ratio="8.00"],
.elg-logo-item[data-aspect-ratio="9.00"],
.elg-logo-item[data-aspect-ratio="10.00"] {
    padding-left: 0%;
    padding-right: 0%;
}

/* Smooth scaling for aspect ratios between whole numbers */
.elg-logo-item[data-aspect-ratio="1.50"] {
    padding-left: 22.5%;
    padding-right: 22.5%;
}

.elg-logo-item[data-aspect-ratio="2.50"] {
    padding-left: 17.5%;
    padding-right: 17.5%;
}

.elg-logo-item[data-aspect-ratio="3.50"] {
    padding-left: 12.5%;
    padding-right: 12.5%;
}

.elg-logo-item[data-aspect-ratio="4.50"] {
    padding-left: 7.5%;
    padding-right: 7.5%;
}

.elg-logo-item[data-aspect-ratio="5.50"] {
    padding-left: 2.5%;
    padding-right: 2.5%;
}

.elg-logo-item img:hover {
    opacity: 0.8;
}

.elg-logo-item a {
    display: block;
    text-decoration: none;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Enhanced last row centering using JavaScript-generated classes */
.elg-logo-grid {
    justify-content: center;
}

/* Last row centering for different item counts */
.elg-logo-grid.elg-last-row-1 {
    justify-content: center;
}

.elg-logo-grid.elg-last-row-2 {
    justify-content: center;
}

.elg-logo-grid.elg-last-row-3 {
    justify-content: center;
}

/* Special handling for exactly 4 items in last row - center the group */
.elg-logo-grid.elg-last-row-4 {
    justify-content: center;
}

.elg-logo-grid.elg-last-row-5 {
    justify-content: center;
}

.elg-logo-grid.elg-last-row-6 {
    justify-content: center;
}

.elg-logo-grid.elg-last-row-7 {
    justify-content: center;
}

.elg-logo-grid.elg-last-row-8 {
    justify-content: center;
}

/* Fallback CSS selectors for browsers that support :has() */
/* For 3-column grids */
.elg-logo-grid:has(.elg-logo-item:last-child:nth-child(3n - 1)) {
    justify-content: center;
}

.elg-logo-grid:has(.elg-logo-item:last-child:nth-child(3n - 2)) {
    justify-content: center;
}

/* For 4-column grids */
.elg-logo-grid:has(.elg-logo-item:last-child:nth-child(4n - 1)) {
    justify-content: center;
}

.elg-logo-grid:has(.elg-logo-item:last-child:nth-child(4n - 2)) {
    justify-content: center;
}

.elg-logo-grid:has(.elg-logo-item:last-child:nth-child(4n - 3)) {
    justify-content: center;
}

/* For 5-column grids */
.elg-logo-grid:has(.elg-logo-item:last-child:nth-child(5n - 1)) {
    justify-content: center;
}

.elg-logo-grid:has(.elg-logo-item:last-child:nth-child(5n - 2)) {
    justify-content: center;
}

.elg-logo-grid:has(.elg-logo-item:last-child:nth-child(5n - 3)) {
    justify-content: center;
}

.elg-logo-grid:has(.elg-logo-item:last-child:nth-child(5n - 4)) {
    justify-content: center;
}

/* For 6-column grids */
.elg-logo-grid:has(.elg-logo-item:last-child:nth-child(6n - 1)) {
    justify-content: center;
}

.elg-logo-grid:has(.elg-logo-item:last-child:nth-child(6n - 2)) {
    justify-content: center;
}

.elg-logo-grid:has(.elg-logo-item:last-child:nth-child(6n - 3)) {
    justify-content: center;
}

.elg-logo-grid:has(.elg-logo-item:last-child:nth-child(6n - 4)) {
    justify-content: center;
}

.elg-logo-grid:has(.elg-logo-item:last-child:nth-child(6n - 5)) {
    justify-content: center;
}

/* Enhanced centering for specific last row counts */
/* When exactly 4 items in last row - center the group */
.elg-logo-grid:has(.elg-logo-item:nth-last-child(4):first-child) {
    justify-content: center;
}

/* When exactly 3 items in last row - center the group */
.elg-logo-grid:has(.elg-logo-item:nth-last-child(3):first-child) {
    justify-content: center;
}

/* When exactly 2 items in last row - center the group */
.elg-logo-grid:has(.elg-logo-item:nth-last-child(2):first-child) {
    justify-content: center;
}

/* When exactly 1 item in last row - center the item */
.elg-logo-grid:has(.elg-logo-item:nth-last-child(1):first-child) {
    justify-content: center;
}

/* Alternative approach using CSS Grid alignment for better centering */
.elg-logo-grid {
    justify-content: center;
    align-content: center;
}

/* Smart sizing adjustments - make variations more visible */
.elg-logo-item[style*="grid-column: span 2"] {
    grid-column: span 2;
    background-color: rgba(76, 175, 80, 0.15);
    border: 2px solid rgba(76, 175, 80, 0.4);
    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);
}

.elg-logo-item[style*="grid-column: span 3"] {
    grid-column: span 3;
    background-color: rgba(33, 150, 243, 0.15);
    border: 2px solid rgba(33, 150, 243, 0.4);
    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.2);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .elg-logo-grid {
        gap: 15px;
    }
    
    .elg-logo-item {
        min-height: 80px;
    }
    
    /* Limit smart sizing on tablet - only allow span 2 for very wide logos */
    .elg-logo-item[style*="grid-column: span 3"] {
        grid-column: span 1;
        background-color: transparent;
        border: none;
        box-shadow: none;
    }
    
    .elg-logo-item[style*="grid-column: span 2"] {
        /* Keep span 2 but reduce visual emphasis */
        background-color: rgba(76, 175, 80, 0.1);
        border: 1px solid rgba(76, 175, 80, 0.3);
        box-shadow: 0 1px 2px rgba(76, 175, 80, 0.1);
    }
    
    /* Ensure dynamic sizing still works on tablet */
    .elg-logo-item img {
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .elg-logo-grid {
        gap: 15px;
    }
    
    .elg-logo-item {
        min-height: 80px;
    }
    
    /* Disable smart sizing on mobile - all logos get 1 column */
    .elg-logo-item[style*="grid-column: span 2"],
    .elg-logo-item[style*="grid-column: span 3"] {
        grid-column: span 1;
        background-color: transparent;
        border: none;
        box-shadow: none;
    }
    
    /* Ensure dynamic sizing still works on mobile */
    .elg-logo-item img {
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    .elg-logo-grid {
        gap: 10px;
    }
    
    .elg-logo-item {
        min-height: 60px;
    }
    
    .elg-logo-item img {
        max-width: 100% !important;
    }
}

/* Fallback for browsers that don't support CSS Grid */
@supports not (display: grid) {
    .elg-logo-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .elg-logo-item {
        flex: 1 1 calc(33.333% - 20px);
        min-width: 200px;
    }
}

/* For 7-column grids */
.elg-logo-grid:has(.elg-logo-item:last-child:nth-child(7n - 1)) {
    justify-content: center;
}

.elg-logo-grid:has(.elg-logo-item:last-child:nth-child(7n - 2)) {
    justify-content: center;
}

.elg-logo-grid:has(.elg-logo-item:last-child:nth-child(7n - 3)) {
    justify-content: center;
}

.elg-logo-grid:has(.elg-logo-item:last-child:nth-child(7n - 4)) {
    justify-content: center;
}

.elg-logo-grid:has(.elg-logo-item:last-child:nth-child(7n - 5)) {
    justify-content: center;
}

.elg-logo-grid:has(.elg-logo-item:last-child:nth-child(7n - 6)) {
    justify-content: center;
}

/* For 8-column grids */
.elg-logo-grid:has(.elg-logo-item:last-child:nth-child(8n - 1)) {
    justify-content: center;
}

.elg-logo-grid:has(.elg-logo-item:last-child:nth-child(8n - 2)) {
    justify-content: center;
}

.elg-logo-grid:has(.elg-logo-item:last-child:nth-child(8n - 3)) {
    justify-content: center;
}

.elg-logo-grid:has(.elg-logo-item:last-child:nth-child(8n - 4)) {
    justify-content: center;
}

.elg-logo-grid:has(.elg-logo-item:last-child:nth-child(8n - 5)) {
    justify-content: center;
}

.elg-logo-grid:has(.elg-logo-item:last-child:nth-child(8n - 6)) {
    justify-content: center;
}

.elg-logo-grid:has(.elg-logo-item:last-child:nth-child(8n - 7)) {
    justify-content: center;
}