@charset "utf-8";
/* ==========================================================================
   BICML 实验室网站模板 主样式
   说明：本文件只写桌面端布局与组件样式，不含任何媒体查询；
        响应式断点全部放在 media.css，移动端交互行为放在 mobile.css。
   依赖：extends/extends.css（平台扩展基础样式）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 变量
   -------------------------------------------------------------------------- */
:root {
	--ink: #14283b;
	--muted: #667684;
	--paper: #ffffff;
	--panel: #ffffff;
	--line: #dce3e5;
	--blue: #0b6fa4;
	--blue-dark: #083a5b;
	--teal: #1d8b85;
	--coral: #e06b51;
	--coral-soft: #f6e2dc;
	--navy: #112a3e;
	--max: 1200px;
	--shadow: 0 18px 44px rgba(13, 40, 59, 0.1);
	--band-top: #ededed;      /* 中性灰（不用蓝调），与灰白主色一致 */
}

/* --------------------------------------------------------------------------
   2. 基础重置
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html {
	height: 100%;
	-webkit-text-size-adjust: 100%;
}

/* body 为列向弹性容器：.main_con 撑满剩余高度，页脚始终留在视口最底部 */
body {
	margin: 0;
	padding: 0;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--paper);
}

h1, h2, h3, h4, h5, h6, p, dl, dd, ul, ol, figure {
	margin: 0;
	padding: 0;
}

ul, ol { list-style: none; }

img {
	display: block;
	max-width: 100%;
	border: 0;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s ease;
}

a:focus-visible,
button:focus-visible {
	outline: 3px solid rgba(224, 107, 81, 0.55);
	outline-offset: 3px;
}

button {
	font: inherit;
	color: inherit;
	border: 0;
	background: none;
	cursor: pointer;
}

em, i { font-style: normal; }

.none { display: none !important; }

.clear { clear: both; }

.clearfix::after {
	content: "";
	display: block;
	clear: both;
}

/* --------------------------------------------------------------------------
   3. 骨架：wrapper / inner / mod / post
   -------------------------------------------------------------------------- */
/* 页面主体容器：撑满 body 剩余高度，使页脚固定在最底部 */
.main_con {
	-webkit-box-flex: 1;
	flex: 1 0 auto;
	width: 100%;
}

.wrapper {
	width: 100%;
	margin: 0 auto;
}

.wrapper > .inner {
	width: 100%;
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 24px;
}

.wrapper > .inner.clearfix::after { content: ""; display: block; clear: both; }

.mod { position: relative; }

.ml { float: left; width: 62%; }
.mc { float: right; width: 34%; }

/* 模块标题条 ---------------------------------------------------------------- */
.tt {
	position: relative;
	padding-bottom: 14px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--line);
}

.tt .tit {
	font-size: 1.42rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--blue-dark);
	letter-spacing: 0.01em;
}

.tt .tit .title { display: inline-block; }

.tt .more_btn {
	position: absolute;
	right: 0;
	bottom: 16px;
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	color: var(--muted);
}

.tt .more_btn a,
.tt .more_btn .more_text {
	display: inline-block;
	color: var(--muted);
}

.tt .more_btn a:hover { color: var(--coral); }

/* --------------------------------------------------------------------------
   4. 页头 header
   -------------------------------------------------------------------------- */
#header {
	background: var(--band-top);
}

/* 放进 masthead 后，页头不再画自己的底色，直接露出后面的图；
   必须给 z-index，否则会被绝对定位的 .masthead__shade 盖住（Logo 会发灰） */
#masthead > #header {
	position: relative;
	z-index: 2;
	background: transparent;
}

#header .mod { padding: 18px 0; }

#header .head-left { float: left; }

#header .head-right { float: right; padding-top: 23px; }

#header .sitelogo { max-width: 100%; }

/* 页头标识组：LOGO_A │ LOGO_B ＋ 右侧两行中英文。
   两张徽标均为 1:1 正方形，按同一尺寸显示；中间一条浅灰竖线分隔。
   标识全部写死在模板里（images/logo-a.png、images/logo-b.png），
   不走后台「站点设置」里的 Logo，避免带出后台默认的丑图标。
   响应式尺寸见 media.css。 */
