/* ═══════════════════════════════════════════════════════════════════════════════
 * 图片宽度排版（ImageLayout）
 * ═══════════════════════════════════════════════════════════════════════════════
 * 依赖：`.article-content`（父主题 zibll 的文章正文容器类名，子主题沿用不改）
 *
 * 【变量】
 *   --zl-gap         画廊图片间距（由 PHP 侧 inline style 注入，默认为 8px）
 *   --zl-gap-mobile  移动端间距（默认为 6px）
 *
 * 【两套模型】
 *   .zhiji-gallery   → 纯图段落，flex 等高对齐
 *   img.figure       → 单图/混排，float 环绕
 *   ⚠️ 两者互斥：画廊内 img 强制 float:none，否则 flex 与 float 打架
 * ═══════════════════════════════════════════════════════════════════════════════ */

.article-content {
	--zl-gap: 8px;
	--zl-gap-mobile: 6px;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 一、画廊容器（纯图段落）
 *
 * flex-wrap 多行天然等高对齐 —— 彻底消除 float 布局下
 * 「同一行高度参差 → 下一行图片插入空隙错位」的顽疾。
 * ───────────────────────────────────────────────────────────────────────────*/

.article-content .zhiji-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: var(--zl-gap);
	margin-bottom: 14px;

	/* 🐛 修复：flex 默认的 `align-items: stretch` 会把**窄格图片纵向拉伸变形**。
	 *
	 * 为何等宽墙看不出来：同一行各图等宽 → 原始高度天然相同 → stretch 无副作用。
	 * 为何混排必现：`25+25+50` 一行里，25% 的图天然高 ≈113px、50% 的图 ≈230px，
	 *   stretch 会把 25% 的图强行拉到 230px（**纵向拉伸 2 倍**，画面变形）。
	 *   实测证据：`objectFit=fill`、`align=normal`（flex 下等价 stretch）。
	 *
	 * 默认改为 `flex-start`：保持原始比例、顶对齐，**绝不裁切也绝不拉伸**。
	 * 读者看得到完整画面；代价是混排行底边不齐 —— 这是编辑型排版的常规表现。
	 * 想追求「整行等高」的网格感，用下面的 `zl-align-cover`（裁切填满）。
	 */
	align-items: flex-start;
}

.article-content .zhiji-gallery img {
	float: none;
	display: block;
	height: auto;
	margin: 0;
	box-sizing: border-box;
	/* 显式声明：按盒子比例填充图片内容。
	 * 配合 `height: auto` 时盒子 = 原始宽高比 → 画面无变形。
	 * 必须显式写，否则会继承父主题的其它值（曾实测到 `fill` 与拉伸叠加）。 */
	object-fit: fill;
}

/* 对齐模式（由后台「混排对齐方式」选项注入 class）
 * ⚠️ 必须写在基础 img 规则**之后**，且靠类的数量提高优先级 —— 不依赖书写顺序。 */
.article-content .zhiji-gallery.zl-align-center {
	align-items: center;
}

.article-content .zhiji-gallery.zl-align-cover {
	align-items: stretch;   /* 整行等高：行高 = 该行最高图 */
}

/* 裁切填满：把图裁到格子尺寸，画面不变形但会裁掉超出部分。
 *
 * ⚠️ 不要写 `height: 100%` —— 多行 flex 容器里百分比高度参照的是**容器总高**而非行高，
 *    会算错。`align-items: stretch` 已经把 item 的交叉轴尺寸设为**本行行高**，
 *    `object-fit: cover` 直接在这个盒子里裁切即可。
 *
 * ⚠️ 只在素材宽高比与格子接近时用；比值差一倍时会被裁掉约一半画面。
 */
