/* CSS par défaut pour Gallery Mansory Custom */

* {
    box-sizing: border-box;
}

/* CSS columns layout pour effet masonry */
.gmc-gallery {
    column-width: 250px;
    column-gap: 1rem;
}

/* Conteneur d'item de galerie */
.gmc-gallery-item {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-bottom: 1rem;
    /* Empêcher les items de se couper entre les colonnes */
    break-inside: avoid;
    overflow: hidden;
    cursor: pointer;
}

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

/* Effet zoom au survol */
.gmc-gallery-item:hover img {
    transform: scale(1.05);
}

/* Featured image : effet zoom au survol */
.entry-figure span {
    display: block;
    overflow: hidden;
}

.entry-figure span img {
    transition: transform 0.3s ease;
}

.entry-figure span:hover img {
    transform: scale(1.05);
}

.entry-figure > span {
    overflow: hidden;
    display: inline-block;
}

/* Badge vidéo côté front (identique au backoffice) */
.gmc-video-badge-front {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    z-index: 2;
    pointer-events: none;
    width: 37px;
    height: 27px;
}

.gmc-video-badge-front svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* Rétrocompatibilité : images directes sans wrapper */
.gmc-gallery > img {
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
    display: block;
    break-inside: avoid;
}

/* Responsive : forcer 2 colonnes sur mobile */
@media (max-width: 767px) {
    .gmc-gallery {
        column-count: 2;
        column-width: auto;
        column-gap: 0.25rem; /* Réduit de 0.5rem à 0.25rem */
    }
    
    .gmc-gallery-item {
        margin-bottom: 0.25rem; /* Réduit de 0.5rem à 0.25rem */
    }
    
    .gmc-gallery > img {
        margin-bottom: 0.25rem;
    }
}

/* Tablette : 3 colonnes */
@media (min-width: 768px) and (max-width: 1023px) {
    .gmc-gallery {
        column-count: 3;
        column-width: auto;
        column-gap: 0.5rem; /* Réduit de 1rem à 0.5rem */
    }
    
    .gmc-gallery-item {
        margin-bottom: 0.5rem; /* Réduit de 1rem à 0.5rem */
    }
    
    .gmc-gallery > img {
        margin-bottom: 0.5rem;
    }
}

/* Desktop : colonnes automatiques basées sur la largeur */
@media (min-width: 1024px) {
    .gmc-gallery {
        column-width: 250px;
        column-gap: 0.5rem; /* Réduit de 1rem à 0.5rem */
    }
    
    .gmc-gallery-item {
        margin-bottom: 0.5rem; /* Réduit de 1rem à 0.5rem */
    }
    
    .gmc-gallery > img {
        margin-bottom: 0.5rem;
    }
}