/* ==========================================================================
   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;
}

/* ==========================================================================
   Modal isolation boundary
   ──────────────────────────────────────────────────────────────────────────
   `.pg-pswp` is added to pswp.element in gallery-init.js on every open.
   Every rule touching the modal's own controls is written as ".pg-pswp …"
   instead of bare ".pswp__…" so it OUTRANKS theme button/anchor resets
   (Hello Elementor, Astra, Flatsome, …) on specificity alone – no more
   fragile !important-vs-!important tie-breaking by source order. The block
   below strips every property a theme's global `button,[type=button] {…}`
   rule commonly sets, so no theme rule can leak in through an unclaimed
   property.
   ========================================================================== */
/* Targeted reset only – deliberately NOT `all: unset`. Unset also wipes
   `display`/`margin`/`position`, which PhotoSwipe's own top-bar layout (flex
   `order`, `margin-left:auto` on close, …) depends on; that broke click
   targets and shifted close/zoom out of place. Reset only the properties a
   theme's global `button {…}` rule actually leaks (border/padding/
   background/box-shadow/outline/appearance/font), nothing layout-related. */
.pg-pswp button {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    line-height: normal;
    pointer-events: auto;
}

/* Button optics + hover – fixed box size, hover via transform only.
   Applies to built-in PhotoSwipe buttons AND custom pg-fullscreen/pg-share
   buttons alike (PhotoSwipe assigns .pswp__button to both via registerElement).
   Never transition width/height/padding here – that reintroduces the hover jitter.
   !important everywhere here: two outside rules fight us on hover –
   1) Hello Elementor theme's reset.css: `button:hover,[type=button]:hover,…`
      resets background-color/color.
   2) PhotoSwipe's own base CSS: `.pswp__button:hover,:active,:focus` resets
      transition/padding/background/border/box-shadow/opacity (no !important
      on their side, but tie/order can still let it win) – that reset is what
      caused the button to flicker/disappear on hover.
   Arrow buttons (.pswp__button--arrow) are entirely excluded from this whole
   block, not just the size rule: they're natively 75x100px with a 60px icon
   offset via negative margin inside their own overflow:hidden box, and any of
   our padding/border/background/box-shadow overrides risks re-clipping or
   masking that icon. Arrows only get color (already global via the
   --pswp-icon-color var PhotoSwipe itself reads, no rule needed here) and a
   hover-scale, handled in their own minimal rule below. */
.pg-pswp .pswp__button:not(.pswp__button--arrow) {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--pswp-btn-size, 44px);
    height: var(--pswp-btn-size, 44px);
    border-radius: var(--pswp-btn-radius, 4px);
    padding: 0;
    border: 0;
    background-color: var(--pswp-btn-bg, transparent);
    color: var(--pswp-icon-color, #fff);
    opacity: 1;
    box-shadow: none;
    outline: none;
    transform: scale(1);
    transition:
        background-color var(--pswp-btn-transition, .2s) ease,
        color var(--pswp-btn-transition, .2s) ease,
        transform var(--pswp-btn-transition, .2s) ease;
}

.pg-pswp .pswp__button:not(.pswp__button--arrow):hover,
.pg-pswp .pswp__button:not(.pswp__button--arrow):active,
.pg-pswp .pswp__button:not(.pswp__button--arrow):focus,
.pg-pswp .pswp__button:not(.pswp__button--arrow):focus-visible {
    padding: 0;
    border: 0;
    box-shadow: none;
    outline: none;
    opacity: 1;
    background-color: var(--pswp-btn-bg-hover, rgba(255, 255, 255, .15));
    color: var(--pswp-btn-icon-color-hover, #fff);
    transform: scale(var(--pswp-btn-hover-scale, 1.1));
    transition:
        background-color var(--pswp-btn-transition, .2s) ease,
        color var(--pswp-btn-transition, .2s) ease,
        transform var(--pswp-btn-transition, .2s) ease;
}

/* Arrows – full layout takeover instead of patching native rules.
   PhotoSwipe centers the arrow icon with `top:50%; margin-top:-30px;
   left:9px/right:14px` relative to a `position:relative` button whose own
   vertical centering is ANOTHER `top:50%; margin-top:-50px` hack. That's two
   layers of magic-number math stacked on each other; if anything upstream
   changes the button's actual rendered height (theme reset, our own
   size vars, browser rounding), the negative margins push the icon outside
   the clipped (`overflow:hidden`) box and it silently disappears – exactly
   what was happening. Replaced with one self-contained flex box per arrow:
   fixed size, centered vertically the same tested way, icon centered via
   flex instead of absolute-position math. */
.pg-pswp .pswp__button--arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    width: 56px;
    height: 56px;
    margin-top: -28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    box-shadow: none;
    outline: none;
    opacity: 1;
    visibility: visible !important;
    overflow: visible;
    z-index: 1;
    transition: transform var(--pswp-btn-transition, .2s) ease,
                background-color var(--pswp-btn-transition, .2s) ease;
}

