/* FrontPress reusable image lightbox — pairs with lightbox.js.
 * Put these rules in your theme's @layer custom (or unlayered). The only token
 * used is --radius-s for the slide corners; swap for your theme's radius var
 * or a literal. Tune the backdrop colour to taste. */

img.is-zoomable { cursor: zoom-in; }
html.fp-lb-lock { overflow: hidden; }

.fp-lb {
  position: fixed; inset: 0; z-index: 200; display: flex;
  background: rgba(24, 18, 15, 0); overflow: hidden;
  opacity: 0; transition: opacity .28s ease, background .28s ease;
  -webkit-tap-highlight-color: transparent;
}
.fp-lb.is-open { opacity: 1; background: rgba(24, 18, 15, .92); }
.fp-lb[hidden] { display: none; }

.fp-lb__track { display: flex; width: 100%; height: 100%; will-change: transform; touch-action: pan-y; cursor: grab; }
.fp-lb__track:active { cursor: grabbing; }
.fp-lb__slide { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; padding: clamp(1.25rem, 5vw, 4rem); box-sizing: border-box; }
.fp-lb__slide img {
  max-width: 100%; max-height: 100%; object-fit: contain; user-select: none;
  border-radius: var(--radius-s, .6rem); box-shadow: 0 30px 80px -30px rgba(0,0,0,.8);
  -webkit-user-drag: none;
}

.fp-lb__close, .fp-lb__nav {
  position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px; cursor: pointer; backdrop-filter: blur(6px);
  transition: background .18s ease, opacity .18s ease, transform .18s ease;
}
.fp-lb__close:hover, .fp-lb__nav:not(:disabled):hover { background: rgba(255,255,255,.2); }
.fp-lb__close { top: clamp(.9rem,2vw,1.4rem); right: clamp(.9rem,2vw,1.4rem); width: 2.75rem; height: 2.75rem; font-size: 1.6rem; line-height: 1; }
.fp-lb__nav { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; font-size: 1.9rem; line-height: 1; padding-bottom: .15em; }
.fp-lb__nav--prev { left: clamp(.6rem,2vw,1.6rem); }
.fp-lb__nav--next { right: clamp(.6rem,2vw,1.6rem); }
.fp-lb__nav:disabled { opacity: .28; cursor: default; }

.fp-lb__counter {
  position: absolute; z-index: 2; bottom: clamp(1rem,3vw,1.75rem); left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.82); font-weight: 600; font-size: .9rem; letter-spacing: .06em;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  padding: .35em .9em; border-radius: 999px; backdrop-filter: blur(6px);
}
@media (max-width: 640px) { .fp-lb__nav { display: none; } /* swipe instead */ }
@media (prefers-reduced-motion: reduce) { .fp-lb { transition: opacity .01s; } }