/* MandarinMiles · 统一缩略图组件（Thumb）
   ---------------------------------------------------------
   全站所有封面框共用同一套三层结构，样式只在这里定义一次：

     .mm-thumb      外框（尺寸 / 圆角 / 底色仍由各调用点自己的 class 决定）
       .mm-thumb-bg   留边层：同图 cover 铺满 + 高斯模糊 → 充当留边
       .mm-thumb-img  全图层：object-fit contain → 完整显示全图，不裁切主体
       .mm-thumb-ph   占位层：无图时显示标题首字 + 主题渐变底

   留边风格：S1 同图模糊。参数全部走 CSS 变量，全站一处可改。
   比例标准：:root 的 --thumb-ratio = 3 / 2，槽位加 .mm-thumb--ratio 即生效。
   与页面横幅的 .mm-pb-bg / .mm-pb-veil 是两套东西：
   前者是「小图 + 留边」，后者是「大图 + 遮罩」，规则相反，不要混用。 */

/* =========================================================
   全站缩略图比例标准（唯一事实来源）
   ---------------------------------------------------------
   --thumb-ratio = 3 / 2（35mm 胶片比例）
   · 为什么是 3:2：横图里最稳的中间态（1:1 偏方、16:9 偏扁）；
     对现有 5:3 素材只差 10%（4:3 差 20%）；中文教材 / 童书封面行业惯例。
   · 容器与源图同比例 → 留边浪费恒为 0%。
   · 改这一个值 = 全站换比例，不用逐个槽位改。
   ========================================================= */
:root {
	--thumb-ratio: 3 / 2;
	/* 源图上传标准（后台提示用；WP 侧的派生尺寸见 inc/thumb.php） */
	--thumb-src-w: 1200;
	--thumb-src-h: 800;
}

.mm-thumb {
	--thumb-blur: 10px;
	--thumb-sat: 1.18;
	--thumb-focus: 50% 50%;
	--thumb-ph-size: clamp(26px, 3vw, 44px);
	--thumb-ph-ink: #1F6B58;
	--thumb-ph-bg: linear-gradient(150deg, #EAF2FE 0%, #E7F4F2 100%);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* ---------- 比例修饰类：把外框锁成 --thumb-ratio ----------
   槽位只需要给宽度（或自身网格宽度），高度由比例自动推导。
   调用点原有的固定 height 必须同时去掉，否则会压过 aspect-ratio。 */
.mm-thumb--ratio {
	aspect-ratio: var(--thumb-ratio);
	height: auto;
}

/* ---------- 留边层：同一张图，cover 铺满 + 模糊 ---------- */
.mm-thumb-bg {
	position: absolute;
	inset: -8%;
	z-index: 0;
	background-size: cover;
	background-position: var(--thumb-focus);
	background-repeat: no-repeat;
	filter: blur(var(--thumb-blur)) saturate(var(--thumb-sat));
	transform: scale(1.06);
	pointer-events: none;
}

/* ---------- 全图层：完整显示全图 ---------- */
.mm-thumb-img {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* 变体：铺满裁切（大图 / 封面场景，不出留边层） */
.mm-thumb--cover .mm-thumb-img {
	object-fit: cover;
}

/* 默认 logo 封面：自带品牌底色，直接铺满即可（不依赖容器比例，也不出模糊留边） */
.mm-thumb-img.mm-thumb-default {
	object-fit: cover;
}

/* ---------- 占位层：无图时补首字 ---------- */
.mm-thumb-ph {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--serif, 'Songti SC', 'Iowan Old Style', Georgia, serif);
	font-size: var(--thumb-ph-size);
	font-weight: 800;
	line-height: 1;
	color: var(--thumb-ph-ink);
	background: var(--thumb-ph-bg);
	text-shadow: none;
	user-select: none;
}

/* ---------- 各调用点的占位字号 ----------
   盒子尺寸各不相同，占位字跟着缩放，避免大框里一个字显得很空。
   （盒子已按 3:2 重算，这里同步收一点字号） */
.mm-reader .rcover .mm-thumb-ph { --thumb-ph-size: clamp(32px, 3vw, 42px); }
.mm-blog .post-thumb .mm-thumb-ph { --thumb-ph-size: 26px; }
.mm-home-v2 .v2-card .cover .mm-thumb-ph { --thumb-ph-size: 46px; }
.mm-pop-cover .mm-thumb-ph { --thumb-ph-size: 26px; }
.mm-sb-thumb .mm-thumb-ph { --thumb-ph-size: 20px; }

/* ---------- 暗色模式 ---------- */
:root[data-theme="dark"] .mm-thumb {
	--thumb-ph-ink: #9FE1CB;
	--thumb-ph-bg: linear-gradient(150deg, #0D2148 0%, #111C33 100%);
}
:root:not([data-theme="light"]):not([data-theme="dark"]) .mm-thumb {
	--thumb-ph-ink: #9FE1CB;
	--thumb-ph-bg: linear-gradient(150deg, #0D2148 0%, #111C33 100%);
}