/* Styles pour le plugin SLP Galerie Shortcode */

.slp-gallery-wrapper {
    margin-top: 2em;
    margin-bottom: 2em;
}

.gallery-category-section {
    margin-bottom: 40px; /* Espace entre les sections de catégorie */
    padding-bottom: 20px;
    /* Optionnel : ajouter une bordure de séparation */
    /* border-bottom: 1px solid #eee; */
}

.gallery-category-title {
    font-size: 1.8em; /* Ajustez selon votre thème */
    margin-bottom: 25px;
    text-align: center; /* Ou left */
    /* Utiliser les polices de votre thème si possible */
    /* font-family: 'Playfair Display', serif; */
    /* font-weight: 700; */
    clear: both;
}

.gallery-grid {
    display: grid;
    /* Colonnes responsives : essaie de faire des colonnes de 250px minimum */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px; /* Espace entre les images */
    padding: 0;
    margin: 0;
    list-style: none; /* Au cas où un thème ajouterait des puces */
}

.gallery-item {
    overflow: hidden; /* Empêche les images de déborder */
    border-radius: 5px; /* Coins légèrement arrondis */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre discrète */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    background-color: #f9f9f9; /* Couleur de fond pendant le chargement */
    position: relative; /* Pour positionner des éléments par-dessus si besoin */
}

/* Optionnel : Effet au survol */
.gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
}

.gallery-item img.gallery-image {
    display: block; /* Supprime l'espace sous l'image */
    width: 100%;    /* Prend toute la largeur de son conteneur .gallery-item */
    height: auto;   /* Maintient le ratio de l'image */
    /* Pour forcer un ratio (ex: carré), décommentez et ajustez : */
    /* aspect-ratio: 1 / 1; */
    /* object-fit: cover; */ /* Assure que l'image couvre, peut couper */
    border-radius: 5px; /* Appliquer aussi à l'image si elle dépasse du conteneur */
}

/* Style pour le message si la galerie est vide */
.slp-gallery-empty {
    text-align: center;
    font-style: italic;
    color: #777;
    padding: 2em;
}