#header .logo-link {
	display: flex;
	align-items: center;
	gap: 18px;
}

#header .logo-img {
	display: block;
	flex: 0 0 auto;
	width: 84px;
	height: 84px;
	max-width: none;
}

/* 竖线用 align-self:stretch 自动撑满整行高度，
   也就是与两张徽标等高，改徽标尺寸时不用再单独调它。 */
#header .logo-divider {
	flex: 0 0 auto;
	align-self: stretch;
	width: 2px;
	background: #e4e9eb;
}

/* 文本块以中文行为宽度基准。
   实测：英文自然宽度 / 中文宽度 = 2.037，即英文要达到完全等宽，
   字号只能取中文的 0.52em（桌面 14px，偏小）。
   这里取 0.587em，英文比中文行宽约 13%，既保持上下基本齐宽、
   英文又够醒目，远小于「英文最多超中文 30%」的上限。 */
#header .logo-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-left: 8px;
	font-size: 28.4px;
}

#header .logo-text__cn {
	font-size: 1em;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	margin-right: -0.08em;
	color: var(--ink);
	white-space: nowrap;
}

#header .logo-text__en {
	font-size: 0.587em;
	line-height: 1.55;
	letter-spacing: 0.01em;
	margin-right: -0.01em;
	margin-top: 6px;
	color: #3f4e59;
	white-space: nowrap;
}

/* 移动端菜单按钮（桌面隐藏，见 media.css） */
.menu-toggle {
	position: relative;
	display: none;
	width: 42px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 3px;
}

.menu-toggle span {
	position: absolute;
	left: 11px;
	width: 20px;
	height: 2px;
	background: var(--blue-dark);
}

.menu-toggle span:nth-child(1) { top: 11px; }
.menu-toggle span:nth-child(2) { top: 18px; }
.menu-toggle span:nth-child(3) { top: 25px; }

/* --------------------------------------------------------------------------
   5. 主导航 nav + wp-menu（白底）
   -------------------------------------------------------------------------- */
#nav {
	/* 与装饰带顶部同色，向下直接融进装饰带，看不到分界 */
	background: var(--band-top);
}

#nav > .inner { position: relative; }

.navi-slide-head { display: none; }

.wp-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.wp-menu > .menu-item { position: relative; }

.wp-menu > .menu-item > .menu-link {
	display: flex;
	align-items: center;
	padding: 0 22px;
	min-height: 54px;
	font-size: 1rem;
	color: #33454f;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.wp-menu > .menu-item > .menu-link:hover,
.wp-menu > .menu-item.selected > .menu-link,
.wp-menu > .menu-item.on > .menu-link {
	color: var(--blue-dark);
	background: #f2f6f7;
}

/* 选中项下方细线，白底导航靠这条线给反馈 */
.wp-menu > .menu-item > .menu-link::after {
	content: "";
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: 0;
	height: 2px;
	background: var(--coral);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.25s ease;
}

.wp-menu > .menu-item:hover > .menu-link::after,
.wp-menu > .menu-item.selected > .menu-link::after,
.wp-menu > .menu-item.on > .menu-link::after {
	transform: scaleX(1);
}

.menu-switch-arrow { display: none; }

.sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 120;
	min-width: 176px;
	padding: 6px 0;
	background: #ffffff;
	box-shadow: 0 16px 34px rgba(8, 40, 59, 0.16);
}

.sub-menu > .sub-item > .sub-link {
	display: block;
	padding: 9px 18px;
	font-size: 0.92rem;
	color: #37505f;
	white-space: nowrap;
}

.sub-menu > .sub-item > .sub-link:hover {
	color: var(--coral);
	background: #f2f7f7;
}

.sub-menu .sub-menu {
	top: 0;
	left: 100%;
}

