/* ==========================================================================
   Zhihuilu · 首页（对齐 come-to-china.com）
   取值方式：Chrome 1440×900，getComputedStyle + getBoundingClientRect 实测，
   不靠目测。所有数值与 come 同位置元素一致，媒体查询断点按本站内容调整。

   区块顺序：首屏 → 数据条 → 四类需求（bento）→ 五步 → 案例
             → 产业带 → 指南 → 团队 → FAQ → 提交需求
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 页面级
   -------------------------------------------------------------------------- */

.zh-home {
	/* GeneratePress 的 .site-content 是 display:flex，
	   本节点作为 flex item 会被 shrink-to-fit 成内容宽度（1440），
	   于是内部 max-width + margin:auto 失去居中效果，>1440 时整页靠左。
	   显式给满宽，让居中交给内层容器处理。 */
	width: 100%;
	flex: 1 1 100%;

	--zh-edge: 56px;          /* 首屏左右留白，come 为 56 */
	--zh-gutter: 24px;        /* 常规区块留白，come 为 24 */
	--zh-gap: 20px;           /* 卡片间距，come 为 20 */
	--zh-shadow: 0 18px 48px rgb(16 24 32 / 0.1);
	background: var(--zhl-page);
	color: var(--zhl-ink-soft);
	font-size: 17px;
	line-height: 1.6;
}

.zh-home h1,
.zh-home h2,
.zh-home h3,
.zh-home h4 {
	color: var(--zhl-ink);
	margin: 0;
}

.zh-home p { margin: 0; }

.zh-home a { text-decoration: none; }

/* 常规区块壳 */
.zh-sec {
	padding-block: clamp(56px, 5vw, 88px);
}

.zh-sec__in {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--zh-gutter);
}

.zh-sec--band { background: #f8f8f8; }

/* 区块头：居中堆叠，与 come 一致 */
.zh-hd {
	text-align: center;
	max-width: 720px;
	margin: 0 auto clamp(32px, 3.4vw, 48px);
}

.zh-hd__kicker {
	display: block;
	margin: 0 0 8px;
	color: var(--zhl-brand);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.6;
}

.zh-hd h2 {
	font-size: clamp(1.85rem, 1.2rem + 1.9vw, 2.75rem); /* 44px @1440 */
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.022em;
}

.zh-hd__lead {
	max-width: 40rem;
	margin: 14px auto 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--zhl-ink-soft);
}

/* 箭头链接 */
.zh-go {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--zhl-brand);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.6;
	transition: gap 0.16s ease;
}

.zh-go::after {
	content: "›";
	font-size: 1.05em;
	line-height: 1;
	transform: translateY(-1px);
}

.zh-go:hover { gap: 9px; }

/* 主按钮 */
.zh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 46px;
	padding: 0 22px;
	border: 0;
	border-radius: 10px;
	background: var(--zhl-brand);
	color: var(--zhl-on-brand, #fff);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background 0.16s ease, transform 0.16s ease;
}

.zh-btn:hover {
	background: var(--zhl-brand-deep);
	color: var(--zhl-on-brand, #fff);
	transform: translateY(-1px);
}

.zh-btn--ghost {
	background: transparent;
	color: var(--zhl-ink);
	border: 1px solid var(--zhl-line-strong);
}

.zh-btn--ghost:hover {
	background: color-mix(in srgb, var(--zhl-ink) 5%, transparent);
	color: var(--zhl-ink);
}

/* --------------------------------------------------------------------------
   1. 首屏
   come: #ctc-bn；底 #f6f8fa；inner grid 850/430 gap48 padding 76 56 118
   -------------------------------------------------------------------------- */

.zh-hero {
	background: #f6f8fa;
	border-bottom: 1px solid color-mix(in srgb, var(--zhl-ink) 7%, transparent);
}

.zh-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 850px) minmax(0, 430px);
	gap: 48px;
	max-width: 1440px;
	margin-inline: auto;
	padding: 76px var(--zh-edge) 118px;
}

/* --- 左栏 --- */
.zh-hero__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	color: var(--zhl-ink-soft);
	font-size: 11.5px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.zh-hero__kicker span { white-space: nowrap; }

.zh-hero__kicker i {
	font-style: normal;
	opacity: 0.4;
}

