/*
 * Enova Extended Gallery — masonry layout (row-major)
 * Plain CSS on purpose: this file is served directly via {{asset}} and is
 * NOT part of the Vite/Tailwind build, so no @apply here.
 *
 * Layout technique: CSS Grid with small auto-rows; gallery-extended.js
 * computes a grid-row span for each tile from the image's aspect ratio.
 * Unlike CSS multi-columns, grid places items LEFT TO RIGHT in source
 * order, so images appear in the order you added them in the editor,
 * and lightbox navigation matches the visual order.
 */

.kg-gallery-container.kg-gallery-masonry {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 8px;      /* fine-grained row unit for span math */
    column-gap: 0.75rem;
    row-gap: 0.75rem;         /* JS folds this into the span calculation */
    grid-auto-flow: row;      /* left-to-right, top-to-bottom */
    /* Override the theme's rounded/clipped container — in masonry each
       tile gets its own rounding instead. */
    border-radius: 0 !important;
    overflow: visible;
}

@media (min-width: 768px) {
    .kg-gallery-container.kg-gallery-masonry {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Full-width merged galleries get an extra column on large screens. */
@media (min-width: 1280px) {
    .kg-width-full .kg-gallery-container.kg-gallery-masonry {
        grid-template-columns: repeat(4, 1fr);
    }
}

.kg-gallery-masonry .kg-masonry-item {
    display: block;
    width: 100%;
    margin: 0;
    border-radius: 0.75rem; /* matches the theme's rounded-xl */
    overflow: hidden;
    background: rgba(0, 0, 0, 0.04);
}

/* Before JS assigns spans, give tiles a sane default so the page doesn't
   render a wall of 8px slivers on slow connections. */
.kg-gallery-masonry .kg-masonry-item:not([data-spanned]) {
    grid-row-end: span 30;
}

.kg-gallery-masonry .kg-masonry-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* absorbs the few px of span rounding */
    border-radius: inherit;
    transition: transform 0.3s ease;
}

/* Subtle hover affordance to signal the lightbox. */
@media (hover: hover) {
    .kg-gallery-masonry .kg-masonry-item:hover img {
        transform: scale(1.02);
    }
}

/* PhotoSwipe wraps each image in an <a>; make sure the anchor fills the
   tile so the whole image is clickable (mirrors the theme's own rules). */
.kg-gallery-masonry .kg-masonry-item a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

/* Caption styling for merged galleries — inherit the theme look. */
.kg-gallery-merged figcaption {
    margin-top: 0.75rem;
}