/* --------------------------------------------------------------------------
   6. 头部大图区 masthead（除首页外所有页面）
   --------------------------------------------------------------------------
   方案 A：导航条不再单独占一条，而是和标语一起压在 banner 图上。
   层次：img(z0) → 蒙版(z1) → 导航 / 标语(z2)，底部再用白色渐变融进正文。 */
.masthead {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 220px;
	/* 不能用 overflow:hidden —— 会把导航的二级下拉裁掉（只剩一条、点不到）。
	   背景图和蒙版都是 inset 0 / 100%，本来也不会溢出。 */
	overflow: visible;
	background: var(--band-top);
}

.masthead__bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
	/* 原图偏蓝，压掉大部分饱和度，跟网站灰白主色统一 */
	filter: grayscale(0.65);
}

/* 淡白蒙版：上部稍压一点保证导航文字清晰，下部不压，交给 ::after 做白色过渡 */
.masthead__shade {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
	/* 灰蓝渐变：顶部压得最重（让 Logo / 导航更醒目），往下逐渐让位给图片本身 */
	background: linear-gradient(to bottom,
		rgba(210, 210, 210, 0.50) 0%,
		rgba(218, 218, 218, 0.38) 28%,
		rgba(229, 229, 229, 0.25) 54%,
		rgba(243, 243, 243, 0.12) 76%,
		rgba(255, 255, 255, 0) 92%);
}

/* 底部融进正文（正文是白底） */
.masthead::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	height: 26%;
	pointer-events: none;
	background: linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

/* 首页变体：只有页头 + 导航，没有 banner 区 —— 不加高、也不做底部白色渐隐，
   图片到这里直接接深色首屏，形成一条干净的界线。 */
#masthead.masthead--bar {
	min-height: 0;
}

#masthead.masthead--bar::after {
	display: none;
}

.masthead__slot {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	width: 100%;
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 24px 26px;
	line-height: 1.6;
	font-size: 0.9rem;
	color: var(--ink);
	text-align: left;
}

.masthead__panel,
.masthead__window { width: 100%; }

.masthead__window > [frag="窗口内容"] { width: 100%; }

/* 标语排版：与正文列左对齐 */
.masthead__eyebrow {
	font-size: 0.64rem;
	line-height: 1.4;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #74838f;
}

.masthead__title {
	margin-top: 5px;
	font-size: 1.52rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ink);
}

.masthead__title em {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 400;
	color: var(--coral);
}

/* --------------------------------------------------------------------------
   首屏深色底上的页头：底色透明、文字转白
   （导航那部分在 mobile.css 的 ≥1000px 里：手机上 #nav 是白色抽屉，
     不能跟着转白字，也不能被 position 覆盖掉固定定位）
   -------------------------------------------------------------------------- */
#banner .banner-top #header {
	background: transparent;
}

#banner .banner-top .logo-text__cn { color: #ffffff; }

#banner .banner-top .logo-text__en { color: rgba(255, 255, 255, 0.78); }

#banner .banner-top .logo-divider { background: rgba(255, 255, 255, 0.32); }

/* --------------------------------------------------------------------------
   7. 首页焦点图 banner
   -------------------------------------------------------------------------- */
#banner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	background: var(--navy);
	overflow: hidden;
}

/* 焦点图与标语叠在同一个网格单元里：
   单元格高度 = 两者中较高的那个。
   所以轮播图没绑、高度为 0 时，标语照样撑开首屏，不会消失。 */
#banner > .mod,
#banner > .banner-text,
#banner > .banner-top { grid-area: 1 / 1; }

/* 页头 + 导航叠在轮播图上方，不占首屏高度；
   自带一层「顶部深色压暗」，换哪张轮播图白字都压得住 */
.banner-top {
	align-self: start;
	z-index: 6;
	width: 100%;
	/* 压暗层向下多铺 90px（用 padding + 负 margin 撑开背景，不影响布局），
	   这样导航那一行也在压暗范围内，亮照片上白字也不会糊 */
	padding-bottom: 90px;
	margin-bottom: -90px;
	background: linear-gradient(to bottom,
		rgba(6, 20, 33, 0.66) 0%,
		rgba(6, 20, 33, 0.54) 42%,
		rgba(6, 20, 33, 0.3) 72%,
		rgba(6, 20, 33, 0) 100%);
}

