/* ============================================================
   图片模组样式（2026-09-10 第三轮：WP trunk core/image 1:1 复刻）
   编辑器画布和前台作品页共用。

   翻译蓝本（trunk 直取源码）：
   - block-library/src/image/style.scss   前台占位/对齐/img 规则
   - block-library/src/image/editor.scss  编辑器态（对齐三态/占位）
   本文件选择器从 .wp-block-image → .work-module-image，其余几何值
   与规则结构逐项对应；--bd-* / --rsp-t 是本项目令牌体系的嫁接层
   （WP 的对应物是 theme.json 生成的全局样式，机理等价）。

   分层结构（figure > a? > img + figcaption，WP save.jsx 同构）：
   - figure（模组根）：恒撑满所在列——WP 原生占位模型（无宽度规则，
     块级元素天然撑满），选中框/点击命中区含空白是 WP 行为（用户
     拍板回归，A05 二修的"区块=图片"收缩机制随本轮退役）；承担
     通用间距层 padding 留白 + --bd-* 变量挂载
   - img（显示层）：承载全部显示几何——固定宽（内联 style，WP 固定宽
     序列化在 img）、固定高、宽高比（aspect-ratio）、缩放（object-fit）、
     焦点（object-position）全部在 img 的内联 style（模板输出）；
     圆角/边框线/阴影由本文件消费 figure 上的 --bd-* 绘制（与 WP
     selectors.border = ".wp-block-image img" 同位，一次原生绘制）
   - figcaption：图注，块级撑满 figure（无对齐时 = 撑满列，WP 同款——
     图注不跟图宽）；水平三态 display:table 时改 table-caption 跟图宽

   占位模型（WP style.scss 逐条对应）：
   - img 基础 = max-width:100% + height:auto：无固定宽时按自然尺寸
     显示（超出列宽被钳住）——图片默认不撑满列，这是 WP 的核心语义
   - 水平三态 left/center/right = figure display:table 收缩到内容宽
     （WP align 三态同款）+ margin 定位（center = margin auto；right
     = margin-left:auto 替代 WP 的 float:right——环绕已裁定不做，
     flex column 下 float 按规范失效，margin auto 收缩盒等价达成
     "收缩+贴边"）；figcaption 转 table-caption 跟图宽
   - wide/full = img width:100%（WP &.alignwide/alignfull img 同款）；
     与固定宽互斥由编辑器切档清空保证（WP useEffect 同款），本文件
     的 width:100% 是第二道保险
   - 环绕（WP alignleft/right 的 float + 文字环绕）不做（2026-09-10
     用户拍板）：需要根容器改 block 流，动摇全项目间距体系，超出
     图片区块范围

   响应式说明：圆角/边框宽度乘 --rsp-t（本项目响应式令牌，WP 无对应
   ——其响应式由主题层实现）；外边距响应式在 theme.css 通用间距层。
   本文件不声明任何 margin/padding 通用值，三态定位的 margin auto
   是唯一例外（WP aligncenter 同款，不参与间距体系）。
   ============================================================ */

/* ---- figure（模组根）：WP .wp-block-image 同位 ----
   无宽度声明 = 恒撑满所在列（constrained 容器内被容器的 max-width
   公式钳制并按 justify 居中——theme.css 容器子项公式，与 WP
   constrained 布局 CSS 同构）；margin:0 清 figure 的 UA 默认，
   间距只属于间距层 */
.work-module-image {
    position: relative;
    margin: 0;
}

/* WP style.scss：> a inline-block——链接包裹图片时 a 收缩贴图，
   display:table 收缩盒与拖拽几何都以 img 为参与单元 */
.work-module-image > a {
    display: inline-block;
}

/* ---- img（显示层）：WP .wp-block-image img 1:1 + 本项目边框组 ----
   height:auto + max-width:100%：无固定宽时图片按自然尺寸显示、
   超出列宽被钳住（WP 核心语义：图片默认不撑满列）；width 的内联
   style（模板按参数输出）覆盖 max-width 之下的一切——固定宽图片
   缩在 figure 左缘（WP 同款，无对齐时 text-align 默认 left）。
   vertical-align:bottom 消除 inline 基线空隙；box-sizing 无条件
   border-box（WP 同款：无边框时与 content-box 等价，有边框时边框
   向内吃、外轮廓尺寸不变） */
