:root {
  --leveltech-lightbox-accent: #ff1f2d;
  --leveltech-lightbox-background: rgba(10, 10, 12, 0.96);
  --leveltech-lightbox-surface: rgba(20, 20, 24, 0.55);
  --leveltech-lightbox-text: #ffffff;
}

/* Editorial images: signal zoomability without altering the article layout. */
.ltl-lightbox-image {
  cursor: zoom-in;
}

/* The caption sits on top of the image and opens it too, so it carries the
   same affordance — except where it holds a link of its own. */
figure:has(> .ltl-lightbox-image) > figcaption,
figure:has(> a > .ltl-lightbox-image) > figcaption {
  cursor: zoom-in;
}

figure > figcaption a {
  cursor: pointer;
}

.ltl-lightbox-image:focus-visible {
  outline: 2px solid var(--leveltech-lightbox-accent);
  outline-offset: 2px;
}

/* PhotoSwipe skin overrides */
.pswp--leveltech .pswp__bg {
  background: var(--leveltech-lightbox-background);
}

.pswp--leveltech .pswp__top-bar {
  background: linear-gradient(to bottom, rgba(10, 10, 12, 0.65), rgba(10, 10, 12, 0));
  padding: 12px 16px;
}

.pswp--leveltech .pswp__button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: var(--leveltech-lightbox-text);
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.pswp--leveltech .pswp__button:hover,
.pswp--leveltech .pswp__button:focus-visible {
  background-color: var(--leveltech-lightbox-surface);
  color: var(--leveltech-lightbox-accent);
}

.pswp--leveltech .pswp__button:focus-visible {
  outline: 2px solid var(--leveltech-lightbox-accent);
  outline-offset: -2px;
}

/* Close button: top-right, sober */
.pswp--leveltech .pswp__button--close {
  margin-left: auto;
}

/* Prev/next arrows.
   Only the chrome is restyled here: PhotoSwipe positions and vertically
   centres these buttons itself, so overriding top/transform/left/right would
   fight its own layout. */
.pswp--leveltech .pswp__button--arrow .pswp__icn {
  background-color: var(--leveltech-lightbox-surface);
  border-radius: 8px;
  transition: background-color 0.15s ease;
}

.pswp--leveltech .pswp__button--arrow:hover .pswp__icn,
.pswp--leveltech .pswp__button--arrow:focus-visible .pswp__icn {
  background-color: rgba(255, 31, 45, 0.22);
}

/* Counter, e.g. "3 / 12" */
.pswp--leveltech .pswp__counter {
  color: var(--leveltech-lightbox-text);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.pswp--leveltech .pswp__img {
  object-fit: contain;
}

@media (max-width: 768px) {
  .pswp--leveltech .pswp__top-bar {
    padding: 10px 12px;
  }
}