/**
 * 业务页面设计层
 *
 * 只做一件事：给所有固定服务页（/factories/ /supply-chain/ /translation/
 * /exhibitions/ /cities/ /cases/ /how-it-works/ /about/ /contact/）一套
 * 同一的版式骨架。
 *
 * 分工：
 *   layout.css  → 站点公共部分（头部、面包屑、基础正文排版）
 *   page.css    → 页面级：页头事实条、区块系统、底部双 CTA、侧栏增强
 *   后台正文    → 只写「内容」，用这里的 class 组装，不写行内样式
 *
 * 硬规则（REN 2026-09-25 立）：
 *   颜色一律走 --zhl-* 变量，不写裸 hex；间距走 clamp，不在断点里重复写死。
 *
 * @package Zhihuilu_Child
 */

/* ==========================================================================
   1. 页头：面包屑 → 眉标 → 标题 → 导语 → 事实条 → 主按钮
   ========================================================================== */

.zhl-page-hero {
	padding-block: clamp(36px, 4.6vw, 64px) clamp(32px, 4vw, 56px);
}

.zhl-page-hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--zhl-brand);
}

.zhl-page-hero__kicker::before {
	content: "";
	width: 18px;
	height: 2px;
	background: currentColor;
}

.zhl-page-hero h1 {
	font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem);
	line-height: 1.22;
	letter-spacing: -0.015em;
	margin: 0 0 14px;
	max-width: 24ch;
}

.zhl-page-hero__lead {
	max-width: 60ch !important;
	font-size: clamp(1rem, 0.96rem + 0.18vw, 1.1rem);
	line-height: 1.78;
	color: var(--zhl-ink-soft);
	margin: 0 !important;
}

/* —— 事实条：4 格，白卡浮在纸底上 —— */
.zhl-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	background: var(--zhl-page);
	border: 1px solid var(--zhl-line);
	border-radius: var(--zhl-radius-lg);
	overflow: hidden;
	max-width: 860px;
}

.zhl-facts li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 18px;
	min-width: 0;
}

.zhl-facts li + li {
	border-left: 1px solid var(--zhl-line);
}

.zhl-facts dt,
.zhl-facts__k {
	font-size: 0.74rem;
	letter-spacing: 0.06em;
	color: var(--zhl-ink-faint);
	order: 2;
}

.zhl-facts dd,
.zhl-facts__v {
	margin: 0;
	order: 1;
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--zhl-ink);
}

/* —— 页头动作：一个主按钮，最多一个次链接 —— */
.zhl-page-hero__acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin-top: 26px;
}

.zhl-page-hero__acts .zhl-note {
	font-size: 0.82rem;
	color: var(--zhl-ink-faint);
}

/* ==========================================================================
   2. 正文区块系统
   内容侧只用这些 class 组装，不再写行内样式。
   ========================================================================== */

/* 宽区块：解除 .entry-content > * 的 46rem 阅读宽度限制 */
.entry-content > .zhl-pg-wide {
	max-width: none;
}

/* 正文宽度与栏目单篇（56rem）对齐 —— 页面右侧有 340px 目录，
   46rem 会让正文与目录之间空出一条 300px 的白带。 */
.zhl-page .entry-content > * {
	max-width: 56rem;
}

/* 宽区块必须用同样特异性的选择器重申一次：
   上面这条是 (0,2,0)，早先写的 .entry-content > .zhl-pg-wide 也是 (0,2,0)，
   后写的赢 —— 结果卡片网格被压到 56rem，四列只排得下三列。
   这里用同权重、后出现的方式解除限制。 */
.zhl-page .entry-content > .zhl-pg-wide {
	max-width: none;
}

/* 两栏比例与栏目单篇一致：1fr + 340px */
.zhl-page .zhl-with-aside {
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 48px;
}

/* 段首导语：比正文大一档，用来承接 H2 之后的「这一节在说什么」 */
.zhl-pg-lead {
	font-size: 1.06rem;
	line-height: 1.8;
	color: var(--zhl-ink-soft);
	margin: 0 0 1.4em;
}