#banner .mod { position: relative; }

.post-focus {
	position: relative;
	z-index: 1;
}

.post-focus::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	background: linear-gradient(90deg, rgba(5, 24, 39, 0.78) 0%, rgba(5, 24, 39, 0.52) 46%, rgba(5, 24, 39, 0.3) 100%);
	pointer-events: none;
}

/* sudyfocus 生成的焦点图结构 */
.post-focus .con,
.post-focus [frag="窗口内容"] { position: relative; }

.focus { position: relative; width: 100%; overflow: hidden; }

.focus .focus-container {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.focus .focus-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.focus .focus-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.focus .focus-title-bar,
.focus .focus-text-box { display: none; }

.focus .focus-navigation {
	position: absolute;
	top: 50%;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-top: -23px;
	text-align: center;
	font-size: 0;
	color: #ffffff;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	opacity: 0.85;
	transition: opacity 0.3s ease, background 0.3s ease;
}

.focus .focus-prev { left: 26px; }
.focus .focus-next { right: 26px; }

.focus .focus-prev::before,
.focus .focus-next::before {
	font-size: 22px;
	line-height: 1;
}

.focus .focus-prev::before { content: "\2039"; }
.focus .focus-next::before { content: "\203a"; }

#banner:hover .focus .focus-navigation { opacity: 1; }

.focus .focus-navigation:hover { background: rgba(255, 255, 255, 0.3); }

.focus .focus-pagination {
	position: absolute;
	right: 42px;
	bottom: 30px;
	z-index: 60;
}

.focus .focus-page {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 9px;
	overflow: hidden;
	text-indent: -999em;
	background: rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	transition: background 0.3s ease, width 0.3s ease;
}

.focus .focus-page span { display: block; }

.focus .focus-page:hover { background: rgba(255, 255, 255, 0.9); }

.focus .focus-page-active {
	width: 26px;
	background: var(--coral);
	border-radius: 5px;
}

/* 焦点图上的文字层（网格第二层，不再绝对定位，因此不受轮播高度塌陷影响） */
.banner-text {
	z-index: 3;
	display: flex;
	align-items: center;
	/* 顶部留出页头 + 导航的高度，再多 14px 呼吸，标语不会贴着导航 */
	padding: calc(var(--hero-top, 174px) + 14px) 0 28px;
	pointer-events: none;
}

.banner-text-inner {
	width: 100%;
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 24px;
	color: #ffffff;
	pointer-events: auto;
}

.banner-eyebrow {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-bottom: 16px;
	font-size: 0.71rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

.banner-title {
	font-size: 3.45rem;
	font-weight: 650;
	line-height: 1.04;
	letter-spacing: -0.03em;
	color: #ffffff;
}

.banner-title em {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	color: #ffd1bd;
}

.banner-lead {
	margin-top: 14px;
	font-size: 1.3rem;
	letter-spacing: 0.16em;
	color: var(--coral);
}

.banner-lead em {
	font-weight: 700;
	color: #ffd1bd;
}

.banner-links {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 22px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 26px;
	font-size: 0.94rem;
	letter-spacing: 0.06em;
	border-radius: 3px;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn-solid {
	color: #13293a;
	background: #ffd0bb;
}

.btn-solid:hover { background: #ffffff; }

.btn-outline {
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.56);
}

.btn-outline:hover {
	color: #13293a;
	background: #ffffff;
}

/* --------------------------------------------------------------------------
   7. 实验室简介 + 最新动态 intro
   -------------------------------------------------------------------------- */
#intro { padding: 40px 0 20px; }

#intro .ml { width: 49.2%; }

#intro .mc { width: 46.8%; }

/* 窗口41 绑的是「单篇」文章：标题 / 副标题 / 正文三个字段，
   后台直接在对应栏目里发布文章即可，不需要在模板里写死文字。 */
.post-intro { overflow: hidden; }

.post-intro .intro-title {
	margin: 0 0 8px;
	font-size: 1.42rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: var(--blue-dark);
}

.post-intro .intro-subtitle {
	margin: 0 0 18px;
	font-size: 0.92rem;
	line-height: 1.7;
	letter-spacing: 0.04em;
	color: var(--muted);
}

/* 副标题留空时不占位 */
.post-intro .intro-subtitle:empty { display: none; }

/* 标题留空时同样不占位：否则左栏会比右侧「最新动态」整体低一截 */
.post-intro .intro-title:empty { display: none; }

.post-intro .wp_articlecontent {
	font-size: 1rem;
	line-height: 1.95;
	color: var(--muted);
}

.post-intro .wp_articlecontent p { margin-bottom: 16px; }

.post-intro .wp_articlecontent p:last-child { margin-bottom: 0; }

.post-intro .wp_articlecontent strong { color: var(--blue-dark); }

/* 新闻列表（通用） */
.news-list > .news-item {
	display: flex;
	gap: 18px;
	padding: 16px 0;
	border-bottom: 1px dashed var(--line);
}

.news-list > .news-item:first-child { padding-top: 0; }

.news-list > .news-item:last-child { border-bottom: 0; }

.news-item__date {
	flex: 0 0 74px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 62px;
	border-left: 3px solid var(--coral);
	background: #f4f8f7;
}

.news-item__date-day {
	display: block;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.32rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--blue-dark);
}

.news-item__date-month {
	display: block;
	margin-top: 2px;
	font-size: 0.62rem;
	letter-spacing: 0.06em;
	color: #7a8b93;
}

.news-item__body {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.news-item__title {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--blue-dark);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.news-item__title a { color: var(--blue-dark); }

.news-item__title a:hover { color: var(--coral); }

.news-item__text {
	display: block;
	margin-top: 6px;
	font-size: 0.88rem;
	line-height: 1.7;
	color: var(--muted);
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* --------------------------------------------------------------------------
   8. 联系我们 contact
   -------------------------------------------------------------------------- */
#contact {
	padding: 62px 0 70px;
	background: #eef4f3;
}

.contact-tt {
	display: flex;
	align-items: baseline;
	gap: 14px;
}

.contact-tt .tit { margin: 0; }

.contact-en {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 0.86rem;
	font-style: italic;
	letter-spacing: 0.1em;
	color: var(--coral);
}

.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
	gap: 26px;
	align-items: stretch;
}

.contact-map {
	position: relative;
	min-width: 0;
	min-height: 320px;
	overflow: hidden;
	border: 1px solid var(--line);
	background: #ffffff;
}

.contact-info {
	padding: 26px 26px 24px;
	border: 1px solid var(--line);
	border-top: 3px solid var(--coral);
	background: #ffffff;
}

.contact-person {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.contact-person strong {
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--blue);
}

.contact-person span {
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--ink);
}

.contact-line {
	height: 1px;
	margin: 15px 0;
	background: var(--line);
}

.contact-dl dt {
	margin-top: 12px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--blue);
}

