/*
 * rc-mega-page.css —— 「把菜单悬浮面板落成常驻页面」的样式
 *
 * 配套 inc/rc-mega-page.php：
 *   - 页面「产品中心」（页面 10 zh / 1325 en）    → [rc_products_panel]  → .rc-mp--rail
 *   - 归档「AI办公机器人」（product_cat f-08）    → templates/rc-cat-panel.php → .rc-mp--grid
 *
 * 观感对齐菜单悬浮面板（inc/rc-mega.php + assets/rc-mega.css），但：
 *   - 面板是 fixed 浮层、限高内部滚动；本页版是**文档流内的常驻区块**，高度自然、随页面滚动；
 *   - 窄屏（≤1024px）悬浮面板不出现（移动端走 Astra 手风琴），本页版改为**纵向堆叠分区**，
 *     即左栏收起、每个一级类目连同其子项自上而下平铺，内容不隐藏。
 *
 * 配色与面板一致：accent #1B9C85 / accent-dark #178E79 / ink #0F172A / muted #454F5E / 浅绿底 #EDF6EE
 * 改样式后同步抬 inc/rc-mega-page.php 里的 enqueue 版本号。
 */

/* ============================================================
 * 1. 容器与作用域内的基础重置
 *    （页面正文里是裸 HTML，需自行压掉主题 / 区块库对 ul / a / p 的默认样式）
 * ============================================================ */
/* 双类名是为压过 Astra / Gutenberg 写在 .entry-content > * 上的 max-width:none 与 margin:0 */
.rc-mp.rc-mp {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 20px 70px;
	color: #0F172A;
	font-size: 15px;
	line-height: 1.5;
}
.rc-mp *,
.rc-mp *::before,
.rc-mp *::after { box-sizing: border-box; }
.rc-mp ul,
.rc-mp li {
	list-style: none;
	margin: 0;
	padding: 0;
}
.rc-mp a {
	text-decoration: none;
	box-shadow: none;
}
.rc-mp p { margin: 0; }

/* ============================================================
 * 2. rail 模式（产品中心）：左栏一级 + 右侧联动内容
 * ============================================================ */
