/*
 * Mini gallery and collage blocks in blog posts.
 *
 * Loaded by the public post page AND the dashboard's blog editor, so a block
 * looks the same where it is written and where it is read. Sizes are in px on
 * purpose: the public site's root font-size is 10px and the dashboard's is
 * 16px, so the same rem would be two different sizes.
 *
 * Both layouts show every photo whole, whatever its shape — the same promise
 * the client galleries make:
 *
 *   mini gallery  vertical masonry, like a gallery page's default grid
 *   collage       justified rows, like a gallery's "Horizontal" grid style
 *
 * Each photo's shape travels with it as an inline `--r` (width / height),
 * written when the block is inserted, so the boxes are reserved before a
 * byte of image arrives. Older posts have no `--r`; blog_media.js measures
 * those photos as they load.
 *
 * Column counts follow the width of the BLOCK, not the window (container
 * queries), because the same block is drawn in the post column, the editor,
 * and the editor's narrow live preview.
 */

.blog-media.blog-gallery,
.blog-media.blog-collage {
    container-type: inline-size;
}

.blog-gallery-grid > img,
.blog-collage-grid > img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    /* The box IS the photo's shape, so `cover` never crops anything; it only
       absorbs the rounding between the stored ratio and the real file. */
    aspect-ratio: var(--r, auto);
    object-fit: cover;
    margin: 0;
    border-radius: 4px;
    background: #ececec;
}

/* ── Mini gallery: masonry ─────────────────────────────────────────────── */

.blog-gallery-grid {
    --bm-gap: 8px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--bm-gap);
    /* Each photo keeps its own height. This is the no-script layout too: a
       plain grid, ragged under the shorter photos, nothing cropped. */
    align-items: start;
}

@container (max-width: 479px) {
    .blog-gallery-grid {
        --bm-gap: 6px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Never more columns than photos: two photos side by side, one full width. */
.blog-gallery-grid:has(> img:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.blog-gallery-grid:has(> img:only-child) {
    grid-template-columns: minmax(0, 1fr);
}

/* Switched on by blog_media.js once EVERY photo in the grid has a row span —
   the same rule as the gallery's .pxg-grid.is-masonry. 1px tracks with the
   gap carried as a margin make each photo's span exact to the pixel, so the
   gaps stay even down every column. */
.blog-gallery-grid.is-masonry {
    grid-auto-rows: 1px;
    row-gap: 0;
    margin-bottom: calc(-1 * var(--bm-gap));
}
.blog-gallery-grid.is-masonry > img {
    margin-bottom: var(--bm-gap);
}

/* ── Collage: justified rows ───────────────────────────────────────────── */

.blog-collage-grid {
    --bm-gap: 8px;
    --bm-row: clamp(170px, 36cqw, 320px);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--bm-gap);
}

@container (max-width: 479px) {
    .blog-collage-grid {
        --bm-gap: 6px;
    }
}

/* The no-script layout, straight from the gallery's Horizontal style: each
   photo grows in proportion to its shape, so a row ends up one height. */
.blog-collage-grid > img {
    flex: var(--r, 1.5) 1 calc(var(--r, 1.5) * var(--bm-row));
    min-width: 0;
}
/* Greedy rows can strand one photo on a line of its own (a square before a
   panorama that will not fit beside it), and growing it to the full width
   makes a giant of it. Capped here; the scripted rows never need it, and the
   cap would fight their exact sizes, so it stops once they take over. The
   extra selectors outrank the post page's own `img { max-width: 100% }`
   rules, one of them on the #blogContainer id in styles.css. */
.blog-media .blog-collage-grid:not(.is-justified) > img,
#blogContainer .blog-collage-grid:not(.is-justified) > img {
    max-width: min(100%, calc(var(--r, 1.5) * var(--bm-row) * 1.6));
}
/* Soaks up a short last row so it keeps the row height instead of
   ballooning one photo to the full width. */
.blog-collage-grid::after {
    content: "";
    flex: 9999 1 0;
}

/* blog_media.js balances the rows instead — every row full width, none left
   half empty — and sizes each photo itself, so the filler goes. */
.blog-collage-grid.is-justified::after {
    display: none;
}