/* =========================================
   1. 全局变量与基础设置 (Global Variables & Reset)
   ========================================= */
:root {
    --primary-color: #1E40AF; /* 深蓝色: 学术严谨 */
    --secondary-color: #3B82F6; /* 辅助蓝: 交互高亮 */
    --text-main: #1F2937;     /* 主要文字色 */
    --text-light: #6B7280;    /* 次要文字色 */
    --bg-light: #F3F4F6;      /* 浅灰背景 */
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text-main);
    line-height: 1.6;
    padding-top: 86px; /* 为固定的导航栏留出空间 */
}

a { text-decoration: none; }

/* 工具类 */
.text-primary-dark { color: var(--primary-color); }
.bg-primary-dark { background-color: var(--primary-color); }
.bg-blue-light { background-color: #e0f2fe; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.section-padding { padding: 80px 0; }
.leading-relaxed { line-height: 1.8; }

.divider {
    height: 4px;
    width: 60px;
    background-color: var(--secondary-color);
    border-radius: 2px;
}

/* =========================================
   2. 导航栏动画 (Navbar Animation)
   ========================================= */
.navbar {
    padding-top: 15px;
    padding-bottom: 15px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* Logo 容器动画逻辑 */
.logo-container {
    max-width: 400px; /* 初始宽度 */
    opacity: 1;
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    margin-right: 0;
}

.logo-img {
    height: 50px;
    width: auto;
    transition: height 0.4s;
}

/* 占位符逻辑 (用于挤压菜单) */
.spacer-left {
    flex-grow: 1; /* 初始：左侧撑开，菜单靠右 */
    transition: flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.spacer-right {
    flex-grow: 0; /* 初始：右侧无宽度 */
    transition: flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- 滚动后的状态 (由JS添加 .navbar-scrolled 类) --- */
.navbar-scrolled {
    padding-top: 10px;
    padding-bottom: 10px;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px); /* 毛玻璃效果 */
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.navbar-scrolled .logo-container {
    max-width: 0px; /* Logo 宽度收缩为0 */
    opacity: 0;
    padding: 0;
}

.navbar-scrolled .spacer-left { flex-grow: 1; }
.navbar-scrolled .spacer-right { flex-grow: 1; } /* 两侧相等，菜单居中 */

/* 导航链接样式 */
.navbar-nav .nav-link {
    font-size: 16px;
    padding: 8px 16px !important;
    color: var(--text-main);
    position: relative;
    transition: color 0.3s;
}

/* 链接下划线动效 */
.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: var(--primary-color);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    width: 80%;
}

.navbar-nav .nav-link:hover, 
.navbar-nav .nav-link.active {
    color: var(--primary-color);
}

/* 下拉菜单动画 */
@media (min-width: 992px) {
    .hover-dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0; 
    }
}
.animate-slide-up { animation: slideUp 0.3s ease forwards; }
@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 移动端导航适配 */
@media (max-width: 991px) {
    .navbar-scrolled .logo-container { max-width: 300px; opacity: 1; }
    .spacer-left, .spacer-right { display: none; }
    .navbar-collapse {
        background: white;
        padding: 20px;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    }
}

/* =========================================
   3. 轮播图 (Hero Section)
   ========================================= */
.hero-section {
    height: 600px;
    width: 100%;
    position: relative;
}
.swiper { width: 100%; height: 100%; }
.hero-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 自定义分页器 (小白点) */
.swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.6) !important; 
    opacity: 1 !important;
    width: 10px; height: 10px;
    margin: 0 6px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}
.swiper-pagination-bullet-active {
    background: #ffffff !important; 
    transform: scale(1.3);
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
}
.swiper-button-next, .swiper-button-prev {
    color: rgba(255, 255, 255, 0.8) !important;
    text-shadow: 0 0 3px rgba(0,0,0,0.5);
}
.swiper-button-next:hover, .swiper-button-prev:hover {
    color: #ffffff !important;
}

/* =========================================
   4. 重点展示模块 (Showcase Section)
   ========================================= */
/* 链接文字动效 */
.hover-underline { position: relative; transition: color 0.3s; }
.hover-underline:hover { color: var(--primary-color); text-decoration: underline !important; }

/* 右上角大图放大特效 */
.zoom-wrapper {
    overflow: hidden;
    cursor: pointer;
}
.zoom-img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.zoom-wrapper:hover .zoom-img {
    transform: scale(1.05);
}