.zh-hero__title {
	margin: 0 0 16px;
	font-size: 48.24px;
	font-weight: 800;
	/* come 是单行英文，行高 1.04；中文两行按相同字号会把上下字挤在一起，
	   这里保留字号与字距，只把行高放到 1.16 */
	line-height: 1.16;
	letter-spacing: -0.03em;
	color: var(--zhl-ink);
}

.zh-hero__title em {
	font-style: normal;
	color: var(--zhl-brand);
}

.zh-hero__lead {
	max-width: 600px;
	margin: 0 0 26px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--zhl-ink-soft);
}

/* --- 六个入口 tab --- */
.zh-hero__tabs {
	display: flex;
	gap: 6px;
	margin-bottom: 20px;
	overflow-x: auto;
	scrollbar-width: none;
}

.zh-hero__tabs::-webkit-scrollbar { display: none; }

.zh-hero__tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 7px;
	flex: 0 0 88px;
	height: 94px;
	padding: 8px 4px 9px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--zhl-ink-soft);
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background 0.16s ease, color 0.16s ease;
}

.zh-hero__tab svg {
	width: 22px;
	height: 22px;
	flex: none;
	stroke: currentColor;
}

.zh-hero__tab:hover { background: color-mix(in srgb, var(--zhl-ink) 5%, transparent); }

.zh-hero__tab.is-on {
	background: var(--zhl-page);
	color: var(--zhl-brand);
	box-shadow: 0 2px 10px rgb(16 24 32 / 0.07);
}

/* --- 面板：白色条，切 tab 换内容 --- */
.zh-hero__stage {
	position: relative;
	margin-bottom: 18px;
}

.zh-hero__panel {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 76px;
	padding: 10px 10px 10px 20px;
	background: var(--zhl-page);
	border-radius: 18px;
}

.zh-hero__panel.is-on { display: flex; }

.zh-hero__panel p {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--zhl-ink-soft);
}

.zh-hero__panel b {
	display: block;
	margin-bottom: 2px;
	color: var(--zhl-ink);
	font-size: 16px;
	font-weight: 700;
}

.zh-hero__panel .zh-btn { flex: none; height: 44px; }

.zh-hero__explore {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	margin: 0;
}

.zh-hero__explore a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--zhl-brand);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.6;
}

.zh-hero__explore .zh-hero__ask {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--zhl-brand);
	font-family: inherit;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.6;
	cursor: pointer;
}

.zh-hero__explore .zh-hero__ask:hover { text-decoration: underline; }

/* 小星标，和左下角 dock 的图标呼应 */
.zh-hero__explore .zh-hero__ask::before {
	content: "✦";
	font-size: 12px;
	line-height: 1;
}

/* --- 右栏：三张照片拼贴（尺寸照 come 实测） --- */
.zh-hero__media {
	position: relative;
	height: 420px;
}

.zh-hero__shot {
	position: absolute;
	margin: 0;
	overflow: hidden;
	border-radius: 20px;
	background: #dfe3e7;
	box-shadow: 0 16px 36px rgb(16 24 32 / 0.12);
}

.zh-hero__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.zh-hero__shot--a { left: 0; top: 17px; width: 241px; height: 277px; }
.zh-hero__shot--b { right: 0; top: 0; width: 176px; height: 168px; }
.zh-hero__shot--c { left: 206px; top: 193px; width: 202px; height: 227px; }

/* --------------------------------------------------------------------------
   2. 数据条（4 × 338 × 108）
   -------------------------------------------------------------------------- */

.zh-stats {
	background: var(--zhl-page);
	border-bottom: 1px solid color-mix(in srgb, var(--zhl-ink) 7%, transparent);
}

.zh-stats__in {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--zh-gutter);
}

.zh-stat {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 108px;
	padding: 18px 12px;
	text-align: center;
	border-left: 1px solid color-mix(in srgb, var(--zhl-ink) 8%, transparent);
}

.zh-stat:first-child { border-left: 0; }

