/* =========================================================
   赣西科技职业学院继续教育学院 网站模板 - 全局样式 app.css
   主色 #a4191a | 纯白底 | 国内高校风格
   移动优先 / 响应式 / 适配大屏
   ========================================================= */

:root {
  --primary: #a4191a;
  --primary-dark: #8c1415;
  --primary-darker: #6e0f10;
  --primary-light: #f3e8e8;
  --primary-soft: #fbeeee;

  --text: #1f2329;
  --text-2: #4e5969;
  --text-3: #86909c;
  --border: #e5e6eb;
  --border-2: #ececec;
  --bg: #ffffff;
  --bg-2: #f5f6f8;
  --bg-3: #fafbfc;

  --container: 1200px;

  --radius: 6px;
  --radius-lg: 10px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);

  --header-h: 64px;
  --topbar-h: 36px;
  --z-header: 50;
  --z-drawer: 100;
  --z-mask: 90;

  --font: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- reset ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; border: 0; }
a { color: inherit; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--primary); }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, p { margin: 0; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}
.section { padding: 28px 0; }
.bg-gray { background: var(--bg-2); }

/* =========================================================
   HEADER
   ========================================================= */
.topbar {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-3);
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-h);
  gap: 12px;
  overflow: hidden;
}
.topbar a { color: var(--text-3); }
.topbar a:hover { color: var(--primary); }
.topbar .tb-left, .topbar .tb-right { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.topbar .tb-right { overflow: hidden; }
.topbar .tb-right a { overflow: hidden; text-overflow: ellipsis; }

/* 小屏（手机等）隐藏顶栏 */
@media (max-width: 767px) {
  .topbar { display: none; }
}

.header {
  background: var(--primary);
  border-bottom: 1px solid var(--primary-dark);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
}
.logo { flex: 0 0 auto; }
.logo img { height: 40px; width: auto; }
.header-search {
  margin-left: auto;
  flex: 1 1 auto;
  max-width: 340px;
  display: flex;
}
.header-search input {
  flex: 1;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #fff;
  border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  font-size: 14px;
  outline: none;
  min-width: 0;
  background: #fff;
  color: var(--text);
}
.header-search input::placeholder { color: var(--text-3); }
.header-search input:focus { border-color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4); }
.header-search button {
  width: 46px;
  border: 0;
  background: #fff;
  color: var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-search button:hover { background: var(--bg-2); }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  margin-left: auto;
  gap: 5px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.12);
  flex: 0 0 auto;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: #fff;
  border-radius: 2px;
  transition: .25s;
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* nav (desktop default hidden on mobile) */
.nav {
  background: var(--primary);
}
.nav-list {
  display: flex;
  flex-wrap: wrap;
}
.nav-item { position: relative; }
.nav-link {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 20px;
  color: #fff;
  font-size: 16px;
  white-space: nowrap;
  position: relative;
}
.nav-link:hover, .nav-item.active > .nav-link {
  color: #fff;
  background: var(--primary-dark);
}
.nav-item.active > .nav-link::after {
  content: "";
  position: absolute;
  left: 18px; right: 18px; bottom: 0;
  height: 3px;
  background: #fff;
}
/* submenu */
.nav-item .submenu {
  position: absolute;
  left: 0; top: 100%;
  min-width: 180px;
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: 0 0 var(--radius) var(--radius);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: .2s ease;
  z-index: 5;
}
.nav-item:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-item .submenu a {
  display: block;
  padding: 11px 18px;
  color: var(--text-2);
  border-bottom: 1px solid var(--border-2);
  font-size: 14.5px;
}
.nav-item .submenu a:last-child { border-bottom: 0; }
.nav-item .submenu a:hover { color: var(--primary); background: var(--primary-soft); }

