/**
 * Wings Enhanced PhotoSwipe Lightbox Styles
 *
 * Provides a polished, accessible lightbox experience with:
 * - Darkened padding around images
 * - Elegant navigation arrows on hover
 * - Zoom controls and indicators
 * - Smooth transitions
 * - Full accessibility support
 */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */
.pswp {
  /* Background and overlay */
  --pswp-bg: rgba(0, 0, 0, 0.92);
  --pswp-placeholder-bg: rgba(30, 30, 30, 0.5);

  /* Spacing - creates padding around images */
  --wings-lightbox-padding: 60px;
  --wings-lightbox-padding-mobile: 20px;

  /* UI Colors */
  --wings-lightbox-ui-bg: rgba(0, 0, 0, 0.5);
  --wings-lightbox-ui-bg-hover: rgba(0, 0, 0, 0.75);
  --wings-lightbox-ui-color: #fff;
  --wings-lightbox-ui-color-muted: rgba(255, 255, 255, 0.7);

  /* Arrow button sizing */
  --wings-arrow-size: 56px;
  --wings-arrow-icon-size: 24px;

  /* Transitions */
  --wings-transition-fast: 150ms ease;
  --wings-transition-normal: 250ms ease;
  --wings-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Focus ring */
  --wings-focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   Base Lightbox Styles
   ========================================================================== */

/* Semi-transparent background instead of solid black */
.pswp__bg {
  background: var(--pswp-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Add padding to the content area so images don't fill the viewport */
.pswp__container {
  padding: var(--wings-lightbox-padding);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .pswp__container {
    padding: var(--wings-lightbox-padding-mobile);
    padding-top: 70px; /* Extra space for top bar on mobile */
    padding-bottom: 80px; /* Space for caption */
  }
}

/* Ensure images display properly */
.pswp__img {
  display: block;
  object-fit: contain;
}

/* ==========================================================================
   Top Bar - Close, Zoom, Counter
   ========================================================================== */
.pswp__top-bar {
  height: auto;
  padding: 12px 16px;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.3) 70%,
    transparent 100%
  );
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: opacity var(--wings-transition-normal);
}

.pswp--ui-visible .pswp__top-bar {
  opacity: 1;
}

/* Show top bar on hover or focus within */
.pswp:hover .pswp__top-bar,
.pswp:focus-within .pswp__top-bar {
  opacity: 1;
}

/* Counter styling */
.pswp__counter {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--wings-lightbox-ui-color);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  margin: 0;
  padding: 8px 16px;
  background: var(--wings-lightbox-ui-bg);
  border-radius: 20px;
  height: auto;
  line-height: 1;
}

/* ==========================================================================
   Button Styles (Close, Zoom)
   ========================================================================== */
.pswp__button {
  width: 44px;
  height: 44px;
  background: var(--wings-lightbox-ui-bg);
  border-radius: 50%;
  transition:
    background-color var(--wings-transition-fast),
    transform var(--wings-transition-fast),
    box-shadow var(--wings-transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pswp__button:hover {
  background: var(--wings-lightbox-ui-bg-hover);
  transform: scale(1.05);
}

.pswp__button:focus {
  outline: none;
  box-shadow: var(--wings-focus-ring);
}

.pswp__button:active {
  transform: scale(0.95);
}

.pswp__button .pswp__icn {
  position: static;
  width: 24px;
  height: 24px;
  margin: 0;
}

/* Close button */
.pswp__button--close {
  margin-right: 0;
}

/* Zoom button */
.pswp__button--zoom {
  margin-right: 8px;
}

/* ==========================================================================
   Navigation Arrows
   ========================================================================== */
.pswp__button--arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--wings-arrow-size);
  height: var(--wings-arrow-size);
  background: var(--wings-lightbox-ui-bg);
  border-radius: 50%;
  opacity: 0;
  transition:
    opacity var(--wings-transition-normal),
    background-color var(--wings-transition-fast),
    transform var(--wings-transition-fast);
  margin: 0;
  z-index: 20;
}

/* Position arrows with comfortable spacing from edge */
.pswp__button--arrow--prev {
  left: 20px;
}

.pswp__button--arrow--next {
  right: 20px;
}

