/* ==========================================================================
   图片灯箱：左右切换 + 缩放 / Shared lightbox navigation & zoom
   --------------------------------------------------------------------------
   成功案例、平台政策、申诉问答留言附件三个页面的图片预览共用同一套切换与缩放
   控件：两侧圆形按钮 + 底部「第几张 / 共几张」计数器 + 右下角缩放控件，
   键盘 ← → 切换、滚轮 / 双指缩放。
   控件由 js/image-lightbox.js 注入灯箱根节点：只有一组里超过 1 张图时才显示
   左右切换，放大超过原始大小时才显示缩放控件。
   ========================================================================== */

.lightbox-nav {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.lightbox-nav[hidden] { display: none; }

.lightbox-nav-btn {
  position: absolute;
  top: 50%;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 50%;
  color: #fff;
  background: rgba(20, 31, 43, .62);
  font-size: 15px;
  transform: translateY(-50%);
  pointer-events: auto;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}

.lightbox-nav-btn.is-prev { left: 22px; }
.lightbox-nav-btn.is-next { right: 22px; }

.lightbox-nav-btn:hover,
.lightbox-nav-btn:focus-visible { color: #ffd48b; border-color: rgba(255, 212, 139, .7); background: rgba(20, 31, 43, .9); }
.lightbox-nav-btn:focus-visible { outline: 2px solid #ffd48b; outline-offset: 2px; }

.lightbox-nav-count {
  position: absolute;
  left: 50%;
  bottom: 22px;
  margin: 0;
  padding: 7px 15px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  color: #fff;
  background: rgba(20, 31, 43, .66);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: auto;
}

/* 张数计数器是这一版灯箱的公共控件，页面自己的样式不该把它藏起来 */
.lightbox-nav .lightbox-nav-count { display: block; }

.lightbox-nav-count small { margin-left: 9px; color: rgba(255, 255, 255, .6); font-size: 11px; font-weight: 500; }

/* --------------------------------------------------------------------------
   缩放控件：右下角的「− 100% + 还原」，只在放大后出现
   -------------------------------------------------------------------------- */

.lightbox-zoom {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(20, 31, 43, .7);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
}

.lightbox-zoom[hidden] { display: none; }

.lightbox-zoom-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: transparent;
  font-size: 12px;
  line-height: 1;
  transition: color .16s ease, background .16s ease;
}

.lightbox-zoom-btn:hover,
.lightbox-zoom-btn:focus-visible { color: #ffd48b; background: rgba(255, 212, 139, .14); }
.lightbox-zoom-btn:focus-visible { outline: 2px solid #ffd48b; outline-offset: 1px; }
.lightbox-zoom-btn.is-reset { margin-left: 2px; border-left: 1px solid rgba(255, 255, 255, .18); border-radius: 0 999px 999px 0; }
.lightbox-zoom.is-min .lightbox-zoom-btn[data-lightbox-zoom-out],
.lightbox-zoom.is-max .lightbox-zoom-btn[data-lightbox-zoom-in] { color: rgba(255, 255, 255, .32); }

.lightbox-zoom-value { min-width: 40px; color: rgba(255, 255, 255, .82); font-size: 11px; font-weight: 700; text-align: center; }

/* --------------------------------------------------------------------------
   灯箱里的图片：缩放靠 cursor 提示，放大后可以拖拽平移
   -------------------------------------------------------------------------- */

/* 灯箱打开期间接管滚轮与触摸手势，避免页面跟着滚、浏览器拿双指去缩整页 */
.case-lightbox,
.image-lightbox,
.community-lightbox { touch-action: none; overscroll-behavior: contain; }

.case-lightbox.is-zoomed,
.image-lightbox.open.is-zoomed,
.community-lightbox.open.is-zoomed,
.community-lightbox.is-zoomed { cursor: grab; }

.case-lightbox.is-panning,
.image-lightbox.is-panning,
.community-lightbox.is-panning { cursor: grabbing; }

@media (max-width: 760px) {
  .lightbox-nav-btn { width: 38px; height: 38px; font-size: 13px; }
  .lightbox-nav-btn.is-prev { left: 10px; }
  .lightbox-nav-btn.is-next { right: 10px; }
  .lightbox-nav-count { bottom: 14px; padding: 6px 12px; font-size: 11px; }
  .lightbox-nav-count small { display: none; }
  .lightbox-zoom { right: 12px; bottom: 64px; gap: 2px; padding: 3px 5px; }
  .lightbox-zoom-btn { width: 32px; height: 32px; font-size: 13px; }
  .lightbox-zoom-value { min-width: 38px; }
}