/* =====================================================================
   common.css —— 三页共用样式（暨南大学 EMBA 站点）
   覆盖：CSS 变量 / 基础排版 / 顶部导航 / 页脚 / 通用容器 / 栏目标题基础 /
        栏目 HERO + 洋葱皮导航（list·detail 共用）/ 3:9 主题栅格 / 返回顶部 /
        滚动渐显 / 响应式（移动端抽屉·超窄屏）/ 减弱动效
   ===================================================================== */

:root{
  --paper:#F4EFE6; --paper-2:#FBF8F1; --ink:#211C15; --muted:#6B6253;
  --jnu:#15356B; --jnu-600:#1E4E96; --jnu-700:#102A57;
  --gold:#B5862E; --gold-soft:#C9A24B; --line:#DED5C5;
}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Microsoft YaHei","微软雅黑","PingFang SC","Heiti SC",sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.7;
}
.font-display{font-family:"STZhongsong","华文中宋","SimSun","宋体",serif;}
::selection{background:var(--gold);color:#1a1305;}

/* 兜底栅格/间距（即便 Tailwind 引擎未就绪也能正常排版） */
.grid{display:grid;}
.gap-6{gap:1.5rem;}
.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:639.98px){ .sm\:grid-cols-2,.md\:grid-cols-3,.lg\:grid-cols-3{grid-template-columns:1fr;} }
a{color:inherit;}

/* ============ 顶部导航 ============ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s, background .3s;
}
.site-header.scrolled{box-shadow:0 10px 30px -18px rgba(16,42,87,.40);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 0;}
.brand{display:flex; align-items:center; gap:12px; flex:none;}
.brand img{height:51px; width:auto; display:block;}      /* Logo 按原始尺寸 303×51 显示，不拉伸、不缩小 */
.nav-menu{display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0;}
.nav-item{position:relative;}
.nav-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 15px; font-size:16px; color:var(--ink);
  text-decoration:none; border-radius:8px; transition:color .2s, background .2s; white-space:nowrap;
}
.nav-link:hover{color:var(--jnu); background:rgba(21,53,107,.06);}
.caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.5;transition:transform .2s;}
.nav-item:hover .caret{transform:rotate(180deg);}

