/* ─────────────────────────────────────────────────────────────
   Extensions du bloc core/gallery
   ───────────────────────────────────────────────────────────── */

/* ============================================
   LAYOUT MASONRY
   Utilise CSS columns — conserve le ratio natif
   de chaque image (pas de crop).
   ============================================ */

/* On force l'annulation du layout flex natif.
   Le bloc gallery utilise par défaut un layout flex qui injecte
   des styles inline (width calculées) sur les figures enfants. */
.wp-block-gallery.is-layout-masonry,
.wp-block-gallery.is-layout-flex.is-layout-masonry,
figure.wp-block-gallery.is-layout-masonry {
    display: block !important;
    gap: 0 !important;
    column-gap: 30px !important;
}

/* Nombre de colonnes (respecte le choix de l'éditeur) */
.wp-block-gallery.is-layout-masonry { column-gap: 16px; }
.wp-block-gallery.is-layout-masonry.columns-1 { column-count: 1; }
.wp-block-gallery.is-layout-masonry.columns-2 { column-count: 2; }
.wp-block-gallery.is-layout-masonry.columns-3 { column-count: 3; }
.wp-block-gallery.is-layout-masonry.columns-4 { column-count: 4; }
.wp-block-gallery.is-layout-masonry.columns-5 { column-count: 5; }
.wp-block-gallery.is-layout-masonry.columns-6 { column-count: 6; }
.wp-block-gallery.is-layout-masonry.columns-7 { column-count: 7; }
.wp-block-gallery.is-layout-masonry.columns-8 { column-count: 8; }

/* Fallback : sans classe columns-*, on met 3 colonnes */
.wp-block-gallery.is-layout-masonry:not([class*="columns-"]) {
    column-gap: 30px !important;
    column-count: 3;
}

/* Neutralise les styles inline du layout flex sur les enfants.
   Gutenberg écrit du style="width: calc(...)" directement
   sur les figures — il faut écraser avec !important. */
.wp-block-gallery.is-layout-masonry > figure.wp-block-image,
.wp-block-gallery.is-layout-masonry > .wp-block-image,
.wp-block-gallery.is-layout-masonry .blocks-gallery-item {
    width: 100%!important;
    max-width: 100% !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    margin: 0 0 30px 0 !important;
    display: block !important;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

/* L'image conserve son ratio natif — on neutralise le cover */
.wp-block-gallery.is-layout-masonry img {
    width: 100% !important;
    height: auto !important;
    display: block;
    object-fit: contain !important;
    aspect-ratio: auto !important;
}

/* Sur mobile, on réduit le nombre de colonnes */
@media (max-width: 782px) {
    .wp-block-gallery.is-layout-masonry.columns-4,
    .wp-block-gallery.is-layout-masonry.columns-5,
    .wp-block-gallery.is-layout-masonry.columns-6,
    .wp-block-gallery.is-layout-masonry.columns-7,
    .wp-block-gallery.is-layout-masonry.columns-8 {
        column-count: 2;
    }
}

@media (max-width: 480px) {
    .wp-block-gallery.is-layout-masonry {
        column-count: 1 !important;
    }
}


/* ============================================
   CAPTION SOUS L'IMAGE
   ============================================ */
.wp-block-gallery.has-caption-below figure.wp-block-image {
    display: flex;
    flex-direction: column;
}

.wp-block-gallery.has-caption-below figure.wp-block-image figcaption {
    position: static !important;
    background: none !important;
    background-image: none !important;
    color: inherit !important;
    padding: 0.5em 0 0 !important;
    margin: 0 !important;
    text-align: left;
    font-size: 13px !important;
    line-height: 23px;
    text-shadow: none;
}

.is-layout-masonry .wp-block-image:has(figcaption):before {
    display:none;
}