/* ==========================================================================
   Photographer Gallery – Base Styles
   Layout specifics are injected as scoped inline <style> per widget instance.
   ========================================================================== */

.pg-gallery {
    box-sizing: border-box;
}

.pg-gallery a {
    cursor: zoom-in;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.pg-gallery img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Masonry layout base */
.pg-layout-masonry a {
    break-inside: avoid;
    page-break-inside: avoid; /* Safari */
}

/* Grid layout base */
.pg-layout-grid {
    display: grid;
}

.pg-layout-grid a {
    overflow: hidden;
}

.pg-layout-grid a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease, opacity 0.2s ease;
}

.pg-layout-grid a:hover img {
    transform: scale(1.03);
}

/* PhotoSwipe – sit above all Elementor stacking contexts */
.pswp {
    z-index: 999999 !important;
}

/* Background colour comes from --pswp-bg set per-gallery in JS.
   Do NOT override opacity or transition here – PhotoSwipe animates
   .pswp__bg opacity via its own JS animation system. */
.pswp__bg {
    background: var(--pswp-bg, #000) !important;
}

/* Hide the gallery while the lightbox is open to prevent the
   thumbnail grid from showing through the lightbox overlay. */
.pg-gallery.pg-lightbox-open {
    visibility: hidden;
}