/* ==========================================================================
   FG Safety Workshop - masonry gallery
   CSS columns keep each image at its natural height, so portrait and square
   photos stack without gaps. The lightbox is Magnific Popup, bound to
   .image-popup in main.js (gallery mode, so arrows cycle through every item).
   ========================================================================== */
.workshop-gallery {
    column-count: 4;
    column-gap: 24px;
    margin-top: 50px;
}

@media only screen and (max-width: 1199px) {
    .workshop-gallery {
        column-count: 3;
    }
}

@media only screen and (max-width: 767px) {
    .workshop-gallery {
        column-count: 2;
        column-gap: 16px;
        margin-top: 35px;
    }
}

@media only screen and (max-width: 479px) {
    .workshop-gallery {
        column-count: 1;
    }
}

.workshop-gallery-item {
    break-inside: avoid;
    margin-bottom: 24px;
}

@media only screen and (max-width: 767px) {
    .workshop-gallery-item {
        margin-bottom: 16px;
    }
}

.workshop-gallery-item a {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background-color: var(--fg-navy);
}

.workshop-gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.6s ease, opacity 0.4s ease;
}

/* hover overlay: navy wash + amber zoom icon */
.workshop-gallery-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(34, 46, 71, 0.55);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.workshop-gallery-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--fg-navy);
    background-color: var(--fg-amber);
    transform: scale(0.6);
    transition: transform 0.4s ease;
}

.workshop-gallery-item a:hover img,
.workshop-gallery-item a:focus-visible img {
    transform: scale(1.06);
}

.workshop-gallery-item a:hover .workshop-gallery-overlay,
.workshop-gallery-item a:focus-visible .workshop-gallery-overlay {
    opacity: 1;
}

.workshop-gallery-item a:hover .workshop-gallery-icon,
.workshop-gallery-item a:focus-visible .workshop-gallery-icon {
    transform: scale(1);
}

.workshop-gallery-item a:focus-visible {
    outline: 3px solid var(--fg-amber);
    outline-offset: 3px;
}

/* lightbox: brand the backdrop and counter */
.mfp-bg {
    background: var(--fg-navy);
    opacity: 0.92;
}

.mfp-counter {
    color: var(--fg-amber);
}