.contact-dl dt:first-child { margin-top: 0; }

.contact-dl dd {
	margin: 4px 0 0;
	font-size: 0.9rem;
	line-height: 1.65;
	color: var(--ink);
}

.contact-dl dd a { color: var(--blue-dark); }

.contact-dl dd a:hover { color: var(--coral); }

/* --------------------------------------------------------------------------
   9. 新闻动态 news
   -------------------------------------------------------------------------- */
#news { padding: 22px 0 56px; }

/* 新闻动态：一行一栏（整幅单列排列） */
#news .news-list--wide {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.news-list--wide > .news-item { gap: 20px; padding: 18px 0; }

.news-list--wide > .news-item:first-child { padding-top: 0; }

.news-list--wide > .news-item:last-child { border-bottom: 1px dashed var(--line); }

/* --------------------------------------------------------------------------
   10. 页脚 footer（浅灰信息条，位于页面最底部）
   -------------------------------------------------------------------------- */
#footer {
	flex-shrink: 0;
	padding: 22px 0;
	color: var(--muted);
	background: #f2f4f5;
	border-top: 1px solid var(--line);
}

#footer .foot-left { float: left; }

#footer .foot-right { float: right; text-align: right; }

#footer .copyright {
	font-size: 0.86rem;
	line-height: 1.9;
	color: var(--muted);
}