.work-module-image img {
    height: auto;
    max-width: 100%;
    vertical-align: bottom;
    box-sizing: border-box;
    /* 圆角：四角独立变量逐角乘 --rsp-t（2026-09-03 修复圆角不生效
       ——四值简写进 calc 乘法整条声明无效回落 0，故逐角写） */
    border-radius: calc(var(--bd-radius-tl, 0px) * var(--rsp-t, 1)) calc(var(--bd-radius-tr, 0px) * var(--rsp-t, 1)) calc(var(--bd-radius-br, 0px) * var(--rsp-t, 1)) calc(var(--bd-radius-bl, 0px) * var(--rsp-t, 1));
    /* 常态边框：native border 画在 img（WP selectors.border 同位，
       浏览器一次绘制边框+圆角，同心等宽由渲染引擎保证，缩放路径下
       只有这一条边 involved） */
    border-width: calc(var(--bd-width-top, 0px) * var(--rsp-t, 1)) calc(var(--bd-width-right, 0px) * var(--rsp-t, 1)) calc(var(--bd-width-bottom, 0px) * var(--rsp-t, 1)) calc(var(--bd-width-left, 0px) * var(--rsp-t, 1));
    border-style: var(--bd-style-top, solid) var(--bd-style-right, solid) var(--bd-style-bottom, solid) var(--bd-style-left, solid);
    border-color: var(--bd-color-top, transparent) var(--bd-color-right, transparent) var(--bd-color-bottom, transparent) var(--bd-color-left, transparent);
    /* 阴影：img 承载（WP selectors.shadow = ".wp-block-image img" 同位；
       2026-09-10 前在 frame 显示层，frame 退役后随边框组同迁 img） */
    box-shadow: var(--bd-shadow, none);
    /* 内角白缝垫底（2026-09-05 第五刀，本地保留）：「边框内缘弧」和
       「图片内容裁剪弧」是同一曲线的两次独立光栅化，编辑器画布
       transform: scale + Windows 分数 DPI 下两条弧亚像素错位，错位
       缝隙透出页面白底。垫一层与边框同色的底：缝里透出边框色即视觉
       消失。WP 前台/画布全程 100% 渲染无此问题故无此层。已知代价：
       透明 PNG + 边框时透明区、object-fit:contain 的留白区会透出
       边框色（垫底类固有代价，不透明照片无感）。无边框时 --bd-color
       不输出 → transparent，零回归 */
    background-color: var(--bd-color-top, transparent);
    background-clip: padding-box;
}


/* ---- 宽幅/全宽：img 撑满（WP style.scss &.alignwide/.alignfull img
   同款 width:100% + height:auto）。与固定宽互斥：编辑器切 wide/full
   时清空 width/height 参数（WP useEffect 同款），内联 width 不输出，
   本规则生效；若数据因故残留内联 width（旧数据等），CSS 无法覆盖
   内联样式——互斥清空是主保障，此规则对无内联宽的图恒生效 */
/* ---- `>` 直接子代（2026-09-20 重叠 bug 修复）：WP 原版对齐类挂在图块
   自身（.wp-block-image.alignfull img），天然只命中自己；本项目对齐属性
   上移到 Wrapper 后，若用后代选择器，顶层 group 的 data-align="full"
   会经祖先链"漏"给组内所有图——列宽 > 图自然宽时 img 被 width:100%
   拉大，而 Chromium flex column 对 HTML 属性宽高比按自然高算占位 →
   溢出压到下方图（63 号作品 2560 宽实测重叠 709px）。收窄为
   wrap > figure 后只有图块自己的对齐档生效，与 WP"类挂自身"精确同构 */
.work-module-wrap[data-align="wide"] > .work-module-image img,
.work-module-wrap[data-align="full"] > .work-module-image img {
    height: auto;
    width: 100%;
}