/* mobile drawer */
.drawer {
  position: fixed;
  top: 0; right: 0;
  width: 80%;
  max-width: 320px;
  height: 100%;
  background: #fff;
  z-index: var(--z-drawer);
  transform: translateX(100%);
  transition: transform .28s ease;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--primary);
  color: #fff;
}
.drawer-head .close { font-size: 22px; line-height: 1; color: #fff; background: none; border: 0; }
.drawer .d-search { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.drawer .d-search form { display: flex; }
.drawer .d-search input { flex: 1; height: 38px; padding: 0 12px; border: 1px solid var(--border); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); }
.drawer .d-search button { width: 46px; border: 0; background: var(--primary); color: #fff; border-radius: 0 var(--radius) var(--radius) 0; }
.drawer .nav-list { display: block; background: #fff; }
.drawer .nav-item { border-bottom: 1px solid var(--border-2); }
.drawer .nav-link { color: var(--text); height: auto; padding: 14px 18px; font-size: 15.5px; }
.drawer .nav-link:hover { background: var(--primary-soft); }
.drawer .submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; display: none; background: var(--bg-3); }
.drawer .submenu a { padding: 11px 18px 11px 34px; }
.drawer .nav-item.open .submenu { display: block; }
.drawer .nav-item > .nav-link .arrow { margin-left: auto; transition: .2s; }
.drawer .nav-item.open > .nav-link .arrow { transform: rotate(90deg); }

.mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: var(--z-mask);
  opacity: 0;
  visibility: hidden;
  transition: .25s;
}
.mask.show { opacity: 1; visibility: visible; }

/* =========================================================
   BANNER / HERO
   ========================================================= */
.hero { position: relative; padding: 18px 0; }
.hero-inner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.hero-img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  display: block;
}
.hero .hero-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
  color: #fff;
  font-size: 16px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* =========================================================
   BREADCRUMB
   ========================================================= */
.crumbs {
  font-size: 13.5px;
  color: var(--text-3);
  padding: 14px 0;
  border-bottom: 1px solid var(--border-2);
}
.crumbs a:hover { color: var(--primary); }
.crumbs .sep { margin: 0 8px; color: var(--border); }
.crumbs .cur { color: var(--text-2); }

/* =========================================================
   SECTION TITLE
   ========================================================= */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 10px;
}
.sec-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  position: relative;
  padding-left: 14px;
}
.sec-title::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 20px;
  background: var(--primary);
  border-radius: 3px;
}
.sec-more { font-size: 13px; color: var(--text-3); }
.sec-more:hover { color: var(--primary); }
.sec-head { flex-wrap: wrap; gap: 8px 16px; }
.sec-head .crumbs {
  margin-left: auto;
  padding: 0;
  border-bottom: 0;
  align-self: center;
  white-space: nowrap;
}
.sec-util { display: flex; align-items: center; gap: 16px; margin-left: auto; }

/* =========================================================
   CARDS / NEWS LIST
   ========================================================= */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { box-shadow: var(--shadow); }
.card .thumb { aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-2); }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.card:hover .thumb img { transform: scale(1.05); }
.card .card-body { padding: 14px; }
.card .card-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card .card-meta { margin-top: 8px; font-size: 12.5px; color: var(--text-3); }
.card .card-desc {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }

/* 等宽两栏（移动端堆叠，平板以上并排） */
.split-2 { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .split-2 { grid-template-columns: 1fr 1fr; } }

/* news list rows */
.news-list { border-top: 1px solid var(--border-2); }
.news-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border-2);
  transition: background .2s ease;
}
.news-item:hover { background: var(--bg-3); }
.news-item .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  flex: 0 0 auto;
}
.news-item .ni-title {
  flex: 1;
  font-size: 15.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-item:hover .ni-title { color: var(--primary); }
.news-item .ni-date { font-size: 13px; color: var(--text-3); flex: 0 0 auto; }
.news-item .tag {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: var(--primary);
  border: 1px solid var(--primary-light);
  background: var(--primary-soft);
  border-radius: 3px;
  padding: 1px 7px;
  flex: 0 0 auto;
}

/* meta row */
.list-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* =========================================================
   TAGS / BUTTONS / PAGINATION
   ========================================================= */
.tag-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 3px 12px;
  background: #fff;
}
.tag-pill:hover, .tag-pill.active { color: #fff; background: var(--primary); border-color: var(--primary); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 20px;
  line-height: 1;
  border-radius: var(--radius);
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #fff;
  font-size: 14.5px;
  transition: background .2s ease;
}
.btn:hover { background: var(--primary-dark); color: #fff; }
.btn-ghost { background: #fff; color: var(--primary); }
.btn-ghost:hover { background: var(--primary-soft); }
.btn-block { width: 100%; }

.pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}
.pagination a, .pagination span {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text-2);
  background: #fff;
}
.pagination a:hover { color: var(--primary); border-color: var(--primary); }
.pagination .active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pagination .disabled { color: var(--text-3); cursor: not-allowed; }