/* 下方卡片样式 */
a.showcase-card {
    display: block;
    border-color: #e5e7eb !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #fff;
    cursor: pointer;
}
a.showcase-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
    border-color: transparent !important;
}

/* 图片容器 */
.showcase-card .img-wrapper { overflow: hidden; }
.showcase-card .img-wrapper img {
    transition: transform 0.5s ease;
    width: 100%; height: 100%; object-fit: cover;
}
a.showcase-card:hover .img-wrapper img { transform: scale(1.05); }

/* 卡片文字 */
.bg-light-subtle { background-color: #f9fafb !important; }
a.showcase-card:hover .bg-light-subtle { background-color: #fff !important; }

a.showcase-card .card-text {
    color: var(--text-main);
    transition: color 0.3s;
}
a.showcase-card:hover .card-text {
    color: var(--primary-color);
}

/* =========================================
   About Features Section Updates
   ========================================= */

/* 确保 a 标签作为卡片时的显示属性 */
a.feature-card {
    display: block;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    background: #fff; /* 确保背景色 */
}

/* 悬停效果：上浮 + 阴影加深 */
a.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
}

/* 标题文字颜色过渡 */
a.feature-card .transition-text {
    color: var(--text-main); /* 默认深色 */
    transition: color 0.3s ease;
}

/* 悬停时：标题变蓝，图标轻微放大 */
a.feature-card:hover .transition-text {
    color: var(--primary-color) !important;
}

a.feature-card:hover .icon-box i {
    transform: scale(1.1);
    transition: transform 0.3s ease;
    display: inline-block;
}

/* =========================================
   6. 历史沿革 (Timeline) - 更新版
   ========================================= */
.timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}
.timeline::after {
    content: '';
    position: absolute;
    width: 2px;
    background-color: var(--secondary-color);
    top: 0; bottom: 0; left: 50%;
    margin-left: -1px;
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
    z-index: 2; /* 确保文字在图片之上 */
}

.timeline-item.left { left: 0; text-align: right; }
.timeline-item.right { left: 50%; }

/* 中心圆点 */
.timeline-item::after {
    content: '';
    position: absolute;
    width: 20px; height: 20px;
    right: -10px;
    background-color: white;
    border: 4px solid var(--primary-color);
    top: 25px;
    border-radius: 50%;
    z-index: 3;
    box-shadow: 0 0 0 4px #fff; /* 增加白色光环，让圆点更清晰 */
}
.timeline-item.right::after { left: -10px; }

/* 文字卡片 */
.timeline-item .content {
    padding: 20px 30px;
    background-color: white;
    border-radius: 6px;
    position: relative;
    z-index: 2; /* 确保卡片在背景图之上 */
}

/* --------------------------------------
   新增/修改：背景氛围图样式 (交错布局版)
-------------------------------------- */
.history-bg-img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* 垂直居中 */
    width: 350px; /* 图片大小 */
    height: 200px;
    z-index: 0; /* 最底层 */
    pointer-events: none; /* 鼠标穿透 */
}

/* 
   逻辑：
   .timeline-item 的宽度是 50%。
   对于左侧卡片，右边缘是中心线 (left: 100%)。
   对于右侧卡片，左边缘是中心线 (right: 100%)。
*/

/* 1. 左侧卡片 (.left) -> 图片要跑到【右侧】 */
.timeline-item.left .history-bg-img {
    left: 100%;       /*以此容器的最右侧(中心线)为起点*/
    margin-left: 60px; /* 向右偏移 60px，空出中心线区域 */
    right: auto;
}

/* 2. 右侧卡片 (.right) -> 图片要跑到【左侧】 */
.timeline-item.right .history-bg-img {
    right: 100%;      /*以此容器的最左侧(中心线)为起点*/
    margin-right: 60px; /* 向左偏移 60px，空出中心线区域 */
    left: auto;
}

/* 图片通用样式 */
.history-bg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    /* 核心效果：黑白 + 极淡 */
    filter: grayscale(100%);
    opacity: 0.15; /* 淡雅程度 */
    
    /* 核心效果：边缘羽化 */
    -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 70%);
    mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 70%);
    
    transition: all 0.5s ease;
}

/* 悬停互动 */
.timeline-item:hover .history-bg-img img {
    opacity: 0.25;
    transform: scale(1.05);
}