#footer .copyright span { margin-right: 8px; }

#footer .copyright a { color: var(--blue); }

#footer .copyright a:hover { color: var(--coral); }

#footer .foot-meta {
	font-size: 0.82rem;
	line-height: 1.9;
	color: #8d9ca4;
}

#footer .foot-meta span { margin-left: 14px; }

/* --------------------------------------------------------------------------
   11. 二级页：列表页 content（全宽标题条 + 文章列表，无左侧栏目导航）
   -------------------------------------------------------------------------- */
#content { padding: 25px 0 60px; }

/* 没有面包屑的页面（Research / Teaching）：把正文标题和导航之间的空白补回来 */
#content.content--plain { padding-top: 44px; }

/* 标题条：只有栏目名（带灰色下划线），不再放「当前位置」面包屑 ---------- */
.col-news__head {
	position: relative;
	padding-bottom: 1px;
	margin-bottom: 12px;
	border-bottom: 1px solid #dbdbdb;
}

/* 平台会在窗口内包一层 frag="窗口内容"，flex 排布要落在这一层上 */
.col-news__head > [frag="窗口内容"] {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px 20px;
}

.col-news__title {
	position: relative;
	padding-bottom: 10px;
	font-size: 1.15rem;
	font-weight: 400;
	line-height: 1.6;
	color: #373737;
}

.col-news__title::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 3px;
	background: #cbcbcb;
}

/* 文章列表 --------------------------------------------------------------- */
.article-list { padding-top: 4px; }

.article-list > .article-item {
	display: flex;
	align-items: baseline;
	gap: 24px;
	padding: 7px 0;
	border-bottom: 1px solid #f0f0f0;
}

.article-item__title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.95rem;
	line-height: 2;
	color: #333333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.article-item__title a { color: #333333; }

.article-item__title a:hover { color: var(--coral); }

.article-item__date {
	flex: 0 0 84px;
	text-align: right;
	font-size: 0.85rem;
	line-height: 2;
	color: #9c9c9c;
}

/* 相册网格（Gallery.htm）------------------------------------------------- */
.photo-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px 20px;
	padding-top: 6px;
}

.photo-card__thumb {
	aspect-ratio: 4 / 3;
	background: #eef4f3;
	overflow: hidden;
}

.photo-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.photo-card:hover .photo-card__thumb img { transform: scale(1.04); }

.photo-card__name {
	margin-top: 10px;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--blue-dark);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.photo-card__name a { color: var(--blue-dark); }

.photo-card__name a:hover { color: var(--coral); }

.photo-card__date {
	margin-top: 2px;
	font-size: 0.78rem;
	line-height: 1.6;
	color: #9c9c9c;
}

/* --------------------------------------------------------------------------
   12. 三级页：正文 article
   -------------------------------------------------------------------------- */
.post-crumb {
	width: 100%;
}

.crumb {
	padding: 2px 0 14px;
	font-size: 0.82rem;
	line-height: 1.7;
	color: #8a9096;
}