.pg-pswp .pswp__button--arrow--prev {
    left: 8px;
    right: auto;
}

.pg-pswp .pswp__button--arrow--next {
    right: 8px;
    left: auto;
}

.pg-pswp .pswp__button--arrow .pswp__icn {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    margin-top: 0;
    width: 32px;
    height: 32px;
}

.pg-pswp .pswp__button--arrow--next .pswp__icn {
    transform: scale(-1, 1);
}

.pg-pswp .pswp__button--arrow:hover,
.pg-pswp .pswp__button--arrow:active,
.pg-pswp .pswp__button--arrow:focus,
.pg-pswp .pswp__button--arrow:focus-visible {
    padding: 0;
    border: 0;
    box-shadow: none;
    outline: none;
    opacity: 1;
    background-color: var(--pswp-btn-bg-hover, rgba(255, 255, 255, .15));
    transform: scale(var(--pswp-btn-hover-scale, 1.1));
}

/* Inline <svg> is baseline-aligned by default, leaving a few px of descender
   gap under the icon even inside a flex-centered button – reads as the icon
   sitting slightly high/"shifted" in its box. block removes that gap. */
.pg-pswp .pswp__button svg {
    display: block;
}

/* THE actual cause of "verschobene Buttons": PhotoSwipe's native .pswp__icn
   is `position: absolute; top: 14px; left: 9px;` – hardcoded for its own
   native 50x60px button box. Our --pswp-btn-size resizes the button (e.g.
   to 44x44), but the icon keeps sticking to that fixed 14px/9px offset
   instead of re-centering, so it visibly drifts toward the top-left corner.
   Fix: take the icon out of absolute positioning so it becomes a normal
   flex child, centered by the button's own flex layout instead. */
.pg-pswp .pswp__button:not(.pswp__button--arrow) .pswp__icn {
    position: static;
    top: auto;
    left: auto;
}

/* Unify icon sizing – native PhotoSwipe icons (zoom/close) render at a fixed
   32px, our custom SVGs (share/fullscreen) at 22px. Same box for both so
   they read as one consistent button row instead of two different icon
   sets. */
.pg-pswp .pswp__button:not(.pswp__button--arrow) svg {
    width: 22px;
    height: 22px;
}

/* Two-tone drop-shadow halo guarantees icon contrast against ANY bgColor
   (dark halo for light backgrounds, light halo for dark ones) instead of
   relying on --pswp-icon-color alone matching whatever the user picks. */
.pg-pswp .pswp__button--arrow .pswp__icn {
    filter:
        drop-shadow(0 0 2px rgba(0, 0, 0, .6))
        drop-shadow(0 0 1px rgba(255, 255, 255, .6));
}

/* Defensive: some themes set a global `div,ul,li{display:flex;align-items:
   stretch}` reset (Astra/Flatsome utility resets) that fights PhotoSwipe's
   own top-bar layout and stretches buttons to the row's full height instead
   of their fixed --pswp-btn-size box – reads as "buttons shifted/oversized".
   Re-declare the same flex-row-centered layout at higher specificity. */
.pg-pswp .pswp__top-bar {
    display: flex;
    align-items: center;
}

/* 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;
}