/* Image Gallery Manager - Frontend Styles (No Lightbox) */

/* Gallery Container - Force proper grid */
.igm-gallery {
    display: grid !important;
    gap: var(--igm-spacing, 10px);
    margin: 20px 0;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100%;
}

/* Top 4 Gallery Specific Styling */
.igm-gallery-top4 {
    max-width: 100%;
}

/* Ensure top4 galleries don't exceed 4 items per row - FORCE grid columns */
.igm-gallery-top4[data-columns="4"] { 
    grid-template-columns: repeat(4, 1fr) !important; 
}

.igm-gallery-top4[data-columns="3"] { 
    grid-template-columns: repeat(3, 1fr) !important; 
}

.igm-gallery-top4[data-columns="2"] { 
    grid-template-columns: repeat(2, 1fr) !important; 
}

.igm-gallery-top4[data-columns="1"] { 
    grid-template-columns: 1fr !important; 
}

/* Dynamic grid columns based on data attribute - FORCE proper columns */
.igm-gallery[data-columns="2"] { 
    grid-template-columns: repeat(2, 1fr) !important; 
}
.igm-gallery[data-columns="3"] { 
    grid-template-columns: repeat(3, 1fr) !important; 
}
.igm-gallery[data-columns="4"] { 
    grid-template-columns: repeat(4, 1fr) !important; 
}
.igm-gallery[data-columns="5"] { 
    grid-template-columns: repeat(5, 1fr) !important; 
}

/* Gallery Item - PERFECT 1:1 ratio with multiple fallback methods */
.igm-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #f8f9fa;
    
    /* Method 1: aspect-ratio (modern browsers) */
    aspect-ratio: 1 / 1;
    
    /* Method 2: padding-bottom fallback */
    width: 100%;
    
    /* Force square dimensions */
    min-height: 150px;
    max-height: 300px;
    
    transition: box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Fallback for browsers that don't support aspect-ratio */
.igm-gallery-item:not([style*="aspect-ratio"]) {
    height: 0;
    padding-bottom: 100%; /* Creates 1:1 aspect ratio */
}

.igm-gallery-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Gallery Link - Position absolute to fill container perfectly */
.igm-gallery-item a {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none;
    display: block !important;
}

/* Image Styling - FORCE perfect square fit */
.igm-gallery-item img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    
    /* Force immediate visibility */
    opacity: 1 !important;
    visibility: visible !important;
    
    /* Remove any theme overrides */
    max-width: none !important;
    max-height: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Loading Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Remove problematic animations that might hide content */
.igm-gallery-item {
    opacity: 1 !important; /* Force all items to be visible immediately */
}

/* Theme override protection */
.igm-gallery * {
    box-sizing: border-box !important;
}

/* Ensure no theme styles interfere with gallery layout */
.igm-gallery {
    clear: both !important;
    overflow: visible !important;
}

.igm-gallery .igm-gallery-item {
    float: none !important;
    display: block !important;
    clear: none !important;
    margin: 0 !important;
}

/* Force proper image dimensions regardless of theme */
.igm-gallery img {
    height: auto !important;
    width: auto !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    vertical-align: baseline !important;
}

/* Responsive Design - FORCE proper column reduction */
@media (max-width: 1200px) {
    .igm-gallery[data-columns="5"] { 
        grid-template-columns: repeat(4, 1fr) !important; 
    }
    
    /* Top4 galleries - reduce to 3 columns on large tablets */
    .igm-gallery-top4[data-columns="4"] { 
        grid-template-columns: repeat(3, 1fr) !important; 
    }
}

@media (max-width: 900px) {
    .igm-gallery[data-columns="4"],
    .igm-gallery[data-columns="5"] { 
        grid-template-columns: repeat(3, 1fr) !important; 
    }
    
    /* Top4 galleries - reduce to 2 columns on tablets */
    .igm-gallery-top4[data-columns="4"],
    .igm-gallery-top4[data-columns="3"] { 
        grid-template-columns: repeat(2, 1fr) !important; 
    }
}

@media (max-width: 600px) {
    .igm-gallery[data-columns="3"],
    .igm-gallery[data-columns="4"],
    .igm-gallery[data-columns="5"] { 
        grid-template-columns: repeat(2, 1fr) !important; 
    }
    
    /* Top4 galleries - 2 columns on mobile */
    .igm-gallery-top4[data-columns="4"],
    .igm-gallery-top4[data-columns="3"],
    .igm-gallery-top4[data-columns="2"] { 
        grid-template-columns: repeat(2, 1fr) !important; 
    }
}

@media (max-width: 400px) {
    .igm-gallery[data-columns="2"] { 
        grid-template-columns: 1fr !important; 
    }
    
    /* Top4 galleries - single column on small mobile */
    .igm-gallery-top4 { 
        grid-template-columns: 1fr !important; 
    }
}

/* Lazy Loading Support - Remove problematic lazy loading */
.igm-gallery-item img[loading="lazy"] {
    /* Remove opacity transition that might hide images */
    opacity: 1 !important;
    transition: none;
}

.igm-gallery-item img[loading="lazy"].loaded {
    opacity: 1 !important;
}

/* Force all images to load immediately */
.igm-gallery-item img {
    loading: eager !important; /* Override lazy loading */
}

/* Modern Focus Styles for Accessibility */
.igm-gallery-item a:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .igm-gallery-item {
        border: 2px solid;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .igm-gallery-item,
    .igm-gallery-item img {
        animation: none !important;
        transition: none !important;
    }
    
    .igm-gallery {
        opacity: 1;
    }
    
    .igm-gallery-item {
        opacity: 1;
    }
}

/* Print Styles */
@media print {
    .igm-gallery {
        display: block;
    }
    
    .igm-gallery-item {
        break-inside: avoid;
        page-break-inside: avoid;
        margin-bottom: 20px;
    }
}