/* MandarinMiles · 统一页面横幅（Page Banner）
   ---------------------------------------------------------
   作用域 .mm-pb —— 全站深层页面（Library / Adults / Kids / Free /
   Bundles / Tools / Find Your Level）共用的顶部横幅。

   关键约束：所有受管页面横幅**完全同款同高**
   → 统一 132px（与 /library/ 2b 紧凑版一致）；移动端 132px 起、内容撑高不裁字。
   后台「横幅高度」填 0 = 用这里的站点统一值，填数字则逐页覆盖。

   图片槽位：
     .mm-pb-bg   背景图（cover 铺满，焦点由 --pb-focus 控制）
     .mm-pb-fig  前景人物图（透明 PNG，贴底站在横幅一侧）
   未上传图片时用 .mm-pb--g-* 品牌渐变兜底。 */

.mm-pb,
.mm-pb *,
.mm-pbw,
.mm-pbw * { box-sizing: border-box; }

.mm-pb {
	/* 站点统一横幅高度（3c 紧凑规格）。后台逐页自定义时由 inline --pb-h 覆盖。
	   112px 的依据（2026-11-13 实测）：内部四段文字（面包屑+眉栏+标题+副标题）
	   纵向占位 ≈101px，留 11px 上下呼吸；副标题两行也不裁字。
	   相比原 132px 减少 20px（-15%），首屏给正文的面积明显变大。 */
	--pb-h: 112px;
	--pb-focus: 50% 50%;
	/* 文字色统一走变量：深色渐变默认白字；浅色渐变（--g-l*）整组覆写为族色深字 */
	--pb-ink: #fff;
	--pb-ink-eyebrow: rgba(255, 255, 255, .92);
	--pb-chip-bg: rgba(255, 255, 255, .16);
	--pb-chip-bd: rgba(255, 255, 255, .28);
	--pb-ink-crumb: rgba(255, 255, 255, .72);
	--pb-ink-crumblink: rgba(255, 255, 255, .86);
	--pb-ink-sub: rgba(255, 255, 255, .88);
	position: relative;
	width: 100%;
	margin: 0;
	height: var(--pb-h);
	min-height: 112px;
	overflow: hidden;
	isolation: isolate;
	color: var(--pb-ink);
	background: #12306a;
}

/* 自定义高度时直接采用（并保证不低于 100px 的下限） */
.mm-pb[style*="--pb-h"] { height: max(var(--pb-h), 100px); }

/* ---------- 背景层 ---------- */
.mm-pb-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-position: var(--pb-focus);
	background-size: cover;
	background-repeat: no-repeat;
}

/* ---------- 渐变预设（品牌蓝主导 / 绿·紫辅助） ----------
   2026-11-13 调整：violet 预设改为「蓝起紫收」（原为紫起蓝收）。
   violet 是全站用得最多的预设（library/adults/kids/free/tools/bundles/
   find-your-level/blog + 6 个 level-* 分类页），
   改成蓝起紫收后这些页面自动进入「蓝色主导」，无需逐页改数据库配置。
   真正想强调紫色的页面仍可用 plum 预设。 */
