/**
 * Styles pour la Galerie Masonry SD Tool
 */

/* Variables CSS pour la configuration */
:root {
    --sd-gallery-columns: 3;
    --sd-gallery-gap: 10px;
}

/* Container principal */
.sd-masonry-gallery {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Mode Masonry */
.sd-gallery-masonry {
    column-count: var(--sd-gallery-columns);
    column-gap: var(--sd-gallery-gap);
    column-fill: balance;
}

.sd-gallery-masonry .sd-gallery-item {
    break-inside: avoid;
    margin-bottom: var(--sd-gallery-gap);
    display: block;
    position: relative;
    overflow: hidden;
}

.sd-gallery-masonry .sd-gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: all 0.3s ease;
}

/* Mode Grille */
.sd-gallery-grid {
    display: grid;
    grid-template-columns: repeat(var(--sd-gallery-columns), 1fr);
    gap: var(--sd-gallery-gap);
}

.sd-gallery-grid .sd-gallery-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
}

.sd-gallery-grid .sd-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: all 0.3s ease;
}

/* Superposition */
.sd-gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.sd-gallery-item:hover .sd-gallery-overlay {
    opacity: 1;
}

/* Liens */
.sd-gallery-item a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.sd-gallery-item a:hover {
    text-decoration: none;
}

/* Responsive - Tablette */
@media (max-width: 1024px) {
    .sd-gallery-masonry {
        column-count: min(var(--sd-gallery-columns), 3);
    }
    
    .sd-gallery-grid {
        grid-template-columns: repeat(min(var(--sd-gallery-columns), 3), 1fr);
    }
}

@media (max-width: 768px) {
    .sd-gallery-masonry {
        column-count: min(var(--sd-gallery-columns), 2);
    }
    
    .sd-gallery-grid {
        grid-template-columns: repeat(min(var(--sd-gallery-columns), 2), 1fr);
    }
}

@media (max-width: 480px) {
    .sd-gallery-masonry {
        column-count: 1;
    }
    
    .sd-gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* Animations et transitions */
.sd-gallery-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sd-gallery-item:hover {
    transform: translateY(-2px);
}

.sd-gallery-item img {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.sd-gallery-item:hover img {
    transform: scale(1.05);
}

/* Accessibilité */
.sd-gallery-item img[alt] {
    /* Assurer que les images avec alt sont bien visibles */
}

/* Focus pour l'accessibilité */
.sd-gallery-item a:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

/* Loading states - Version simplifiée */
.sd-gallery-item img {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Animation de chargement pour les images lazy */
.sd-gallery-item img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

/* Force l'affichage des images dans l'éditeur Elementor */
.elementor-editor-active .sd-gallery-item img,
.elementor-preview-mode .sd-gallery-item img {
    opacity: 1 !important;
}

/* Fallback pour les navigateurs qui ne supportent pas loading="lazy" */
@supports not (loading: lazy) {
    .sd-gallery-item img {
        opacity: 1;
    }
}

/* Fallback pour les navigateurs qui ne supportent pas CSS Grid */
@supports not (display: grid) {
    .sd-gallery-grid {
        display: flex;
        flex-wrap: wrap;
        margin: calc(-1 * var(--sd-gallery-gap) / 2);
    }
    
    .sd-gallery-grid .sd-gallery-item {
        flex: 0 0 calc(100% / var(--sd-gallery-columns) - var(--sd-gallery-gap));
        margin: calc(var(--sd-gallery-gap) / 2);
    }
}

/* Fallback pour les navigateurs qui ne supportent pas CSS Columns */
@supports not (column-count: 1) {
    .sd-gallery-masonry {
        display: flex;
        flex-wrap: wrap;
        margin: calc(-1 * var(--sd-gallery-gap) / 2);
    }
    
    .sd-gallery-masonry .sd-gallery-item {
        flex: 0 0 calc(100% / var(--sd-gallery-columns) - var(--sd-gallery-gap));
        margin: calc(var(--sd-gallery-gap) / 2);
    }
}