/* ==========================================================================
   PhotoSwipe caption customisation for editorial theme
   ========================================================================== */

/* Lightbox background adapts to theme */
.pswp {
  --pswp-bg: var(--color-bg);
}

/* Make close/arrow icons solid in light mode.
   By default PhotoSwipe uses white fill + dark stroke, which looks outlined
   against a light background. Override so the icon is a solid dark shape. */
:root:not([data-theme="dark"]) .pswp {
  --pswp-icon-color: var(--color-text);
  --pswp-icon-color-secondary: var(--color-bg);
  --pswp-icon-stroke-color: var(--color-bg);
}

/* Undo the override when system prefers dark and no explicit light theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pswp {
    --pswp-icon-color: #fff;
    --pswp-icon-color-secondary: #4f4f4f;
    --pswp-icon-stroke-color: #4f4f4f;
  }
}

.pswp-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem 1.5rem 1.25rem;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}

.pswp-caption__title {
  font-weight: 500;
  font-size: 0.9375rem;
  color: #f0eeea;
}

.pswp-caption__meta {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.02em;
}

.pswp-caption__link {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  margin-left: auto;
  transition: color 150ms, border-color 150ms;
}

.pswp-caption__link:hover {
  color: #f0eeea;
  border-color: rgba(255, 255, 255, 0.6);
}