/* Location Gallery subpage: heading + masonry image grid */

.location-gallery-section {
    background: rgba(34, 34, 34, 0.9);
    border-top: 1px solid #525252;
    border-bottom: 1px solid #525252;
    padding-top: 100px;
    padding-bottom: 100px;
}

/* ---------- Masonry grid (masonry.desandro.com) ---------- */
.location-gallery-grid {
    margin-top: 24px;
}

/* 3 columns with a 20px gutter; widths drive Masonry's columnWidth/gutter. */
.grid-sizer,
.gallery-item {
    width: calc((100% - 40px) / 3);
}

.gutter-sizer {
    width: 20px;
}

.gallery-item {
    margin: 0 0 20px;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04); /* placeholder tint while the image loads */
}

/* Natural image proportions — heights vary, Masonry packs the columns.
 *
 * The Gallery API only returns image URLs (no dimensions), so single-gallery.php
 * outputs <img> with no width/height. Without a reserved box, each tile measures
 * 0px tall on Masonry's first layout: every tile piles up at top:0 (overlapping)
 * and the grid collapses, letting the next section overlap the images until
 * imagesLoaded re-runs layout.
 *
 * `aspect-ratio: auto 4 / 3` reserves a 4:3 box *before* the image downloads, so
 * the first layout already has a real height (grid can't collapse), then snaps to
 * each image's true ratio once it loads. */
.gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto 4 / 3;
    border-radius: 20px;
}

/* ---------- Load More ---------- */
.location-gallery-more {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.gallery-load-more {
    font-family: "Jakarta", sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #F4AE3D;
    text-decoration: underline;
}

.gallery-load-more:hover {
    color: #F4AE3D;
    text-decoration: underline;
}

/* Tablet: 2 columns (Masonry re-lays out on resize) */
@media (max-width: 991.98px) {
    .location-gallery-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .grid-sizer,
    .gallery-item {
        width: calc((100% - 20px) / 2);
    }
}

/* Phone: single column */
@media (max-width: 575.98px) {
    .grid-sizer,
    .gallery-item {
        width: 100%;
    }

    .gutter-sizer {
        width: 0;
    }
}