/* ============================================================
青阳阁 · 模块头图通用样式（品牌风景统一版 v7.0 · 100px 横幅）
所有 .xb-banner 顶部横幅统一使用 19.2:1 专用横幅底图
banner-qyg-100.jpg（1920×100）：左 40% 深褐水墨远山（承托白色
标题），右侧青阳阁主景（红日 · 树木 · 楼阁 · 远山）。
- 高度：频道页 / 通用顶部横幅统一固定 100px（见下方 100px 规则）。
- 取景：background-size: cover + 居中，任意视口宽度都铺满不留白。
- 内容：字号与图标同步收口，保证在 100px 内完整显示不截断。
- 右侧可挂页面专属人物徽章 ![]()
，
徽章高度随横幅高度自适应。
============================================================ */
.xb-banner {
position: relative;
overflow: hidden;
isolation: isolate;
color: #fff;
background: #EFE6D6; /* 宣纸底色，与主图边缘一致 */
}
/* 品牌横幅底图：所有顶部横幅统一，19.2:1 专用图
（1920x100，由 scripts/gen_banner_100.py 合成：左侧深墨远山承托白字，
右侧「红日 + 完整远景楼阁 + 树木」——楼阁整体可见、不裁切。） */
.xb-banner::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-image: url(/brand/banner-qyg-100.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1; /* ★ 品牌主图完整显示 ★ */
}
/* ---------- 首页 / 工具落地页：改用品牌主图 ge-hero-home.png ----------
这两类横幅高度较高（首页 hero / 工具页 .bz-hero 自适应），
1536x1024 的 1.5:1 主图若用 cover 会被纵向裁掉大半、楼阁被切断。
因此：等比缩放到「横幅等高」后靠右整幅摆放（auto 100%），
左缘用 mask 渐隐融进底色，楼阁完整、不裁切。 */
.xb-banner.brand-hero::before,
.xb-banner.xb-brand.hero::before {
background-image: url(/brand/ge-hero-home.png);
background-size: cover;
background-position: center 38%;
}
.xb-banner.bz-hero::before,
.xb-banner.nm-hero::before,
.xb-banner.wst-hero::before,
.xb-banner.fk-hero::before,
.xb-banner.nb-hero::before,
.xb-banner.gm-intro-banner::before {
background-image: url(/brand/ge-hero-home.png);
background-size: auto 100%;
background-position: right center;
background-repeat: no-repeat;
-webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .55) 9%, #000 20%, #000 100%);
mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .55) 9%, #000 20%, #000 100%);
}
/* ---------- 顶部横幅统一高度 100px ----------
覆盖频道页（page-hero / page-header）与通用顶部横幅（tags-hero /
legal-hero / 用户中心 / 错误页）。内容较多的工具页横幅
.bz-hero / .nm-hero / .wst-hero / .fk-hero / .nb-hero /
.gm-intro-banner 保持自适应高度，避免 badge + 标题 + 信任行 +
CTA 被 100px 截断。
例外：「关于我们」.about-hero 按需求固定 200px（左侧吉祥物 + 右侧文案）。 */
.xb-banner.page-hero,
.xb-banner.page-header,
.xb-banner.tags-hero,
.xb-banner.legal-hero,
.xb-banner.xb-user,
.xb-banner.xb-error {
height: 100px;
}
.xb-banner.about-hero { /* 单页覆盖：关于我们 200px（见 pages/about.css） */
height: 200px;
}
/* 左侧深色渐变遮罩，保证标题文字可读性（对比度 ≥ 4.5:1） */
.xb-banner::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(90deg,
rgba(70, 26, 16, 0.78) 0%,
rgba(70, 26, 16, 0.52) 34%,
rgba(70, 26, 16, 0.16) 58%,
rgba(70, 26, 16, 0) 78%);
}
/* 内容置于背景之上 */
.xb-banner > * {
position: relative;
z-index: 1;
}
/* ---------- 文字区：上下间距固定 12px，字号收口适配 100px ---------- */
.xb-banner .xb-banner-inner {
max-width: 1200px;
margin: 0 auto;
padding: 12px 28px;
}
.xb-banner .xb-banner-inner h1 {
margin: 0 0 5px;
font-size: 22px;
letter-spacing: 2px;
font-family: "Songti SC", STSong, SimSun, serif;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}
.xb-banner .xb-banner-inner p {
margin: 0;
font-size: 12.5px;
line-height: 1.55;
opacity: 0.94;
letter-spacing: 0.5px;
max-width: 640px;
}
/* .sub 类（page-hero 等）在深色遮罩上强制白字 */
.xb-banner .sub { color: rgba(255, 255, 255, 0.92); }
/* ---------- 各模块自带 hero 类的间距收口（双类提高优先级，
盖过模块 CSS 的 24~48px 上下 padding 与固定高度） ---------- */
.xb-banner.page-hero,
.xb-banner.page-header,
.xb-banner.tags-hero,
.xb-banner.legal-hero {
padding-top: 0; /* 100px 定高，靠 flex 垂直居中排版 */
padding-bottom: 0;
}
.xb-banner.bz-hero,
.xb-banner.nm-hero,
.xb-banner.gm-intro-banner,
.xb-banner.wst-hero,
.xb-banner.fk-hero,
.xb-banner.nb-hero {
padding-top: 16px;
padding-bottom: 16px;
}
.xb-banner.page-hero { background-image: none; } /* page-hero 浅色底不让给横幅 */
.xb-banner.wst-hero h1,
.xb-banner.bz-hero h1,
.xb-banner.nm-hero h1 { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); }
/* ---------- 页面专属人物徽章（通用规则） ----------
任何 .xb-banner 都可挂载 
徽章高度随横幅高度自适应；★ 全站统一「底部贴齐横幅底边」：
人物底部与背景图底边对齐，避免人物下方出现空白留白（用户要求所有人物模块统一）。 */
.xb-banner .ge-badge {
position: absolute;
right: 36px;
top: auto; /* ★ 取消垂直居中 */
bottom: 0; /* ★ 贴底对齐，人物脚下不留白 */
transform: none;
height: clamp(56px, 100%, 112px);
width: auto;
z-index: 2;
filter: drop-shadow(0 3px 10px rgba(60, 26, 16, 0.28));
}
/* ---------- 频道页统一头图：图标 + 品牌 + 模块简介 ----------
结构：
左侧模块图标 + 右侧「青阳阁 · 模块名」标题与一句简介，
全站频道页（商城/文章/专栏/社区/百科/大师/万年历/学习…）统一。 */
.xb-banner.page-hero {
text-align: left;
border-bottom: none;
display: flex; /* ★ 100px 定高：container 拉伸撑满，内部再纵向居中 */
}
.xb-banner.page-hero > .container {
width: 100%; /* ★ 撑满，子项左对齐 */
max-width: 1200px;
margin: 0 auto;
padding: 0 28px;
}
.xb-ch {
display: flex;
align-items: center; /* 图标 + 文字在 100px 内纵向居中 */
gap: 18px;
height: 100%; /* ★ 撑满 100px，给子项百分比高度提供确定参照 */
}
.xb-ch-icon {
flex: none;
width: auto;
height: clamp(56px, 96%, 104px);
max-height: 104px; /* ★ 兜底：百分比失效时也不会撑到图片原始尺寸 */
filter: drop-shadow(0 3px 10px rgba(60, 26, 16, 0.3));
}
.xb-ch-txt { flex: 0 1 auto; min-width: 0; } /* 可收缩：给 nowrap 文案留出省略余地 */
.xb-banner .xb-ch-txt h2 {
margin: 0 0 6px;
font-size: 26px;
font-weight: 800;
letter-spacing: 1px;
font-family: "Songti SC", STSong, SimSun, serif;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
white-space: nowrap; /* 标题不换行（提高优先级，盖过页面级 .page-hero h2） */
}
.xb-ch-txt .xb-ch-brand {
font-size: 15px;
font-weight: 500;
opacity: .88;
letter-spacing: 3px;
display: block;
margin-bottom: 2px;
font-family: inherit;
}
/* ★ 频道简介：强制单行，超出省略 —— 需求「描述不换行、控制在主体宽度一行内」★
选择器加 .xb-banner 前缀提高优先级，盖过页面级 .page-hero p（如 master 页）。 */
.xb-banner .xb-ch-txt p {
margin: 0;
font-size: 13.5px;
line-height: 1.7;
opacity: .94;
letter-spacing: .5px;
max-width: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 760px) {
.xb-banner.page-hero > .container { padding: 0 18px; }
.xb-ch { gap: 12px; }
.xb-ch-icon { height: 56px; }
.xb-ch-txt h2 { font-size: 19px; }
.xb-ch-txt p { font-size: 12.5px; }
}
@media (max-width: 520px) {
.xb-ch-icon { display: none; }
}
/* ---------- 频道模块横幅：全站统一品牌横幅（v7.0） ----------
历史实现按模块切换 1.5:1 场景图（scene-article / scene-theme /
scene-bbs / scene-dict / scene-master / scene-tools /
scene-calendar / scene-shop / scene-study）。但那些图是竖构图，
压进 100px 高的横幅只会剩一条窄带、构图完全丢失——这正是「顶部
图片太高」的根源。v7.0 起全站频道横幅统一使用 19.2:1 专用横幅
banner-qyg-100.jpg（方案 A 全景长卷切片 + 青阳阁主景整合），
模块差异改由左侧 .xb-ch-icon 模块图标 + 「青阳阁 · 模块名」标题体现。
（若日后要恢复模块差异化：按 19.2:1 重新出图后，在此追加
.xb-banner.xb-<模块>::before { background-image: url(...); } 即可。） */
/* ---------- 品牌风景页（xb-heroland，原八字模块专属） ----------
现与基础横幅同源同景，仅徽章尺寸上限更高（人物占满整幅高度）。 */
.xb-heroland .ge-badge {
top: auto; /* ★ 人物底部与横幅底边对齐，避免下方留白 */
bottom: 0;
transform: none;
height: clamp(72px, 100%, 216px);
}
.xb-heroland .bz-hero p { max-width: 52%; }
/* ---------- 通栏 hero（工具页容器式横幅改 100% 宽，与频道页一致） ---------- */
.xb-hero-wrap { width: 100%; }
.bz-hero.xb-banner {
border-radius: 0; /* 通栏不带圆角 */
box-shadow: none;
}
/* CTA 内联到信任行（「信息仅用于本次测算」右侧） */
.bz-hero-trust { align-items: center; margin-top: 10px; }
.bz-hero .bz-hero-badge { margin-bottom: 8px; }
.bz-hero-trust .bz-hero-cta {
margin-top: 0;
padding: 8px 22px;
font-size: .92rem;
margin-left: 6px;
}
/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
.xb-banner .ge-badge { right: 24px; }
}
@media (max-width: 760px) {
.xb-banner .xb-banner-inner { padding: 12px 18px; }
.xb-banner .xb-banner-inner h1 { font-size: 20px; }
.xb-banner .xb-banner-inner p { font-size: 12.5px; }
}
@media (max-width: 600px) {
.xb-banner .ge-badge { display: none; } /* 窄屏隐藏徽章，避免遮挡文字 */
.xb-heroland .bz-hero p { max-width: 100%; }
}