.mm-pb--g-violet { background-image: linear-gradient(120deg, #0D4FC7 0%, #2E4FD8 40%, #6E00F8 100%); }
.mm-pb--g-blue   { background-image: linear-gradient(120deg, #06214B 0%, #0D3A80 42%, #1855C0 100%); }
.mm-pb--g-teal   { background-image: linear-gradient(120deg, #07342F 0%, #116E63 46%, #2A9D8F 100%); }
.mm-pb--g-indigo { background-image: linear-gradient(120deg, #0B1F4C 0%, #1E3A8A 44%, #4338CA 100%); }
.mm-pb--g-plum   { background-image: linear-gradient(120deg, #2B1150 0%, #5B2A9E 46%, #8B4FD6 100%); }
.mm-pb--g-sky    { background-image: linear-gradient(120deg, #062E5E 0%, #0F5FA8 48%, #2E8BD9 100%); }

/* ---------- 浅色渐变预设（与 taxonomy 浅色页头同族，浅底深字） ---------- */
.mm-pb--g-lblue   { background-image: linear-gradient(120deg, #DCE9FB 0%, #E6F0FD 48%, #C9DFF8 100%); }
.mm-pb--g-lteal   { background-image: linear-gradient(120deg, #D6ECE8 0%, #E0F1EE 48%, #C4E4DE 100%); }
.mm-pb--g-lpurple { background-image: linear-gradient(120deg, #E4DFF9 0%, #ECE8FB 48%, #D6CEFA 100%); }
.mm-pb--g-lgreen  { background-image: linear-gradient(120deg, #D9ECDC 0%, #E4F2E6 48%, #C8E3CE 100%); }

:is(.mm-pb--g-lblue, .mm-pb--g-lteal, .mm-pb--g-lpurple, .mm-pb--g-lgreen) {
	--pb-ink: #0B2550;
	--pb-ink-eyebrow: #1D4FB8;
	--pb-ink-crumb: rgba(11, 37, 80, .72);
	--pb-ink-crumblink: rgba(11, 37, 80, .86);
	--pb-ink-sub: rgba(11, 37, 80, .85);
	--pb-ts-title: none;
	--pb-ts-sub: none;
}
.mm-pb--g-lteal   { --pb-ink: #0F463E; --pb-ink-eyebrow: #1C7C70; --pb-ink-crumb: rgba(15, 70, 62, .72); --pb-ink-crumblink: rgba(15, 70, 62, .86); --pb-ink-sub: rgba(15, 70, 62, .85); }
.mm-pb--g-lpurple { --pb-ink: #372A78; --pb-ink-eyebrow: #6A55D1; --pb-ink-crumb: rgba(55, 42, 120, .72); --pb-ink-crumblink: rgba(55, 42, 120, .86); --pb-ink-sub: rgba(55, 42, 120, .85); }
.mm-pb--g-lgreen  { --pb-ink: #1F5431; --pb-ink-eyebrow: #2E7D43; --pb-ink-crumb: rgba(31, 84, 49, .72); --pb-ink-crumblink: rgba(31, 84, 49, .86); --pb-ink-sub: rgba(31, 84, 49, .85); }
.mm-pb--g-lblue   { --pb-ink-eyebrow: #1166F0; }
/* 浅色底上眉栏胶囊也换族色 */
:is(.mm-pb--g-lblue, .mm-pb--g-lteal, .mm-pb--g-lpurple, .mm-pb--g-lgreen) {
	--pb-chip-bg: rgba(255, 255, 255, .55);
	--pb-chip-bd: currentColor;
}
/* 浅色底：遮罩从「暗色压暗」改为「白色柔光」，保证深字可读 */
:is(.mm-pb--g-lblue, .mm-pb--g-lteal, .mm-pb--g-lpurple, .mm-pb--g-lgreen) .mm-pb-veil {
	--pb-veil-rgb: 255, 255, 255;
}

/* ---------- 中浅鲜亮色板（vivid series） ----------
   定位：比页面基底 #F2F7FD / 卡片 #fff 明显更饱和，但不到深色的程度。
   纯渐变横幅（无背景图）才生效：有图时仍走原来的暗遮罩 + 白字，
   避免浅底上白字看不清。深字 + 10% 白色柔光，保证对比度。 */
.mm-pb--g-vsky   { background-image: linear-gradient(120deg, #5AA6F2 0%, #79B8F6 48%, #9CCBFB 100%); }
.mm-pb--g-vmint  { background-image: linear-gradient(120deg, #45C3B0 0%, #68D2C1 48%, #8CDDCF 100%); }
.mm-pb--g-vlilac { background-image: linear-gradient(120deg, #8A79EF 0%, #A394F4 48%, #B9ABF8 100%); }
.mm-pb--g-vcoral { background-image: linear-gradient(120deg, #F07E8D 0%, #F497A2 48%, #F9B0B7 100%); }
.mm-pb--g-vcitrus{ background-image: linear-gradient(120deg, #F2AE3C 0%, #F5BE5C 48%, #F9CE7C 100%); }
.mm-pb--g-vleaf  { background-image: linear-gradient(120deg, #57BC72 0%, #76CB8A 48%, #93D9A3 100%); }

:is(.mm-pb--g-vsky, .mm-pb--g-vmint, .mm-pb--g-vlilac,
    .mm-pb--g-vcoral, .mm-pb--g-vcitrus, .mm-pb--g-vleaf):not(.mm-pb--has-bg) {
	--pb-ink-crumb: rgba(14, 30, 54, .70);
	--pb-ink-crumblink: rgba(14, 30, 54, .90);
	--pb-ink-sub: rgba(14, 30, 54, .86);
	--pb-ts-title: none;
	--pb-ts-sub: none;
	--pb-chip-bg: rgba(255, 255, 255, .62);
	--pb-chip-bd: currentColor;
}
.mm-pb--g-vsky:not(.mm-pb--has-bg)    { --pb-ink: #0A2E5C; --pb-ink-eyebrow: #0B4FA8; }
.mm-pb--g-vmint:not(.mm-pb--has-bg)   { --pb-ink: #08433C; --pb-ink-eyebrow: #0C7668; }
.mm-pb--g-vlilac:not(.mm-pb--has-bg)  { --pb-ink: #2E2168; --pb-ink-eyebrow: #5741BE; }
.mm-pb--g-vcoral:not(.mm-pb--has-bg)  { --pb-ink: #63202F; --pb-ink-eyebrow: #B13B50; }
.mm-pb--g-vcitrus:not(.mm-pb--has-bg) { --pb-ink: #5A3608; --pb-ink-eyebrow: #A66710; }
.mm-pb--g-vleaf:not(.mm-pb--has-bg)   { --pb-ink: #123F22; --pb-ink-eyebrow: #22733A; }

/* 后台写在 section 上的 --pb-veil 是 inline style；这里在遮罩元素自身重新声明，
   按 CSS 自定义属性规则「元素自身声明 > 继承值」生效，无需 !important。 */
:is(.mm-pb--g-vsky, .mm-pb--g-vmint, .mm-pb--g-vlilac,
    .mm-pb--g-vcoral, .mm-pb--g-vcitrus, .mm-pb--g-vleaf):not(.mm-pb--has-bg) .mm-pb-veil {
	--pb-veil: .10;
	--pb-veil-rgb: 255, 255, 255;
}
:root[data-theme="dark"] :is(.mm-pb--g-vsky, .mm-pb--g-vmint, .mm-pb--g-vlilac,
    .mm-pb--g-vcoral, .mm-pb--g-vcitrus, .mm-pb--g-vleaf):not(.mm-pb--has-bg) .mm-pb-veil {
	--pb-veil: .16;
	--pb-veil-rgb: 8, 20, 44;
}

/* 有背景图时，渐变不再绘制（图片层覆盖在渐变之上） */
.mm-pb--has-bg .mm-pb-bg {
	background-color: #0B1B3A;
}

/* ---------- 遮罩：保证文字在任意图片上都可读 ----------
   --pb-veil = 文字一侧的最大不透明度（后台滑块 0–90% → CSS 0–1）。
   默认 0.74 时与改动前的写死值完全一致（.74 / .52 / .26）。 */
.mm-pb-veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(100deg,
			rgba(var(--pb-veil-rgb, 8, 20, 44), var(--pb-veil, .74)) 0%,
			rgba(var(--pb-veil-rgb, 8, 20, 44), calc(var(--pb-veil, .74) * .70)) 46%,
			rgba(var(--pb-veil-rgb, 8, 20, 44), calc(var(--pb-veil, .74) * .35)) 100%);
}
.mm-pb--align-center .mm-pb-veil {
	background: linear-gradient(180deg,
		rgba(var(--pb-veil-rgb, 8, 20, 44), calc(var(--pb-veil, .74) * .84)) 0%,
		rgba(var(--pb-veil-rgb, 8, 20, 44), calc(var(--pb-veil, .74) * .57)) 100%);
}

/* ---------- 前景人物图（透明 PNG） ---------- */
.mm-pb-fig {
	position: absolute;
	z-index: 2;
	bottom: 0;
	margin: 0;
	height: 100%;
	max-width: 46%;
	pointer-events: none;
}
.mm-pb-fig img {
	display: block;
	width: auto;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	object-position: bottom center;
}
.mm-pb--fig-left .mm-pb-fig { left: max(16px, calc((100% - var(--maxw, 1290px)) / 2 + 18px)); }
.mm-pb--fig-right .mm-pb-fig { right: max(16px, calc((100% - var(--maxw, 1290px)) / 2 + 18px)); }

/* ---------- 文字区 ----------
   2026-11-13：改为两行网格 —— 面包屑与眉栏同处第一行（左侧面包屑 / 右侧眉栏胶囊），
   标题第二行，副标题第三行。原设计是「面包屑一行 + 眉栏一行」纵向堆叠，
   实测在 132px 高度下两行副标题会被裁掉（内容 116.5px + 17px 外边距 > 132px）。
   合并后纵向占位从 125px 降到约 101px，112px 高度即可容纳两行副标题。 */
.mm-pb-inner {
	position: relative;
	z-index: 3;
	max-width: var(--maxw, 1290px);
	margin: 0 auto;
	padding: 0 28px;
	height: 100%;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto auto;
	align-content: center;
	column-gap: 14px;
}
/* 面包屑：第 1 行第 1 列；眉栏：第 1 行第 2 列；标题/副标题各占一整行。
   两段元信息同处首行且都贴左，保留原设计「全部左对齐」的版式重心。 */
.mm-pb-crumb { grid-area: 1 / 1; }
.mm-pb-eyebrow { grid-area: 1 / 2; }
.mm-pb-title { grid-area: 2 / 1 / 3 / 3; }
.mm-pb-sub { grid-area: 3 / 1 / 4 / 3; }
/* 文字块不允许被压扁（否则窄屏下副标题会被挤成一条线） */
.mm-pb-inner > * { min-width: 0; }
.mm-pb--align-center .mm-pb-inner { justify-items: center; text-align: center; grid-template-columns: auto auto; }
.mm-pb--align-center .mm-pb-crumb { justify-content: center; }
.mm-pb--align-center .mm-pb-eyebrow { justify-self: center; }

.mm-pb-eyebrow {
	display: inline-block;
	justify-self: start;
	align-self: center;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .15em;
	color: var(--pb-ink-eyebrow);
	background: var(--pb-chip-bg);
	border: 1px solid var(--pb-chip-bd);
	border-radius: 999px;
	padding: 3px 10px;
	margin-bottom: 6px;
	backdrop-filter: blur(2px);
	white-space: nowrap;
}
.mm-pb--align-center .mm-pb-eyebrow { justify-self: center; }

.mm-pb-crumb {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 11.5px;
	color: var(--pb-ink-crumb);
	margin-bottom: 6px;
}
.mm-pb-crumb a { color: var(--pb-ink-crumblink); text-decoration: none; }
.mm-pb-crumb a:hover { color: var(--pb-ink); text-decoration: underline; }
.mm-pb--align-center .mm-pb-crumb { justify-content: flex-start; }

.mm-pb-title {
	font-family: var(--serif, 'Songti SC', 'Iowan Old Style', Georgia, serif);
	/* 112px 紧凑横幅专用字号：42px 会把面包屑/眉栏/副标题挤出可视区 */
	font-size: clamp(23px, 2.3vw, 30px);
	line-height: 1.14;
	font-weight: 800;
	letter-spacing: -.01em;
	margin: 0 0 4px;
	color: var(--pb-ink);
	text-shadow: var(--pb-ts-title, 0 2px 18px rgba(6, 16, 38, .38));
}
.mm-pb-sub {
	font-size: 12.5px;
	line-height: 1.42;
	color: var(--pb-ink-sub);
	margin: 0;
	max-width: 620px;
	text-shadow: var(--pb-ts-sub, 0 1px 10px rgba(6, 16, 38, .34));
	/* 长副标题最多 2 行，避免把 112px 横幅撑破 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mm-pb--align-center .mm-pb-sub { margin-left: auto; margin-right: auto; }

/* 前景人物图在左时，文字让位 */
.mm-pb--fig-left .mm-pb-inner { padding-left: 300px; }
.mm-pb--fig-right .mm-pb-inner { padding-right: 300px; }

/* ---------- 统一内容容器（与横幅同宽） ----------
   外框 1338 = 头部容器 1290 + 两侧 24 内边距 → 内容左缘与 logo 齐平 */
.mm-pbw {
	max-width: 1338px;
	margin: 0 auto;
	padding: 0 24px;
}

/* 横幅关闭时的兜底标题（页面仍需一个 h1） */
.mm-fallback-head { padding: 42px 0 4px; }
.mm-fallback-head h1 {
	font-size: clamp(28px, 3.6vw, 40px);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--primary-dark);
	margin: 0;
}

/* 定级页：横幅接管标题后，正文区不再重复输出眉栏 / 标题 / 副标题
   （PHP 层面就不渲染，页面上只保留一个 h1；这里只收紧事实行的留白） */
.mm-fl-page { margin: 0; }
.mm-fl-page--pb-title .mm-lc-head--bare { margin-bottom: 18px; }
.mm-fl-page--pb-title .mm-lc-head--bare .mm-lc-facts { margin-top: 0; }

/* ---------- 定级页：左对齐两栏（主区 + 右侧栏） ----------
   主区不再居中，左侧贴容器边；右侧 320px 给侧边栏，与 Blog 的
   .blog-side 同宽同构（sticky），两处视觉一致。 */
.mm-fl-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 38px;
	align-items: start;
}
.mm-fl-main { min-width: 0; }
.mm-fl-side {
	min-width: 0;
	position: sticky;
	top: calc(var(--mm-header-height, 62px) + 18px);
}

/* 侧边栏底部的小结卡 */
.mm-fl-side-note {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 16px;
	box-shadow: var(--shadow);
	padding: 16px;
	margin-top: 18px;
}
.mm-fl-side-note h4 {
	font-size: 13.5px;
	font-weight: 800;
	color: var(--primary-dark);
	margin: 0 0 9px;
}
.mm-fl-side-note p {
	font-size: 12.5px;
	line-height: 1.65;
	color: var(--muted);
	margin: 0;
}
.mm-fl-side-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 11px;
}
.mm-fl-side-tags span {
	font-size: 11px;
	font-weight: 800;
	color: var(--accent-strong);
	background: var(--teal-tint);
	padding: 3px 9px;
	border-radius: 999px;
}

/* 窄屏收起为单栏，侧边栏落到主区下方 */
@media (max-width: 980px) {
	.mm-fl-columns { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.mm-fl-side { position: static; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
	.mm-pb--fig-left .mm-pb-inner,
	.mm-pb--fig-right .mm-pb-inner { padding-left: 28px; padding-right: 28px; }
	.mm-pb-fig { max-width: 34%; opacity: .9; }
	.mm-pb--fig-left .mm-pb-fig { left: -6%; }
	.mm-pb--fig-right .mm-pb-fig { right: -6%; }
}
@media (max-width: 700px) {
	/* 移动端：112px 起；内容多时由内容撑高，宁可略高也不裁字。
	   窄屏下眉栏胶囊放不下第一行右列 → 回到独立的第二行。 */
	.mm-pb { min-height: 112px; height: auto; }
	.mm-pb-inner { height: auto; padding: 14px 18px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; }
	.mm-pb-crumb { grid-area: 1 / 1 / 2 / 2; }
	.mm-pb-eyebrow { grid-area: 2 / 1 / 3 / 2; justify-self: start; }
	.mm-pb-title { grid-area: 3 / 1 / 4 / 2; }
	.mm-pb-sub { grid-area: 4 / 1 / 5 / 2; }
	.mm-pbw { padding: 0 18px; }
	.mm-pb-fig { max-width: 46%; opacity: .55; }
	.mm-pb-crumb { margin-bottom: 5px; }
	/* 眉栏 / 标题收紧到 320px 宽也能保持单行 */
	.mm-pb-eyebrow { font-size: 9.5px; letter-spacing: .1em; padding: 3px 10px; margin-bottom: 6px; }
	.mm-pb-title { font-size: clamp(19px, 5.6vw, 26px); margin-bottom: 5px; }
	.mm-pb-sub {
		font-size: 12.5px;
		/* 最多 2 行，超出省略 —— 保证任何长文案都不会把横幅撑得过高 */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}