/* 全局样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    background-color: #2C1A4D; /* 深色背景 */
    color: #ffffff;
    overflow-x: hidden;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

/* 顶部固定导航栏 */
.top-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent); /* 初始透明渐变背景 */
    z-index: 1000;
    display: flex;
    justify-content: center;
    box-shadow: none;
    transition: background-color 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease; /* 添加平滑过渡 */
}

/* 滚动后的导航栏样式 */
.top-header.scrolled {
    background-color: #2C1A4D; /* 变为深色背景 (接近内容区颜色 #0f0f10) */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* 恢复阴影 */
    backdrop-filter: blur(10px); /*以此增加磨砂质感 */
    background-image: none; /* 移除渐变 */
}

.header-inner {
    width: 90%; /* 占据 90% 宽度 */
    max-width: 1600px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.logo-area {
    display: flex;
    align-items: center;
}

.school-logo {
    height: 46px;
    width: auto;
    object-fit: contain;
}

.search-area {
    flex-grow: 0;
}

.search-box {
    display: flex;
    align-items: center;
    background-color: #2b2b2b;
    border-radius: 20px;
    padding: 5px 15px;
    /*width: 300px;*/
    transition: width 0.3s ease;
}

.search-box:focus-within {
    background-color: #333;
    /*width: 350px;*/
}

.search-box input {
    background: transparent;
    border: none;
    color: white;
    flex: 1;
    outline: none;
    font-size: 14px;
}

.search-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
}

/* 主体容器 */
.main-container {
    position: relative;
    z-index: 1; /* 确保内容在Banner之上 */
    display: flex;
    /* padding-top: 64px; header height - 移除，由margin-top控制 */
    min-height: 100vh;
    width: 90%;
    max-width: 1600px;
    margin: 80vh auto 0; /* 顶部留出Banner空间，根据需要调整 */
}

/* 左侧侧边栏 */
.sidebar {
    width: 200px;
    background-color: transparent; /* 透明背景 */
    height: 100vh; 
    position: fixed; /* 固定在视口 */
    top: 0;
    left: 0; /* 靠在最左侧 */
    padding-top: 80px; /* 避开Header */
    overflow-y: auto;
    flex-shrink: 0;
    z-index: 50; /* 在Banner之上，Header之下 */
    
    /* 滚动行为控制 */
    overscroll-behavior: contain; /* 阻止滚动传播/穿透到父容器 */
    direction: rtl; /* 将滚动条放置在左侧 */
    
    /* 滚动条样式 */
    scrollbar-width: thin;
    scrollbar-color: #555 transparent; /* 稍微调亮滚动条颜色以便可见 */
}

.nav-list {
    direction: ltr; /* 恢复列表内容的文字方向为从左到右 */
}

@media (min-width: 1780px) { 
    /* 移除之前的居中对齐，始终保持左侧 */
    .sidebar {
        left: 0; 
    }
}

.sidebar::-webkit-scrollbar {
    width: 6px;
}
.sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.2);
    border-radius: 3px;
}

.nav-list li {
    margin-bottom: 5px;
}

.nav-list li a {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: rgba(255,255,255,0.7); /* 稍微降低初始亮度 */
    font-size: 15px;
    transition: all 0.3s ease; /* 平滑过渡 */
    border-radius: 8px;
    margin: 0 10px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* 删除旧的悬停效果并增加新效果 */
.nav-list li a:hover {
    background-color: transparent; /* 移除背景高亮 */
    color: #fff; /* 文字变白 */
    filter: brightness(1.5); /* 提升整体亮度 (包含图标) */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5), 0 0 15px rgba(30, 108, 255, 0.3); /* 文字发光效果 */
    transform: translateX(5px); /* 悬停时轻微右移增加动态感 */
    backdrop-filter: none;
}
/* 移除激活状态样式 */
/* .nav-list li.active a {
    color: #1e6cff; 
    filter: brightness(1.2);
    text-shadow: 0 0 10px rgba(30, 108, 255, 0.5);
} */

.nav-list .icon {
    margin-right: 12px;
    width: 20px;
    height: 20px; /* 确保图片高度一致 */
    object-fit: contain; /* 保持图片比例 */
    display: block; /* 块级显示避免行内间距问题 */
    /* text-align: center;  移除文字相关样式 */
    /* font-style: normal; */
}