/* =========================================================
   LAYOUT: sidebar + main
   ========================================================= */
.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
.sidebar { order: 2; }
/* 无侧栏（侧栏导航无数据）时退化为单列，主区域占满容器；特异性高于断点内两列定义 */
.layout.layout-noside { grid-template-columns: 1fr; }
/* 小屏（手机等）隐藏侧边栏 */
@media (max-width: 767px) {
  .sidebar { display: none; }
}
.side-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 18px;
  overflow: hidden;
}
.side-hd {
  background: var(--primary);
  color: #fff;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 600;
}
.side-body { padding: 8px 16px 14px; }
.side-link {
  display: block;
  padding: 10px 0;
  font-size: 14.5px;
  color: var(--text-2);
  border-bottom: 1px dashed var(--border-2);
}
.side-link:last-child { border-bottom: 0; }
.side-link.active, .side-link:hover { color: var(--primary); }
.side-link .arrow { float: right; color: var(--text-3); }

/* =========================================================
   ARTICLE
   ========================================================= */
.article-title { font-size: 24px; font-weight: 700; line-height: 1.4; text-align: center; }
.article-meta {
  margin: 14px 0 20px;
  padding: 12px 0;
  border-top: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-3);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}
.article-meta.no-top-line { border-top: none; padding-top: 0; }
.article-meta b { color: var(--text-2); font-weight: 400; }
.article-content {
  font-size: 16px;
  line-height: 1.9;
  color: #2b3038;
}
.article-content p { margin: 0 0 18px; }
/* 富文本正文还原（与后台 wangEditor 编辑态保持一致）
   全局 reset 的 img{display:block}、ul/ol{list-style:none;padding:0}、h1~h5{margin:0}
   会命中编辑器产出的正文，导致：①编辑器里的“居中/右对齐”在前台失效（text-align 只对行内级元素生效）；
   ②列表符号与缩进丢失；③行内代码/代码块无样式；④一~五级标题粘在一起。以下规则逐项还原。 */
.article-content img {
  display: inline-block;
  max-width: 100%;
  /* 编辑器缩放图片会写入内联 height，不覆盖则窄屏下 max-width 缩宽而高度不变，图片被拉变形 */
  height: auto !important;
  border-radius: var(--radius);
  margin: 10px 0;
}
.article-content ul, .article-content ol { margin: 0 0 18px; padding-left: 2.2em; }
.article-content ul { list-style: disc outside; }
.article-content ol { list-style: decimal outside; }
.article-content ul ul { list-style: circle outside; }
.article-content ul ul ul { list-style: square outside; }
.article-content ol ol { list-style: lower-alpha outside; }
.article-content li { margin: 4px 0; }
.article-content code {
  padding: 2px 5px;
  background: var(--bg-2);
  border-radius: 3px;
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: .9em;
}
.article-content pre {
  margin: 16px 0;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  line-height: 1.6;
  overflow-x: auto;
}
.article-content pre code { padding: 0; background: none; border: 0; font-size: 13.5px; }
.article-content h1, .article-content h2, .article-content h3 { margin: 24px 0 12px; color: var(--text); }
.article-content h4 { margin: 18px 0 8px; font-size: 17px; font-weight: 600; color: var(--text); }
.article-content h5 { margin: 16px 0 8px; font-size: 15.5px; font-weight: 600; color: var(--text); }
.article-content .campus-fig { margin: 18px 0; text-align: center; }
.article-content .campus-fig img { max-width: 100%; border-radius: 8px; }
.article-content .campus-cap { margin-top: 8px; color: var(--text-2); font-size: 14px; }
.article-content blockquote {
  margin: 18px 0;
  padding: 12px 18px;
  border-left: 4px solid var(--primary);
  background: var(--primary-soft);
  color: var(--text-2);
}
.article-content table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.article-content th, .article-content td { border: 1px solid var(--border); padding: 8px 12px; font-size: 14.5px; }
.article-content th { background: var(--bg-2); }

