/* ============================================
   PHOTO GALLERY — MASONRY MODE
   JS-positioned, reading-order preserved. The grid
   is a positioning context whose height is set by the
   engine after packing. Items are absolutely positioned
   (top/left/width/height) into the shortest column, so
   the visual sequence stays left-to-right then down a
   row (like text wrapping) while heights vary per the
   natural ratio. See masonry-photo-gallery.js.
   ============================================ */

.photo-gallery__grid--masonry {
    position: relative;
}

/* Each item is sized by JS (width + height from the source ratio) so its box is
   correct BEFORE the lazy-loaded image swaps in. margin:0 kills the default
   <figure> margin which would otherwise read as a gap. */
.photo-gallery__grid--masonry .photo-gallery__item {
    position: absolute;
    margin: 0;
    aspect-ratio: auto;
}

.photo-gallery__grid--masonry .photo-gallery__item-media {
    width: 100%;
    height: 100%;
}

.photo-gallery__grid--masonry .photo-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}