/* 右侧内容区域 */
.content-area {
    flex: 1;
    /* Sidebar在最左侧(200px)，MainContainer居中(90%)。
       在大屏幕上，MainContainer左边界可能远离Sidebar。
       在小屏幕上，Sidebar可能遮挡MainContainer。
       为了避免遮挡，我们给MainContainer增加左侧Padding或Margin，但这会破坏居中。
       更好的做法是让ContentArea意识到Sidebar的存在。
       如果Sidebar固定在左侧，MainContainer应该margin-left: 200px? 不，用户想要Banner全屏。
       
       折中方案：ContentArea保持原来的左内边距，但确保文字不被遮挡。
       如果Sidebar在最左侧，MainContainer居中。
       当屏幕宽度 < (200px / 5% * 2) = 4000px时，Sidebar (0-200px) 会与 MainContainer (5%-95%) 重叠。
       所以我们需要确保ContentArea的内容避开左侧200px区域。
       
       计算：Sidebar占据 viewport left 0-200px.
       MainContainer left = 5vw.
       ContentArea padding-left 需要 = max(0, 200px - 5vw) + extra_space.
       
       为了简单且稳健，我们可以设置 ContentArea padding-left 为一个较大的值，
       或者使用 calc() 基于视口宽度。
       例如：padding-left: calc(200px - 5vw + 20px); 
       但如果 5vw > 200px (屏幕宽度 > 4000px)，这会变成负数，所以需要 max()。CSS max() 支持度较好。
       或者简单点，我们假设屏幕通常在 1000-1920px 之间。
       1920px * 0.05 = 96px. Sidebar covers 200px. Overlap = 104px.
       So padding-left needs to be at least 104px + 20px gap = 124px.
       Let's stick to 220px, which is safe for most screens (220 + 96 = 316 > 200).
    */
    padding: 20px 0 20px 80px; 
    overflow: visible; /* 允许粘性导航生效 */
}

/* Banner 轮播 */
.banner-carousel {
    position: absolute; /* 绝对定位作为背景 */
    top: 0;
    left: 0;
    width: 100%;
    height: 90vh; /* 占据屏幕90%高度 */
    min-height: 500px;
    border-radius: 0; /* 全屏通常不需要圆角，或者仅底部圆角? */
    overflow: hidden;
    margin-bottom: 0;
    z-index: 0; /* 最底层 */
}

/* 遮罩层让文字更清晰 (可选) */
.banner-carousel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0.8) 100%);
    pointer-events: none;
    z-index: 1;
}

