/* pss-shared: PhotoSwipe + embedded carousel styles
   - Cleaned / namespaced PhotoSwipe rules to avoid legacy conflicts
   - Added responsive, accessible carousel styles (no external libs)
   - Keeps fullscreen / fill / click-zoom classes and topbar styling
*/

/* ----------------------------
   NAMESPACE / RESET (avoid legacy conflicts)
   ----------------------------
   Use a narrow prefix for our runtime tweaks so other admin CSS (legacy)
   doesn't unexpectedly override the pswp layout. We still let PhotoSwipe
   core classes operate, but ensure our rules are specific and robust.
*/
.pss-pswp-root .pswp,
.pss-pswp-root .pswp__scroll-wrap,
.pss-pswp-root .pswp__container,
.pss-pswp-root .pswp__item,
.pss-pswp-root .pswp__zoom-wrap {
  box-sizing: border-box !important;
}

/* Ensure overlay covers viewport and sits above admin chrome.
   We scope final overlay rules to .pss-pswp-root .pswp which we add when PhotoSwipe opens.
   This avoids collisions with global .pswp rules that legacy CSS might set.
*/
.pss-pswp-root .pswp {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 200000 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent;
}

/* Container & items: ensure they don't collapse */
.pss-pswp-root .pswp__container { width: 100% !important; height: 100% !important; overflow: visible !important; }
.pss-pswp-root .pswp__item { width: 100% !important; height: 100% !important; min-width: 48px !important; min-height: 48px !important; display: block !important; box-sizing: border-box !important; }

/* Zoom-wrap: center and allow sizing */
.pss-pswp-root .pswp__zoom-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
  transform-origin: center center !important;
}

/* Default image sizing (safer defaults than global rules) */
.pss-pswp-root .pswp__img,
.pss-pswp-root .pswp__zoom-wrap img.pswp__img,
.pss-pswp-root .pswp__zoom-wrap .pswp__img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: calc(100vw - 96px) !important;
  max-height: calc(100vh - 96px) !important;
  object-fit: contain !important;
  box-sizing: border-box !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Fill mode (CSS-driven near-fullscreen) */
body.pss-pswp-fill .pswp__img,
body.pss-pswp-fill .pswp__zoom-wrap img.pswp__img,
.pss-pswp-root.pss-pswp-fullscreen .pswp__img,
.pss-pswp-root.pss-pswp-fullscreen .pswp__zoom-wrap img.pswp__img {
  max-width: 98vw !important;
  max-height: 98vh !important;
}

/* Click-to-zoom CSS variable approach (controlled by JS) */
:root { --pss-pswp-zoom-scale: 1.6; }
body.pss-pswp-click-zoom .pss-pswp-root .pswp__zoom-wrap,
.pss-pswp-root.pss-pswp-click-zoom .pswp__zoom-wrap {
  transition: transform .22s ease !important;
  transform-origin: center center !important;
  transform: scale(var(--pss-pswp-zoom-scale, 1.6)) !important;
}

/* Cursor affordance */
.pss-pswp-root .pswp__zoom-wrap img { cursor: zoom-in; }
body.pss-pswp-click-zoom .pss-pswp-root .pswp__zoom-wrap img { cursor: zoom-out; }

/* Topbar control visual style (injected controls get these classes) */
.pss-topbar-controls .pss-topbar-btn,
.pss-topbar-controls .pss-top-download {
  color: #fff;
  background: rgba(0,0,0,0.45);
  border-radius: 4px;
  backdrop-filter: blur(4px);
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.pss-topbar-controls .pss-topbar-btn:hover,
.pss-topbar-controls .pss-top-download:hover { background: rgba(0,0,0,0.65); }

/* Ensure injected controls appear above PSWP internal elements */
.pss-topbar-controls { z-index: 200001 !important; pointer-events: auto !important; }

/* ----------------------------
   EMBEDDED CAROUSEL STYLES
   ----------------------------
   Lightweight accessible carousel/slider that works on desktop & mobile.
   Markup expected:
   <div class="pss-carousel" aria-roledescription="carousel" data-pss-carousel>
     <button class="pss-carousel-prev" aria-label="Previous">‹</button>
     <div class="pss-carousel-viewport">
       <div class="pss-carousel-track">
         <div class="pss-carousel-slide"> ... anchor + img ... </div>
         ...
       </div>
     </div>
     <button class="pss-carousel-next" aria-label="Next">›</button>
   </div>
*/

/* Container */
.pss-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
}

/* Prev/next buttons */
.pss-carousel-prev,
.pss-carousel-next {
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  user-select: none;
}
.pss-carousel-prev[aria-hidden="true"],
.pss-carousel-next[aria-hidden="true"] { opacity: 0.3; pointer-events: none; }

/* Viewport with overflow hidden */
.pss-carousel-viewport {
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0; /* allow flex item to shrink */
}

/* Track is a horizontal flex row; we'll translate it */
.pss-carousel-track {
  display: flex;
  gap: 12px;
  will-change: transform;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

/* Individual slide */
.pss-carousel-slide {
  flex: 0 0 auto;
  width: 220px; /* default slide width; adjusted via media queries */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Make thumbnail images fit slide */
.pss-carousel-slide .pss-thumbnail {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* Smaller slides on narrow screens */
@media (max-width: 900px) {
  .pss-carousel-slide { width: 160px; }
}
@media (max-width: 560px) {
  .pss-carousel-slide { width: 120px; }
  .pss-carousel-prev, .pss-carousel-next { width: 34px; height: 34px; font-size: 18px; }
}

/* Focus outlines for accessibility */
.pss-carousel :focus { outline: 3px solid rgba(0,123,255,0.25); outline-offset: 2px; }

/* Optional dot indicators (if you choose to add them) */
.pss-carousel-dots { display:flex; gap:6px; justify-content:center; margin-top:8px; }
.pss-carousel-dots button { width:8px; height:8px; border-radius:50%; background:#ccc; border:0; padding:0; }
.pss-carousel-dots button[aria-current="true"] { background:#333; }

/* ----------------------------
   End of file
   ---------------------------- */