.crumb a { color: #5f6b72; }

.crumb a:hover { color: var(--coral); }

.crumb-label { color: #8a9096; }

.post-article .article {
	width: 100%;
	padding: 6px 0 34px;
}

.article__title {
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.6;
	text-align: center;
	color: #373737;
}

.article__subtitle {
	margin-top: 10px;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.7;
	text-align: center;
	color: #5a6b73;
}

/* 标题 / 副标题留空时不占位（Research、Teaching 用的「新闻内容」窗口
   如果没输出标题字段，也不会在正文上方留出空行） */
.article__title:empty,
.article__subtitle:empty { display: none; }

.article__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 18px;
	padding: 12px 0 18px;
	margin-bottom: 22px;
	font-size: 0.75rem;
	line-height: 1.8;
	color: #787878;
	border-bottom: 1px solid #ebebeb;
}

.article__body {
	font-size: 0.875rem;
	line-height: 1.75;
	color: #333333;
}

.article__body p { margin-bottom: 10px; }

.article__body h2 {
	margin: 26px 0 12px;
	font-size: 1.16rem;
	font-weight: 600;
	line-height: 1.6;
	color: #373737;
}

.article__body h3 {
	margin: 22px 0 10px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.6;
	color: #373737;
}

.article__body ul,
.article__body ol {
	margin: 0 0 12px;
	padding-left: 22px;
	list-style: disc;
}

.article__body ol { list-style: decimal; }

.article__body li { margin-bottom: 6px; }

.article__body img {
	max-width: 100%;
	height: auto;
	margin: 12px auto;
}

.article__body a {
	color: var(--blue);
	text-decoration: underline;
}

.article__body a:hover { color: var(--coral); }

.article__body blockquote {
	margin: 18px 0;
	padding: 12px 20px;
	border-left: 3px solid var(--coral);
	background: #f7f7f7;
	color: #5a6b73;
}

.paging_content p { margin-bottom: 10px; }

/* --------------------------------------------------------------------------
   13. 科研团队页 people（实验室合影 / 课题组负责人 / 组内成员）
   三个窗口都是「新闻内容」组件，窗口之间几乎不留缝（间距缩到原来的 10%）。
   -------------------------------------------------------------------------- */
#gallery { padding: 44px 0 3px; }

/* 合影窗口输出的是文章正文，图直接写在正文里 */
.post-gallery .photo-frame {
	background: #eef4f3;
	overflow: hidden;
}

.post-gallery .photo-frame img {
	display: block;
	width: 100%;
	height: auto;
}

.post-gallery .photo-frame p { margin: 0; }

#pi { padding: 3px 0 3px; }

/* 让正文最后一段的 margin 不外溢，窗口之间才是「紧贴」的 6px */
.post-pi,
.post-members { overflow: hidden; }

.pi-head { margin-bottom: 18px; }

.pi-head__name {
	font-size: 1.42rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--blue-dark);
}

.pi-head__desc {
	margin-top: 6px;
	font-size: 0.92rem;
	line-height: 1.7;
	letter-spacing: 0.04em;
	color: var(--muted);
}

/* 副标题留空时不占位 */
.pi-head__desc:empty { display: none; }

.pi-single .wp_articlecontent {
	font-size: 1rem;
	line-height: 1.95;
	color: #344e5d;
}

.pi-single .wp_articlecontent p { margin-bottom: 16px; }

.pi-single .wp_articlecontent img {
	float: left;
	max-width: 260px;
	margin: 4px 26px 14px 0;
}

#members { padding: 3px 0 74px; }

/* 组内成员：同样是单篇文章，正文里可以自由排版
   （标题层级 / 列表 / 表格 / 引用沿用 .article__body，这里只调字号行距） */
.post-members .wp_articlecontent {
	font-size: 1rem;
	line-height: 1.95;
	color: #344e5d;
}

.post-members .wp_articlecontent p { margin-bottom: 16px; }

/* --------------------------------------------------------------------------
   14. 平台注入元素：分页 / 列表 / 搜索 兜底样式
   -------------------------------------------------------------------------- */
/* 分页条：平台输出的结构是 ul.wp_paging > li.pages_count / li.page_nav / li.page_jump
   （li 里面再套 a>span、input.pageNum、a.pagingJump）。
   平台默认给 ul 加了 float:right，会让 flex 容器收缩成窄条、文字挤成一字一行，
   所以第一步必须 float:none + width:100%，再逐个部件给同一套 34px 盒模型。 */
.wp_paging {
	float: none;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.82rem;
	line-height: 1;
	color: #8a9096;
	text-align: center;
}