.carousel-track {
    width: 100%;
    height: 100%;
    position: relative;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.carousel-slide.active {
    opacity: 1;
    z-index: 1;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-text {
    position: absolute;
    top: 20%;
    left: 5%;
    color: white;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.en-title {
    font-size: 14px;
    letter-spacing: 2px;
    opacity: 0.8;
    margin-bottom: 10px;
}

.banner-text h2 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 20px;
}

.badge {
    background: rgba(30, 108, 255, 0.9);
    padding: 10px 15px;
    border-radius: 4px;
    display: inline-block;
}

.badge p {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
}

.carousel-indicators {
    position: absolute;
    bottom: 20px;
    right: 30px;
    z-index: 2;
    display: flex;
    gap: 10px;
}

.dot {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dot.active {
    background-color: white;
    transform: scale(1.2);
}

/* Section 通用 */
.section-block {
    margin-bottom: 40px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
}

.section-header h3 {
    font-size: 20px; /* 统一字体大小 */
    font-weight: bold;
    color: white;
}

.more-link {
    font-size: 14px;
    color: #888;
}

.more-link:hover {
    color: white;
}

/* 2x5 卡片网格布局 */
.card-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5列布局 */
    gap: 20px;
}

/* 透明圆角卡片样式 */
.transparent-card {
    background-color: transparent; /* 透明背景 */
    border-radius: 12px; /* 圆角 */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    padding: 0; /* 移除内边距，因为我们要让内容区单独高亮 */
}

.transparent-card:hover {
    transform: translateY(-8px); /* 悬停上浮 */
    /* background-color: #25252b; 移除整体背景高亮 */
}

.card-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9; /* 宽屏图片比例 */
    border-radius: 12px; /* 图片本身也圆角 */
    overflow: hidden;
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease; /* 图片缩放过渡 */
}

/* 鼠标悬停图片效果 */
.transparent-card:hover .card-image-wrapper img {
    transform: scale(1.1); /* 图片放大 */
}

/* 右上角标签 */
.card-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(90deg, #ff8f00, #ff6f00);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.card-content {
    padding: 12px 10px; /* 上下内边距，左右微调 */
    border-radius: 12px; /* 内容区也圆角 */
    transition: background-color 0.3s ease; /* 背景色过渡 */
    width: 260px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.transparent-card:hover .card-content {
    background-color: #25252b; /* 仅内容区悬停灰色背景高亮 */
}

.card-title {
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 6px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 单行截断 */
}

/* 移除悬停变蓝效果 */
/* .transparent-card:hover .card-title {
    color: #1e6cff; 
} */

.card-summary {
    color: #999;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 响应式调整 for 5列 */
@media (max-width: 1400px) {
    .card-grid-5 {
        grid-template-columns: repeat(4, 1fr); /* 屏幕变窄变4列 */
    }
}
@media (max-width: 1100px) {
    .card-grid-5 {
        grid-template-columns: repeat(3, 1fr); /* 变3列 */
    }
}
@media (max-width: 800px) {
    .card-grid-5 {
        grid-template-columns: repeat(2, 1fr); /* 变2列 */
    }
}

/* 粘性导航栏 (Scroll Sticky) */
.sticky-nav-bar {
    position: sticky;
    top: 64px; /* Sticks right below the main header */
    background-color: #2C1A4D; /* Match body bg to cover content behind */
    z-index: 99;
    padding: 15px 0;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #333;
}

.nav-title {
    font-size: 20px; /* 统一字体大小 */
    font-weight: bold;
    margin-right: 20px;
    color: white;
    white-space: nowrap;
}

.sticky-nav-list {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding-bottom: 5px; /* For scrollbar space if needed */
}

/* Hide scrollbar for sticky nav */
.sticky-nav-list::-webkit-scrollbar {
    display: none;
}
.sticky-nav-list {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.sticky-nav-list li a {
    font-size: 14px;
    color: #888;
    white-space: nowrap;
    transition: color 0.2s;
}

.sticky-nav-list li a:hover {
    color: #1e6cff;
}

/* 3列卡片网格布局 */
.card-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列布局 */
    gap: 20px;
}

/* 底部Logo+文字区域 */
.card-footer {
    display: flex;
    align-items: flex-start;
    padding: 15px 10px;
    gap: 15px;
}

.footer-logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer-text {
    flex: 1;
    overflow: hidden;
}

.footer-title {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
    line-height: 1.4;
    /*white-space: nowrap;*/
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
    width: 280px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.footer-summary {
    color: #999;
    font-size: 13px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 限制显示2行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 移除悬停变蓝效果 */
/* .transparent-card:hover .footer-title {
    color: #1e6cff;
} */

/* 响应式调整 for 3列 */
@media (max-width: 1000px) {
    .card-grid-3 {
        grid-template-columns: repeat(2, 1fr); /* 变2列 */
    }
}
@media (max-width: 600px) {
    .card-grid-3 {
        grid-template-columns: 1fr; /* 变1列 */
    }
}

/* 大网格 - 辅助样式保留 */
.center-overlay {
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(0,0,0,0.4); /* Darker overall overlay */
}

.gold-text.big {
    font-size: 28px;
    margin-bottom: 10px;
}

.highlight {
    font-size: 16px;
    color: white;
    margin-bottom: 5px;
}

/* 响应式调整 */
@media (max-width: 1200px) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .sidebar {
        left: 0; /* 保持在最左侧 */
    }
    .content-area {
        padding-left: 220px; /* 保持内容区域缩进，确保不被Sidebar遮挡 */
    }
}

@media (max-width: 900px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .sidebar {
        display: none; /* Hide sidebar on small screens for this demo */
    }
    .main-container {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 400px; /* Mobile banner height adjustment */
    }
    .content-area {
        padding-left: 0;
    }
    .banner-carousel {
        height: 400px; /* Mobile banner height */
    }
}