/* 移动端适配：隐藏背景图 */
@media screen and (max-width: 768px) {
    .history-bg-img { display: none; } 
}

/* =========================================
   7. 研究方向 (Research Cards)
   ========================================= */
.research-card { transition: all 0.3s ease; }
.research-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; }
.research-card .img-wrapper { height: 200px; overflow: hidden; }
.research-card img { transition: transform 0.5s ease; height: 100%; width: 100%; object-fit: cover; }
.research-card:hover img { transform: scale(1.1); }

.limit-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.read-more { text-decoration: none; font-size: 0.9rem; font-weight: 600; color: var(--secondary-color); }
.read-more:hover { text-decoration: underline; }

/* =========================================
   News Section Updates (新闻动态卡片样式)
   ========================================= */

/* 新闻卡片基础样式 */
.news-card {
    transition: all 0.3s ease;
    border-color: #e5e7eb !important; /* 浅灰色边框 */
    border-radius: 8px; /* 圆角 */
    background: #fff;
}

/* 悬停时：上浮 + 阴影 + 边框变色 */
.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    border-color: var(--secondary-color) !important; /* 边框变蓝 */
}

/* 标题限制行数 (2行，多余显示省略号) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
    height: 3em; /* 固定高度，保证卡片整齐 */
}

/* 标题行高优化 */
.leading-normal {
    line-height: 1.5;
}

/* "阅读全文" 链接交互 */
.read-link {
    transition: margin-left 0.3s;
}

/* 悬停整个卡片时，让阅读全文的小箭头动一下 */
.news-card:hover .read-link i {
    margin-left: 5px;
    transition: margin-left 0.3s;
}

/* 1. "更多"按钮样式优化 */
.more-btn {
    color: #9ca3af; /* 默认浅灰色 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 鼠标悬停效果：变蓝、放大、旋转 */
.more-btn:hover {
    color: var(--primary-color); /* 变回主题蓝 */
    transform: scale(1.1) translateX(2px); /* 轻微放大并向右动一点 */
}

/* 2. 强制高度对齐的辅助类 */
/* 确保右侧灰色盒子里的内容均匀分布 */
.news-box-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
/* =========================================
   8. 通用悬停效果 (Hover Helpers)
   ========================================= */
.hover-blue:hover { color: var(--secondary-color) !important; }
.hover-white:hover { color: #fff !important; }
.hover-shadow:hover { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; transition: 0.3s; }

/* =========================================
   Resources Section Tweaks (学术资源链接样式)
   ========================================= */

.resource-link {
    background-color: #fff;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-color: #e5e7eb !important; /* 默认浅灰边框 */
}

.transition-icon, 
.transition-text {
    transition: color 0.3s ease;
}

/* 悬停状态：上浮 + 蓝边框 + 蓝图标 + 蓝文字 + 阴影加深 */
.resource-link:hover {
    transform: translateY(-8px); /* 明显的上浮效果 */
    border-color: var(--secondary-color) !important;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.15) !important; /* 带有蓝色调的阴影 */
}

.resource-link:hover .transition-icon {
    color: var(--secondary-color) !important;
    transform: scale(1.1); /* 图标轻微放大 */
}

.resource-link:hover .transition-text {
    color: var(--primary-color) !important;
}


/* =========================================
   Content Page Styles (内容页专用样式)
   ========================================= */

/* 1. 页面 Banner (栏目名称) */
.page-banner {
    height: 300px;
    width: 100%;
    position: relative;
    /* 背景图：您可以换成一张更抽象、学术感的图片 */
    background-image: url('https://images.unsplash.com/photo-1497366216548-37526070297c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* 视差滚动效果 */
    margin-top: 0; /* 抵消 body 的 padding-top，因为 nav 是 fixed 的 */
}

/* 黑色遮罩，保证文字清晰 */
.banner-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(30, 64, 175, 0.75); /* 使用主色调深蓝色的半透明遮罩 */
    z-index: 1;
}

.tracking-wide {
    letter-spacing: 2px;
}

/* 2. 文章排版优化 (Readability) */
.article-section {
    min-height: 800px;
}

.article-header h1 {
    font-size: 2.2rem; /* 大标题 */
    line-height: 1.4;
}

.article-meta {
    font-size: 0.9rem;
    color: #6c757d;
}

.article-content {
    font-size: 18px; /* 增大字号，适合阅读 */
    line-height: 1.8; /* 增加行高 */
    color: #374151;   /* 深灰色，比纯黑更护眼 */
}

.article-content p {
    margin-bottom: 1.5rem; /* 段落间距 */
}

.article-content h4 {
    color: var(--primary-color);
    margin-top: 2.5rem;
}

.article-content ul, 
.article-content ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.article-content li {
    margin-bottom: 0.5rem;
}

/* 3. 图片说明样式 */
.figure-caption {
    font-size: 0.9rem;
    color: #6c757d;
    margin-top: 0.5rem;
}

/* 4. 上下篇导航链接 */
.transition-all {
    transition: all 0.3s ease;
}

/* =========================================
   List Page Styles (列表页专用样式)
   ========================================= */

/* 1. 列表文章卡片 (Article Item) */
.article-item {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    background: #fff;
    /* 默认状态下边框很淡 */
    border: 1px solid rgba(0,0,0,0.05) !important; 
}

/* 悬停效果：上浮 + 阴影 + 蓝边框 */
.article-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
    border-color: var(--secondary-color) !important;
}