/* —— 卡片网格 —— */
.zhl-pg-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
	margin: 0 0 1.8em;
}

.zhl-pg-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 20px 18px;
	background: var(--zhl-paper);
	border: 1px solid var(--zhl-line);
	border-radius: var(--zhl-radius-lg);
}

.zhl-pg-card__k {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	color: var(--zhl-brand);
}

.zhl-pg-card h3 {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.4;
	color: var(--zhl-ink);
}

.zhl-pg-card p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.7;
	color: var(--zhl-ink-soft);
}

.zhl-pg-card__meta {
	margin-top: auto;
	padding-top: 10px;
	font-size: 0.78rem;
	color: var(--zhl-ink-faint);
	border-top: 1px solid var(--zhl-line);
}

/* —— 有序步骤：编号在左，内容在右，竖线串起来 ——
   注意：li 里有 4 个 grid 项（::before / h3 / p / .zhl-pg-out）。
   不显式指定列的话，p 会掉回第 1 列被压成 44px 宽的一条（一行一个字），
   所以下面每组都要写 grid-column: 2。 */
.zhl-pg-steps {
	list-style: none;
	margin: 0 0 1.8em;
	padding: 0;
	display: grid;
	gap: 0;
	counter-reset: zhl-pg-step;
}

.zhl-pg-steps > li {
	position: relative;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	column-gap: 18px;
	align-content: start;
	padding: 0 0 22px;
}

.zhl-pg-steps > li::before {
	content: counter(zhl-pg-step, decimal-leading-zero);
	counter-increment: zhl-pg-step;
	grid-column: 1;
	grid-row: 1 / span 3;
	align-self: start;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--zhl-page);
	border: 1px solid var(--zhl-line-strong);
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--zhl-brand);
	font-variant-numeric: tabular-nums;
}

/* 连接线：除最后一项外，从编号底部连到下一项 */
.zhl-pg-steps > li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 21.5px;
	top: 52px;
	bottom: 6px;
	width: 1px;
	background: var(--zhl-line);
}

.zhl-pg-steps > li > h3,
.zhl-pg-steps > li > p,
.zhl-pg-steps > li > .zhl-pg-out {
	grid-column: 2;
}

.zhl-pg-steps h3 {
	margin: 2px 0 6px;
	font-size: 1.02rem;
	line-height: 1.45;
	color: var(--zhl-ink);
}

.zhl-pg-steps p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.72;
	color: var(--zhl-ink-soft);
}

.zhl-pg-steps .zhl-pg-out {
	display: inline-block;
	margin-top: 8px;
	font-size: 0.8rem;
	color: var(--zhl-ink-faint);
}

.zhl-pg-steps .zhl-pg-out b {
	color: var(--zhl-ink);
	font-weight: 600;
}

/* —— 两栏：左侧小标题 + 右侧清单（适合「你要准备什么 / 我们给什么」） —— */
.zhl-pg-split {
	display: grid;
	grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
	gap: 20px 40px;
	margin: 0 0 1.8em;
	padding: 22px 0;
	border-block: 1px solid var(--zhl-line);
}

.zhl-pg-split > h3 {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--zhl-ink);
}

.zhl-pg-split > p,
.zhl-pg-split > ul,
.zhl-pg-split > ol {
	margin: 0;
}

/* —— 对照表：比正文表格更紧，用于「能 / 不能」这类二选一 —— */
.zhl-pg-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	margin: 0 0 1.8em;
	background: var(--zhl-page);
}

.zhl-pg-table caption {
	caption-side: top;
	text-align: left;
	font-size: 0.8rem;
	color: var(--zhl-ink-faint);
	padding: 0 0 8px;
}

.zhl-pg-table th,
.zhl-pg-table td {
	padding: 12px 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--zhl-line);
}

.zhl-pg-table thead th {
	font-size: 0.78rem;
	letter-spacing: 0.05em;
	background: var(--zhl-paper);
	color: var(--zhl-ink);
}

.zhl-pg-table tbody th {
	font-weight: 600;
	color: var(--zhl-ink);
	width: 34%;
}