/* ---- 水平对齐三态（WP alignleft/center/right 的 display:table 收缩
   机制 1:1，float 环绕除外）：figure 收缩到内容宽（= img 宽或钳后
   宽），块流内默认贴左、center 走 margin auto、right 用 margin-left:
   auto 贴右（WP 用 float:right，本项目 flex column 下 float 失效，
   收缩盒 + margin auto 数学等价达成"收缩+贴边"且不依赖容器类型
   ——flex column 的子项同样吃 margin auto 居中/贴边）。
   图注转 table-caption（caption-side:bottom）跟图宽——WP 同款机理，
   图注与图片同宽只在三态成立（无对齐时图注撑满列） */
/* `>` 直接子代同上（2026-09-20 收窄）：三态只命中图块自身对齐档，
   防止容器块 data-align 经祖先链泄漏（同 wide/full 泄漏机理） */
.work-module-wrap[data-align="left"] > .work-module-image,
.work-module-wrap[data-align="center"] > .work-module-image,
.work-module-wrap[data-align="right"] > .work-module-image {
    display: table;
}
.work-module-wrap[data-align="left"] > .work-module-image > figcaption,
.work-module-wrap[data-align="center"] > .work-module-image > figcaption,
.work-module-wrap[data-align="right"] > .work-module-image > figcaption {
    display: table-caption;
    caption-side: bottom;
}
/* center：WP .aligncenter { margin auto } 同款（table 收缩盒 + auto
   外边距 = 水平居中，flex column 与块流下都成立） */
.work-module-wrap[data-align="center"] > .work-module-image {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
/* right：收缩盒贴右（WP float:right 的无环绕替代） */
.work-module-wrap[data-align="right"] > .work-module-image {
    margin-left: auto;
    margin-right: 0;
}

/* ---- 图注（A03）：WP figcaption 默认（13px、居中、灰）----
   字号不乘 --rsp-t：13px 已是最小可读字号，与 WP 固定 13px 同策略；
   无对齐时块级撑满 figure（= 撑满列），三态时由上方 table-caption
   规则接管（跟图宽）。margin 只留顶部 8px（WP caption 与图的间距
   语义，其余归通用间距层）。
   色值 #555（§44，2026-09-12 用户拍板）：WP theme.css
   :root :where(.wp-block-image figcaption) 的 color:#555 同值，取代
   旧 #8c8f94（间距体系维持不动，只对色值）。暗色变体 rgba(255,255,255,
   .65) 与 WP .is-dark-theme 同款选择器路径——画布/前台当前无暗色主题
   （无触发场景），规则为 WP 同构预留，未来接入暗色主题即自动生效 */
.work-module-image-caption {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: #555;
    text-align: center;
}
.is-dark-theme .work-module-image-caption {
    color: rgba(255, 255, 255, .65);
}

/* ---- 灯箱（A04）：开启的块给放大镜光标（img 承载——frame 退役）----
   :not(.is-editor) —— 画布里不跑灯箱 JS（见 lightbox.js 文件头），点了也
   不会开，给放大镜光标是误导；画布内点击一律是"选中区块"语义 */
.work-module-image.is-lightbox:not(.is-editor) img {
    cursor: zoom-in;
}

/* ---- 未设置图片时的空占位（§45 修正批 2026-09-13，WP components-placeholder
   1:1；此前「aspect-ratio:4/3 + min-height:60px」是误判——那个 4/3 挂在
   「上传中加载失败」临时态的 .wp-block-image__placeholder 上，常规空态是
   components-placeholder 体系）----
   WP 空态真身（bundle 37740-37760 + components/style.css 2755/2901/2959
   查实）：一个恒定 DOM、两种形态，靠选中态切换——
   - 未选中 = has-illustration 形态：::before 黑 10% 灰底 + 对角线插画
     （stroke currentColor，opacity .25）+ label/说明/按钮 opacity:0 且
     pointer-events:none——内容在 DOM 但隐身，高度由内容撑起（恒定约 160px
     的"固定高度方块"，不随宽度缩放，用户截图同款）
   - 选中 = 常规 placeholder 形态：白底 + inset 1px #1e1e1e 描边 + 内容
     opacity:1 浮现、按钮可点（上传走 canvas.js 委托 → render.js
     startImageReplace，与工具栏替换共用通道）。WP 用 React 换形态，本项目
     同视觉用 CSS 两态达成；0.1s linear 过渡 WP 同款
   - 布局：flex column + gap 16 + padding 24 + 左对齐 + 13px（WP
     .components-placeholder 基础样式逐项）；圆角消费 figure 的 --bd-radius-*
     （WP 占位吃 border 同语义）
   - 前台（.work-page）由 page.css 隐藏整个占位 */
.work-module-image-empty {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    font-size: 13px;
    text-align: left;
    color: #1e1e1e;
    overflow: hidden;
    /* 圆角：占位盒自渲染同源圆角（WP selectors.border 含 placeholder
       ——占位与 img 消费同一套边框/圆角语义） */
    border-radius: calc(var(--bd-radius-tl, 0px) * var(--rsp-t, 1)) calc(var(--bd-radius-tr, 0px) * var(--rsp-t, 1)) calc(var(--bd-radius-br, 0px) * var(--rsp-t, 1)) calc(var(--bd-radius-bl, 0px) * var(--rsp-t, 1));
}
/* 未选中灰底（WP .has-illustration::before currentColor 10% 同款；
   选中换白底——WP 选中即切常规 placeholder 形态，视觉终点一致） */
.work-module-image-empty::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #1e1e1e;
    opacity: .1;
    pointer-events: none;
    transition: background .1s linear;
}
.studio-canvas-sheet [data-blk].is-blk-selected .work-module-image-empty::before {
    background: #fff;
    opacity: 1;
    box-shadow: inset 0 0 0 1px #1e1e1e;
}
/* 对角线插画（WP PlaceholderIllustration 逐项：absolute 居中拉满、
   preserveAspectRatio=none 拉伸、vector-effect 让线宽恒 1px 不随缩放；
   颜色随 currentColor 灰） */
