/* ==========================================================================
   栏目列表与单篇（案例 / 产业带 / 展会 / 常见问题）
   --------------------------------------------------------------------------
   只在栏目页、栏目单篇、栏目归档加载（见 inc/setup.php 的入队条件）。
   色值一律走 style.css 的语义令牌，不在这里另立品牌色。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 列表网格
   ----------------------------------------------------------------------- */

.zhl-col-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 24px;
	margin: 40px 0 0;
}

.zhl-col-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--zhl-page, #fff);
	border: 1px solid var(--zhl-line, rgba(0, 0, 0, 0.1));
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.zhl-col-card:hover,
.zhl-col-card:focus-within {
	transform: translateY(-2px);
	border-color: var(--zhl-line-strong, rgba(0, 0, 0, 0.2));
	box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--zhl-ink) 35%, transparent);
}

.zhl-col-card__media {
	display: block;
	/* 封面是 16:9 设计稿，图位跟着走，裁切会切掉红色块与期号 */
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--zhl-paper, #f6f8fa);
}

.zhl-col-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.zhl-col-card:hover .zhl-col-card__media img {
	transform: scale(1.04);
}

/* 没有特色图时不出图位，卡片退化成纯文字卡：
   与其放一块空占位，不如让文字自己撑起来。 */
.zhl-col-card--text .zhl-col-card__body {
	padding-top: 24px;
	padding-bottom: 24px;
}

.zhl-col-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	padding: 20px 20px 22px;
}

.zhl-col-card__tag,
.zhl-col-kicker {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 10px;
	color: var(--zhl-brand, #c7000b);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
}

.zhl-col-card__tag::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
}