/* —— 提示块：一条边界 / 一句口径 —— */
.zhl-pg-note {
	margin: 0 0 1.8em;
	padding: 16px 20px;
	background: color-mix(in srgb, var(--zhl-brand) 4%, var(--zhl-page));
	border-left: 3px solid var(--zhl-brand);
	border-radius: 0 var(--zhl-radius) var(--zhl-radius) 0;
	font-size: 0.92rem;
	line-height: 1.75;
	color: var(--zhl-ink);
}

.zhl-pg-note b {
	font-weight: 700;
}

/* —— 检查清单：带勾，不依赖图标字体 —— */
.zhl-pg-check {
	list-style: none;
	margin: 0 0 1.8em;
	padding: 0;
	display: grid;
	gap: 8px;
}

.zhl-pg-check li {
	position: relative;
	padding-left: 26px;
	font-size: 0.94rem;
	line-height: 1.7;
	color: var(--zhl-ink-soft);
}

.zhl-pg-check li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.52em;
	width: 11px;
	height: 6px;
	border-left: 1.6px solid var(--zhl-brand);
	border-bottom: 1.6px solid var(--zhl-brand);
	transform: rotate(-45deg);
}

/* —— 标签组 —— */
.zhl-pg-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 1.6em;
	padding: 0;
	list-style: none;
}

.zhl-pg-tags li {
	padding: 5px 12px;
	border: 1px solid var(--zhl-line);
	border-radius: 999px;
	font-size: 0.8rem;
	color: var(--zhl-ink-soft);
	background: var(--zhl-page);
}

/* —— 页内行动条：段落末尾的一个出口 —— */
.zhl-pg-act {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin: 0 0 1.8em;
}

.zhl-pg-act small {
	font-size: 0.8rem;
	color: var(--zhl-ink-faint);
}

/* ==========================================================================
   3. 底部双 CTA：需求方 / 合作方，两条路各一个出口
   ========================================================================== */

.zhl-page-cta {
	margin-top: clamp(40px, 5vw, 72px);
	background: var(--zhl-ink);
	color: var(--zhl-page);
}

.zhl-page-cta__in {
	width: var(--zhl-container);
	margin-inline: auto;
	padding-block: clamp(38px, 4.6vw, 60px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 28px 48px;
	align-items: center;
}

.zhl-page-cta h2 {
	margin: 0 0 10px;
	font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem);
	line-height: 1.3;
	color: inherit;
}

.zhl-page-cta p {
	margin: 0;
	font-size: 0.94rem;
	line-height: 1.75;
	color: color-mix(in srgb, var(--zhl-page) 76%, transparent);
}

.zhl-page-cta__acts {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: flex-end;
}

.zhl-page-cta .zhl-btn {
	background: var(--zhl-brand);
	color: var(--zhl-on-brand);
	border: 1px solid var(--zhl-brand);
}

.zhl-page-cta .zhl-btn:hover {
	background: var(--zhl-brand-deep);
	border-color: var(--zhl-brand-deep);
	color: var(--zhl-on-brand);
}

.zhl-page-cta .zhl-btn--ghost {
	background: transparent;
	border-color: color-mix(in srgb, var(--zhl-page) 38%, transparent);
	color: var(--zhl-page);
}

.zhl-page-cta .zhl-btn--ghost:hover {
	background: color-mix(in srgb, var(--zhl-page) 12%, transparent);
	border-color: var(--zhl-page);
	color: var(--zhl-page);
}

/* ==========================================================================
   4. 侧栏：目录 + 快速判断 + 相关服务
   ========================================================================== */

/*
 * 两栏必须按内容高度排布（start），不能用 stretch。
 *
 * 原来这里写的注释把原因说反了：sticky 的行程来自
 * 「自身高度 < 容器高度」的差值。写 stretch 会把 aside 拉成和正文等高
 * （实测 2975px），它自己就占满了整个网格行，行程恒为 0 —— 滚动时一动不动。
 * 改回 start 后 aside 高 840，滚动时钉在 top:90，跟随正文。
 */
.zhl-with-aside {
	align-items: start;
}

.zhl-aside {
	align-content: start;
}