@media (max-width: 768px) {
  .pswp__button--arrow--prev {
    left: 10px;
  }

  .pswp__button--arrow--next {
    right: 10px;
  }

  .pswp__button--arrow {
    --wings-arrow-size: 48px;
  }
}

/* Show arrows on hover */
.pswp:hover .pswp__button--arrow,
.pswp:focus-within .pswp__button--arrow,
.pswp--has_mouse .pswp__button--arrow {
  opacity: 1;
}

/* Hide arrows on single slide galleries */
.pswp--one-slide .pswp__button--arrow {
  display: none !important;
}

/* Arrow hover states */
.pswp__button--arrow:hover {
  background: var(--wings-lightbox-ui-bg-hover);
  transform: translateY(-50%) scale(1.1);
}

.pswp__button--arrow:focus {
  opacity: 1;
  outline: none;
  box-shadow: var(--wings-focus-ring);
}

.pswp__button--arrow:active {
  transform: translateY(-50%) scale(0.95);
}

/* Arrow icons */
.pswp__button--arrow .pswp__icn {
  position: static;
  width: var(--wings-arrow-icon-size);
  height: var(--wings-arrow-icon-size);
  margin: 0;
  top: auto;
  left: auto;
}

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

/* Touch device visibility - show briefly, then hide */
.pswp--touch .pswp__button--arrow {
  visibility: visible;
  opacity: 0;
}

.pswp--touch.pswp--open .pswp__button--arrow {
  animation: wings-arrow-hint 3s ease forwards;
}

@keyframes wings-arrow-hint {
  0% { opacity: 0; }
  10% { opacity: 0.8; }
  30% { opacity: 0.8; }
  100% { opacity: 0; }
}

/* ==========================================================================
   Zoom Indicator
   ========================================================================== */
.wings-zoom-indicator {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  background: var(--wings-lightbox-ui-bg);
  border-radius: 25px;
  color: var(--wings-lightbox-ui-color);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--wings-transition-fast);
  z-index: 15;
}

.wings-zoom-indicator--visible {
  opacity: 1;
}

.wings-zoom-indicator__icon {
  width: 18px;
  height: 18px;
}

/* ==========================================================================
   Caption Styles
   ========================================================================== */
.pswp__wings-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.4) 70%,
    transparent 100%
  );
  color: var(--wings-lightbox-ui-color);
  padding: 40px 20px 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  max-height: 30%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 10;
  transition: opacity var(--wings-transition-normal);
}

.pswp__wings-caption:empty {
  display: none;
}

@media (max-width: 768px) {
  .pswp__wings-caption {
    font-size: 14px;
    padding: 30px 16px 16px;
  }
}

/* ==========================================================================
   Loading Indicator
   ========================================================================== */
.pswp__preloader {
  width: 44px;
  height: 44px;
  background: var(--wings-lightbox-ui-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.pswp__preloader .pswp__icn {
  position: static;
  width: 24px;
  height: 24px;
  margin: 0;
  top: auto;
  left: auto;
}

/* ==========================================================================
   Cursor States for Zoom
   ========================================================================== */

/* When zoom is available, show zoom-in cursor */
.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
  cursor: zoom-in;
}

/* When zoomed in, show grab cursor for panning */
.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
  cursor: grab;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
  cursor: grabbing;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Visible focus states for all interactive elements */
.pswp button:focus-visible,
.pswp a:focus-visible {
  outline: none;
  box-shadow: var(--wings-focus-ring);
}

/* Screen reader only text */
.pswp__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .pswp,
  .pswp *,
  .pswp *::before,
  .pswp *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .pswp {
    --wings-lightbox-ui-bg: rgba(0, 0, 0, 0.9);
    --wings-lightbox-ui-color: #fff;
  }

  .pswp__button,
  .pswp__button--arrow {
    border: 2px solid var(--wings-lightbox-ui-color);
  }
}

/* ==========================================================================
   Error State
   ========================================================================== */
.pswp__error-msg-container {
  background: var(--wings-lightbox-ui-bg);
  border-radius: 8px;
  padding: 40px;
  max-width: 400px;
  margin: auto;
  text-align: center;
}

.pswp__error-msg {
  color: var(--wings-lightbox-ui-color);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}