.zhl-col-card__body h3 {
	margin: 0 0 10px;
	font-size: 17px;
	line-height: 1.5;
	letter-spacing: -0.01em;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.zhl-col-card__body h3 a {
	color: var(--zhl-ink, #202020);
	text-decoration: none;
}

.zhl-col-card__body h3 a:hover {
	color: var(--zhl-brand, #c7000b);
}

.zhl-col-card__body p {
	margin: 0 0 16px;
	color: var(--zhl-ink-soft, #525354);
	font-size: 14px;
	line-height: 1.7;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.zhl-col-card__more {
	margin-top: auto;
	color: var(--zhl-brand, #c7000b);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.zhl-col-card__more::after {
	content: " →";
	display: inline-block;
	transition: transform 0.25s ease;
}

.zhl-col-card:hover .zhl-col-card__more::after {
	transform: translateX(3px);
}

/* 空栏目：说清楚怎么让它有内容，而不是只报「暂无」 */
.zhl-col-empty {
	margin: 36px 0 0;
	padding: 32px 28px;
	background: var(--zhl-paper, #f6f8fa);
	border: 1px dashed var(--zhl-line-strong, rgba(0, 0, 0, 0.2));
	border-radius: 12px;
}

.zhl-col-empty p {
	margin: 0;
	color: var(--zhl-ink-soft, #525354);
	font-size: 14px;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   2. 单篇
   ----------------------------------------------------------------------- */

.zhl-col-kicker {
	gap: 0;
	font-size: 12px;
	margin-bottom: 12px;
}

.zhl-col-kicker i {
	margin: 0 8px;
	color: var(--zhl-ink-faint, #6a6f74);
	font-style: normal;
}

.zhl-col-figure {
	margin: 0 0 28px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--zhl-paper, #f6f8fa);
}

.zhl-col-figure img {
	display: block;
	width: 100%;
	height: auto;
}

/* 标签：一条内容可以挂多个，只做展示，不链接（后台归类用，没开归档路由）。
   选择器带 .entry-content 前缀，否则会被正文的 ul 默认样式吃掉。 */
.entry-content .zhl-col-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.entry-content .zhl-col-tags li {
	margin: 0;
	padding: 6px 12px;
	background: var(--zhl-paper, #f6f8fa);
	border: 1px solid var(--zhl-line, rgba(0, 0, 0, 0.1));
	border-radius: 999px;
	color: var(--zhl-ink-soft, #525354);
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.zhl-col-back {
	margin: 36px 0 0;
}

/* --------------------------------------------------------------------------
   3. 响应式
   ----------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.zhl-col-grid {
		gap: 20px;
	}
}

@media (max-width: 640px) {
	.zhl-col-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		margin-top: 28px;
	}

	.zhl-col-card__body {
		padding: 18px 18px 20px;
	}

	.zhl-col-empty {
		padding: 24px 20px;
	}
}

/* ==========================================================================
   4. 文章页版式（结构对齐 jienengmao 文章页，见 docs/structure-analysis.md）
   --------------------------------------------------------------------------
   正文列 1fr + 侧栏 340px；桌面侧栏粘性，窄屏侧栏落到正文之后。
   ========================================================================== */

.zhl-read__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 48px;
	/* 必须 stretch（默认）：aside 撑到整列高度，侧栏才有行程可吸。
	   之前写 align-items:start，aside 高度=面板高度，sticky 声明了却不生效。 */
	align-items: stretch;
}

.zhl-read__main {
	min-width: 0;
}

/* —— 配图与署名 —— */
.zhl-fig {
	margin: 0 0 24px;
}

.zhl-fig img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 12px;
	background: var(--zhl-paper, #f6f8fa);
}

.zhl-fig__cap {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin: 8px 0 0;
	color: var(--zhl-ink-faint, #6a6f74);
	font-size: 12px;
	line-height: 1.5;
}

.zhl-fig__cap a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* —— 事实条：阅读时长 / 更新日期 / 所属分类 —— */
.zhl-read__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0 40px;
	margin: 0 0 28px;
	padding: 14px 0;
	border-top: 1px solid var(--zhl-line, rgba(0, 0, 0, 0.1));
	border-bottom: 1px solid var(--zhl-line, rgba(0, 0, 0, 0.1));
}

.zhl-read__fact {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.zhl-read__fact b {
	color: var(--zhl-ink, #202020);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}

.zhl-read__fact span {
	color: var(--zhl-ink-faint, #6a6f74);
	font-size: 12px;
	line-height: 1.4;
}

/* —— 文章目录 —— */
.zhl-toc {
	margin: 0 0 28px;
	padding: 20px 24px;
	background: var(--zhl-paper, #f6f8fa);
	border-radius: 12px;
}

.zhl-toc__title {
	margin: 0 0 10px;
	color: var(--zhl-ink-faint, #6a6f74);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.entry-content .zhl-toc ol {
	margin: 0;
	padding-left: 1.2em;
	list-style: decimal;
}

.entry-content .zhl-toc li {
	margin: 0 0 6px;
	color: var(--zhl-ink-soft, #525354);
	font-size: 14px;
	line-height: 1.6;
}

.entry-content .zhl-toc a {
	color: var(--zhl-ink, #202020);
	text-decoration: none;
	border-bottom: 1px solid var(--zhl-line, rgba(0, 0, 0, 0.12));
}

.entry-content .zhl-toc a:hover {
	color: var(--zhl-brand, #c7000b);
	border-bottom-color: currentColor;
}

/* —— 核心速读 —— */
.zhl-read__brief {
	margin: 0 0 32px;
	padding: 18px 22px;
	background: color-mix(in srgb, var(--zhl-brand, #c7000b) 4%, var(--zhl-page, #fff));
	border-left: 3px solid var(--zhl-brand, #c7000b);
	border-radius: 0 10px 10px 0;
}

.zhl-read__brief-tag {
	margin: 0 0 8px;
	color: var(--zhl-brand, #c7000b);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.entry-content .zhl-read__brief-text {
	margin: 0;
	color: var(--zhl-ink, #202020);
	font-size: 15px;
	line-height: 1.8;
}

/* —— 标签 —— */
.zhl-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 32px 0 0;
}

.zhl-tags__label {
	margin-right: 2px;
	color: var(--zhl-ink-faint, #6a6f74);
	font-size: 12px;
}

.zhl-tags__pill {
	padding: 5px 12px;
	background: var(--zhl-paper, #f6f8fa);
	border: 1px solid var(--zhl-line, rgba(0, 0, 0, 0.1));
	border-radius: 999px;
	color: var(--zhl-ink-soft, #525354);
	font-size: 12px;
	line-height: 1.4;
}

/* —— 相关文章 —— */
.zhl-read__rel {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--zhl-line, rgba(0, 0, 0, 0.1));
}

.zhl-read__rel-title {
	margin: 0 0 20px;
	font-size: 18px;
	line-height: 1.4;
}

.zhl-read__rel-grid {
	display: grid;
	gap: 14px;
}

.zhl-rel-card {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 16px;
	align-items: center;
	padding: 10px;
	border: 1px solid var(--zhl-line, rgba(0, 0, 0, 0.1));
	border-radius: 10px;
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.zhl-rel-card:hover {
	border-color: var(--zhl-line-strong, rgba(0, 0, 0, 0.2));
	box-shadow: 0 12px 28px -20px color-mix(in srgb, var(--zhl-ink) 40%, transparent);
}

.zhl-rel-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 6px;
	overflow: hidden;
	background: var(--zhl-paper, #f6f8fa);
}

.zhl-rel-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.zhl-rel-card__body {
	display: block;
	min-width: 0;
}

.zhl-rel-card__tag {
	display: block;
	margin-bottom: 4px;
	color: var(--zhl-brand, #c7000b);
	font-size: 11px;
	font-weight: 700;
}

.zhl-rel-card__title {
	display: block;
	color: var(--zhl-ink, #202020);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}

.zhl-rel-card__desc {
	display: block;
	margin-top: 4px;
	color: var(--zhl-ink-soft, #525354);
	font-size: 13px;
	line-height: 1.6;
}

.zhl-rel-card__more {
	display: inline-block;
	margin-top: 6px;
	color: var(--zhl-brand, #c7000b);
	font-size: 12px;
	font-weight: 700;
}

/* —— 结尾 CTA —— */
.zhl-cta-box {
	margin: 40px 0 0;
	padding: 28px 30px;
	background: var(--zhl-ink, #202020);
	border-radius: 14px;
}

.zhl-cta-box__title {
	margin: 0 0 8px;
	color: var(--zhl-page, #fff);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
}

.entry-content .zhl-cta-box p,
.zhl-cta-box p {
	margin: 0 0 16px;
	color: color-mix(in srgb, var(--zhl-page, #fff) 78%, transparent);
	font-size: 14px;
	line-height: 1.7;
}

/* —— 侧边栏 —— */
.zhl-read__side {
	min-width: 0;
}

.zhl-side-panel {
	position: sticky;
	top: calc(var(--zhl-header-h, 70px) + 20px);
	padding: 24px 22px;
	background: var(--zhl-page, #fff);
	border: 1px solid var(--zhl-line, rgba(0, 0, 0, 0.1));
	border-radius: 14px;
}

.zhl-side-panel__eyebrow {
	margin: 0 0 4px;
	color: var(--zhl-ink-faint, #6a6f74);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.zhl-side-panel__topic {
	margin: 0 0 18px;
	color: var(--zhl-brand, #c7000b);
	font-size: 13px;
	font-weight: 700;
}

.zhl-side-panel__head {
	margin: 0 0 8px;
	font-size: 16px;
	line-height: 1.5;
}

.zhl-side-panel__desc {
	margin: 0 0 18px;
	color: var(--zhl-ink-soft, #525354);
	font-size: 13px;
	line-height: 1.7;
}

.zhl-side-panel__facts {
	margin: 0 0 18px;
	padding: 14px 0;
	border-top: 1px solid var(--zhl-line, rgba(0, 0, 0, 0.1));
	border-bottom: 1px solid var(--zhl-line, rgba(0, 0, 0, 0.1));
}

.zhl-side-panel__fact {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 12px;
	line-height: 1.8;
}

.zhl-side-panel__fact span {
	color: var(--zhl-ink-faint, #6a6f74);
}

.zhl-side-panel__fact b {
	color: var(--zhl-ink, #202020);
	font-weight: 600;
}

.zhl-side-panel__actions {
	display: grid;
	gap: 8px;
}

.zhl-side-panel__btn {
	display: block;
	padding: 11px 14px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.zhl-side-panel__btn--primary {
	background: var(--zhl-brand, #c7000b);
	color: var(--zhl-on-brand, #fff);
}

.zhl-side-panel__btn--primary:hover {
	background: var(--zhl-brand-deep, #a30008);
	color: var(--zhl-on-brand, #fff);
}

.zhl-side-panel__btn--ghost {
	border: 1px solid var(--zhl-line-strong, rgba(0, 0, 0, 0.2));
	color: var(--zhl-ink, #202020);
}

.zhl-side-panel__btn--ghost:hover {
	border-color: var(--zhl-brand, #c7000b);
	color: var(--zhl-brand, #c7000b);
}

.zhl-side-panel__link {
	margin-top: 4px;
	color: var(--zhl-ink-faint, #6a6f74);
	font-size: 12px;
	text-align: center;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* —— 窄屏 —— */
@media (max-width: 1024px) {
	.zhl-read__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.zhl-side-panel {
		position: static;
	}

	.zhl-read__rel-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.zhl-read__facts {
		gap: 0 24px;
		padding: 12px 0;
	}

	.zhl-read__rel-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.zhl-toc,
	.zhl-read__brief {
		padding: 16px 18px;
	}

	.zhl-cta-box {
		padding: 22px 20px;
	}

	.zhl-fig img {
		aspect-ratio: 4 / 3;
	}
}

/* 正文内嵌实景图：题图是品牌封面，这张才是现场 */
.entry-content .zhl-body-fig {
	margin: 32px 0 32px;
}

.zhl-body-fig img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
	background: var(--zhl-paper, #f6f8fa);
}

.zhl-body-fig figcaption {
	margin-top: 8px;
	color: var(--zhl-ink-faint, #6a6f74);
	font-size: 12px;
	line-height: 1.5;
}

/* 正文与题图同宽：模板里 .entry-content 有 46rem 的阅读宽度上限，
   只约束正文会让封面比正文宽出一截，右边空一条缝。栏目页统一按栏宽走，
   靠行高（1.95）与短段落控制可读性，不靠压窄。 */
/* layout.css 给 .entry-content > * 设了 46rem 上限，题图不在正文里，
   两者会差出 268px，右边空一条缝。栏目页统一把阅读宽度提到 56rem，
   正文、题图、正文内图全部对齐在同一条左边缘上。 */
.zhl-read__content > *,
.zhl-fig {
	max-width: 56rem;
}

.zhl-read__content {
	font-size: 17px;
	line-height: 1.92;
}

/* ==========================================================================
   5. 本页目录（侧栏粘性 + 滚动高亮）
   --------------------------------------------------------------------------
   桌面：目录在侧栏顶部，随侧栏一起吸附；
   窄屏：侧栏会落到正文之后，目录改成正文最前的折叠块（.zhl-toc-m）。
   ========================================================================== */

/* 锚点跳转要避开固定头部 */
.zhl-read__content h2 {
	scroll-margin-top: calc(var(--zhl-header-h, 70px) + 20px);
}

/* —— 侧栏目录 —— */
.zhl-side-panel .zhl-toc {
	margin: 0 0 18px;
	padding: 0 0 14px;
	background: none;
	border-bottom: 1px solid var(--zhl-line, rgba(0, 0, 0, 0.1));
	border-radius: 0;
}

.zhl-toc__title {
	margin: 0 0 8px;
	color: var(--zhl-ink-faint, #6a6f74);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.entry-content .zhl-toc ol,
.zhl-toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: zhl-toc;
}

.entry-content .zhl-toc li,
.zhl-toc li {
	margin: 0;
	counter-increment: zhl-toc;
}

.zhl-toc a {
	position: relative;
	display: block;
	padding: 6px 8px 6px 20px;
	border-left: 2px solid transparent;
	border-radius: 0 6px 6px 0;
	color: var(--zhl-ink-soft, #525354);
	font-size: 13px;
	line-height: 1.5;
	text-decoration: none;
	transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease,
		padding-left 0.18s ease;
}

/* 序号：保持参考页的「一、二、三」之外的轻量编号，不额外占宽 */
.zhl-toc a::before {
	content: counter(zhl-toc, decimal-leading-zero);
	position: absolute;
	left: 4px;
	color: var(--zhl-ink-faint, #6a6f74);
	font-size: 10px;
	font-weight: 700;
	line-height: 2.1;
	transition: color 0.18s ease;
}

.zhl-toc a:hover,
.zhl-toc a:focus-visible {
	padding-left: 24px;
	background: var(--zhl-paper, #f6f8fa);
	color: var(--zhl-brand, #c7000b);
	outline: none;
}

.zhl-toc a:hover::before,
.zhl-toc a:focus-visible::before {
	color: var(--zhl-brand, #c7000b);
}

/* 当前阅读到的区块 */
.zhl-toc a.is-active {
	padding-left: 24px;
	border-left-color: var(--zhl-brand, #c7000b);
	background: color-mix(in srgb, var(--zhl-brand, #c7000b) 6%, transparent);
	color: var(--zhl-brand, #c7000b);
	font-weight: 700;
}

.zhl-toc a.is-active::before {
	color: var(--zhl-brand, #c7000b);
}

/* —— 窄屏折叠目录 —— */
.zhl-toc-m {
	display: none;
	margin: 0 0 22px;
	padding: 0 16px;
	background: var(--zhl-paper, #f6f8fa);
	border-radius: 10px;
}

.zhl-toc-m summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 0;
	color: var(--zhl-ink, #202020);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.zhl-toc-m summary::-webkit-details-marker {
	display: none;
}

.zhl-toc-m summary::after {
	content: "＋";
	color: var(--zhl-ink-faint, #6a6f74);
	font-weight: 400;
}

.zhl-toc-m[open] summary::after {
	content: "－";
}

.zhl-toc-m summary span {
	margin-left: auto;
	margin-right: 8px;
	color: var(--zhl-ink-faint, #6a6f74);
	font-size: 12px;
	font-weight: 400;
}

.zhl-toc-m ol {
	margin: 0;
	padding: 0 0 12px;
	list-style: none;
}

.zhl-toc-m li {
	margin: 0;
}

.zhl-toc-m a {
	display: block;
	padding: 7px 0;
	color: var(--zhl-ink-soft, #525354);
	font-size: 14px;
	line-height: 1.5;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.zhl-toc-m a:hover,
.zhl-toc-m a.is-active {
	color: var(--zhl-brand, #c7000b);
	font-weight: 700;
}

@media (max-width: 1024px) {
	.zhl-side-panel .zhl-toc {
		display: none;
	}

	.zhl-toc-m {
		display: block;
	}
}