/*
 * 侧栏内容可能比视口还高（目录 + 需求卡 + 其他服务，实测 840px）。
 * 钉住之后如果不管，底部会被窗口裁掉、永远够不到 ——
 * 所以给一个「一屏减页头」的上限，超出部分在侧栏内部滚动。
 * 只作用于桌面两栏（≤900 是单栏，侧栏在正文下面，不能限高）。
 */
@media (min-width: 901px) {
	.zhl-aside {
		max-height: calc(100dvh - var(--zhl-header-h) - 40px);
		overflow-y: auto;
		/* 滚到底不要带着整页一起滚 */
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: var(--zhl-line-strong) transparent;
	}

	.zhl-aside::-webkit-scrollbar {
		width: 6px;
	}

	.zhl-aside::-webkit-scrollbar-thumb {
		background: var(--zhl-line-strong);
		border-radius: 3px;
	}

	.zhl-aside::-webkit-scrollbar-track {
		background: transparent;
	}

	/*
	 * 目录卡钉在侧栏滚动区顶部：侧栏内部滚动时（矮窗口才会发生），
	 * 往下滚的是下面几张卡，目录始终留在视野里。
	 * 卡片本身有不透明底色，能盖住从下面经过的内容。
	 */
	.zhl-aside > .zhl-aside-card:first-child {
		position: sticky;
		top: 0;
		z-index: 2;
	}
}

.zhl-aside-card__k {
	margin: 0 0 10px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	color: var(--zhl-brand);
}

/* 快速判断：键值成对，比一段话更快被扫到 */
.zhl-aside-kv {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.zhl-aside-kv li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--zhl-ink);
}

.zhl-aside-kv span {
	color: var(--zhl-ink-faint);
	flex: 0 0 auto;
}

.zhl-aside-kv b {
	font-weight: 600;
	text-align: right;
}

/* ==========================================================================
   5. 断点
   ========================================================================== */

@media (max-width: 1024px) {
	.zhl-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* 两列时第 3 项起折行，横线要重排：只保留右列的上边框 */
	.zhl-facts li:nth-child(odd) {
		border-left: 0;
	}

	.zhl-facts li:nth-child(n + 3) {
		border-top: 1px solid var(--zhl-line);
	}
}

@media (max-width: 900px) {
	/* 必须在这里重申单栏：上面 .zhl-page .zhl-with-aside 是 (0,2,0)，
	   layout.css 里 .zhl-with-aside 的 900 断点只有 (0,1,0)，压不住。

	   注意必须写 minmax(0, 1fr) 而不是 1fr：1fr 的隐式 min-width 是 auto，
	   会被子元素的 min-content 顶开。正文里的对照表在 640 以下是
	   display:block + white-space:nowrap，min-content 有 700 多像素，
	   结果整页在 390 视口里被撑到 772，横向滚动 382px。 */
	.zhl-page .zhl-with-aside {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(28px, 4vw, 56px);
	}

	/* 同样的原因，grid 子项也要允许收缩 */
	.zhl-page .entry-content {
		min-width: 0;
	}

	.zhl-pg-split {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.zhl-page-cta__in {
		grid-template-columns: 1fr;
	}

	.zhl-page-cta__acts {
		justify-content: flex-start;
	}
}

@media (max-width: 640px) {
	.zhl-facts {
		grid-template-columns: 1fr;
	}

	.zhl-facts li + li {
		border-left: 0;
		border-top: 1px solid var(--zhl-line);
	}

	.zhl-page-hero h1 {
		font-size: 1.72rem;
	}

	.zhl-pg-steps > li {
		grid-template-columns: 34px minmax(0, 1fr);
		gap: 12px;
	}

	.zhl-pg-steps > li::before {
		width: 34px;
		height: 34px;
		font-size: 0.74rem;
	}

	.zhl-pg-steps > li:not(:last-child)::after {
		left: 16.5px;
		top: 42px;
	}

	/* 窄屏表格横向滚动，不压窄列宽 */
	.zhl-pg-table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}

	.zhl-page-cta__acts .zhl-btn {
		flex: 1 1 100%;
		text-align: center;
	}
}