/**
 * 图片灯箱样式（statics/vender/lightbox.css，配套 lightbox.js）
 *
 * 主题约定：灯箱压在整屏深色遮罩上，配色**故意不跟随站点亮/暗主题** ——
 * 若把标题/计数映射到 --card / --text，亮主题下会变成「浅灰条压在黑底上」，
 * 暗主题下又变成「深灰压黑底」，两头都读不清。所以这里是一组固定的 --lb-* 亮色。
 * 唯一跟随站点主题的是主色（焦点环、序号），走 --pg-ui-primary 由前台 home.css 桥接。
 */
:root{
    --lb-mask:rgba(8,11,15,.92);
    --lb-fg:#eef3f7;
    --lb-fg-dim:rgba(238,243,247,.66);
    --lb-btn-bg:rgba(255,255,255,.12);
    --lb-btn-bg-hover:rgba(255,255,255,.22);
    --lb-btn-border:rgba(255,255,255,.22);
    --lb-radius:10px;
}

/* 正文与楼层里的图：给出「可放大」的指针，避免用户点了没反应 */
.post-content img,[data-lightbox] img{cursor:zoom-in}

.lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:clamp(12px,4vw,40px)}
.lb[hidden]{display:none}
/* ⚠️ JS 用 hidden 属性控制上一张/下一张与标题，flex 容器里的 hidden 必须显式压回 display:none */
.lb [hidden]{display:none !important}
.lb-mask{position:absolute;inset:0;background:var(--lb-mask)}
/* .lb-panel 保持 static：三个按钮因此以「整屏」为定位基准，
   图很小或很大时按钮都贴在视口边上，不会挤在图片两侧。 */
.lb-panel{position:static;margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:100%}
.lb-stage{position:relative;display:flex;align-items:center;justify-content:center;min-width:120px;min-height:120px}
.lb-img{display:block;max-width:min(92vw,1400px);max-height:78vh;width:auto;height:auto;
    border-radius:var(--lb-radius);box-shadow:0 18px 48px rgba(0,0,0,.5);background:#0f141a;transition:opacity .15s ease}
.lb-loading .lb-img{opacity:0}
.lb-loading .lb-stage::before{content:"";position:absolute;width:34px;height:34px;border:3px solid rgba(255,255,255,.25);
    border-top-color:#fff;border-radius:50%;animation:lb-spin .7s linear infinite}
@keyframes lb-spin{to{transform:rotate(360deg)}}

.lb-tip{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    color:var(--lb-fg-dim);font-size:14px;text-align:center}
.lb-tip b{color:var(--lb-fg);font-weight:600}
.lb-open{color:var(--pg-ui-primary,#0f9d8f);text-decoration:underline;font-size:13px}

.lb-cap{display:flex;align-items:baseline;justify-content:center;gap:10px;max-width:min(92vw,1400px);
    color:var(--lb-fg-dim);font-size:13px;line-height:1.5;text-align:center}
.lb-cap-t{color:var(--lb-fg)}
.lb-cap-n{font-variant-numeric:tabular-nums;white-space:nowrap}

.lb-btn{position:absolute;display:flex;align-items:center;justify-content:center;
    width:42px;height:42px;padding:0;border:1px solid var(--lb-btn-border);border-radius:50%;
    background:var(--lb-btn-bg);color:var(--lb-fg);cursor:pointer;transition:background .15s ease,opacity .15s ease}
.lb-btn svg{display:block;width:22px;height:22px}
.lb-btn:hover{background:var(--lb-btn-bg-hover)}
.lb-btn:focus-visible{outline:2px solid var(--pg-ui-primary,#0f9d8f);outline-offset:2px}
.lb-btn[disabled]{opacity:.3;cursor:default}
.lb-prev{left:clamp(8px,2vw,24px);top:50%;transform:translateY(-50%)}
.lb-next{right:clamp(8px,2vw,24px);top:50%;transform:translateY(-50%)}
.lb-close{top:clamp(8px,2vw,20px);right:clamp(8px,2vw,20px)}

/* 打开灯箱时锁页面滚动；overflow 加在 html 上（与 body 上的自定义滚动条样式不打架） */
html.lb-lock{overflow:hidden}

@media (max-width:640px){
    .lb-img{max-height:70vh}
    .lb-btn{width:36px;height:36px}
    .lb-btn svg{width:19px;height:19px}
}