/* core/cover only: a wrapped <img> can't be a GLightbox trigger there (the block's own dim overlay + inner-container always paint on top of it — see WPSHP_Blocks::render_cover_glightbox_markup()). Instead we add a full-size overlay trigger and let clicks fall through the inner-container to reach it, except where the inner-container has its own interactive content (e.g. a button placed inside the cover). */
.wpshp-glightbox-cover-overlay {
  position: absolute;
  inset: 0;
  display: block;
}

/* Inserting the overlay above breaks the .wp-block-cover__background + .wp-block-cover__inner-container direct-sibling adjacency core's own CSS relies on — which makes core apply its *own* defensive z-index rule (dim overlay/inner-container to 1, image/video background to 0), putting those layers back above our overlay regardless of DOM order. Rather than fight that with more z-index, every non-interactive layer gets pointer-events: none so hit-testing skips straight past all of them to our overlay (or to real interactive content inside the cover). */
.wpshp-glightbox-cover > .wp-block-cover__image-background,
.wpshp-glightbox-cover > video.wp-block-cover__video-background,
.wpshp-glightbox-cover > .wp-block-cover__background,
.wpshp-glightbox-cover > .wp-block-cover__gradient-background,
.wpshp-glightbox-cover > .wp-block-cover__inner-container {
  pointer-events: none;
}

.wpshp-glightbox-cover > .wp-block-cover__inner-container > * {
  pointer-events: auto;
}

/* GLightbox's own overlay opacity varies by breakpoint (opaque #000 by default, rgba(0,0,0,.92) from 769px up) — override uniformly to match the Spothopper theme's lighter mask. */
.goverlay {
  background: rgba(0, 0, 0, 0.5) !important;
}

/* All effects are forced to "fade" in glightbox-core-blocks.js's mapEffect(), but GLightbox's own .gfadeIn/.gfadeOut animation duration (0.5s) is fixed in its CSS, not a JS option — sped up here instead. */
.gfadeIn {
  animation-duration: 0.2s !important;
  -webkit-animation-duration: 0.2s !important;
}

.gfadeOut {
  animation-duration: 0.2s !important;
  -webkit-animation-duration: 0.2s !important;
}

/* GLightbox has no native option to hide the prev/next arrows — the "Show arrow nav?" per-block setting is enforced by toggling this class in glightbox-core-blocks.js's onOpen callback instead. */
.no-glightbox-arrows .gnext,
.no-glightbox-arrows .gprev {
  display: none !important;
}

/* When loop is off, GLightbox adds .disabled to whichever arrow has no slide to go to (only dimming it to opacity:.1 by default) — hide it outright instead, including on hover, since there's nothing left to navigate to on that side. */
.glightbox-container .gprev.disabled,
.glightbox-container .gnext.disabled {
  display: none !important;
}

/* Matches the Spothopper theme's own GLightbox styling exactly (sh-blocks/assets/css/sh-style.css). 10px of white matting surrounds the image on all sides within its slide. */
.glightbox-container .gslide-image {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  padding: 10px;
  max-height: 100vh;
}

.glightbox-container .gslide-image img {
  max-height: 100%;
  max-width: 100%;
}

/* Arrows are hidden by default and fade in only while hovering the corresponding left/right half of the image itself, not the surrounding overlay. The ghover-left/ghover-right classes are toggled by glightbox-core-blocks.js based on actual pointer position. On touch devices without real hover, keep them always visible. */
.glightbox-container .gnext,
.glightbox-container .gprev {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.glightbox-container.ghover-left .gprev {
  opacity: 1;
}

.glightbox-container.ghover-right .gnext {
  opacity: 1;
}

@media (max-width: 1024px) {
  .glightbox-container .gnext,
  .glightbox-container .gprev {
    opacity: 1;
  }

  #glightbox-slider {
    max-width: 90%;
    margin: 0 auto;
  }
}

/* Nav arrows and close button are positioned relative to the actual rendered <img> (not the padded box above), matching the Spothopper theme: the close button overlaps the image's own top-right corner, and the arrows sit just inside its left/right edges rather than at the viewport edges. Positioning is computed in JS from the image's actual getBoundingClientRect() (glightbox-core-blocks.js) and applied as inline styles — immune to the mobile 100vh-vs-real-viewport mismatch that plain CSS calc() would hit. No !important on top/left/right/transform below, so those inline styles always take effect. */

/* Override GLightbox's opacity: .7 (from its 992px-up rule) at higher specificity instead of !important, so this doesn't fight with GLightbox's own .glightbox-closing .gclose { opacity: 0 !important } fade-out, which still needs to win during the close animation. */
.glightbox-container.glightbox-clean .gclose {
  opacity: 1;
}

/* Reuse the same close/prev/next sprite icons as the Spothopper theme instead of GLightbox's default SVGs. Sprite is a vertical strip: close (0), prev (-36px), next (-72px). */
.glightbox-container .gclose,
.glightbox-container .gprev,
.glightbox-container .gnext {
  background-image: url("../lib/glightbox/glightbox_sprite.png");
  background-repeat: no-repeat;
  background-size: 44px 152px;
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.glightbox-container .gclose:hover,
.glightbox-container .gprev:hover,
.glightbox-container .gnext:hover {
  background-color: transparent !important;
}

.glightbox-container .gclose svg,
.glightbox-container .gprev svg,
.glightbox-container .gnext svg {
  display: none !important;
}

.glightbox-container .gclose {
  width: 36px !important;
  height: 36px !important;
  background-position: 0 0;
}

.glightbox-container .gprev {
  width: 36px !important;
  height: 34px !important;
  background-position: 0 -36px;
}

.glightbox-container .gnext {
  width: 36px !important;
  height: 34px !important;
  background-position: 0 -72px;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .glightbox-container .gclose,
  .glightbox-container .gprev,
  .glightbox-container .gnext {
    background-image: url("../lib/glightbox/glightbox_sprite@2x.png");
  }
}