/* ============================================================
   fuling-zhacai.css —— 涪陵榨菜传统制作技艺专属版式
   主题：菜头青绿 + 长江水灰蓝，突出"三腌三榨"流程与商业传奇
   ============================================================ */

:root {
	--zc-bg: #f0f5ef;
	--zc-ink: #2c3a30;
	--zc-accent: #4a7a4f;
	--zc-orange: #c97a3a;
	--zc-deep: #2f4f38;
}

/* ---------- Hero：江畔菜乡 ---------- */
.zc-hero {
	position: relative;
	background:
		radial-gradient(560px 260px at 78% -16%, rgba(201, 122, 58, .32), transparent 60%),
		linear-gradient(165deg, var(--zc-deep) 0%, var(--zc-accent) 100%);
	color: #f2f8f0;
	padding: 80px 22px 72px;
	overflow: hidden;
}
.zc-hero::after {
	content: "榨";
	position: absolute;
	right: 3%; bottom: -30px;
	font-family: "STKaiti", "KaiTi", serif;
	font-size: 170px;
	color: rgba(255, 255, 255, .06);
	pointer-events: none;
}
.zc-hero .inner { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; }
.zc-hero .kicker { font-size: 13px; letter-spacing: 6px; opacity: .88; margin-bottom: 10px; }
.zc-hero h1 { font-size: clamp(30px, 4.8vw, 46px); letter-spacing: 8px; }
.zc-hero .slogan { margin-top: 12px; font-size: 15px; letter-spacing: 3px; opacity: .92; }
.zc-hero .chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.zc-hero .chip { padding: 5px 15px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 6px; font-size: 12.5px; letter-spacing: 2px; background: rgba(0, 0, 0, .14); }

/* ---------- 世界三大名腌菜：三卡 ---------- */
.san-da { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.san-da article {
	background: #fff; border-radius: 14px; padding: 24px 22px;
	box-shadow: 0 8px 18px rgba(47, 79, 56, .08);
	border-top: 5px solid #dfe7dc;
}
.san-da article.hl { border-top-color: var(--zc-orange); background: linear-gradient(170deg, #fff 62%, #fdf3e8 100%); }
.san-da h3 { font-size: 17px; color: var(--zc-deep); margin-bottom: 4px; }
.san-da .from { font-size: 12px; color: #93a292; margin-bottom: 10px; }
.san-da p { font-size: 13.5px; color: #5d6b5f; line-height: 1.75; }

/* ---------- 三腌三榨：双轨流程 ---------- */
.ya-zha { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ya-zha .track { background: #fff; border-radius: 14px; padding: 22px 24px; box-shadow: 0 8px 18px rgba(47, 79, 56, .08); }
.ya-zha .track h3 {
	font-size: 16px; color: #fff; display: inline-block;
	padding: 5px 16px; border-radius: 999px; margin-bottom: 14px;
	background: linear-gradient(120deg, var(--zc-accent), var(--zc-deep));
}
.ya-zha .track.zha h3 { background: linear-gradient(120deg, var(--zc-orange), #a05a26); }
.ya-zha .track ol { margin: 0; padding-left: 22px; }
.ya-zha .track li { font-size: 13.5px; color: #5d6b5f; line-height: 1.9; }
.ya-zha .track li b { color: var(--zc-deep); }

/* ---------- 数字条 ---------- */
.zc-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.zc-nums div {
	background: linear-gradient(150deg, var(--zc-deep), var(--zc-accent));
	border-radius: 12px; color: #fff;
	padding: 20px 16px; text-align: center;
}
.zc-nums b { display: block; font-size: 26px; margin-bottom: 4px; color: #ffe3b8; }
.zc-nums span { font-size: 12.5px; opacity: .92; letter-spacing: 1px; }

@media (max-width: 768px) {
	.san-da, .ya-zha, .zc-nums { grid-template-columns: 1fr; }
}