/*
 * 内容页图片「点开看大图」（2026-09-21 作者反馈：发布后的文章里图片点不开、看不清）。
 *
 * 行为在 `/js/content-lightbox.js`（SSR 页面的脚本，与 site.js 同处 static/js）：
 * 模板给**容器**打 `data-zoom-images`，脚本只认这些容器里的图（头像、封面、列表缩略图不参与），
 * 点一下把图铺到本文件的大图层上。
 *
 * 观感与 App 相册的大图 `.al-lightbox` 对齐（遮罩 0.72 黑 + 背景模糊、右上角圆钮）；
 * 站内图片一律「列表/正文缩着看、点开用原图看细节」。
 * 颜色：遮罩是纯黑 + 透明度、文字用 --text-on-image（深色覆盖层上的中性色），不引入品牌色；
 * 关于页这类老模板没有 tokens.css，所以变量都带兜底值。
 */
[data-zoom-images] img {
  cursor: zoom-in;
}

.ap-lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(12px);
}

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

.ap-lightbox img {
  display: block;
  max-width: min(94vw, 1600px);
  max-height: 84vh;
  object-fit: contain;
  border-radius: var(--radius-lg, 12px);
}

.ap-lightbox-close {
  position: absolute;
  top: var(--space-5, 24px);
  right: var(--space-5, 24px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-on-image, #fff);
  cursor: pointer;
}

.ap-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.16);
}