/* attachments */
.attachments {
  margin-top: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.attach-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 15.5px;
}
.attach-list { padding: 6px 16px; }
.attach-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--border-2);
}
.attach-item:last-child { border-bottom: 0; }
.attach-icon {
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.ext-pdf { background: #d8392b; }
.ext-doc, .ext-docx { background: #2b579a; }
.ext-xls, .ext-xlsx { background: #1d6f42; }
.ext-ppt, .ext-pptx { background: #d14423; }
.ext-zip, .ext-rar { background: #7a5a3a; }
.ext-img { background: #8a4fb1; }
.ext-default { background: var(--text-3); }
.attach-info { flex: 1; min-width: 0; }
.attach-name { font-size: 14.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-name:hover { color: var(--primary); }
.attach-size { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }

/* share / action bar */
.article-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border-2);
}

/* prev/next */
.pager { margin-top: 22px; border-top: 1px solid var(--border-2); padding-top: 14px; }
.pager a { display: flex; gap: 6px; padding: 6px 0; color: var(--text-2); font-size: 14.5px; }
.pager a:hover { color: var(--primary); }
.pager .pg-label { color: var(--text-3); }

/* =========================================================
   DOWNLOAD PAGE
   ========================================================= */
.dl-list { border-top: 1px solid var(--border-2); }
.dl-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 14px;
  border-bottom: 1px solid var(--border-2);
  transition: background .2s ease;
}
.dl-item:hover { background: var(--bg-3); }
.dl-item .dl-icon {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700;
}
.dl-item .dl-info { flex: 1; min-width: 0; }
.dl-item .dl-name { font-size: 15.5px; color: var(--text); font-weight: 600; }
.dl-item .dl-desc { font-size: 13px; color: var(--text-3); margin-top: 3px; }
.dl-item .dl-meta { font-size: 12.5px; color: var(--text-3); margin-top: 4px; }
.dl-item .dl-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 18px;
  border-radius: var(--radius);
  background: var(--primary); color: #fff;
  font-size: 14px;
}
.dl-item .dl-btn:hover { background: var(--primary-dark); color: #fff; }

/* =========================================================
   SEARCH
   ========================================================= */
.search-bar {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.search-bar form { display: flex; gap: 10px; }
.search-bar input {
  flex: 1;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 15px;
  outline: none;
  min-width: 0;
}
.search-bar input:focus { border-color: var(--primary); }
.search-bar button {
  width: 110px;
  border: 0;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius);
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.search-bar button:hover { background: var(--primary-dark); }
.search-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.search-count { font-size: 13.5px; color: var(--text-3); margin: 16px 0 4px; }
.search-count b { color: var(--primary); }

/* =========================================================
   GALLERY + LIGHTBOX
   ========================================================= */
.gallery { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.gallery figure { position: relative; margin: 0; cursor: pointer; border-radius: var(--radius-lg); overflow: hidden; }
.gallery img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; transition: transform .3s ease; }
.gallery figure:hover img { transform: scale(1.06); }
.gallery figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  text-align: center;
  padding: 16px 12px 12px;
  color: #fff;
  font-size: 15px;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 92%; max-height: 80%; border-radius: 4px; }
.lightbox .lb-cap { color: #fff; margin-top: 14px; font-size: 15px; }
.lightbox .lb-close {
  position: absolute; top: 18px; right: 22px;
  width: 44px; height: 44px;
  border: 0; background: rgba(255,255,255,.15); color: #fff;
  font-size: 26px; line-height: 1; border-radius: 50%;
}
.lightbox .lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  border: 0; background: rgba(255,255,255,.15); color: #fff;
  font-size: 24px; border-radius: 50%;
}
.lightbox .lb-prev { left: 18px; }
.lightbox .lb-next { right: 18px; }

/* video list */
.video-list { display: grid; gap: 16px; grid-template-columns: 1fr; }
.video-card { cursor: pointer; }
.video-card .vc-thumb { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; }
.video-card .vc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-card .vc-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.25);
}
.video-card .vc-play span {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(164,25,26,.9); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.video-card .vc-title { margin-top: 10px; font-size: 15px; font-weight: 600; }

/* =========================================================
   FORM (contact)
   ========================================================= */
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-size: 14.5px; margin-bottom: 6px; color: var(--text); }
.form-row label .req { color: var(--primary); margin-left: 2px; }
.form-control {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14.5px;
  font-family: inherit;
  outline: none;
  background: #fff;
}
textarea.form-control { height: auto; padding: 12px 14px; resize: vertical; min-height: 120px; }
.form-control:focus { border-color: var(--primary); }
.form-row .err { color: var(--primary); font-size: 12.5px; margin-top: 5px; display: none; }
.form-row.invalid .form-control { border-color: var(--primary); }
.form-row.invalid .err { display: block; }
.form-hint { font-size: 12.5px; color: var(--text-3); margin-top: 6px; }
.form-note {
  display: none;
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--primary-soft);
  border: 1px solid var(--primary-light);
  border-radius: var(--radius);
  color: var(--primary-dark);
  font-size: 14.5px;
}
.form-note.show { display: block; }

.info-list { font-size: 14.5px; line-height: 2; color: var(--text-2); }
.info-list .row { display: flex; gap: 10px; }
.info-list .row b { color: var(--text); font-weight: 600; flex: 0 0 84px; }

/* =========================================================
   CONTACT PAGE (联系我们)
   ========================================================= */
.contact-lead {
  margin-top: 10px;
  text-align: center;
  font-size: 14.5px;
  color: var(--text-3);
}
.contact-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-top: 26px;
}
.contact-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.contact-card:hover { border-color: var(--primary-light); box-shadow: var(--shadow); }
.contact-ico {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-ico .icon { width: 20px; height: 20px; }
.contact-info { min-width: 0; }
.contact-label { display: block; font-size: 13px; color: var(--text-3); }
.contact-value {
  display: block;
  margin-top: 3px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text);
  word-break: break-all;
}
a.contact-value:hover { color: var(--primary); }
.contact-sub { display: block; margin-top: 6px; font-size: 13px; color: var(--text-3); }
@media (min-width: 768px) {
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-card--wide { grid-column: 1 / -1; }
}

/* =========================================================
   TOPIC (aggregation)
   ========================================================= */
.topic-hero {
  background: linear-gradient(120deg, var(--primary), var(--primary-darker));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  margin-bottom: 22px;
}
.topic-hero h1 { font-size: 26px; font-weight: 700; }
.topic-hero p { margin-top: 10px; opacity: .9; font-size: 15px; max-width: 720px; }
.topic-block { margin-bottom: 30px; }

/* stat cards */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.stat {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  text-align: center;
}
.stat .num { font-size: 28px; font-weight: 700; color: var(--primary); }
.stat .lab { font-size: 13.5px; color: var(--text-3); margin-top: 4px; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background: #2a2d33;
  color: #c9ccd1;
  margin-top: 40px;
}
.footer .f-bottom {
  border-top: 1px solid #3a3e45;
  padding: 16px 0;
  text-align: center;
  font-size: 13px;
  color: #9a9ea5;
  line-height: 1.9;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer .f-block {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 18px;
}
.footer .f-item { white-space: nowrap; }
.footer .f-bottom a { color: #b3b7bd; }
.footer .f-bottom a:hover { color: #fff; }

/* 小屏隐藏：传真、网站地图、两个备案号 */
@media (max-width: 767px) {
  .footer .f-block:nth-of-type(2) .f-item:nth-child(2),
  .footer .f-block:nth-of-type(2) .f-item:nth-child(4),
  .footer .f-block:nth-of-type(3) .f-item:nth-child(1),
  .footer .f-block:nth-of-type(3) .f-item:nth-child(2),
  .footer .f-block:nth-of-type(3) .f-item:nth-child(3) {
    display: none;
  }
}

/* back to top */
.to-top {
  position: fixed;
  right: 16px; bottom: 20px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: 0;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  z-index: 40;
}
.to-top.show { display: flex; }

/* =========================================================
   ICONS (inline svg sizing helper)
   ========================================================= */
.icon { width: 18px; height: 18px; display: inline-block; vertical-align: middle; flex: 0 0 auto; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 22px; height: 22px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* ---- mobile (<768): drawer nav, stacked layouts ---- */
.nav { display: none; }
.header-search { display: none; }
.nav-toggle { display: inline-flex; }
/* logo 允许收缩，防止把 .nav-toggle 挤出视口产生横向滚动 */
@media (max-width: 767px) {
  .logo { min-width: 0; flex: 0 1 auto; overflow: hidden; }
  .logo img { max-width: 100%; width: auto; height: auto; max-height: 40px; }
}

/* ---- tablet (>=768) ---- */
@media (min-width: 768px) {
  body { font-size: 15.5px; }
  .container { padding: 0 20px; }
  .section { padding: 36px 0; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .layout { grid-template-columns: 280px 1fr; gap: 26px; }
  .sidebar { order: -1; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .video-list { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(4, 1fr); }
}

/* ---- desktop (>=1024): horizontal nav ---- */
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .header-search { display: flex; max-width: 320px; }
  .header-inner { min-height: 96px; }
  .logo img { height: 56px; }
  .nav { display: block; }
  .nav-list { flex-wrap: nowrap; }
  .nav-item .submenu { display: block; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .news-item .ni-title { font-size: 16px; }
  .article-title { font-size: 28px; }
}

/* ---- large screen (>=1440): 大屏适配 ---- */
@media (min-width: 1440px) {
  :root { --container: 1400px; }
  body { font-size: 16px; }
  .section { padding: 44px 0; }
  .header-inner { min-height: 120px; }
  .logo img { height: 70px; }
  .nav-link { font-size: 17px; padding: 0 26px; }
  .sec-title { font-size: 22px; }
  .article-title { font-size: 30px; }
  .gallery { grid-template-columns: repeat(4, 1fr); }
  .layout { grid-template-columns: 320px 1fr; gap: 32px; }
  /* 大屏档（容器 1400px）：主内容区限宽 1200px 居中，不随容器膨胀；
     特异性高于文章页页面级 .main{max-width:1400px}，大屏下统一为 1200px */
  .layout .main { max-width: 1200px; width: 100%; margin-left: auto; margin-right: auto; }
}

/* ---- extra large (>=1920) ---- */
@media (min-width: 1920px) {
  :root { --container: 1520px; }
}

/* ---- small phones (<420) ---- */
@media (max-width: 420px) {
  .topbar .tb-left { display: none; }
  .grid-2 { grid-template-columns: 1fr; }
  .dl-item { flex-wrap: wrap; }
  .dl-item .dl-btn { width: 100%; }
  .search-bar form { flex-wrap: wrap; }
  .search-bar button { width: 100%; }
  .hero-img { max-height: 240px; }
  .news-item .ni-date { display: none; }
  .err404 .code { font-size: 88px; }
  .channel-hero .chn-bg { height: 140px; }
  .channel-hero h1 { font-size: 22px; }
  .channel-hero .chn-links { display: none; }
}

/* =========================================================
   CHANNEL (二级栏目 / 频道首页)
   ========================================================= */
.channel-hero {
  position: relative;
  background: linear-gradient(120deg, var(--primary), var(--primary-darker));
  color: #fff;
  overflow: hidden;
}
.channel-hero .chn-bg {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  opacity: .55;
}
.channel-hero .chn-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 0;
  background: linear-gradient(transparent, rgba(0,0,0,.45));
}
.channel-hero .chn-cap .container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.channel-hero h1 { font-size: 26px; font-weight: 700; }
.channel-hero p { margin-top: 8px; opacity: .92; font-size: 14.5px; max-width: 660px; line-height: 1.7; }
.channel-hero .chn-links { display: flex; gap: 10px; flex-wrap: wrap; }
.channel-hero .chn-links a {
  padding: 7px 16px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 20px;
  color: #fff;
  font-size: 14px;
  white-space: nowrap;
}
.channel-hero .chn-links a:hover { background: rgba(255,255,255,.16); color: #fff; }

/* 焦点图文（左大图 + 右列表） */
.chn-focus {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-bottom: 10px;
}
.chn-focus .focus-main .card { height: 100%; }
.chn-focus .focus-main .thumb { aspect-ratio: 16 / 9; }
.chn-focus .focus-aside .news-list { border-top: 0; }
@media (min-width: 768px) {
  .chn-focus { grid-template-columns: 1.1fr 1fr; align-items: stretch; }
}

/* =========================================================
   404 / 错误页
   ========================================================= */
.err404 { text-align: center; padding: 56px 0 44px; }
.err404 .code {
  font-size: 120px;
  font-weight: 800;
  line-height: 1;
  color: var(--primary);
  letter-spacing: 4px;
}
.err404 .code b { color: var(--primary-dark); }
.err404 .msg { font-size: 19px; color: var(--text); font-weight: 600; margin-top: 8px; }
.err404 .sub { font-size: 14.5px; color: var(--text-3); margin-top: 8px; }
.err404 .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.err404 .search-bar { max-width: 560px; margin: 28px auto 0; text-align: left; }
.err404 .links { margin-top: 24px; font-size: 14.5px; color: var(--text-3); }
.err404 .links a { color: var(--primary); margin: 0 8px; }
.err404 .links a:hover { text-decoration: underline; }

/* =========================================================
   网站地图 (sitemap)
   ========================================================= */
.sitemap-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 600px) { .sitemap-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .sitemap-grid { grid-template-columns: 1fr 1fr 1fr; } }
.sm-group { padding: 18px 20px; }
.sm-group .sm-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700; color: var(--primary);
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px dashed var(--border);
}
.sm-group .sm-title .icon { width: 18px; height: 18px; flex: none; }
.sm-group .sm-links { display: flex; flex-direction: column; gap: 9px; }
.sm-group .sm-links a {
  color: var(--text); font-size: 14.5px;
  display: flex; align-items: center; gap: 8px; line-height: 1.5;
}
.sm-group .sm-links a::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--primary); flex: none;
}
.sm-group .sm-links a:hover { color: var(--primary); }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}


/* =========================================================
   空状态 (empty state) —— 插图 + 文字说明
   ========================================================= */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 16px;
}
.empty-state .es-img {
  width: 140px;
  height: 140px;
  max-width: 60%;
  margin-bottom: 16px;
  opacity: .9;
}
.empty-state .es-text {
  font-size: 15px;
  color: var(--text-3);
  font-weight: 600;
}
.empty-state .es-sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-3);
}

/* 图片校园：空状态在栅格中占满整行并居中 */
.gallery .empty-state { grid-column: 1 / -1; }

/* 通知公告 / 学院新闻：空状态在列表中占满整行并居中 */
.news-item .empty-state { flex: 1 1 100%; }

/* 通知公告 / 学院新闻 空状态：svg 放大，做好多端适配 */
.empty-state--lg .es-img {
  width: clamp(170px, 30vw, 230px);
  height: clamp(170px, 30vw, 230px);
  max-width: 80%;
  margin-bottom: 18px;
}
@media (max-width: 420px) {
  .empty-state { padding: 28px 12px; }
  .empty-state--lg .es-img { width: 150px; height: 150px; }
}