.rc-mp--rail {
	display: flex;
	align-items: flex-start;
	margin-top: 34px;
	background: #fff;
	border: 1px solid #e6eaee;
}
.rc-mp .rc-mp-rail {
	flex: 0 0 264px;
	padding: 8px 0;
	background: #EDF6EE;
	border-right: 1px solid #dcebe0;
	position: sticky;
	top: 132px;
	max-height: calc(100vh - 152px);
	overflow-y: auto;
}
.rc-mp-rail-item { margin: 0; }
.rc-mp .rc-mp-rail-link {
	display: flex;
	align-items: center;
	width: 100%;
	margin: 0;
	padding: 11px 20px;
	background: none;
	border: 0;
	border-left: 3px solid transparent;
	border-radius: 0;
	color: #0F172A;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 400;
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
}
.rc-mp .rc-mp-rail-link:hover { color: #178E79; }
.rc-mp .rc-mp-rail-item.is-active > .rc-mp-rail-link {
	background: #fff;
	color: #178E79;
	font-weight: 600;
	border-left-color: #1B9C85;
}

.rc-mp-panes {
	flex: 1 1 auto;
	min-width: 0;
	padding: 26px 34px 30px;
}
.rc-mp-pane { display: none; }
.rc-mp-pane.is-active { display: block; }
/* 桌面端一级名称由左栏承担；窄屏左栏收起后它才作为分区标题出现 */
.rc-mp-pane-title { display: none; }

/* ============================================================
 * 3. 分组多列网格（rail 模式的 pane / grid 模式的整版）
 * ============================================================ */
.rc-mp-groups {
	columns: 3 220px;
	column-gap: 34px;
}
.rc-mp-groups > li {
	break-inside: avoid;
	margin: 0 0 20px;
}
.rc-mp-groups > li > a {
	display: block;
	margin-bottom: 8px;
	padding-bottom: 6px;
	color: #178E79;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	border-bottom: 1px solid #eef2f4;
}
.rc-mp-groups > li > a:hover { color: #0F172A; }
.rc-mp-groups > li > ul > li > a {
	display: block;
	padding: 4px 0;
	color: #454F5E;
	font-size: 14px;
	line-height: 1.45;
}
.rc-mp-groups > li > ul > li > a:hover { color: #1B9C85; }
/* 四级（缩进的小字链接） */
.rc-mp-groups > li > ul > li > ul,
.rc-mp-groups > li > ul > li > ul > li > ul {
	margin: 2px 0 4px 12px;
	padding-left: 10px;
	border-left: 1px solid #eef2f4;
}
.rc-mp-groups > li > ul > li > ul > li > a,
.rc-mp-groups > li > ul > li > ul > li > ul > li > a {
	display: block;
	padding: 3px 0;
	color: #6b7280;
	font-size: 13px;
	line-height: 1.4;
}
.rc-mp-groups > li > ul > li > ul > li > a:hover,
.rc-mp-groups > li > ul > li > ul > li > ul > li > a:hover { color: #1B9C85; }

/* 「查看全部 X」 */
.rc-mp-viewall {
	display: block;
	margin-top: 16px;
	padding-top: 12px;
	color: #178E79;
	font-size: 14px;
	font-weight: 600;
	border-top: 1px solid #eef2f4;
}
.rc-mp-viewall:hover { color: #0F172A; }

/* ============================================================
 * 4. grid 模式（AI办公机器人：二级组直接铺成多列网格）
 * ============================================================ */
/* 双类名：压过上面 .rc-mp.rc-mp 的默认 padding，改成与 rail 模式一致的白色卡片 */
.rc-mp.rc-mp--grid {
	margin-top: 24px;
	padding: 26px 34px 30px;
	background: #fff;
	border: 1px solid #e6eaee;
}
.rc-mp-grid {
	columns: 6 150px;
	column-gap: 30px;
}
.rc-mp-grid > li {
	break-inside: avoid;
	margin: 0 0 20px;
}
.rc-mp-grid > li > a {
	display: block;
	margin-bottom: 8px;
	padding-bottom: 6px;
	color: #178E79;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	border-bottom: 1px solid #eef2f4;
}
.rc-mp-grid > li > a:hover { color: #0F172A; }
.rc-mp-grid > li > ul > li > a {
	display: block;
	padding: 4px 0;
	color: #454F5E;
	font-size: 14px;
	line-height: 1.45;
}
.rc-mp-grid > li > ul > li > a:hover { color: #1B9C85; }
.rc-mp-grid > li > ul > li > ul,
.rc-mp-grid > li > ul > li > ul > li > ul {
	margin: 2px 0 4px 12px;
	padding-left: 10px;
	border-left: 1px solid #eef2f4;
}
.rc-mp-grid > li > ul > li > ul > li > a,
.rc-mp-grid > li > ul > li > ul > li > ul > li > a {
	display: block;
	padding: 3px 0;
	color: #6b7280;
	font-size: 13px;
	line-height: 1.4;
}
.rc-mp-grid > li > ul > li > ul > li > a:hover,
.rc-mp-grid > li > ul > li > ul > li > ul > li > a:hover { color: #1B9C85; }

/* ============================================================
 * 5. 归档页外壳（templates/rc-cat-panel.php）
 *    Astra 的内容容器（.site-content > .ast-container）默认是 flex + 限宽，
 *    本模板的首屏与正文同为其子元素 —— 必须还原成通栏块级，否则首屏会被挤成一列。
 *    首屏沿用站点 .rc-hero--plain；面板与页面版同宽同距
 * ============================================================ */
body.rc-mp-arch .site-content > .ast-container {
	display: block;
	max-width: none;
	margin: 0;
	padding: 0;
}
.rc-mp-hero { padding: 132px 0 88px; }
.rc-mp-hero__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
}
.rc-mp-hero .rc-hero__sub { margin: 0; }
.rc-mp-main { padding: 0; }
.rc-mp-aside {
	max-width: 1200px;
	margin: 24px auto 0;
	padding: 0 20px;
}
.rc-mp-aside:empty { display: none; }

/* ============================================================
 * 6. 窄屏（≤1024px）：左栏收起 → 纵向堆叠分区，内容全部可见
 * ============================================================ */
@media (max-width: 1024px) {
	.rc-mp--rail {
		display: block;
		margin-top: 24px;
		border: 0;
	}
	.rc-mp .rc-mp-rail { display: none; }
	.rc-mp-panes { padding: 0; }
	.rc-mp-pane { display: block; }
	.rc-mp-pane + .rc-mp-pane { margin-top: 38px; }
	.rc-mp-pane-title {
		display: block;
		margin: 0 0 16px;
		padding-bottom: 8px;
		color: #0F172A;
		font-size: 19px;
		line-height: 1.3;
		border-bottom: 2px solid #1B9C85;
	}
	.rc-mp-groups { columns: 2 240px; column-gap: 28px; }
	.rc-mp-grid { columns: 3 170px; column-gap: 24px; }
}

@media (max-width: 600px) {
	.rc-mp-groups,
	.rc-mp-grid { columns: 1; }
	.rc-mp-hero { padding: 112px 0 64px; }
}