/*
 * Enova Extended Gallery — masonry layout
 * Plain CSS on purpose: this file is served directly via {{asset}} and is
 * NOT part of the Vite/Tailwind build, so no @apply here.
 *
 * Applies only to merged galleries (.kg-gallery-masonry), created at
 * runtime by assets/js/gallery-extended.js when 2+ native gallery cards
 * are stacked back-to-back in a post. Single gallery cards keep Enova's
 * native justified-row layout.
 */

.kg-gallery-container.kg-gallery-masonry {
    columns: 2;
    column-gap: 0.75rem;
    /* 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 {
        columns: 3;
    }
}

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

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

.kg-gallery-masonry .kg-masonry-item img {
    display: block;
    width: 100%;
    height: auto;
    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.25rem;
}