/* HLY 文章上下文导航 — 极简精致三卡片 (v2.2.8)
   关键：缩略图高度由纯 CSS flex「align-items:stretch」拉伸到右侧文字块高度，
   与字体加载/换行/JS 是否运行均无关，自动等高、自修正。缩略图用确定宽度 +
   内部 img 绝对定位填充，既不为 0 宽也不会变形。JS 仅在桌面端把宽度锁成 3:2。
   平板 + 手机（≤1024）仅把三张卡片纵向堆叠、满页面宽度；卡片内部「图左文右、等高」
   与桌面完全一致，保证所有设备外观统一。
   继承主题字体；无字间距；悬停仅阴影变化；非悬停有极轻阴影。 */

.hly-pn {
	display: flex;
	width: 100%;
	gap: 1.5rem; /* 卡片间距（原 0.75rem，加倍） */
	margin: 2rem 0 0;
	padding: 0;
	align-items: center; /* 桌面：每张卡按自身内容定高（卡内图与文各自等高） */
	font-family: inherit;
}

.hly-pn-card {
	flex: 1 1 0; /* 三张卡片等宽 */
	min-width: 0;
	display: flex;
	align-items: stretch; /* 卡内缩略图与文字块都拉伸到卡片高度 → 严格等高 */
	gap: 0.85rem;
	padding: 0.65rem;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 14px;
	text-decoration: none;
	color: inherit;
	font-family: inherit;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.045);
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.hly-pn-card:hover {
	box-shadow: 0 5px 14px rgba(0, 0, 0, 0.06);
	border-color: rgba(0, 0, 0, 0.10);
}

.hly-pn-card:focus-visible {
	outline: 2px solid #1a1a1a;
	outline-offset: 2px;
}

/* 缩略图：确定宽度 + 无显式高度 + 内部 img 绝对定位填充。
   卡片 align-items:stretch 会把缩略图高度拉伸到右侧文字块高度 → 严格等高且随文字自修正。
   确定宽度 7.125rem 保证绝不为 0 宽（避免 v2.0.4 的 0 宽 bug）。 */
.hly-pn-thumb {
	flex: 0 0 auto;
	position: relative;
	width: 7.125rem;  /* 确定宽度，与图源固有宽度无关 → 不会 0 宽 */
	border-radius: 9px;
	overflow: hidden;
	background: #f2f2f2;
	/* 高度由卡片 align-items:stretch 拉伸到文字块高度（此处不设高度） */
}

.hly-pn-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover; /* 图源非 3:2 时裁切填满，不变形 */
	display: block;
}

.hly-pn-no-thumb .hly-pn-thumb {
	display: none;
}

.hly-pn-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.3rem;
}

.hly-pn-label {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	font-size: 0.65rem;
	font-weight: 600;
	color: #767676; /* 提升对比度至 WCAG AA（原 #9a9a9a 仅 ~2.8:1） */
	/* 无字间距 */
}

.hly-pn-label-zh {
	color: #767676; /* WCAG AA（原 #9a9a9a 仅 ~2.8:1，被父级覆盖故需在此改正） */
}

.hly-pn-en {
	color: #767676; /* WCAG AA（原 #c2c2c2 仅 ~1.8:1） */
	font-weight: 500;
}

.hly-pn-title {
	font-size: 1rem; /* 16px，桌面+平板标题略放大（原 15px） */
	font-weight: 600;
	line-height: 1.4;
	color: #1a1a1a;
	overflow-wrap: anywhere;
	word-break: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hly-pn-cat {
	font-size: 0.625rem;
	color: #767676; /* 提升对比度至 WCAG AA（原 #aea9a9 仅 ~2.2:1） */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 平板（≤1024）：仅把三张卡片纵向堆叠、满页面宽度；
   卡片内部（图左文右、严格等高、内边距/标题字号/间距）与桌面完全一致，保证外观统一。 */
@media (max-width: 1024px) {
	.hly-pn {
		flex-direction: column;
		align-items: stretch; /* 堆叠时卡片撑满页面宽度 */
		gap: 1.25rem;
	}
}

/* 手机（≤600）：内边距 0.35rem；图与文字间距 0.6rem；三卡堆叠间距 0.65rem；
   标题字号保持略小（仅桌面+平板放大），减少换行。其余（图左文右、等高）与桌面一致。 */
@media (max-width: 600px) {
	.hly-pn {
		gap: 0.85rem; /* 手机三卡堆叠间距 */
	}
	.hly-pn-card {
		padding: 0.35rem; /* 手机卡片内边距 */
		gap: 0.6rem;      /* 手机缩略图与文字间距 */
	}
	.hly-pn-title {
		font-size: 0.875rem; /* 手机标题保持略小，减少换行 */
	}
}