/* =============================================================================
 * Blue Horse Pictures — Gallery masonry layout
 * =============================================================================
 * Loaded AFTER style.css so it overrides the legacy `.gallery img { height:200px }`
 * rules without needing !important everywhere.
 *
 * Used on:
 *   /photoshoot/<slug>             (category.php)
 *   /industries/<slug>             (industries.php)
 *   /industry/<slug>/<sub-slug>    (industrie-inner.php)
 *
 * Approach: pure CSS columns. No JS, no Masonry.js / Isotope dependency.
 * Each image is a column item, and `break-inside: avoid` keeps it intact.
 * Reading order is column-by-column (Pinterest-style) which is the right
 * mental model for a curated portfolio.
 *
 * The existing lightbox keeps working because the click handler is bound to
 * `$("section img")` — not to a specific class — and our markup remains
 * inside the same <section> wrapper.
 * ============================================================================= */

.gallery-masonry {
    /* Reset any inherited row/flex styles from Bootstrap if present */
    display: block;
    margin: 0;
    padding: 0;
    column-count: 4;
    column-gap: 16px;

    /* Better column-fill behavior — fills columns evenly instead of one-by-one */
    column-fill: balance;
}

/* Responsive column counts ----------------------------------------------------*/
@media (max-width: 1399px) {
    .gallery-masonry { column-count: 4; column-gap: 14px; }
}
@media (max-width: 1199px) {
    .gallery-masonry { column-count: 3; column-gap: 14px; }
}
@media (max-width: 767px) {
    .gallery-masonry { column-count: 2; column-gap: 10px; }
}
@media (max-width: 380px) {
    .gallery-masonry { column-count: 1; column-gap: 0; }
}

/* The image itself -----------------------------------------------------------*/
.gallery-masonry img {
    /* Reset legacy .gallery img rules from style.css */
    height: auto !important;
    object-fit: unset;
    object-position: unset;

    /* Masonry essentials */
    width: 100%;
    display: block;
    margin: 0 0 14px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;

    /* Polish */
    border-radius: 8px;
    cursor: pointer;
    background: #f0f0f0;     /* soft placeholder colour before the image loads */
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
    will-change: transform;
}

@media (max-width: 767px) {
    .gallery-masonry img {
        margin: 0 0 10px;
        border-radius: 6px;
    }
}

/* Hover state — subtle lift, brighter, softer shadow */
.gallery-masonry img:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 50, 0.15);
    filter: brightness(1.04);
}

/* For touch devices, no hover lift (avoids "sticky hover" on mobile) ---------*/
@media (hover: none) {
    .gallery-masonry img:hover {
        transform: none;
        box-shadow: none;
        filter: none;
    }
}

/* Empty-state safety — if a gallery has zero items, hide the container so the
   surrounding section padding doesn't create awkward whitespace. (The PHP side
   already wraps the section in an `if (mysqli_num_rows > 0)`, so this is
   defensive belt-and-suspenders.) */
.gallery-masonry:empty { display: none; }

/* Optional: a smooth fade-in for images as they decode. CSS-only, no IO ------*/
.gallery-masonry img {
    animation: gm-img-in 0.35s ease-out backwards;
}
@keyframes gm-img-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .gallery-masonry img {
        animation: none;
        transition: none;
    }
    .gallery-masonry img:hover {
        transform: none;
    }
}