/* 下拉菜单：色块背景 + 高对比字体 */
.dropdown{
  position:absolute; top:calc(100% + 6px); left:0;
  background:var(--jnu); min-width:212px; border-radius:10px;
  padding:8px; box-shadow:0 24px 50px -20px rgba(16,42,87,.6);
  opacity:0; visibility:hidden; transform:translateY(10px); transition:.25s ease; z-index:40;
}
.dropdown::before{content:""; position:absolute; top:-6px; left:24px; width:12px; height:12px; background:var(--jnu); transform:rotate(45deg);}
.dropdown a{
  display:block; color:#F3EEE2; text-decoration:none;
  padding:11px 14px; font-size:15px; border-radius:7px;
  border-left:3px solid transparent; transition:.18s;
}
.dropdown a:hover{background:var(--gold); color:#1a1305; border-left-color:#fff;}
.nav-item:hover .dropdown{opacity:1; visibility:visible; transform:translateY(0);}

.hamburger{display:none; width:46px; height:46px; border:none; background:transparent; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px;}
.hamburger span{display:block; width:24px; height:2px; background:var(--ink); transition:.3s;}
.nav-backdrop{display:none; position:fixed; inset:0; background:rgba(16,42,87,.35); z-index:45;}

/* ============ 通用容器 ============ */
.wrap{max-width:1500px; margin:0 auto; padding:0 22px; position:relative; z-index:1;}

/* ============ 栏目标题（默认：首页 / 详情页通用；列表页在 list.css 覆盖） ============ */
.section-head{display:flex; align-items:center; gap:18px; margin-bottom:40px; flex-wrap:wrap;}
.section-head .icon{flex:none; width:56px; height:56px; display:grid; place-items:center; border-radius:14px; background:var(--jnu); color:#F4EFE6; box-shadow:0 14px 30px -16px rgba(16,42,87,.7);}
.section-head .icon svg{width:30px; height:30px;}
.section-head .titles .eyebrow{font-size:12px; letter-spacing:.3em; color:var(--gold); font-weight:700; text-transform:uppercase;}
.section-head .titles h2{font-size:clamp(26px,3.4vw,34px); margin:2px 0 0; color:var(--jnu-700);}
.section-head .rule{flex:1; min-width:40px; height:2px; background:linear-gradient(90deg,var(--gold),transparent);}

/* ============ 栏目 HERO / 洋葱皮导航（列表页与详情页共用） ============ */
.detail-hero{position:relative; width:100%; overflow:hidden;}
.detail-hero-inner{position:relative; width:100%; height:320px; overflow:hidden; background:var(--jnu-700);}
@media (max-width:640px){ .detail-hero-inner{height:auto; aspect-ratio:530/180;} }
.detail-hero-inner img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.detail-hero-mask{position:absolute; inset:0; background:linear-gradient(90deg, rgba(16,42,87,.85), rgba(16,42,87,.45) 50%, rgba(16,42,87,.12));}
.detail-hero-cap{position:absolute; left:0; right:0; bottom:0; padding-bottom:30px;}
.detail-hero-cap .eyebrow{color:var(--gold-soft); letter-spacing:.18em; font-size:13px; margin:0 0 8px;}
.detail-hero-cap h1{color:#fff; font-size:40px; margin:0; text-shadow:0 2px 12px rgba(0,0,0,.3);}
.breadcrumb{background:var(--paper-2); border-bottom:1px solid var(--line);}
.breadcrumb .wrap{display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:14px 22px; font-size:14px; color:var(--muted);}
.breadcrumb a{color:var(--jnu); text-decoration:none;}
.breadcrumb a:hover{color:var(--gold);}
.breadcrumb .sep{color:var(--line);}
.breadcrumb .cur{color:var(--ink); font-weight:600;}

/* ============ 主题内容 3:9（列表页与详情页共用） ============ */
.detail-main{position:relative; background:var(--paper); padding:64px 0; overflow:hidden;}
.detail-grid{display:grid; grid-template-columns:3fr 9fr; gap:48px; position:relative; z-index:1; align-items:start;}
.detail-aside{position:sticky; background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:22px 20px;}
.aside-title{display:flex; align-items:center; gap:10px; font-family:"STZhongsong","华文中宋",serif; font-size:20px; color:var(--jnu); border-left:3px solid var(--gold); padding-left:12px; margin:0 0 16px;}
.aside-title svg{width:22px; height:22px; color:var(--gold);}
.aside-list{list-style:none; margin:0; padding:0;}
.aside-list li{margin:0; border-bottom:1px solid var(--line);}
.aside-list li:last-child{border-bottom:none;}
.aside-list a{display:block; padding:13px 12px; color:var(--ink); text-decoration:none; font-size:16px; border-left:3px solid transparent; transition:.2s;}
.aside-list a:hover{color:var(--jnu); border-left-color:var(--gold); background:rgba(181,134,46,.06); transform:translateX(3px);}
.aside-list li.active a{color:var(--jnu); font-weight:700; border-left-color:var(--gold); background:rgba(21,53,107,.06);}

/* ============ 页脚 / 版权声明 ============ */
.site-footer{background:var(--jnu-700); color:#E7E0D2; position:relative; overflow:hidden;}
.site-footer::before{content:""; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Ccircle cx='45' cy='45' r='40' fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.04'/%3E%3C/svg%3E");}
.footer-grid{display:grid; grid-template-columns:1.5fr 1.15fr 1.15fr 1.2fr; gap:32px; position:relative; z-index:1; padding:40px 0 28px; align-items:start;}
.footer-col-title{color:#fff; font-size:14px; letter-spacing:.1em; margin:0 0 14px; border-left:3px solid var(--gold); padding-left:10px;}
.footer-logo{height:44px; width:auto; background:#fff; padding:6px 10px; border-radius:6px; display:block; margin-top:2px;}
.footer-contact{color:#CFC7B6; font-size:13px; line-height:1.9; margin:14px 0 0;}
.friend-links{display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; margin:0; padding:0; list-style:none;}
.friend-links li{margin:0;}
.friend-links a{display:inline-flex; align-items:center; gap:9px; color:#CFC7B6; text-decoration:none; font-size:14px; transition:color .2s, transform .2s;}
.friend-links a::before{content:""; width:6px; height:6px; background:var(--gold); border-radius:50%; flex:none; transition:transform .2s;}
.friend-links a:hover{color:var(--gold-soft); transform:translateX(4px);}
.friend-links a:hover::before{transform:scale(1.5);}
.site-footer a{color:#CFC7B6; text-decoration:none; transition:color .2s;}
.site-footer a:hover{color:var(--gold-soft);}
.qr-box{display:flex; gap:12px; flex-wrap:nowrap;}
.qr-item{flex:1; min-width:0; text-align:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:10px 8px;}
.qr-item img{width:68px; height:68px; object-fit:cover; border-radius:4px; background:#fff; margin:0 auto; display:block;}
.qr-item span{display:block; margin-top:6px; font-size:12px; color:#E7E0D2; white-space:nowrap;}

/* 认证图标 */
.cert-icons{display:grid; grid-template-columns:repeat(2, 1fr); gap:10px;}
.cert-icon{display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:10px; height:70px; transition:background .2s, border-color .2s;}
.cert-icon:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.2);}
.cert-icon img{max-height:44px; max-width:100%; object-fit:contain; filter:brightness(1.05);}

.footer-bottom{border-top:1px solid rgba(255,255,255,.10); position:relative; z-index:1;}
.footer-bottom .wrap{display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center; justify-content:space-between; padding:16px 22px; font-size:13px; color:#B7AF9E;}
.beian a{color:#CFC7B6; text-decoration:none;}
.beian a:hover{color:var(--gold-soft);}

/* ============ 返回顶部 / 滚动渐显 ============ */
.to-top{position:fixed; right:24px; bottom:24px; width:50px; height:50px; border-radius:50%; background:var(--gold); color:#1a1305; border:none; cursor:pointer; font-size:22px; box-shadow:0 16px 30px -12px rgba(181,134,46,.7); opacity:0; visibility:hidden; transform:translateY(12px); transition:.3s; z-index:55;}
.to-top.show{opacity:1; visibility:visible; transform:none;}
.reveal{opacity:0; transform:translateY(26px); transition:.7s ease;}
.reveal.in{opacity:1; transform:none;}
/* 兜底：当 JavaScript 未执行（html.no-js，例如脚本加载失败/被拦截）时，
   直接显示带 .reveal 的内容，避免整页正文因 opacity:0 而“消失”。 */
html.no-js .reveal{opacity:1; transform:none;}

/* ============ 响应式（共用：移动端抽屉 / 超窄屏） ============ */
@media (max-width:991.98px){
  .hamburger{display:inline-flex;}
  .nav-menu{
    position:fixed; top:0; right:0; height:100vh; width:84%; max-width:340px;
    background:var(--paper-2); flex-direction:column; align-items:stretch; gap:0;
    padding:84px 16px 28px; transform:translateX(100%); transition:.35s ease; z-index:60;
    box-shadow:-24px 0 60px -20px rgba(16,42,87,.4); overflow:auto;
  }
  .nav-menu.open{transform:none;}
  .nav-item{width:100%; border-bottom:1px solid var(--line);}
  .nav-link{width:100%; justify-content:space-between; padding:16px 8px; font-size:17px; color:var(--ink);}
  .dropdown{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; background:transparent; display:none; padding:0 0 8px 14px;}
  .dropdown::before{display:none;}
  .nav-item.expanded .dropdown{display:block;}
  .nav-item.expanded > .nav-link{color:var(--jnu); background:rgba(21,53,107,.06);}
  .nav-item.expanded > .nav-link .caret{transform:rotate(180deg);}
  .dropdown a{color:var(--jnu); border-left:3px solid var(--gold); background:rgba(181,134,46,.06);}
  .dropdown a:hover{background:var(--gold); color:#1a1305;}
}
/* 超窄屏：仅收缩顶栏左右留白，保持 Logo 原始尺寸（51px）不缩放 */
@media (max-width:480px){
  .nav-inner{padding:10px 0; gap:10px;}
  .wrap{padding-left:10px; padding-right:10px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
}