/* ============================================================
   3D 模型大图预览（放大层）+ 悬停放大提示
   ------------------------------------------------------------
   配套 JS：assets/js/cad-zoom.js（由 inc/cad.php 的
   jjzl_cad_zoom_assets() 加载，版本号取 filemtime 自动刷缓存，
   所以**不需要**动 functions.php 里的 JJZL_VERSION）。

   ★ 设计：放大层不重新加载模型、不新建 WebGL 上下文 —— 而是把
     「已经渲染好的那个 3D 元素」原地搬进放大层并撑大，元素自带的
     ResizeObserver 会自动重绘，速度是瞬时的，也不多占一个上下文
     （浏览器 WebGL 上下文上限约 16 个，一页卡片就可能触顶）。

   ★ 阿君色盲铁律：悬停/可点状态**不能只靠颜色**表达 ——
     这里叠了三重通道：① 元素轻微放大（形状） ② 右下角浮出**文字**胶囊
     ③ 光标变成 zoom-in。放大层同理有文字说明条。
   ============================================================ */

/* ---------- 1. 悬停放大 + 可点提示 ---------- */

/* 明细页大预览器 */
.jjzl-cad-viewer[data-jjzl-zoom] {
	cursor: zoom-in;
	transition: transform .22s ease, box-shadow .22s ease;
}
.jjzl-cad-viewer[data-jjzl-zoom]:hover {
	transform: scale(1.015);
	box-shadow: 0 12px 36px rgba(0, 0, 0, .5), 0 0 0 1px rgba(45, 212, 191, .45);
}
/* 提示胶囊：绝对定位（不参与 flex 布局，否则会多出一行挤压画布） */
.jjzl-cad-viewer[data-jjzl-zoom]::after {
	content: '⤢ 点一下看大图';
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 20;
	padding: 6px 11px;
	border-radius: 999px;
	font-size: 12px;
	line-height: 1;
	background: rgba(13, 17, 23, .88);
	color: #e6edf3;
	border: 1px solid rgba(45, 212, 191, .5);
	opacity: 0;
	transition: opacity .18s ease;
	pointer-events: none;
}
.jjzl-cad-viewer[data-jjzl-zoom]:hover::after { opacity: 1; }

/* 卡片 / 侧栏的 3D 缩略图方块 */
.card-thumb .jjzl-cad-thumb,
.jjzl-latest-thumb .jjzl-cad-thumb {
	cursor: zoom-in;
	transition: transform .28s cubic-bezier(.16, 1, .3, 1);
}
.card-thumb:hover .jjzl-cad-thumb,
.jjzl-latest-thumb:hover .jjzl-cad-thumb { transform: scale(1.07); }

.card-thumb .jjzl-cad-thumb::after,
.jjzl-latest-thumb .jjzl-cad-thumb::after {
	position: absolute;
	right: 7px;
	bottom: 7px;
	z-index: 4;
	padding: 4px 9px;
	border-radius: 999px;
	font-size: 11px;
	line-height: 1;
	background: rgba(13, 17, 23, .88);
	color: #e6edf3;
	border: 1px solid rgba(45, 212, 191, .5);
	opacity: 0;
	transition: opacity .18s ease;
	pointer-events: none;
}
.card-thumb .jjzl-cad-thumb::after { content: '⤢ 看大图'; }
/* 侧栏只剩 58×58，放不下四个字，只留放大符号 */
.jjzl-latest-thumb .jjzl-cad-thumb::after { content: '⤢'; right: 4px; bottom: 4px; padding: 3px 6px; }
.card-thumb:hover .jjzl-cad-thumb::after,
.jjzl-latest-thumb:hover .jjzl-cad-thumb::after { opacity: 1; }

/* ---------- 2. 放大层本体 ---------- */

html.jjzl-zoom-open {
	overflow: hidden;
	padding-right: var(--jjzl-sbw, 0px);
}

.jjzl-zoom-mask {
	position: fixed;
	inset: 0;
	z-index: 9990;
	background: rgba(4, 7, 11, .82);
	opacity: 0;
	/* ★★ 关闭后必须彻底不吃事件：只把 opacity 归零是不够的 ——
	   遮罩/放大层留在 DOM 里仍然是 position:fixed + 高 z-index，
	   会挡住整页所有点击（实测：关掉大图后整页点不动）。
	   visibility 用 transition-delay 延到淡出结束再翻，动画不受影响。 */
	pointer-events: none;
	visibility: hidden;
	transition: opacity .2s ease, visibility 0s linear .2s;
}
html.jjzl-zoom-open .jjzl-zoom-mask {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
	transition: opacity .2s ease, visibility 0s;
}

