/* ============================================================
   图片灯箱浮层（lightbox.css）——§53 灯箱 1:1 复刻 WP（2026-09-13）
   ============================================================
   权威源：D:\wordpress\wp-includes\blocks\image\style.css 198-488 行
   （WP 7.1 core 编译产物），选择器/数值/动画逐条同构；拍板记录见
   GUTENBERG_ALIGNMENT_PLAN.md §53 与 lightbox.js 文件头。

   仅在前台作品页 / 草稿预览页加载（used_module_js_css 按内容收集，
   与 lightbox.js 同生命周期）。编辑器不加载——画布内不跑灯箱 JS。

   拍板差异（Q2=1:1 前提下的十项 2026-09-13 拍板）：
   - D1 画廊翻页维持项目口径（全页开灯箱的图组画廊）——WP 翻页仅
     限画廊块内，存档有意偏离，gallery 模组立项时再对齐
   - D2 服务端硬闸：有链接（link_type≠none）不启用灯箱（模板条件）
   - D3 不做悬停放大镜钮 → .wp-lightbox-container 的 relative/flex
     （钮的定位载体）无消费者不搬，仅保留 img 的 zoom-in 光标
   - D5 灯箱内图注隐藏（WP figcaption display:none 同构）
   - D6 无视觉计数（屏读通知由 JS 输出、按 .screen-reader-text
     隐藏——该规则 2026-09-15 补齐，此前漏搬致计数串直露顶部）
   - D7/D8 无 loading 指示、hover 200ms preload 预载（JS 层）
   - D9 类名照抄 WP 原名；D10 文案用 zh_CN 官方译文（JS 层）

   层级：WP 字面 100000~5000000（前台导航 nav.css 是 1000 量级，
   被完全盖住，无冲突）。

   选择器特异注记：overlay 内 figure 规则 WP 字面是
   .wp-lightbox-overlay .wp-block-image（0,2,0）；项目正文 figure 类
   是 work-module-image，且水平三态规则 .work-module-wrap[data-align]
   .work-module-image 是 (0,3,0)——高于 WP 同位 0,2,0，会把 display:table
   带进 overlay。故本文件的 overlay 作用域规则统一加 div 元素选择器
   提到 (0,3,1)，级联上无条件压过三态，语义与 WP 字面等同。
   ============================================================ */

/* ---- 触发侧（WP style.css 198-205 + 107-112 同构）----
   WP 在启用灯箱的 figure 上加 wp-lightbox-container 类（image.php 259）。
   该类的 relative/flex-column 本体规则是悬停放大镜钮（D3 拍板不做）
   的定位载体，项目 figure 布局由 image.css 体系管理，故只搬光标；
   cursor 守卫（前台才生效）与 image.css 的 is-lightbox 规则双保险 */
.wp-lightbox-container:not(.is-editor) img {
    cursor: zoom-in;
}
/* 触发图显隐衔接（WP 107-112 字面，选择器换成项目 figure 类）：
   打开时正文图 visibility:hidden（防与 zoom 动画起点重叠闪现），
   关闭后 .show 让它延迟浮现（show-content-image 动画 0-99% 隐藏）。
   类的加减由 lightbox.js 管（WP data-wp-class--hide/show 同位） */
@media not (prefers-reduced-motion) {
    .work-module-image img.hide {
        visibility: hidden;
    }
    .work-module-image img.show {
        animation: show-content-image 0.4s;
    }
}

/* ---- overlay 本体（WP 250-261 字面）----
   fixed 全屏、zoom-out 光标；.active 才可见。zoom 类服务端恒加
   （image.php 349），配合下方 zoom 动画段（reduced-motion 自动回落
   到 turn-on/off 淡入淡出） */
.wp-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    visibility: hidden;
    cursor: zoom-out;
}

/* ---- 关闭钮（WP 262-288 字面；text 文案分支删——项目恒图标态，
   navigationButtonType 无 gallery 上下文恒 icon，存档）----
   safe-area 定位适配刘海屏；min 40px 触控最小尺寸；z-index 全场最高 */