.zh-stat strong {
	color: var(--zhl-ink);
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.zh-stat span {
	color: var(--zhl-ink-soft);
	font-size: 13.5px;
	line-height: 1.4;
	text-align: left;
}

/* --------------------------------------------------------------------------
   3. 四类需求：bento（469 / 415×2 / 469，gap 20）
   -------------------------------------------------------------------------- */

/*
 * 四张卡不是规则网格：左 469×680（跨两行）、中间 415×330 ×2、右 469×680（跨两行）。
 * 之前靠自动布局放置 —— 默认 grid-auto-flow: row 会把第 3 张推进第三列第一行，
 * 第 4 张（跨两行）找不到连续空位，落进隐式行被压成 150px 高，这就是「变形」。
 * 改成显式命名区域，四张卡位置固定，任何宽度都不会错位。
 */
.zh-bento {
	display: grid;
	grid-template-columns: minmax(0, 469fr) minmax(0, 415fr) minmax(0, 469fr);
	grid-template-rows: repeat(2, 330px);
	grid-template-areas:
		"a b c"
		"a d c";
	gap: var(--zh-gap);
}

.zh-bento > :nth-child(1) { grid-area: a; }
.zh-bento > :nth-child(2) { grid-area: b; }
.zh-bento > :nth-child(3) { grid-area: d; }
.zh-bento > :nth-child(4) { grid-area: c; }

.zh-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-width: 0;
	padding: 30px 48px 24px;
	overflow: hidden;
	border-radius: 16px;
	background: #e7ebef;
	color: var(--zhl-ink);
	isolation: isolate;
}

.zh-card img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.zh-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgb(12 18 24 / 0.02) 22%, rgb(12 18 24 / 0.42) 62%, rgb(12 18 24 / 0.82) 100%);
}

.zh-card:hover img { transform: scale(1.04); }

.zh-card__body { position: relative; }

.zh-card h3 {
	margin: 0 0 8px;
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.zh-card p {
	margin: 0 0 14px;
	max-width: 34ch;
	color: rgb(255 255 255 / 0.84);
	font-size: 15px;
	line-height: 1.55;
}

.zh-card .zh-go { color: #fff; }

.zh-card .zh-go::after { opacity: 0.8; }

/* 纯文字卡（bento 中间两张） */
.zh-card--note {
	justify-content: space-between;
	padding: 30px 34px 26px;
	background: var(--zhl-page);
	border: 1px solid color-mix(in srgb, var(--zhl-ink) 10%, transparent);
}

.zh-card--note h3 { color: var(--zhl-ink); font-size: 21px; }

.zh-card--note p { color: var(--zhl-ink-soft); max-width: 30ch; }

.zh-card--note .zh-card__num {
	color: var(--zhl-brand);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   4. 五步
   -------------------------------------------------------------------------- */

.zh-steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--zh-gap);
	counter-reset: zh-step;
}

.zh-step {
	position: relative;
	padding: 26px 22px 24px;
	background: #f7f7f7;
	border-radius: 14px;
}

.zh-step::before {
	counter-increment: zh-step;
	content: "0" counter(zh-step);
	display: block;
	margin-bottom: 12px;
	color: var(--zhl-brand);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
}

.zh-step h3 {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.zh-step p {
	margin: 0;
	color: var(--zhl-ink-soft);
	font-size: 14px;
	line-height: 1.55;
}

/* --------------------------------------------------------------------------
   5. 案例
   -------------------------------------------------------------------------- */

.zh-cases {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--zh-gap);
}

.zh-case {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--zhl-page);
	border-radius: 16px;
}

.zh-case__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #e7ebef;
}

.zh-case__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.zh-case:hover .zh-case__media img { transform: scale(1.04); }

.zh-case__tag {
	position: absolute;
	left: 14px;
	top: 14px;
	padding: 5px 10px;
	border-radius: 6px;
	background: rgb(255 255 255 / 0.92);
	color: var(--zhl-ink);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.zh-case__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 8px;
	padding: 22px 24px 24px;
}

.zh-case h3 {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.zh-case p {
	color: var(--zhl-ink-soft);
	font-size: 15px;
	line-height: 1.55;
}

.zh-case .zh-go { margin-top: auto; padding-top: 12px; }

/* --------------------------------------------------------------------------
   6. 产业带
   -------------------------------------------------------------------------- */

.zh-cities {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--zh-gap);
}