.wp_paging > li {
	float: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

/* 每页 N 记录 / 总共 N 记录 */
.wp_paging .pages_count span {
	color: #8a9096;
	white-space: nowrap;
}

/* 数字部分（14 / 31 / 1 / 3）用稍深一点的颜色，em 去掉斜体 */
.wp_paging em {
	font-style: normal;
	color: #4a5a66;
}

/* 第一页 / 上一页 / 下一页 / 尾页 / 跳转到 */
.wp_paging .page_nav > a,
.wp_paging .pagingJump {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 34px;
	min-width: 34px;
	padding: 0 12px;
	font-size: 0.82rem;
	line-height: 1;
	white-space: nowrap;
	color: #5a6a75;
	background: #ffffff;
	border: 1px solid #e2e7e9;
	border-radius: 2px;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wp_paging .page_nav > a > span { display: inline-flex; align-items: center; }

/* 页码 x/y ／ 输入框 ／ 跳转到 */
.wp_paging .page_jump > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	color: #8a9096;
}

.wp_paging .pageNum {
	box-sizing: border-box;
	width: 56px;
	height: 34px;
	padding: 0 8px;
	font-family: inherit;
	font-size: 0.82rem;
	line-height: 1;
	text-align: center;
	color: #5a6a75;
	background: #ffffff;
	border: 1px solid #e2e7e9;
	border-radius: 2px;
}

.wp_paging .currPageURL { display: none; }

.wp_paging .page_nav > a:hover,
.wp_paging .pagingJump:hover {
	color: #ffffff;
	background: #5a5a5a;
	border-color: #5a5a5a;
}

.wp_paging .current,
.wp_paging .active {
	color: #ffffff;
	background: #5a5a5a;
	border-color: #5a5a5a;
}

/* 平台默认文章列表（当窗口未使用模板循环标记时兜底） */
.wp_article_list > .list_item {
	display: flex;
	align-items: baseline;
	gap: 24px;
	padding: 7px 0;
	border-bottom: 1px solid #f0f0f0;
}

.wp_article_list > .list_item .Article_Title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.95rem;
	line-height: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wp_article_list > .list_item .Article_Title a:hover { color: var(--coral); }

.wp_article_list > .list_item .Article_PublishDate {
	flex: 0 0 96px;
	text-align: right;
	font-size: 0.82rem;
	color: #98a7ae;
}

.wp_article_list > .list_item .Article_Index { display: none; }

/* 平台默认导航（当导航窗口未使用模板循环标记时兜底） */
#nav .wp_nav { display: flex; flex-wrap: wrap; }

#nav .wp_nav > li > a {
	display: flex;
	align-items: center;
	padding: 0 22px;
	min-height: 52px;
	color: rgba(255, 255, 255, 0.86);
}

#nav .wp_nav > li > a:hover { color: #ffffff; }

/* --------------------------------------------------------------------------
   15. 平台包裹层与补充细节
   -------------------------------------------------------------------------- */
.wp-panel,
.wp-window { position: relative; }

.wp-window > [frag="窗口内容"] { width: 100%; }

.article__publisher,
.article__update,
.article__views { display: inline-block; }

.post-crumb { margin-bottom: 4px; }

/* 未绑定文章的窗口整体隐藏标题条，避免出现空模块 */
.post.is-empty { display: none; }

/* 正文内表格兼容（平台编辑器可能插入表格） */
.article__body table,
.wp_articlecontent table {
	width: 100%;
	max-width: 100%;
	margin: 16px 0;
	border-collapse: collapse;
}

.article__body th,
.article__body td,
.wp_articlecontent th,
.wp_articlecontent td {
	padding: 9px 12px;
	font-size: 0.94rem;
	line-height: 1.7;
	border: 1px solid var(--line);
	text-align: left;
}

.article__body th,
.wp_articlecontent th {
	background: #f3f8f7;
	color: var(--blue-dark);
}

/* 正文内 iframe / 视频自适应 */
.article__body iframe,
.wp_articlecontent iframe {
	max-width: 100%;
	border: 0;
}

/* --------------------------------------------------------------------------
   16. 打印与无障碍
   -------------------------------------------------------------------------- */
@media print {
	#header, #nav, #footer, .menu-toggle, .focus .focus-navigation, .focus .focus-pagination { display: none !important; }
}