/*
 * 文章卡片悬停效果 — v3.2.0
 *
 * 当前唯一模式：放大镜 + 悬停全图模糊遮罩（固定开启，仅文章归档页加载）。
 *
 * 3.1.1 变更：模糊遮罩层（::before）跟随特色图在区块编辑器里设的圆角，
 *   不再出现直角白边。圆角由 hover.js 把每张 <img> 的真实计算值写入
 *   容器变量 --hly-img-radius，本表仅消费该变量（未注入时回落 0，直角）。
 * 3.1.2 变更：遮罩蒙层由白色改回黑色（rgba(0,0,0)），即悬停时压暗 + 高斯模糊。
 * 3.2.0 变更：圆角只作用于遮罩层 ::before 自身，不再给容器设 border-radius——
 *   原先给容器设圆角会覆盖主题 / 区块编辑器直接设在容器上的圆角（本选择器更具体）。
 *   遮罩层的背景与 backdrop-filter 都按自身圆角裁剪，效果一致且完全不碰容器。
 *
 * 1) 悬停全图模糊遮罩层（::before，默认 opacity:0，悬停 / 聚焦 / 触摸时淡入）：
 *    整张特色图高斯模糊 + 叠加一层半透明暗膜；暗膜不透明度与模糊半径由后台参数
 *    经 CSS 变量 --hly-blur / --hly-op 传入，未设置时回落到以下 fallback。
 *    已移除旧版的「顶部渐变模糊」相关 mask / height / saturate。
 * 2) 放大镜图标（::after，悬停浮现）：居中于特色图，纯淡入。
 */

.wp-block-post .wp-block-post-featured-image {
	position: relative;
	overflow: hidden;
	/* 刻意不给容器设 border-radius：本选择器（特异性 0,2,0）比主题常见的单层类选择器更具体，
	   一旦设值就会覆盖主题 / 区块编辑器直接设在容器上的圆角。
	   圆角改为直接作用在遮罩层 ::before 上（见下），效果相同且完全不碰容器。 */
}

/* ===== 悬停全图模糊遮罩层 ===== */
.wp-block-post .wp-block-post-featured-image::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--hly-img-radius, 0px); /* 直接跟随图片圆角，不经容器 */
	pointer-events: none;
	background: rgba(0, 0, 0, var(--hly-op, 0.4));
	-webkit-backdrop-filter: blur(var(--hly-blur, 8px));
	backdrop-filter: blur(var(--hly-blur, 8px));
	opacity: 0;
	transition: opacity .3s ease;
}

/* 遮罩淡入：桌面悬停 / 键盘聚焦 / 触屏触摸（.is-touched 由 hover.js 定位） */
@media (hover: hover) and (pointer: fine) {
	.wp-block-post:hover .wp-block-post-featured-image::before {
		opacity: 1;
	}
}

.wp-block-post:focus-within .wp-block-post-featured-image::before {
	opacity: 1;
}

.wp-block-post.is-touched .wp-block-post-featured-image::before {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-post .wp-block-post-featured-image::before {
		transition: opacity .15s linear;
	}
}

/* ===== 放大镜图标 ===== */
.wp-block-post .wp-block-post-featured-image::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: clamp(30px, 4.5vw, 46px);
	height: clamp(30px, 4.5vw, 46px);
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cline%20x1='16'%20y1='16'%20x2='21'%20y2='21'/%3E%3C/svg%3E") no-repeat center / contain;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .21));
	opacity: 0;
	transition: opacity .26s ease;
}

/* 放大镜显现：纯淡入，无位移/无循环动效 */
@media (hover: hover) and (pointer: fine) {
	.wp-block-post:hover .wp-block-post-featured-image::after {
		opacity: 1;
	}
}

.wp-block-post:focus-within .wp-block-post-featured-image::after {
	opacity: 1;
}

.wp-block-post.is-touched .wp-block-post-featured-image::after {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-post .wp-block-post-featured-image::after {
		transition: opacity .2s linear;
	}
}

/* 触屏端（手机/平板）放大镜再大一点，兼顾小屏可读性；桌面端保持原尺寸 */
@media (hover: none) and (pointer: coarse) {
	.wp-block-post .wp-block-post-featured-image::after {
		width: clamp(42px, 11vw, 52px);
		height: clamp(42px, 11vw, 52px);
	}
}