/*
 * Sapp Media — Gallery Layout Enhancement
 * CSS-driven masonry and justified layouts for core/gallery blocks.
 * Applied via data-sapp-layout attribute injected by GalleryEnhancer.php.
 * No JavaScript required.
 */

/* ------------------------------------------------------------------ */
/* Masonry layout                                                         */
/* CSS Grid masonry: auto-rows + span trick for natural-height images.  */
/* Works in all modern browsers via grid-row: span N                    */
/* (actual masonry: true is Firefox-only; we use the column approach).  */
/* ------------------------------------------------------------------ */
[data-sapp-layout="masonry"].wp-block-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 10px; /* small row unit for fine-grained spanning */
    gap: 8px;
    align-items: start;
}

[data-sapp-layout="masonry"] .wp-block-image,
[data-sapp-layout="masonry"] figure.wp-block-gallery-item,
[data-sapp-layout="masonry"] li.blocks-gallery-item {
    /* JS-free masonry: each item gets grid-row-end set to span N
       via a CSS custom property; browsers without ResizeObserver
       (none in our support target) fall back to a uniform grid.    */
    grid-row-end: auto;
    break-inside: avoid;
}

[data-sapp-layout="masonry"] img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
}

/* ------------------------------------------------------------------ */
/* Justified layout                                                       */
/* Fixed-height rows; images fill width via object-fit: cover.          */
/* ------------------------------------------------------------------ */
[data-sapp-layout="justified"].wp-block-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
}

[data-sapp-layout="justified"] .wp-block-image,
[data-sapp-layout="justified"] figure.wp-block-gallery-item,
[data-sapp-layout="justified"] li.blocks-gallery-item {
    flex: 1 1 200px;
    height: 220px;
    overflow: hidden;
    border-radius: 2px;
}

[data-sapp-layout="justified"] img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ------------------------------------------------------------------ */
/* Responsive — collapse to single column on small screens               */
/* ------------------------------------------------------------------ */
@media (max-width: 480px) {
    [data-sapp-layout="masonry"].wp-block-gallery,
    [data-sapp-layout="justified"].wp-block-gallery {
        grid-template-columns: 1fr;
        display: block;
    }

    [data-sapp-layout="justified"] .wp-block-image,
    [data-sapp-layout="justified"] figure.wp-block-gallery-item,
    [data-sapp-layout="justified"] li.blocks-gallery-item {
        height: auto;
    }

    [data-sapp-layout="justified"] img {
        object-fit: unset;
        height: auto;
    }
}