/* ============================================================
慧谷茗心 · 品牌官网 —— 组件样式
------------------------------------------------------------
依赖 base.css 的变量。加载顺序：base.css → site.css。
⚠️ 顺序反了不会报错，但 --rock 之类的变量在 site.css 里
解析时还没定义，颜色会全部退回浏览器默认（黑字白底）。
每个 HTML 的 里两个 的顺序请勿调整。
============================================================ */
/* ============================================================
一、页头导航
------------------------------------------------------------
桌面：横向导航 + 下拉。手机：汉堡 + 全屏抽屉。
⚠️ position: sticky 而不是 fixed。fixed 需要给 body 加
padding-top 补偿，而那个补偿值一旦与 --nav-h 不同步，
首屏顶部就会多出一条空白 —— sticky 不占额外文档流处理。
============================================================ */
.site-nav {
position: sticky; top: 0; z-index: 60;
height: var(--nav-h);
background: rgba(244, 239, 230, .92);
backdrop-filter: saturate(1.6) blur(12px);
-webkit-backdrop-filter: saturate(1.6) blur(12px);
border-bottom: 1px solid var(--hairline-2);
}
.site-nav .in {
height: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
display: flex; align-items: center; gap: 28px;
}
/* 品牌位：纯文字。
⚠️ 不放 logo 图片 —— 客户此前明确要求小程序首页取消
「logo + 文字」的组合。官网页头沿用同一口径：只用字。
站点名来自 /api/site/info，不写死。 */
.brand { display: flex; align-items: baseline; gap: 10px; flex: none; }
.brand .zh {
font-family: var(--f-display);
font-size: 20px; font-weight: 700; letter-spacing: .12em;
color: var(--ink);
}
.brand .en {
font-family: var(--f-num);
font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
color: var(--gold);
}
/* ------------------------------------------------------------
一级导航
------------------------------------------------------------
⚠️ 这一行的可用宽度**不随屏幕变宽而增加**，因为 .in 被
max-width: var(--wrap) = 1200px 钉死了。所以「大屏就放得下」
是错的 —— 1440 和 1920 上留给导航的宽度和 1200 上一模一样：
可用 = 1200 - 48(padding) - 392(品牌) - 92(扫码按钮) - 56(两个 gap)
= 612px ← 实测 .nav-list 宽度正是 612
需要 = 所有标签的文字宽 + 每项左右 padding + 项间 gap
= 29 个汉字 x 15px + 8 项 x 2 x padding + 7 x gap
8 个栏目在 padding:14 / gap:4 时需要 659px（实测自然宽 659），
**超出 612 共 47px**。超出后 .nav-list 作为 flex 项被压缩，
每项内容盒只剩 45px 而文字要 60px —— 中文没有空格，
于是「关于我们」折成「关于我」+「们」，
而第二行落在 72px 页头**之外**，压在首屏 Banner 上。
⚠️ 这个塌版在 1440px 桌面宽度下就已经发生，不是窄屏问题。
它控制台干净、请求全 200、四道闸门全绿；截图时如果只裁
页头那 72px，第二行恰好在裁剪框外面 —— 看起来完全正常。
（本轮就是这么漏过一次的：先量了 y0~74 的墨迹，只有一条带，
误判为「没折行」；把扫描范围放到 y0~200 才看到第二条带。）
⚠️ 所以这里 padding 收到 10px、gap 收到 0：
需要 = 435 + 160 + 0 = 595 ≤ 612，余量 17px。
余量只有 17px，**再加一个四字栏目（+80px）必然塌版**。
加栏目前请先按上面的公式算，或跑 deploy-website.sh 里的
「页头宽度预算」检查（它会直接把构建判失败）。
⚠️ white-space: nowrap 是**兜底而非样式**：它保证即使将来
预算又被撑破，结果也是「横向溢出」这种一眼能看见的坏，
而不是「折到页头外面」这种只有裁全屏截图才看得见的坏。
不要因为「反正现在放得下」把它删掉。
------------------------------------------------------------ */
.nav-list { display: flex; align-items: center; gap: 0; margin-left: auto; }
.nav-list > li { position: relative; }
.nav-list a {
display: block; padding: 0 10px; height: var(--nav-h);
line-height: var(--nav-h);
font-size: 15px; color: var(--ink-2);
white-space: nowrap;
transition: color .18s ease;
}
.nav-list a:hover { color: var(--rock); }
/* 当前栏目：金色下划线。
⚠️ 高亮由 JS 按当前文件名加 .on，不是靠 CSS ——
:target / :hover 都做不到「跨页面的当前项」。 */
.nav-list a.on { color: var(--rock); font-weight: 500; }
.nav-list a.on::after {
content: ''; position: absolute; left: 14px; right: 14px; bottom: 18px;
height: 2px; background: var(--gold-l); border-radius: 2px;
}
/* 下拉子菜单 */
.nav-list .sub {
position: absolute; top: calc(var(--nav-h) - 8px); left: 0;
min-width: 168px; padding: 8px;
background: var(--card); border: 1px solid var(--hairline-2);
border-radius: var(--r-m); box-shadow: var(--sh-m);
opacity: 0; visibility: hidden; transform: translateY(6px);
transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-list > li:hover .sub,
/* ⚠️ :focus-within 必须留：只用 :hover 的话，用 Tab 键走到
父项时子菜单不展开，键盘用户永远进不去子栏目。 */
.nav-list > li:focus-within .sub {
opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-list .sub a {
height: auto; line-height: 1.7; padding: 8px 12px;
border-radius: var(--r-s); font-size: 14px;
}
.nav-list .sub a:hover { background: var(--paper-2); }
.nav-list .sub a.on::after { display: none; }
/* 页头右侧的引流按钮 */
.nav-cta { flex: none; }
/* 汉堡按钮（手机端才显示） */
.burger {
display: none; flex: none;
width: 40px; height: 40px; margin-left: auto;
align-items: center; justify-content: center;
border-radius: var(--r-s);
}
.burger span {
display: block; position: relative;
width: 20px; height: 1.5px; background: var(--ink);
transition: transform .2s ease, opacity .2s ease;
}
.burger span::before, .burger span::after {
content: ''; position: absolute; left: 0; width: 20px; height: 1.5px;
background: var(--ink); transition: transform .2s ease;
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger.open span { background: transparent; }
.burger.open span::before { transform: translateY(6px) rotate(45deg); }
.burger.open span::after { transform: translateY(-6px) rotate(-45deg); }
/* 手机抽屉 */
.drawer {
position: fixed; inset: var(--nav-h-m) 0 0 0; z-index: 55;
background: var(--paper);
padding: 12px 16px 32px;
overflow-y: auto;
/* ⚠️ 用 translateX 而不是 display:none 切换：
display 切换没有过渡动画，抽屉会「闪」出来。
同时必须配 visibility，否则隐藏状态下抽屉里的链接
仍能被 Tab 聚焦（焦点跑到屏幕外，页面莫名滚动）。 */
transform: translateX(100%); visibility: hidden;
transition: transform .26s ease, visibility .26s;
}
.drawer.open { transform: translateX(0); visibility: visible; }
.drawer a {
display: block; padding: 14px 4px;
font-size: 16px; color: var(--ink-2);
border-bottom: 1px solid var(--hairline-2);
}
.drawer a.on { color: var(--rock); font-weight: 500; }
.drawer .grp { padding: 18px 4px 6px; font-size: 12px; letter-spacing: .2em; color: var(--ink-4); }
.drawer .sub-a { padding-left: 18px; font-size: 15px; }
/* ============================================================
二、首页 Banner（轮播）
------------------------------------------------------------
⚠️ 自己写而不引 swiper：swiper 压缩后 140KB+，
而这里只需要「淡入淡出 + 圆点 + 自动播放」。
⚠️ 所有 slide 都渲染在 DOM 里、靠 opacity 切换，
不是 display:none —— 后者会让浏览器在切换那一刻
才开始加载图片，第一次轮播必然闪白。
============================================================ */
.hero { position: relative; overflow: hidden; background: var(--paper-2); }
.hero-track { position: relative; height: 560px; }
.hero-item {
position: absolute; inset: 0;
opacity: 0; transition: opacity .8s ease;
/* ⚠️ pointer-events 必须跟着切：不切的话，看不见的那一张
压在上面，访客点「了解详情」点不动。 */
pointer-events: none;
}
.hero-item.on { opacity: 1; pointer-events: auto; }
.hero-item img { width: 100%; height: 100%; object-fit: cover; }
/* 图上的文字要压一层渐变，否则浅色照片上白字看不清。
⚠️ 渐变从下往上，不是整块半透明黑 —— 后者会让照片发灰。 */
.hero-item .mask {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(30, 27, 23, .28) 0%,
rgba(30, 27, 23, .04) 42%, rgba(30, 27, 23, .62) 100%);
}
.hero-item .txt {
position: absolute; left: 0; right: 0; bottom: 88px;
max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
color: #fff;
}
.hero-item .txt h2 {
font-size: 40px; letter-spacing: .06em;
text-shadow: 0 2px 20px rgba(0, 0, 0, .35);
}
.hero-item .txt p {
margin-top: 12px; font-size: 16px; opacity: .92;
text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
.hero-item .txt .btn { margin-top: 22px; }
/* 没有 Banner 时的兜底：宣纸底纹 + 站点标语。
⚠️ 必须有这个兜底。运营还没上传 Banner 时首页顶部是
一片空白，客户会以为网站没做完。 */
.hero-fallback {
height: 460px; display: flex; align-items: center; justify-content: center;
text-align: center;
background:
radial-gradient(1200px 400px at 50% -10%, var(--gold-wash), transparent 70%),
linear-gradient(180deg, var(--paper-2), var(--paper));
}
.hero-fallback h2 { font-size: 36px; letter-spacing: .16em; }
.hero-fallback p { margin-top: 14px; color: var(--ink-3); letter-spacing: .1em; }
.hero-fallback .rule { width: 60px; height: 2px; margin: 20px auto 0; background: var(--gold-l); }
.hero-dots {
position: absolute; left: 0; right: 0; bottom: 28px;
display: flex; justify-content: center; gap: 10px;
}
.hero-dots button {
width: 28px; height: 3px; border-radius: 2px;
background: rgba(255, 255, 255, .45);
transition: background .2s ease;
}
.hero-dots button.on { background: #fff; }
/* ============================================================
三、卡片：文章 / 产品
============================================================ */
.card {
background: var(--card);
border: 1px solid var(--hairline-2);
border-radius: var(--r-l);
overflow: hidden;
transition: transform .22s ease, box-shadow .22s ease;
display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-m); }
/* 图片位固定比例。
⚠️ 用 padding-top 撑高（而不是给 img 写死 height），
这样图片没加载完时高度已经确定，不会发生
「图到了之后整页往下跳」（CLS）。
aspect-ratio 更优雅，但要兼容老一点的国产浏览器内核，
padding-top 的支持面更宽。 */
.card .thumb { position: relative; padding-top: 62%; background: var(--paper-3); overflow: hidden; }
.card .thumb img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
transition: transform .5s ease;
}
.card:hover .thumb img { transform: scale(1.045); }
/* 无封面时的替代块：不放「暂无图片」四个字，
放一枚淡淡的印章底纹 —— 官网上出现「暂无图片」显得没做完。 */
.card .thumb.none {
background:
radial-gradient(400px 160px at 50% 0%, var(--gold-wash), transparent 70%),
var(--paper-2);
}
.card .thumb.none::after {
content: '茗'; position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
/* 印章字必须是宋体：黑体的「茗」没有笔锋，看着像占位符而不是印记。 */
font-family: var(--f-display);
font-size: 46px; font-weight: 700; color: var(--ink-4); opacity: .3;
}
.card .body { padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; }
/* ---- 卡片标题一律**黑体**，不跟 h1~h3 的宋体 ----
⚠️ 这不是漏改，是照抄小程序的分工。
注意小程序**不是**「宋体用得少」（全端宋体声明 69 处），
而是列表卡片标题那几个类里**根本没写 font-family** ——
.pc-n（商品卡）、.al-n（文章行）只写字号字重行高，
字族从 page{} 的 PingFang 继承下来。宋体铺得很广，
但有意绕开了密集列表的卡片标题。
（边界：activity.wxss 的 .ac-n 是宋体 28rpx/700 ——
它是一屏两三张的主卡标题，不是密集列表。判据见 docs/09 §2.6。）
两条理由，都成立：
1. 一致性 —— 卡片是两端重复度最高的元素，字不一样最容易被看出来；
2. 可读性 —— 卡片标题 15~17px 且常两行，中文宋体在这个字号下
笔画发虚，密集列表里尤其累眼。这是「美观」与「使用」
冲突时以使用为先的地方。
⚠️ 产品名与文章标题在 HTML 里是