/* =============================================
   GALLERY LAYOUTS
   Each layout is self-contained — no conflicts
   with redesign.css. True masonry uses CSS
   columns; grids use CSS grid.
   ============================================= */

/* --- Masonry Layout (JS-assisted CSS Grid) ---
   CSS Grid fills ROW-FIRST in source order, so the first images land on the
   first row (not stacked down column 1 like CSS columns did). The staggered
   "masonry" look comes from per-item row spans set by js/gallery-masonry.js,
   which measures each tile's height. Column spans (1 / 2 / 3 wide) are handled
   by the .gi-span-2 / .gi-full utilities further down. */
.gallery-masonry .gallery-images {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2rem;
    grid-auto-rows: 10px;   /* fine row unit — MUST match ROW_UNIT in the JS */
    align-items: start;
}

.gallery-masonry .gallery-item {
    grid-row-end: span 30;  /* placeholder height until the JS measures the image */
    align-self: start;
    margin-bottom: 0;
}

/* Responsive Masonry */
@media (max-width: 991px) {
    .gallery-masonry .gallery-images {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    /* Single column on phones: ditch the JS-assisted grid entirely. The
       per-item grid-row-end spans (set inline by gallery-masonry.js) leave
       huge empty rows when there's only one column. Switching to a flex
       column makes those inline grid spans inert and stacks tiles tightly. */
    .gallery-masonry .gallery-images {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 1rem !important;
    }

    .gallery-masonry .gallery-item,
    .gallery-masonry .gallery-item.gi-span-2,
    .gallery-masonry .gallery-item.gi-full {
        grid-row-end: auto !important;   /* neutralise the inline JS spans */
        grid-column: auto !important;
        width: 100% !important;
        margin: 0 !important;
    }
}


/* --- One Column Layout (single, generous) --- */
.gallery-one-col .gallery-images {
    display: flex !important;
    flex-direction: column !important;
    gap: 4rem !important;
    max-width: 800px;
    margin: 0 auto;
}

.gallery-one-col .gallery-item {
    margin-bottom: 0;
}


/* --- Two Column Layout --- */
.gallery-two-col .gallery-grid,
.gallery-two-col .gallery-images {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
}

.gallery-two-col .gallery-item,
.gallery-two-col .gallery-grid-item {
    margin-bottom: 0;
}

@media (max-width: 575px) {
    .gallery-two-col .gallery-grid,
    .gallery-two-col .gallery-images {
        grid-template-columns: 1fr !important;
    }
}


/* --- Three Column Layout --- */
.gallery-three-col .gallery-grid,
.gallery-three-col .gallery-images,
.gallery-three-col .blog-post-gallery {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
}

.gallery-three-col .gallery-item,
.gallery-three-col .gallery-grid-item,
.gallery-three-col .blog-post-image {
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .gallery-three-col .gallery-grid,
    .gallery-three-col .gallery-images,
    .gallery-three-col .blog-post-gallery {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 575px) {
    .gallery-three-col .gallery-grid,
    .gallery-three-col .gallery-images,
    .gallery-three-col .blog-post-gallery {
        grid-template-columns: 1fr !important;
    }
}


/* =============================================
   GALLERY ITEM WIDTH UTILITIES
   Replace old Bootstrap col-* classes with these.
   Works with CSS Grid (2-col / 3-col) and CSS Columns (masonry).
   ============================================= */

/* --- Full width (span all columns) --- */
.gi-full {
    grid-column: 1 / -1 !important;
}

/* Blog post masonry still uses CSS columns (below), where only column-span
   works — keep the full-width span for those. The gallery masonry is now a
   grid, so its gi-full/gi-span-2 come from the grid utilities above. */
.blog-post-gallery.gallery-masonry .gi-full {
    column-span: all !important;
}

/* --- Span 2 columns in a 3-column grid --- */
.gi-span-2 {
    grid-column: span 2 !important;
}

/* --- Span 2 columns in a 2-column grid (same as full) --- */
.gallery-two-col .gi-span-2 {
    grid-column: span 2 !important;
}

/* --- One-column flex overrides --- */
.gallery-one-col .gi-wide {
    max-width: 1200px !important;
}

.gallery-one-col .gi-full {
    max-width: none !important;
}

/* --- Responsive resets --- */
@media (max-width: 991px) {
    .gi-span-2 {
        grid-column: span 2 !important;
    }
}

@media (max-width: 575px) {
    .gi-full,
    .gi-span-2 {
        grid-column: 1 / -1 !important;
    }
}

/* -----------------------------------------------
   GALLERY ITEM WIDTH UTILITIES - LEGACY NOTES
   ----------------------------------------------- */
/* Old classes that do nothing in the new grid system:
   col-md-3, col-md-4, col-md-6, col-md-8, col-md-10,
   col-lg-*, col-sm-*, col-xs-*, col-12
   Use gi-full, gi-span-2, gi-wide instead. */



/* --- Blog post masonry: 2 cols (blog images sit in a narrower column) --- */
.blog-post-gallery.gallery-masonry {
    display: block !important;
    column-count: 2;
    column-gap: 1.5rem;
}

.blog-post-gallery.gallery-masonry .blog-post-image {
    break-inside: avoid;
    margin-bottom: 1.5rem;
}

@media (min-width: 1200px) {
    .blog-post-gallery.gallery-masonry {
        column-count: 3;
    }
}

@media (max-width: 575px) {
    .blog-post-gallery.gallery-masonry {
        column-count: 1;
    }
}