/* Lightbox Component */

/* PhotoSwipe caption overlay */
.pswp__caption {
  text-align: center;
  padding: 12px 16px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

@media (prefers-reduced-motion: reduce) {
  [data-controller="lightbox"] img {
    transition-duration: 0.01ms !important;
  }
}

/* All toolbar icons are Heroicons outlines with stroke="currentColor",
   so force them to white to stay visible against PhotoSwipe's dark
   backdrop. */
.pswp__button--download-button,
.pswp__button--info-button,
.pswp__button--close,
.pswp__button--zoom {
  color: #fff;
}

/* Every toolbar button now uses a Heroicons outline SVG (download +
   info from custom registration, close/zoom via closeSVG/zoomSVG
   options). Size and position them identically so they share a
   single optical baseline. 22×22 inside a 50×60 button centers them
   via left:14 / top:19. */
.pswp__button--download-button > svg,
.pswp__button--info-button > svg,
.pswp__button--close > svg,
.pswp__button--zoom > svg {
  position: absolute !important;
  left: 14px !important;
  top: 19px !important;
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
}

/* Tight grouping for the action cluster (download / info / zoom),
   with a small extra gap separating the close button so it reads as
   a distinct affordance. */
.pswp .pswp__top-bar {
  gap: 0;
}

.pswp .pswp__top-bar .pswp__button--close {
  margin-inline-start: 6px;
}

/* Image info panel triggered by the info-button toolbar element.
   Slides in from the right inside the PhotoSwipe wrapper. The
   `.pswp` prefix bumps specificity above PhotoSwipe's default
   `.pswp *` transition which would otherwise fight our transform. */
.pswp .pswp__info-panel {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  block-size: 100%;
  inline-size: min(420px, 90%);
  background: #ffffff;
  color: #111827;
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.45);
  transform: translateX(100%);
  transition: transform 350ms var(--ease-drawer) !important;
  z-index: 1600 !important;
  overflow-y: auto;
  padding: 0;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.pswp .pswp__info-panel--open {
  transform: translateX(0);
}

.pswp__info-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.125rem 0.75rem;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 1;
}

.pswp__info-panel__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.01em;
}

.pswp__info-panel__close {
  position: static;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: #4b5563;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease-out, color 150ms ease-out;
  flex-shrink: 0;
}

.pswp__info-panel__close:hover {
  background: rgba(17, 24, 39, 0.06);
  color: #111827;
}

.pswp__info-panel__body {
  padding: 0.875rem 1.125rem;
}

.pswp__info-panel__section {
  margin-bottom: 1.125rem;
}

.pswp__info-panel__section:last-child {
  margin-bottom: 0;
}

.pswp__info-panel__heading {
  margin: 0 0 0.4375rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.005em;
}

.pswp__info-panel__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.3rem 0;
  font-size: 0.8125rem;
}

.pswp__info-panel__label {
  color: #4b5563;
  font-weight: 400;
  flex-shrink: 0;
}

.pswp__info-panel__value {
  color: #111827;
  font-weight: 400;
  text-align: right;
  word-break: break-word;
  min-width: 0;
}

.pswp__info-panel__loading,
.pswp__info-panel__empty,
.pswp__info-panel__error {
  color: #6b7280;
  font-size: 0.8125rem;
  padding: 0.5rem 0;
}

/* Consumer-defined lightbox panels (see LightboxComponent `panels:`). The gem
   owns the chrome: a right-hand side panel on desktop, a bottom sheet on the
   mobile breakpoint. The shell is relocated into the PhotoSwipe root by the
   controller, so it is positioned against that fixed, full-screen overlay. It
   stays off-screen (and non-interactive) until `--open` is added, giving a
   symmetric slide-in / slide-out either way. */
.lightbox-panel {
  position: absolute;
  background: #ffffff;
  color: #111827;
  z-index: 1600;
  overflow-y: auto;
  pointer-events: none;
  transition: transform 350ms var(--ease-drawer) !important;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.lightbox-panel--open {
  pointer-events: auto;
}

.lightbox-panel--side {
  inset-block-start: 0;
  inset-inline-end: 0;
  block-size: 100%;
  inline-size: min(420px, 90%);
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.45);
  transform: translateX(100%);
}

.lightbox-panel--side.lightbox-panel--open {
  transform: translateX(0);
}

.lightbox-panel--sheet {
  inset-inline: 0;
  inset-block-end: 0;
  max-block-size: 80%;
  border-start-start-radius: 16px;
  border-start-end-radius: 16px;
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.45);
  transform: translateY(100%);
}

.lightbox-panel--sheet.lightbox-panel--open {
  transform: translateY(0);
}

.lightbox-panel__body {
  padding: 0.875rem 1.125rem;
}

@media (prefers-reduced-motion: reduce) {
  .lightbox-panel {
    transition-duration: 0.01ms !important;
  }
}