/* =============================================================
   ProAlert : Image Lightbox
   Content images become tap targets that open full screen.
   Pairs with assets/js/lightbox.js, which injects the markup.
   ============================================================= */

/* ===== TRIGGER (wrapper the JS puts around each eligible image) ===== */
.pa-lb-trigger {
  /* display:block is load bearing. The images this wraps are block level and
     sized by their container, several of them lazily. A shrink-to-fit wrapper
     (inline-block) resolves its width from the image's intrinsic width, which
     is zero until a lazy image loads, and collapses the image to nothing. */
  display: block;
  position: relative;
  width: 100%;
  /* Keeps the percentage-height chain intact for the split panels, where the
     image is height:100% of a stretched grid cell. Resolves to auto anywhere
     the parent height is auto, so it is a no-op everywhere else. */
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  line-height: 0;
  text-align: inherit;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

.pa-lb-trigger:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* ===== ZOOM BADGE ===== */
/* top and right are set inline by the JS so the badge tracks the image itself,
   not the wrapper, for images narrower than the column they sit in. */
.pa-lb-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(10, 12, 10, 0.72);
  color: var(--accent);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.pa-lb-badge svg { width: 16px; height: 16px; display: block; }

.pa-lb-trigger:hover .pa-lb-badge,
.pa-lb-trigger:focus-visible .pa-lb-badge {
  opacity: 1;
  transform: none;
}

/* Touch devices have no hover, so the affordance stays visible. */
@media (hover: none) {
  .pa-lb-badge { opacity: 0.9; transform: none; }
}

/* ===== OVERLAY ===== */
.pa-lb {
  position: fixed;
  inset: 0;
  z-index: 100000;               /* above the help widget (99999) */
  display: flex;
  align-items: center;
  justify-content: center;
  overscroll-behavior: contain;
}

.pa-lb[hidden] { display: none; }

.pa-lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 6, 0.985);
  animation: pa-lb-fade 0.2s ease;
}

.pa-lb-stage {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /* Top clears the close button. The bottom is set by the JS to whatever the
     caption bar and the phone's nav arrows actually need, so the image is
     centred in the space left over rather than behind them. */
  padding: 64px 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;            /* pinch and pan are handled in JS */
}

.pa-lb-img {
  max-width: 96vw;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  transform-origin: center center;
  will-change: transform;
  animation: pa-lb-pop 0.2s ease;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.pa-lb-spinner {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  display: none;
  animation: pa-lb-spin 0.8s linear infinite;
}

.pa-lb.is-loading .pa-lb-spinner { display: block; }
.pa-lb.is-loading .pa-lb-img    { opacity: 0; }

@keyframes pa-lb-spin { to { transform: rotate(360deg); } }

.pa-lb.is-zoomed .pa-lb-img { cursor: grab; }
.pa-lb.is-panning .pa-lb-img { cursor: grabbing; }

/* Opacity only. The JS owns transform for zoom and pan, and a keyframed
   transform would win over the inline value while the animation runs. */
@keyframes pa-lb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pa-lb-pop  { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .pa-lb-backdrop, .pa-lb-img { animation: none; }
  .pa-lb-badge { transition: none; }
}

/* ===== CONTROLS ===== */
.pa-lb-btn {
  position: absolute;
  z-index: 3;                    /* above the caption bar, which overlaps them on phones */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(20, 22, 20, 0.72);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.pa-lb-btn:hover  { background: rgba(55, 202, 55, 0.22); border-color: var(--accent); }
.pa-lb-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pa-lb-btn svg    { width: 22px; height: 22px; display: block; }
.pa-lb-btn[hidden] { display: none; }

.pa-lb-close { top: 16px; right: 16px; }
.pa-lb-prev  { top: 50%; left: 16px;  transform: translateY(-50%); }
.pa-lb-next  { top: 50%; right: 16px; transform: translateY(-50%); }

/* ===== CAPTION BAR ===== */
.pa-lb-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  max-height: 26vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(6, 8, 6, 0.96), rgba(6, 8, 6, 0.72) 70%, rgba(6, 8, 6, 0));
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

.pa-lb-bar[hidden] { display: none; }

.pa-lb-kicker {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}

.pa-lb-cap { max-width: 900px; margin: 0 auto; }
.pa-lb-cap strong { color: #ffffff; }
.pa-lb-cap:empty { display: none; }

/* Long captions eat the screen on a phone, so they start clamped. */
.pa-lb-bar.is-clamped .pa-lb-cap {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pa-lb-more {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  cursor: pointer;
}

.pa-lb-more[hidden] { display: none; }

.pa-lb-hint {
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
  margin-top: 6px;
}

.pa-lb-hint[hidden] { display: none; }

.pa-lb-count {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 8px;
}

.pa-lb-count[hidden] { display: none; }

/* ===== MOBILE ===== */
@media (max-width: 640px) {
  .pa-lb-img   { max-width: 100vw; }
  .pa-lb-stage { padding-top: calc(56px + env(safe-area-inset-top, 0px)); }

  .pa-lb-btn { width: 44px; height: 44px; }
  .pa-lb-close { top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; }

  /* Off the image and down beside the counter, where a thumb reaches them. */
  .pa-lb-prev, .pa-lb-next {
    top: auto;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    transform: none;
  }
  .pa-lb-prev { left: 10px; }
  .pa-lb-next { right: 10px; }

  .pa-lb-bar { font-size: 13px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .pa-lb.has-nav .pa-lb-bar { padding-left: 64px; padding-right: 64px; }
  .pa-lb-badge { height: 28px; padding: 0 8px; }
  .pa-lb-badge svg { width: 14px; height: 14px; }
}