.wmie-illustration {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    stroke: currentColor;
    opacity: .25;
    pointer-events: none;
}
/* 选中态插画随灰底一起退场（用户验收 2026-09-13：斜线要和灰底同时消失）
   —— WP 选中即切常规 placeholder 形态、插画元素随 React 卸载；本项目
   CSS 两态用 opacity:0 达成同视觉，无过渡 = WP 形态切换即时同款 */
.studio-canvas-sheet [data-blk].is-blk-selected .wmie-illustration {
    opacity: 0;
}
/* 内容三件（label/说明/按钮）：未选中隐身（WP opacity:0 + pointer-events:
   none 同款，保留布局撑高），选中浮现可点；0.1s linear WP 同款过渡 */
.wmie-label,
.wmie-instructions,
.work-module-image-upload {
    position: relative;        /* 站到 ::before 灰底之上 */
    opacity: 0;
    pointer-events: none;
    transition: opacity .1s linear;
}
.studio-canvas-sheet [data-blk].is-blk-selected .wmie-label,
.studio-canvas-sheet [data-blk].is-blk-selected .wmie-instructions,
.studio-canvas-sheet [data-blk].is-blk-selected .work-module-image-upload {
    opacity: 1;
    pointer-events: auto;
}
/* label：图标 + 「图片」（WP __label：600 字重 + flex 居中 + svg 右距 4px）*/
.wmie-label {
    display: flex;
    align-items: center;
    font-weight: 600;
}
.wmie-label svg {
    margin-right: 4px;
    fill: none;              /* 描边风格（插入器同款图标）：CSS 会盖过内联 fill="none"，此处必须同步，否则形状被填成实心 */
    stroke: currentColor;
}
.wmie-instructions {
    line-height: 1.45;
}
/* 上传按钮：与视频空态按钮同款家族（WP 按钮白底灰边框 3px 圆角） */
.work-module-image-upload {
    margin: 0;
    padding: 7px 18px;
    font-family: inherit;
    font-size: 13px;
    color: #1e1e1e;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 3px;
    cursor: pointer;
}
.work-module-image-upload:hover { border-color: #1e1e1e; }