.zh-city {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 20px 22px;
	background: #f7f7f7;
	border-radius: 12px;
	transition: background 0.16s ease;
}

.zh-city:hover { background: #eef0f2; }

.zh-city b {
	color: var(--zhl-ink);
	font-size: 16px;
	font-weight: 700;
}

.zh-city span {
	color: var(--zhl-ink-faint);
	font-size: 13px;
}

/* --------------------------------------------------------------------------
   7. 指南
   -------------------------------------------------------------------------- */

.zh-guides {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--zh-gap);
}

.zh-guide {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 22px;
	background: var(--zhl-page);
	border: 1px solid color-mix(in srgb, var(--zhl-ink) 10%, transparent);
	border-radius: 14px;
	transition: border-color 0.16s ease;
}

.zh-guide:hover { border-color: color-mix(in srgb, var(--zhl-brand) 40%, transparent); }

.zh-guide h3 {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
}

.zh-guide p {
	color: var(--zhl-ink-soft);
	font-size: 14px;
	line-height: 1.55;
}

.zh-guide .zh-go { margin-top: auto; padding-top: 6px; }

/* --------------------------------------------------------------------------
   8. 团队
   -------------------------------------------------------------------------- */

.zh-team {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
}

.zh-team h2 {
	font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.25rem);
	font-weight: 600;
	line-height: 1.16;
	letter-spacing: -0.022em;
	margin-bottom: 14px;
}

.zh-team p {
	color: var(--zhl-ink-soft);
	font-size: 16px;
	line-height: 1.65;
	margin-bottom: 22px;
}

.zh-team__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.zh-team__item {
	padding: 20px 22px;
	background: #f7f7f7;
	border-radius: 12px;
}

.zh-team__item strong {
	display: block;
	color: var(--zhl-ink);
	font-size: 26px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.zh-team__item span {
	display: block;
	margin-top: 4px;
	color: var(--zhl-ink-soft);
	font-size: 13px;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   9. FAQ
   -------------------------------------------------------------------------- */

.zh-faq {
	max-width: 880px;
	margin: 0 auto;
	border-top: 1px solid color-mix(in srgb, var(--zhl-ink) 10%, transparent);
}

.zh-faq details {
	border-bottom: 1px solid color-mix(in srgb, var(--zhl-ink) 10%, transparent);
}

.zh-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 4px;
	color: var(--zhl-ink);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
	cursor: pointer;
	list-style: none;
}

.zh-faq summary::-webkit-details-marker { display: none; }

.zh-faq summary::after {
	content: "+";
	flex: none;
	color: var(--zhl-ink-faint);
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	transition: transform 0.18s ease;
}

.zh-faq details[open] summary::after { transform: rotate(45deg); }

.zh-faq details > p {
	max-width: 68ch;
	margin: 0 0 22px;
	padding-right: 40px;
	color: var(--zhl-ink-soft);
	font-size: 16px;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   10. 结尾 CTA
   -------------------------------------------------------------------------- */

.zh-cta {
	background: var(--zhl-ink);
	color: rgb(255 255 255 / 0.72);
	padding-block: clamp(52px, 5vw, 84px);
}

.zh-cta__in {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
	gap: clamp(28px, 4vw, 72px);
	align-items: center;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--zh-gutter);
}

.zh-cta h2 {
	color: #fff;
	font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.25rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.022em;
	margin-bottom: 12px;
}

.zh-cta p { font-size: 16px; line-height: 1.65; }

.zh-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
}

.zh-cta__ghost {
	background: rgb(255 255 255 / 0.1);
	color: #fff;
	border: 1px solid rgb(255 255 255 / 0.24);
}

.zh-cta__ghost:hover { background: rgb(255 255 255 / 0.16); color: #fff; }

.zh-cta .zhl-form { background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.14); }
.zh-cta .zhl-form label { color: rgb(255 255 255 / 0.8); }
.zh-cta .zhl-form input,
.zh-cta .zhl-form select,
.zh-cta .zhl-form textarea {
	background: rgb(255 255 255 / 0.96);
	border-color: transparent;
}