.article-content .zhiji-gallery.zl-align-cover img {
	object-fit: cover;
	/* 裁切窗口偏上（默认 50% 50% 中心）：
	 * 混排时 25% 小格会被行高拉得比原图竖长，cover 垂直裁切，
	 * 中心取景正好把人物头顶切掉（实测 NOMAD/Fixit 角色图头顶消失）。
	 * 人物/主体通常在画面上半部 → 取景中心上移到 25%，
	 * 竖长格子能保住头部；对风景图只是取景略偏上，无感。 */
	object-position: 50% 25%;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 一·b  纵向叠放列（alt 末尾 `s`，连续同档位自动成列）
 *
 * 结构：画廊（行 flex）→ 叠列 div.zl-stack（列 flex）→ 列内两张图
 *
 * 高度从哪来：叠列是行内的 flex item，行高由该行最高的格子决定；
 *   cover 模式下 `align-items:stretch` 会把叠列拉到**整行行高**，
 *   列内各图再把这个高度填满 → 与旁边大图**底边齐平**。
 *
 * 🧨 `flex` 必须写 `1 1 auto`，**不能写 `1 1 0`** ——
 *    flex-basis 为 0 时，若列容器高度是 auto（顶对齐/居中等非拉伸模式），
 *    子项会全部塌成 0 高（实测整列消失）。
 *    `1 1 auto` 在「高度确定」时照样被拉伸填满，在「高度 auto」时按原始比例堆叠 —— 两种模式都安全。
 *
 * ⚠️ `min-height:0` 必须写：flex item 默认 `min-height:auto`，
 *    图片会被自身内容高度顶住，导致无法收缩（列内间距被挤爆）。
 * ───────────────────────────────────────────────────────────────────────────*/

.article-content .zhiji-gallery div.zl-stack {
	display: flex;
	flex-direction: column;
	gap: var(--zl-gap);
	min-width: 0;
}

.article-content .zhiji-gallery div.zl-stack img.zl-stack-item {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	height: auto;
	/* 列内图按格子裁切填满：不变形，且保证与同行其它格子等高 */
	object-fit: cover;
	/* 取景偏上，理由同 zl-align-cover（保住人物头部） */
	object-position: 50% 25%;
}

/* 画廊内宽度：flex-basis 扣掉间距，避免每行第二张图被挤到下一行 */
.article-content .zhiji-gallery img.figure.fig-20 { flex: 0 0 calc(20% - var(--zl-gap)); max-width: calc(20% - var(--zl-gap)); }
.article-content .zhiji-gallery img.figure.fig-25 { flex: 0 0 calc(25% - var(--zl-gap)); max-width: calc(25% - var(--zl-gap)); }
.article-content .zhiji-gallery img.figure.fig-33 { flex: 0 0 calc(33.3333% - var(--zl-gap)); max-width: calc(33.3333% - var(--zl-gap)); }
.article-content .zhiji-gallery img.figure.fig-50 { flex: 0 0 calc(50% - var(--zl-gap)); max-width: calc(50% - var(--zl-gap)); }
.article-content .zhiji-gallery img.figure.fig-75 { flex: 0 0 calc(75% - var(--zl-gap)); max-width: calc(75% - var(--zl-gap)); }
.article-content .zhiji-gallery img.figure.fig-100 { flex: 0 0 100%; max-width: 100%; }

/* 叠放列的行内宽度：列容器自己就是 flex item，宽度档位挂在列上（不是列内图） */
.article-content .zhiji-gallery div.zl-stack.fig-20 { flex: 0 0 calc(20% - var(--zl-gap)); max-width: calc(20% - var(--zl-gap)); }
.article-content .zhiji-gallery div.zl-stack.fig-25 { flex: 0 0 calc(25% - var(--zl-gap)); max-width: calc(25% - var(--zl-gap)); }
.article-content .zhiji-gallery div.zl-stack.fig-33 { flex: 0 0 calc(33.3333% - var(--zl-gap)); max-width: calc(33.3333% - var(--zl-gap)); }
.article-content .zhiji-gallery div.zl-stack.fig-50 { flex: 0 0 calc(50% - var(--zl-gap)); max-width: calc(50% - var(--zl-gap)); }
.article-content .zhiji-gallery div.zl-stack.fig-75 { flex: 0 0 calc(75% - var(--zl-gap)); max-width: calc(75% - var(--zl-gap)); }
.article-content .zhiji-gallery div.zl-stack.fig-100 { flex: 0 0 100%; max-width: 100%; }

/* ─────────────────────────────────────────────────────────────────────────────
 * 二、单图 / 图文混排（float 环绕）
 *
 * flex 容器会打断文字绕图，故混排必须退回 float。
 * ───────────────────────────────────────────────────────────────────────────*/

.article-content img.figure,
.article-content a img.figure {
	display: inline-block;
	vertical-align: top;
	height: auto;
	max-width: 100%;
}

.article-content img.figure.fig-20 { width: 20%; }
.article-content img.figure.fig-25 { width: 25%; }
.article-content img.figure.fig-33 { width: 33.3333%; }
.article-content img.figure.fig-50 { width: 50%; }
.article-content img.figure.fig-75 { width: 75%; }
.article-content img.figure.fig-100 { width: 100%; }

.article-content img.figure.left {
	float: left;
	margin: 0 12px 8px 0;
}

.article-content img.figure.right {
	float: right;
	margin: 0 0 8px 12px;
}

/* 清除浮动：防止浮动图溢出到下一篇文章 */
.article-content::after {
	content: "";
	display: table;
	clear: both;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 三、无缝贴边墙（alt 后缀 -0）
 *
 * 密集墙最常见诉求：图越密越好看，且深色主题下不希望有黑缝。
 * 语法：alt="风景-33 0"（末位 0 表示 gap 归零）→ class `zhiji-wall-tight`
 *
 * 实现：只改 gap，不动 flex-basis 的 calc 逻辑
 *   → 宽度仍按档位百分比扣 0，每行正好铺满，无空隙也无溢出。
 *
 * ⚠️ 用 `column-gap/row-gap` 而非 `gap`：移动端要保留一点行间距，
 *    否则行与行之间会完全糊在一起。
 * ───────────────────────────────────────────────────────────────────────────*/

.article-content .zhiji-gallery.zhiji-wall-tight {
	column-gap: 0;
	row-gap: 2px;
}

.article-content .zhiji-gallery.zhiji-wall-tight img.figure[class*="fig-"] {
	flex-basis: 33.3333%;
	max-width: 33.3333%;
}

/* 贴边墙下，各档位改为「每行几张 = 100 / 档位」的整数铺满 */
.article-content .zhiji-gallery.zhiji-wall-tight img.figure.fig-20 { flex-basis: 20%; max-width: 20%; }
.article-content .zhiji-gallery.zhiji-wall-tight img.figure.fig-25 { flex-basis: 25%; max-width: 25%; }
.article-content .zhiji-gallery.zhiji-wall-tight img.figure.fig-33 { flex-basis: 33.3333%; max-width: 33.3333%; }
.article-content .zhiji-gallery.zhiji-wall-tight img.figure.fig-50 { flex-basis: 50%; max-width: 50%; }
.article-content .zhiji-gallery.zhiji-wall-tight img.figure.fig-75 { flex-basis: 75%; max-width: 75%; }
.article-content .zhiji-gallery.zhiji-wall-tight img.figure.fig-100 { flex-basis: 100%; max-width: 100%; }

@media (max-width: 767px) {
	.article-content .zhiji-gallery.zhiji-wall-tight {
		column-gap: 0;
		row-gap: 2px;
	}
	.article-content .zhiji-gallery.zhiji-wall-tight img.figure.fig-20 { flex-basis: 33.3333%; max-width: 33.3333%; }
	.article-content .zhiji-gallery.zhiji-wall-tight img.figure.fig-25 { flex-basis: 33.3333%; max-width: 33.3333%; }
	.article-content .zhiji-gallery.zhiji-wall-tight img.figure.fig-33 { flex-basis: 33.3333%; max-width: 33.3333%; }
	.article-content .zhiji-gallery.zhiji-wall-tight img.figure.fig-50 { flex-basis: 50%; max-width: 50%; }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 四、移动端
 *
 * 策略：保持并排（不退化为一列），只收窄间距让图片显大。
 * 理由：密集墙的价值就是「并排看多图」，小屏改一列等于放弃该功能。
 * ───────────────────────────────────────────────────────────────────────────*/

@media (max-width: 767px) {
	.article-content .zhiji-gallery {
		gap: var(--zl-gap-mobile);
		margin-bottom: 12px;
	}

	.article-content .zhiji-gallery img.figure.fig-20 { flex-basis: calc(20% - var(--zl-gap-mobile)); max-width: calc(20% - var(--zl-gap-mobile)); }
	.article-content .zhiji-gallery img.figure.fig-25 { flex-basis: calc(25% - var(--zl-gap-mobile)); max-width: calc(25% - var(--zl-gap-mobile)); }
	.article-content .zhiji-gallery img.figure.fig-33 { flex-basis: calc(33.3333% - var(--zl-gap-mobile)); max-width: calc(33.3333% - var(--zl-gap-mobile)); }
	.article-content .zhiji-gallery img.figure.fig-50 { flex-basis: calc(50% - var(--zl-gap-mobile)); max-width: calc(50% - var(--zl-gap-mobile)); }
	.article-content .zhiji-gallery img.figure.fig-75 { flex-basis: calc(75% - var(--zl-gap-mobile)); max-width: calc(75% - var(--zl-gap-mobile)); }
}