/* 悬停时，标题变蓝 */
.article-item:hover .card-title {
    color: var(--primary-color) !important;
}

/* 悬停时，"阅读全文" 箭头移动 */
.article-item:hover .read-more-text i {
    margin-left: 5px;
    transition: margin-left 0.3s;
}

/* 列表图片样式 */
.article-item .img-wrapper {
    min-height: 200px;
    overflow: hidden;
}

.article-item .img-wrapper img {
    transition: transform 0.5s ease;
}

.article-item:hover .img-wrapper img {
    transform: scale(1.05); /* 图片轻微放大 */
}

/* 2. 侧边栏菜单 (Sidebar Menu) */
.sidebar-menu .list-group-item {
    font-size: 0.95rem;
    color: #4b5563;
    transition: all 0.2s;
    border-color: #f3f4f6;
}

.sidebar-menu .list-group-item:hover {
    background-color: #f9fafb;
    color: var(--primary-color);
    padding-left: 1.25rem !important; /* 悬停时文字轻微右移 */
}

/* 激活状态 */
.sidebar-menu .list-group-item.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.sidebar-menu .list-group-item.active:hover {
    padding-left: 1rem !important; /* 激活状态不移动 */
}

/* 3. 分页器 (Pagination) */
.pagination .page-link {
    color: var(--text-main);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.pagination .page-link:hover {
    background-color: #e5e7eb;
    color: var(--primary-color);
}

.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    color: #fff;
}

/* =========================================
   Tabbed Page Styles (选项卡页面样式)
   ========================================= */

/* 1. 移动端横向滚动容器 */
.tab-scroller {
    width: 100%;
    overflow-x: auto;
    /* 隐藏滚动条但保留功能 */
    -ms-overflow-style: none;  /* IE/Edge */
    scrollbar-width: none;  /* Firefox */
}
.tab-scroller::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* 2. 自定义选项卡样式 (Custom Tabs) */
.custom-tabs {
    border-bottom: 2px solid #e5e7eb; /* 底部灰色长线 */
}

.custom-tabs .nav-link {
    color: #6b7280; /* 默认文字颜色: 灰色 */
    font-weight: 600;
    font-size: 1.1rem;
    padding: 1rem 1.5rem;
    border: none;
    border-bottom: 3px solid transparent; /* 预留底部边框位置 */
    margin-bottom: -2px; /* 让高亮线覆盖住底部的灰色长线 */
    background: transparent;
    transition: all 0.3s ease;
    white-space: nowrap; /* 防止文字换行 */
}

/* 悬停状态 */
.custom-tabs .nav-link:hover {
    color: var(--primary-color);
}

/* 激活状态 */
.custom-tabs .nav-link.active {
    color: var(--primary-color);
    border-bottom: 3px solid var(--primary-color); /* 激活时显示蓝色底边 */
    background: transparent;
}

/* 3. 内容区域微调 */
.content-block p, 
.content-block li {
    font-size: 1.05rem; /* 稍微大一点的字体 */
    color: #4b5563;
}

/* 1. 去除 Tab 按钮点击后的光晕/边框 */
.nav-link:focus, 
.nav-link:active,
.nav-link:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* 2. 去除内容区域被锚点定位后的边框 */
.tab-pane:focus,
.tab-pane:focus-visible {
    outline: none !important;
    border: none !important;
}