/* --------------------------------------------------------------------------
   10.5 浅灰底（band）区块里的卡面
   .zh-sec--band 的底色是 #f8f8f8，而卡面原本用 #f7f7f7，
   两者几乎同色 —— 卡片的边界完全消失，看起来就是几行字浮在页面上。
   这里统一把 band 内的卡面改成白底 + 一圈描边，恢复「卡」的读法。
   -------------------------------------------------------------------------- */

.zh-sec--band .zh-step,
.zh-sec--band .zh-city,
.zh-sec--band .zh-team__item {
	background: var(--zhl-page);
	border: 1px solid color-mix(in srgb, var(--zhl-ink) 8%, transparent);
}

.zh-sec--band .zh-step:hover,
.zh-sec--band .zh-city:hover {
	border-color: color-mix(in srgb, var(--zhl-brand) 34%, transparent);
}

/* 城市卡：名称与强项之间留固定间距，避免宽屏下被 space-between 拉成两端 */
.zh-city {
	justify-content: flex-start;
	gap: 14px;
}

.zh-city b { flex: none; min-width: 3.2em; }

.zh-city span {
	flex: 1 1 auto;
	text-align: left;
}

/* --------------------------------------------------------------------------
   11. 响应式
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
	.zh-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
		gap: 36px;
		padding: 56px 40px 80px;
	}

	.zh-hero__title { font-size: clamp(2rem, 1.1rem + 2.6vw, 3rem); }

	.zh-hero__media { height: 380px; }
	.zh-hero__shot--a { width: 210px; height: 242px; }
	.zh-hero__shot--b { width: 152px; height: 146px; }
	/* 170 + 200 = 370，落在 380 的容器内，不再压到数据条 */
	.zh-hero__shot--c { left: 180px; top: 170px; width: 178px; height: 200px; }

	/* 平板：2×2 等格，取消跨行，避免出现被压扁的尾行 */
	.zh-bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(2, 340px);
		grid-template-areas:
			"a b"
			"d c";
	}

	.zh-card { padding: 26px 30px 22px; }

	.zh-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.zh-cities,
	.zh-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 6 个 88px 的入口在 990–1100 会超出左栏（6×88+30=558 > 528），改为按份均分。
   必须放在基础规则之后：同权重时靠后生效，否则会被 flex:0 0 88px 盖掉。 */
@media (min-width: 901px) and (max-width: 1100px) {
	.zh-hero__tab {
		flex: 1 1 0;
		min-width: 0;
	}
}

@media (max-width: 900px) {
	/* 窄屏入口条放不下，横滑时右侧渐隐提示「还有」 */
	.zh-hero__tabs {
		-webkit-overflow-scrolling: touch;
		mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
		-webkit-mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
	}

	.zh-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		padding: 44px 24px 56px;
	}

	.zh-hero__media {
		height: 300px;
		max-width: 430px;
		/* 单列后容器很宽，固定 430 的拼贴会贴左留出大片空白，居中更稳 */
		margin-inline: auto;
	}

	.zh-hero__shot--a { left: 0; top: 14px; width: 168px; height: 194px; }
	.zh-hero__shot--b { right: 0; top: 0; width: 122px; height: 118px; }
	/* 136 + 160 = 296，留 4px 不压到下一区块 */
	.zh-hero__shot--c { left: 140px; top: 136px; width: 142px; height: 160px; }

	.zh-cases { grid-template-columns: minmax(0, 1fr); }
	.zh-team { grid-template-columns: minmax(0, 1fr); }
	.zh-cta__in { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px) {
	.zh-sec { padding-block: 48px; }

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

	.zh-stat {
		border-left: 0;
		border-top: 1px solid color-mix(in srgb, var(--zhl-ink) 8%, transparent);
	}

	.zh-stat:nth-child(-n + 2) { border-top: 0; }

	.zh-bento {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: repeat(4, minmax(220px, auto));
		grid-template-areas:
			"a"
			"b"
			"d"
			"c";
	}

	.zh-steps { grid-template-columns: minmax(0, 1fr); }
	.zh-cities,
	.zh-guides,
	.zh-team__grid { grid-template-columns: minmax(0, 1fr); }

	.zh-hero__tab { flex: 0 0 76px; height: 86px; font-size: 11px; }

	.zh-hero__panel {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 16px;
	}

	.zh-hero__panel .zh-btn { width: 100%; }
}