/**
 * @file
 * Photo Gallery lightbox chrome.
 *
 * Only the inside of the PhotoSwipe popup is styled here: the previous /
 * next arrows, the close button, the image counter and the caption. The
 * gallery page itself — cards, thumbnails, spacing, colours, fonts, borders
 * — is untouched, because none of these selectors exist outside the popup.
 *
 * PhotoSwipe's own stylesheet (/libraries/photoswipe/dist/photoswipe.css)
 * keeps full control of the geometry of its controls. This file only raises
 * their contrast and makes the arrows available on touch devices, where
 * PhotoSwipe hides them by default.
 */

/* ---------------------------------------------------------
   Icon contrast

   PhotoSwipe draws a stroke behind every icon for exactly this purpose.
   Darkening and thickening it keeps the white chevrons, the close cross
   and the counter readable over pale photographs, without moving anything.
   --------------------------------------------------------- */
.pswp {
  --pswp-icon-color: #ffffff;
  --pswp-icon-color-secondary: rgba(0, 0, 0, 0.85);
  --pswp-icon-stroke-color: rgba(0, 0, 0, 0.85);
  --pswp-icon-stroke-width: 3px;
}

/* ---------------------------------------------------------
   Previous / next arrows

   Position and size stay as PhotoSwipe defines them (75 x 100, vertically
   centred against the popup); only visibility and contrast change.
   --------------------------------------------------------- */
.pswp__button--arrow {
  opacity: 1;
}

/* PhotoSwipe hides the arrows as soon as it detects a touch screen. The
   gallery has to be browsable by tapping too, so bring them back — swipe
   still works exactly as before. */
.pswp--touch .pswp__button--arrow {
  visibility: visible;
}

.pswp__button--arrow:hover .pswp__icn,
.pswp__button--arrow:focus-visible .pswp__icn {
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.65));
}

.pswp__button--arrow:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -6px;
}

/* A single-image gallery keeps PhotoSwipe's own behaviour: no arrows. */
.pswp--one-slide .pswp__button--arrow {
  display: none;
}

/* ---------------------------------------------------------
   Top bar: counter (left) and close button (right)
   --------------------------------------------------------- */
.pswp__top-bar {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.pswp__counter {
  padding: 0 12px;
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.45);
  font-weight: 600;
  letter-spacing: 0.4px;
  opacity: 1;
}

.pswp__button--close {
  opacity: 1;
}

.pswp__button--close:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -8px;
}

/* ---------------------------------------------------------
   Caption — the image title, read from the thumbnail markup
   --------------------------------------------------------- */
.pswp__nba-caption {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 1500;
  max-width: calc(100% - 190px);
  padding: 7px 16px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

/* ---------------------------------------------------------
   Small screens
   --------------------------------------------------------- */
@media (max-width: 767px) {
  .pswp__counter {
    margin-inline-start: 12px;
    padding: 0 10px;
    font-size: 13px;
  }

  .pswp__nba-caption {
    bottom: 12px;
    max-width: calc(100% - 24px);
    padding: 6px 12px;
    font-size: 12.5px;
  }
}