.wp-lightbox-overlay .wp-lightbox-close-button {
    font-family: inherit;
    position: absolute;
    top: calc(env(safe-area-inset-top) + 16px);
    right: calc(env(safe-area-inset-right) + 16px);
    padding: 0 4px;
    cursor: pointer;
    z-index: 5000000;
    min-width: 40px;
    min-height: 40px;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.wp-lightbox-overlay .wp-lightbox-close-button:hover, .wp-lightbox-overlay .wp-lightbox-close-button:focus, .wp-lightbox-overlay .wp-lightbox-close-button:not(:hover):not(:active):not(.has-background) {
    background: none;
    border: none;
}
.wp-lightbox-overlay .wp-lightbox-close-icon svg {
    display: block;
}

/* ---- 翻页钮（几何按 WP 289-338；外观复刻首页卡片墙 .rail-btn）----
   几何：<960px 贴底两角、≥960px 垂直居中（WP 同款断点）；
   hidden 属性（JS 按单图/多图控制）= display:none（WP 305-308）。
   外观 2026-09-15 用户拍板：home.css .rail-btn 逐条复制——52px 圆、
   苹果商店同款浅灰底、悬停变白、投影、40px stroke 描边箭头。
   位置与外观拆两段：left/right/bottom 是 WP 字面几何，盒模型/配色
   是 rail 同款；hover 只搬配色不搬首页的 translateY(-50%)（那是
   rail 垂直居中的载体，灯箱 <960 贴底语境里会把按钮拽出屏幕） */
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev,
.wp-lightbox-overlay .wp-lightbox-navigation-button-next {
    position: absolute;
    z-index: 2000002;
    bottom: 16px;
}
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev[hidden],
.wp-lightbox-overlay .wp-lightbox-navigation-button-next[hidden] {
    display: none;
}
@media (min-width: 960px) {
    .wp-lightbox-overlay .wp-lightbox-navigation-button-prev,
    .wp-lightbox-overlay .wp-lightbox-navigation-button-next {
        bottom: 50%;
        transform: translateY(-50%);
    }
}
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev {
    left: calc(env(safe-area-inset-left) + 16px);
}
.wp-lightbox-overlay .wp-lightbox-navigation-button-next {
    right: calc(env(safe-area-inset-right) + 16px);
}
/* 外观段：复制源 = static/css/pages/home.css 153-190（.rail-btn），
   作用域加 overlay 前缀防与首页同名类互相污染 */
.wp-lightbox-overlay .lightbox-rail-btn {
    width: 52px;
    height: 52px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
    color: rgba(62, 62, 62, 0.5);
    background: rgba(229, 229, 229, 0.8);   /* 苹果商店同款浅灰 */
    box-shadow: 0 10px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease;
}
.wp-lightbox-overlay .lightbox-rail-btn:hover,
.wp-lightbox-overlay .lightbox-rail-btn:focus {
    background: rgba(249, 249, 249, 0.8);
}
.wp-lightbox-overlay .lightbox-rail-btn svg {
    display: block;            /* SVG 是内联元素，block 才能在圆钮里居中 */
    pointer-events: none;      /* 不拦截点击，click 永远落回 button */
}
/* 箭头在圆钮里的视觉居中偏移（rail 同款 ±1.5px） */
.wp-lightbox-overlay .lightbox-rail-btn-next svg { transform: translateX(1.5px); }
.wp-lightbox-overlay .lightbox-rail-btn-prev svg { transform: translateX(-1.5px); }

/* ---- 图片容器（WP 339-349 字面）----
   absolute 居中 + top-left 变换原点：zoom 动画从「正文图在屏幕上的
   真实位置」飞到居中，全靠 transform 起终点在这套原点约定下用
   CSS 变量算出（keyframes 见文件尾）——几何约定不可单独改动 */
.wp-lightbox-overlay .lightbox-image-container {
    position: absolute;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform-origin: top left;
    transform: translate(-50%, -50%);
    width: var(--wp--lightbox-container-width);
    height: var(--wp--lightbox-container-height);
    z-index: 2000001;
}

/* ---- overlay 内 figure / img（WP 350-367 同构，选择器加 div 提级）----
   figure 复制正文类名与 style（WP figureStyles/imgStyles 同构，JS 层）：
   is-style-rounded 圆角、--bd-* 边框组随变量带进来（WP 同行为——
   灯箱里的图保持正文的边框/圆角外观）；img 的宽高四变量由 JS 按
   正文图与视口计算写入（view.js setOverlayStyles 同位）。
   WP imgStyles 强制追加 object-fit:cover（JS 层同款）——overlay 内
   图始终按容器几何铺满，contain 的留白由容器尺寸计算消化 */
.wp-lightbox-overlay div.lightbox-image-container .work-module-image {
    position: relative;
    transform-origin: 0 0;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    z-index: 3000000;
    margin: 0;
}
.wp-lightbox-overlay div.lightbox-image-container .work-module-image img {
    min-width: var(--wp--lightbox-image-width);
    min-height: var(--wp--lightbox-image-height);
    width: var(--wp--lightbox-image-width);
    height: var(--wp--lightbox-image-height);
}
/* D5 拍板：overlay 内不输出图注（WP 368-370 同构防御层——overlay
   figure 只含 img，此规则防全局样式/未来改动漏进图注） */
.wp-lightbox-overlay div.lightbox-image-container .work-module-image figcaption {
    display: none;
}
.wp-lightbox-overlay button {
    border: none;
    background: none;
}

/* ---- scrim 遮罩（WP 375-382 字面）----
   白底 0.9（§53 拍板确认执行；WP 无 theme.json 语境默认同值——
   主题背景色机制项目无对应物，白值直接定死在 CSS） */
.wp-lightbox-overlay .scrim {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2000000;
    background-color: rgb(255, 255, 255);
    opacity: 0.9;
}

/* ---- 屏读通知隐藏（WP .screen-reader-text 全局规则同款）----
   「放大图片第 x 张，共 n 张」是给读屏软件的 aria-live 通知（D6，
   WP 字面输出，WP 里靠全局样式表隐藏）——项目此前漏搬这条规则，
   它成了 overlay 里唯一静态流元素，文字直露在顶部（2026-09-15
   用户报修的「第 x 张，共 n 张」根因）。按 WP 原版补齐：1px 裁切
   隐藏——视觉上等于删除，读屏功能照 WP 保留 */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* ---- 显隐与动画（WP 383-433 逐条）----
   .active 可见；show-closing-animation 类在关闭后保留 450ms（JS 层
   控制时序，等 0.4s 退场动画播完才摘）。reduced-motion 命中时三层
   动画全部失效 = 瞬切（WP @media not 守卫字面） */
.wp-lightbox-overlay.active {
    visibility: visible;
}
@media not (prefers-reduced-motion) {
    .wp-lightbox-overlay.active {
        animation: both turn-on-visibility 0.25s;
    }
}
@media not (prefers-reduced-motion) {
    .wp-lightbox-overlay.active img {
        animation: both turn-on-visibility 0.35s;
    }
}
@media not (prefers-reduced-motion) {
    .wp-lightbox-overlay.show-closing-animation:not(.active) {
        animation: both turn-off-visibility 0.35s;
    }
}
@media not (prefers-reduced-motion) {
    .wp-lightbox-overlay.show-closing-animation:not(.active) img {
        animation: both turn-off-visibility 0.25s;
    }
}
@media not (prefers-reduced-motion) {
    .wp-lightbox-overlay.zoom.active {
        opacity: 1;
        visibility: visible;
        animation: none;
    }
    .wp-lightbox-overlay.zoom.active .lightbox-image-container {
        animation: lightbox-zoom-in 0.4s;
    }
    .wp-lightbox-overlay.zoom.active .lightbox-image-container img {
        animation: none;
    }
    .wp-lightbox-overlay.zoom.active .scrim {
        animation: turn-on-visibility 0.4s forwards;
    }
    .wp-lightbox-overlay.zoom.show-closing-animation:not(.active) {
        animation: none;
    }
    .wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container {
        animation: lightbox-zoom-out 0.4s;
    }
    .wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container img {
        animation: none;
    }
    .wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .scrim {
        animation: turn-off-visibility 0.4s forwards;
    }
}

/* ---- keyframes（WP 435-488 字面）----
   show-content-image：触发图关闭后延迟浮现（0-99% 隐藏防重叠）
   turn-on/off-visibility：非 zoom 淡入淡出（reduced-motion 下整段不生效）
   lightbox-zoom-in/out：从正文图屏幕位置+尺寸 scale 起飞/回落——
   起点全部由 JS 写入的 CSS 变量表达（初始位置/容器尺寸/缩放比/
   滚动条宽度补偿），变量计算逻辑在 lightbox.js setOverlayStyles */
@keyframes show-content-image {
    0% {
        visibility: hidden;
    }
    99% {
        visibility: hidden;
    }
    100% {
        visibility: visible;
    }
}
@keyframes turn-on-visibility {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes turn-off-visibility {
    0% {
        opacity: 1;
        visibility: visible;
    }
    99% {
        opacity: 0;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}
@keyframes lightbox-zoom-in {
    0% {
        transform: translate(calc((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
    }
    100% {
        transform: translate(-50%, -50%) scale(1, 1);
    }
}
@keyframes lightbox-zoom-out {
    0% {
        visibility: visible;
        transform: translate(-50%, -50%) scale(1, 1);
    }
    99% {
        visibility: visible;
    }
    100% {
        visibility: hidden;
        transform: translate(calc((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
    }
}