.jjzl-zoom-stage {
	position: fixed;
	z-index: 9991;
	left: 50%;
	top: 50%;
	width: min(94vw, 1500px);
	height: min(86vh, 980px);
	height: min(86dvh, 980px);
	display: flex;
	flex-direction: column;
	background: #0d1117;
	border: 1px solid var(--border-strong, #3a4250);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 26px 80px rgba(0, 0, 0, .66);
	transform: translate(-50%, -50%) scale(.985);
	opacity: 0;
	/* 同上：关闭后必须彻底不吃事件，否则整页点不动 */
	pointer-events: none;
	visibility: hidden;
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
html.jjzl-zoom-open .jjzl-zoom-stage {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
	transform: translate(-50%, -50%) scale(1);
	transition: opacity .2s ease, transform .2s ease, visibility 0s;
}

.jjzl-zoom-head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	background: var(--bg-elev, #161b22);
	border-bottom: 1px solid var(--border, #2a313c);
}
.jjzl-zoom-cap {
	min-width: 0;
	color: var(--text, #e6edf3);
	font-size: 14px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.jjzl-zoom-close {
	flex: 0 0 auto;
	padding: 7px 12px;
	border-radius: 8px;
	font-size: 13px;
	cursor: pointer;
	background: var(--bg-elev-2, #1c2230);
	border: 1px solid var(--border-strong, #3a4250);
	color: var(--text, #e6edf3);
}
.jjzl-zoom-close:hover { border-color: var(--accent, #2dd4bf); color: var(--accent, #2dd4bf); }
.jjzl-zoom-close:focus-visible { outline: 2px solid var(--accent, #2dd4bf); outline-offset: 2px; }

.jjzl-zoom-body {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	background: #0d1117;
}
/* 搬进来的 3D 元素铺满放大层；并关掉它自己的悬停放大/提示（已经在大图里了） */
.jjzl-zoom-body > .jjzl-cad-viewer,
.jjzl-zoom-body > .jjzl-cad-thumb {
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
	margin: 0;
	border-radius: 0;
	transform: none !important;
	box-shadow: none !important;
}
.jjzl-zoom-body > .jjzl-cad-viewer[data-jjzl-zoom]::after,
.jjzl-zoom-body > .jjzl-cad-thumb::after { display: none; }
.jjzl-zoom-body > .jjzl-cad-viewer[data-jjzl-zoom] { cursor: grab; }

.jjzl-zoom-foot {
	flex: 0 0 auto;
	padding: 8px 14px;
	background: var(--bg-elev, #161b22);
	border-top: 1px solid var(--border, #2a313c);
	color: var(--text-muted, #8b949e);
	font-size: 12px;
	line-height: 1.5;
}

/* 占位块：明细页预览器被搬走前顶住原位置的高度，避免下方内容上跳 */
.jjzl-zoom-ph {
	border-radius: 10px;
	background: transparent;
}

/* ---------- 3. 手机窄屏 ---------- */
@media (max-width: 640px) {
	.jjzl-zoom-stage {
		width: 96vw;
		height: min(88vh, 900px);
		height: min(88dvh, 900px);
		border-radius: 12px;
	}
	.jjzl-zoom-head { padding: 9px 11px; }
	.jjzl-zoom-cap { font-size: 13px; }
	/* ★ 手指最小命中区给到 44px（原来只有 31px 高，且与预览器「全屏」按钮
	   垂直只差 28px ⇒ 一误触进全屏，大图会被铺满的预览器盖住、像关不掉）。 */
	.jjzl-zoom-close {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		padding: 0 16px;
		font-size: 13px;
	}
	.jjzl-zoom-foot { padding: 7px 11px; font-size: 11px; }
	/* 大预览器在手机上占满宽度，悬停提示没有意义（触屏没有 hover），去掉放大避免溢出 */
	.jjzl-cad-viewer[data-jjzl-zoom]:hover { transform: none; }
	/* ★★ 但提示胶囊不能一起失效：触屏没有 hover ⇒ opacity 永远停在 0 ⇒
	   手机上等于「零提示」（阿君实测）。这里让窄屏一律常显。 */
	.jjzl-cad-viewer[data-jjzl-zoom]::after,
	.card-thumb .jjzl-cad-thumb::after,
	.jjzl-latest-thumb .jjzl-cad-thumb::after { opacity: 1; }
}

/* ---------- 4. 触屏适配（10-13 加） ---------- */

/* ★★ 触屏设备上「可点提示」必须常显。用 (hover: none) 比宽度断点更准 ——
   平板、横屏手机、触屏笔记本的触摸模式都能覆盖到；色盲提示的三重通道
   不能有一条在触屏上直接失效。 */
@media (hover: none) {
	.jjzl-cad-viewer[data-jjzl-zoom]::after,
	.card-thumb .jjzl-cad-thumb::after,
	.jjzl-latest-thumb .jjzl-cad-thumb::after { opacity: 1; }
	/* 手指没有鼠标精确 ⇒ 关闭按钮按触屏最小命中区给足 */
	.jjzl-zoom-close {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		padding: 0 16px;
		font-size: 13px;
	}
}

/* ★ 放大层里不再提供「全屏」：大图本已铺满，再进全屏只会把关闭按钮一起
   藏起来，让人以为关不掉 —— 手机上尤其容易误触。这正是它与 ✕ 挨太近的
   根因，藏掉它这条隐患一并消失。 */
.jjzl-zoom-body .jjzl-cad-bar [data-act="full"] { display: none; }

/* ★ 手指要能拖动模型、双指要能捏合缩放 ⇒ 放大层里的画布不能被浏览器当成
   滚动手势。预览器自带 touch-action（theme.css:2283-2284），
   缩略图那块的画布没有，这里补齐。 */
.jjzl-zoom-body canvas { touch-action: none; }