/* --- 核心变量 --- */
 :root {
     --primary-color: #800810;
     --secondary-color: #1a1a1a;
     --text-color: #333;
     --light-bg: #f9f9f9;
     --white: #ffffff;
     --site-width: 1140px;
     /* 正文区域标准宽度 */
     --transition: all 0.3s ease;
     --primary-dark: #60060c;
     --rl-gray: #f9f9f9;
     --ca-gray: #f4f4f4;
     --rl-text: #333;
      --ca-dark: #222;
 }

 /* =========================================
   禁止 iOS 横屏时自动放大字体
   ========================================= */
 html {
     -webkit-text-size-adjust: 100%;
     /* 针对 Safari/Chrome */
     text-size-adjust: 100%;
     /* 标准属性 */
     touch-action: manipulation !important;
 }

 /* ---全局变量-所以网页--- */
 /* 2. 定宽容器：用于导航内容和正文 (1140px) */
 .container {
     max-width: var(--site-width);
     width: 100%;
     margin: 0 auto;
     padding: 0 20px;
     /* 移动端防贴边 */
     position: relative;
 }

 /* ==========================================================================
   Fix: 智能调整标题与正文间距 (Smart Spacing)
   ========================================================================== */

 /* 当一个普通的内容板块(.section) 紧跟在 页面标题(.page-header) 后面时 */
 .page-header+.section {
     /* 强制去掉该板块顶部的 80px 间距 */
     /* 因为 page-header 底部已经有 60px 了，不需要额外再加 80px */
     padding-top: 0 !important;
 }

 /* 针对手机端的额外微调 */
 @media (max-width: 768px) {
     .page-header+.section {
         padding-top: 0 !important;
     }

     /* 同时稍微减小 Page Header 自身的底部间距，让手机上看起来更紧凑 */
     .page-header {
         padding-bottom: 40px !important;
     }
 }

 /* ---全局变量-END--- */

 /* --- 基础重置 --- */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Georgia', 'Times New Roman', serif;
 }


 body {
     color: var(--text-color);
     line-height: 1.6;
     overflow-x: hidden;
 }

 a {
     text-decoration: none;
     color: inherit;
     transition: var(--transition);
     -webkit-tap-highlight-color: transparent;
     /* 去除手机点击蓝块 */
     touch-action: manipulation;
     /* 加速点击响应 */
 }

 ul {
     list-style: none;
 }

 button {
     border: none;
     background: none;
     cursor: pointer;
     color: inherit;
     font-family: inherit;
     -webkit-tap-highlight-color: transparent;
     touch-action: manipulation;
 }

 /* --- 布局容器类 (Layout Helpers) --- */

 /* 1. 全屏容器：用于 Hero 和 背景条 */
 .container-fluid {
     width: 100%;
     padding: 0;
     margin: 0;
 }

 /* --- 顶部工具栏 (全宽背景 + 定宽内容) --- */
 .top-bar {
     background-color: #000;
     color: var(--white);
     height: 40px;
     width: 100%;
     /* 全宽 */
     display: flex;
     justify-content: center;
     /* 让内部容器居中 */
     font-family: 'Arial', sans-serif;
     font-size: 0.85rem;
     position: relative;
     z-index: 1100;
 }

 .top-bar-inner {
     display: flex;
     justify-content: flex-end;
     /* 内容靠右 */
     align-items: center;
     height: 100%;
 }

 .veracross-wrapper {
     position: relative;
     display: inline-block;
     height: 100%;
     display: flex;
     align-items: center;
 }

 .veracross-btn {
     background-color: var(--primary-color);
     padding: 4px 15px;
     border-radius: 4px;
     font-weight: bold;
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: 0.8rem;
     color: white;
     transition: var(--transition);
 }

 .veracross-btn:hover {
     background-color: #a00a14;
 }

 .veracross-menu {
     position: absolute;
     top: 100%;
     right: 0;
     width: 200px;
     background-color: var(--white);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
     border-top: 3px solid var(--primary-color);
     opacity: 0;
     visibility: hidden;
     transform: translateY(10px);
     transition: var(--transition);
     border-radius: 0 0 4px 4px;
     z-index: 1101;
 }

 .veracross-wrapper:hover .veracross-menu {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 .veracross-menu a {
     display: block;
     padding: 10px 15px;
     color: #444;
     border-bottom: 1px solid #eee;
     font-size: 0.85rem;
     text-align: left;
 }

 .veracross-menu a:hover {
     background-color: var(--light-bg);
     color: var(--primary-color);
     padding-left: 20px;
 }

 /* 保持你原有的 .veracross-menu 样式不变，只增加这个补充样式 */
 .veracross-menu.show {
     opacity: 1 !important;
     visibility: visible !important;
     transform: translateY(0) !important;
     /* 如果原样式有位移，这里复位 */
 }

 .ext-icon {
     font-size: 0.7em;
     opacity: 0.6;
     margin-left: 4px;
 }

 /* --- 主导航栏 (全宽背景 + 定宽内容) --- */
 header {
     background: var(--white);
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     position: sticky;
     top: 0;
     z-index: 1000;
     width: 100%;
 }

 nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 80px;
 }

 .logo {
     font-size: 2rem;
     font-weight: bold;
     color: var(--primary-color);
     letter-spacing: 1px;
     z-index: 1001;
     text-decoration: none;
 }

 /* 鼠标悬停时的微交互 (可选) */
 .logo:hover {
     opacity: 0.9;
 }

 .nav-menu {
     display: flex;
     gap: 20px;
     align-items: center;
     font-family: 'Arial', sans-serif;
 }

 .nav-item {
     position: relative;
     padding: 10px 0;
 }

 .nav-link {
     font-weight: 600;
     font-size: 0.9rem;
     text-transform: uppercase;
     color: var(--secondary-color);
     cursor: pointer;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

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

 .dropdown {
     position: absolute;
     top: 100%;
     left: 50%;
     transform: translateX(-50%) translateY(10px);
     background: var(--white);
     min-width: 220px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
     border-top: 3px solid var(--primary-color);
     opacity: 0;
     visibility: hidden;
     transition: var(--transition);
     border-radius: 0 0 4px 4px;
 }

 @media(min-width: 1025px) {
     .nav-item:hover .dropdown {
         opacity: 1;
         visibility: visible;
         transform: translateX(-50%) translateY(0);
     }
 }

 .dropdown li a {
     display: block;
     padding: 12px 20px;
     border-bottom: 1px solid #eee;
     font-size: 0.9rem;
     color: #555;
     text-transform: none;
 }

 .dropdown li a:hover {
     background: var(--light-bg);
     color: var(--primary-color);
     padding-left: 25px;
 }

 .nav-special {
     color: var(--primary-color);
 }

 /* --- Mobile / Hamburger --- */
 .hamburger {
     display: none;
     cursor: pointer;
     width: 30px;
     height: 25px;
     flex-direction: column;
     justify-content: space-between;
     z-index: 1001;
 }

 .hamburger span {
     display: block;
     height: 3px;
     width: 100%;
     background-color: var(--secondary-color);
     border-radius: 3px;
     transition: var(--transition);
 }

 @media (max-width: 1024px) {
     .hamburger {
         display: flex;
     }

     .nav-menu {
         position: fixed;
         top: 0;
         right: -100%;
         width: 75%;
         max-width: 300px;
         height: 100vh;
         background-color: var(--white);
         flex-direction: column;
         align-items: flex-start;
         justify-content: flex-start;
         padding-top: 100px;
         padding-left: 0;
         box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
         transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         gap: 0;
         overflow-y: auto;
         z-index: 1000;
     }

     .nav-menu.active {
         right: 0;
     }

     .nav-item {
         width: 100%;
         padding: 0;
         border-bottom: 1px solid #eee;
     }

     .nav-link {
         padding: 15px 25px;
         width: 100%;
         font-size: 1.1rem;
     }

     .dropdown {
         position: static;
         opacity: 1;
         visibility: visible;
         transform: none;
         box-shadow: none;
         border-top: none;
         background-color: #f5f5f5;
         display: none;
         width: 100%;
         padding-left: 10px;
     }

     .dropdown.show {
         display: block;
     }

     .hamburger.active span:nth-child(1) {
         transform: translateY(11px) rotate(45deg);
         background-color: var(--primary-color);
     }

     .hamburger.active span:nth-child(2) {
         opacity: 0;
     }

     .hamburger.active span:nth-child(3) {
         transform: translateY(-11px) rotate(-45deg);
         background-color: var(--primary-color);
     }

     .overlay {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.5);
         z-index: 999;
         display: none;
         opacity: 0;
         transition: var(--transition);
     }

     .overlay.active {
         display: block;
         opacity: 1;
     }
 }

 /* --- Hero Section (全屏显示，不限宽) --- */
 .hero {
     /* 关键修改：宽度 100%，不设 max-width */
     width: 100%;
     height: 90vh;
     /* 保持大器的高度 */
     /* 替换为 Unsplash 上的毕业典礼图片以匹配您的截图风格 */
     background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://prismsus.org/images/home/campus_1.jpg');
     background-size: cover;
     background-position: center bottom;
     /* 确保人物在底部显示良好 */
     background-attachment: fixed;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: var(--white);
 }

 .hero-content {
     /* 即使背景全屏，文字内容最好还是稍微聚拢一点，方便阅读 */
     max-width: 900px;
     padding: 0 20px;
 }

 .hero-content h1 {
     font-size: 3.5rem;
     margin-bottom: 20px;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 }

 .hero-content p {
     font-size: 1.5rem;
     font-family: 'Arial', sans-serif;
     font-weight: 300;
     margin-bottom: 40px;
 }

 .cta-btn {
     padding: 15px 40px;
     background-color: var(--primary-color);
     color: var(--white);
     font-size: 1rem;
     text-transform: uppercase;
     letter-spacing: 1px;
     border: 2px solid var(--primary-color);
     transition: var(--transition);
 }

 .cta-btn:hover {
     background-color: transparent;
     border-color: var(--white);
 }

 /* --- 普通 Section (正文内容，限制 1140px) --- */
 .section {
     padding: 80px 0;
     /* 上下留白 */
     width: 100%;
 }

 .section.light {
     background-color: var(--light-bg);
 }

 /* 内部内容限制在 1140px */
 .section .container {
     /* 继承自上方定义的 .container max-width: 1140px */
 }

 .grid-2 {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 50px;
     align-items: center;
 }

 .section-title {
     font-size: 2.5rem;
     color: var(--primary-color);
     margin-bottom: 20px;
     position: relative;
     display: inline-block;
 }

 .section-title::after {
     content: '';
     position: absolute;
     bottom: -10px;
     left: 0;
     width: 60px;
     height: 3px;
     background: var(--primary-color);
 }

 .fade-in-up {
     opacity: 0;
     transform: translateY(30px);
     transition: opacity 0.8s ease-out, transform 0.8s ease-out;
 }

 .fade-in-up.visible {
     opacity: 1;
     transform: translateY(0);
 }

 footer {
     background: #111;
     color: #aaa;
     padding: 60px 0;
     text-align: center;
     font-family: 'Arial', sans-serif;
 }

 @media (max-width: 1024px) {
     .grid-2 {
         grid-template-columns: 1fr;
     }

     .hero-content h1 {
         font-size: 2.5rem;
     }

     .section {
         padding: 60px 0;
     }
 }

 /* --- 移动端背景图修复 --- */
 @media screen and (max-width: 1180px) {

     .hero {
         /* [核心修复] 强制取消视差固定，改回跟随滚动 */
         /* iOS 浏览器不支持 fixed + cover 组合，改为 scroll 即可显示 */
         background-attachment: scroll !important;

         /* 确保图片居中并铺满 */
         background-position: center center !important;
         background-size: cover !important;

         /* [可选] 防止高度塌陷，给一个最小高度保障 */
         min-height: 60vh;
     }
 }

 /* @media (max-width: 1024px) {
     .hero {
        
         background-attachment: scroll !important;

         background-position: center center !important;

         background-size: cover !important;
     }
 } */


 /* --- 针对此 Section 的样式补充 --- */

 .features-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     /* 强制三列 */
     gap: 30px;
     margin-bottom: 50px;
 }

 .feature-card {
     background: #fff;
     padding: 40px 30px;
     border-radius: 8px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
     /* 轻柔的阴影 */
     text-align: center;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     border-bottom: 3px solid transparent;
     /* 预留底部边框位置 */
 }

 /* 鼠标悬停效果：上浮 + 底部红条 */
 .feature-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(128, 8, 16, 0.15);
     border-bottom: 3px solid var(--primary-color);
 }

 .icon-box {
     color: var(--primary-color);
     margin-bottom: 20px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 70px;
     height: 70px;
     background: rgba(128, 8, 16, 0.05);
     /* 极淡的红色背景 */
     border-radius: 50%;
 }

 .feature-card h3 {
     font-size: 1.25rem;
     color: var(--primary-color);
     margin-bottom: 15px;
     font-family: 'Georgia', serif;
 }

 .feature-card p {
     font-size: 0.95rem;
     color: #555;
     line-height: 1.7;
     font-family: 'Arial', sans-serif;
 }

 /* 按钮组样式 */
 .cta-group {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-top: 40px;
 }

 .btn-primary {
     background-color: var(--primary-color);
     color: white;
     padding: 15px 40px;
     border-radius: 4px;
     text-transform: uppercase;
     font-weight: bold;
     letter-spacing: 1px;
     border: 2px solid var(--primary-color);
 }

 .btn-primary:hover {
     background-color: #60060c;
     border-color: #60060c;
 }

 .btn-outline {
     background-color: transparent;
     color: var(--primary-color);
     padding: 15px 40px;
     border-radius: 4px;
     text-transform: uppercase;
     font-weight: bold;
     letter-spacing: 1px;
     border: 2px solid var(--primary-color);
 }

 .btn-outline:hover {
     background-color: var(--primary-color);
     color: white;
 }

 /* 响应式适配 */
 @media (max-width: 768px) {
     .features-grid {
         grid-template-columns: 1fr;
         /* 手机端变为单列 */
         gap: 20px;
     }

     .section-header h2 {
         font-size: 2rem;
     }

     .cta-group {
         flex-direction: column;
         width: 100%;
     }

     .btn-primary,
     .btn-outline {
         width: 100%;
         text-align: center;
     }
 }


 /* --- 补充样式：小按钮 --- */
 .btn-outline-sm {
     padding: 5px 15px;
     border: 1px solid #ccc;
     border-radius: 20px;
     font-size: 0.8rem;
     color: #666;
     transition: all 0.3s ease;
     display: inline-flex;
     align-items: center;
 }

 .btn-outline-sm:hover {
     border-color: var(--primary-color);
     color: var(--primary-color);
     background: rgba(128, 8, 16, 0.05);
 }

 /* --- 日历组件基础样式 (同上版，略微优化) --- */
 .calendar-widget {
     background: #fff;
     border-radius: 8px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
     overflow: hidden;
 }

 .calendar-tabs {
     display: flex;
     border-bottom: 1px solid #eee;
     background: #fff;
 }

 .day-tab {
     flex: 1;
     text-align: center;
     padding: 20px 10px;
     cursor: pointer;
     transition: all 0.3s ease;
     border-right: 1px solid #f9f9f9;
 }

 .day-tab:last-child {
     border-right: none;
 }

 .day-tab:hover {
     background-color: #fcfcfc;
 }

 .day-name {
     display: block;
     font-size: 0.75rem;
     color: #999;
     margin-bottom: 5px;
     font-weight: 600;
     letter-spacing: 1px;
 }

 .day-date {
     display: block;
     font-size: 1.4rem;
     font-weight: bold;
     color: #333;
     font-family: 'Georgia', serif;
 }

 /* 激活状态 */
 .day-tab.active {
     background-color: var(--primary-color);
     color: white;
 }

 .day-tab.active .day-name,
 .day-tab.active .day-date {
     color: white;
 }

 .calendar-content {
     padding: 30px;
     min-height: 220px;
 }

 .event-group {
     display: none;
     animation: fadeIn 0.4s ease;
 }

 .event-group.active-group {
     display: block;
 }

 .event-item {
     display: flex;
     align-items: flex-start;
     padding-bottom: 20px;
     margin-bottom: 20px;
     border-bottom: 1px solid #f0f0f0;
 }

 .event-item:last-child {
     border-bottom: none;
     margin-bottom: 0;
     padding-bottom: 0;
 }

 .event-time {
     width: 90px;
     font-weight: bold;
     color: var(--primary-color);
     flex-shrink: 0;
     font-family: 'Arial', sans-serif;
     font-size: 0.9rem;
     margin-top: 2px;
 }

 .event-details h4 {
     font-size: 1.05rem;
     margin-bottom: 4px;
     color: #333;
     font-weight: 600;
 }

 .event-details p {
     font-size: 0.85rem;
     color: #777;
     margin: 0;
 }

 .empty-state {
     text-align: center;
     color: #999;
     padding: 30px 0;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(5px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @media (max-width: 768px) {
     .calendar-tabs {
         overflow-x: auto;
         justify-content: flex-start;
     }

     .day-tab {
         min-width: 75px;
         flex: none;
     }

     .event-item {
         flex-direction: row;
     }

     /* 手机上保持左右布局 */
 }


 /* --- Loading Spinner --- */
 .loading-spinner {
     text-align: center;
     padding: 50px 0;
     color: #999;
 }

 .spinner {
     width: 40px;
     height: 40px;
     border: 4px solid #f3f3f3;
     border-top: 4px solid var(--primary-color);
     border-radius: 50%;
     margin: 0 auto 15px;
     animation: spin 1s linear infinite;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }


 /* --- [Fix] 手机端日历横向滑动优化 --- */
 @media (max-width: 768px) {
     .calendar-tabs {
         display: flex;
         overflow-x: auto;
         /* 关键：允许横向滚动 */
         white-space: nowrap;
         /* 防止换行 */
         justify-content: flex-start;
         /* 内容从左侧开始排列 */

         /* 优化滚动体验 */
         -webkit-overflow-scrolling: touch;
         /* iOS 惯性滚动，手感更顺滑 */
         scrollbar-width: none;
         /* Firefox 隐藏滚动条 */
         padding-bottom: 5px;
         /* 预留一点底部空间 */
     }

     /* Chrome/Safari 隐藏滚动条 (看起来更像原生App) */
     .calendar-tabs::-webkit-scrollbar {
         display: none;
     }

     .day-tab {
         /* [关键修改] */
         min-width: 22%;
         /* 设置最小宽度，保证一屏大概显示 4.5 个，提示用户可以滑动 */
         flex: 0 0 auto;
         /* 禁止压缩，保持宽度 */
         padding: 15px 0;
         /* 调整内边距 */
         border-right: 1px solid #f0f0f0;
         /* 恢复分割线 */
     }

     /* 选中状态稍微大一点点视觉反馈 */
     .day-tab.active {
         transform: scale(1);
         /* 手机上取消缩放动画，防止布局抖动 */
     }
 }

 /* --- [Fix] 手机端统一标题字号 (覆盖内联样式) --- */
 @media (max-width: 768px) {

     /* 1. 针对带有 class="section-title" 的标题 */
     .section-title {
         font-size: 1.8rem !important;
         /* 强制覆盖 HTML 中的 2.5rem */
         line-height: 1.3 !important;
         /* 优化多行标题的行间距 */
         margin-bottom: 10px !important;
     }

     /* 2. 针对 Section 1 (Take Your Passion) 那种直接写在 h2 里的情况 */
     .section-header h2 {
         font-size: 1.8rem !important;
         /* 同样强制改为 1.8rem */
         line-height: 1.3 !important;
     }

     /* 3. 修复标题下划线的位置 */
     .section-title::after,
     .section-header div[style*="height: 3px"] {
         /* 针对内联样式的下划线div */
         width: 50px !important;
         margin: 10px auto 0 !important;
     }

     .page-header h1 {
         font-size: 1.8rem !important;
     }
 }

 /* --- [Fix] 修复日历标题与按钮拥挤 --- */
 @media (max-width: 768px) {
     .calendar-header {
         /* 1. 强制垂直排列 (标题在上，按钮在下) */
         flex-direction: column !important;

         /* 2. 左对齐 */
         align-items: flex-start !important;

         /* 3. 增加两者之间的间距 */
         gap: 20px !important;
     }

     /* 可选：让按钮在手机上稍微大一点，更好点击 */
     .calendar-header .btn-outline-sm {
         margin-top: 5px;
         padding: 8px 20px;
     }
 }


 /* --- News Section Styles --- */
 /* 1. Grid 布局: 3列,自动换行 */
 .news-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     /* 强制3列平分 */
     gap: 30px;
     /* 卡片间距 */
 }

 /* 2. 卡片基础样式 */
 .news-card {
     background: #fff;
     border-radius: 8px;
     overflow: hidden;
     /* 确保图片放大时不溢出圆角 */
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
     /* 默认状态的柔和阴影 */
     transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
     /* 使用贝塞尔曲线让过渡更顺滑高级 */
     height: 100%;
     /* 确保同一样高 */
     border-bottom: 3px solid transparent;
     /* 预留底部红条位置 */
 }

 /* 链接包裹层，移除默认下划线 */
 .news-link-wrapper {
     display: flex;
     flex-direction: column;
     height: 100%;
     color: inherit;
 }

 /* 3. 图片容器与动态效果 */
 .news-img-box {
     position: relative;
     height: 220px;
     /* 固定高度，确保整齐，大约 3:2 比例 */
     overflow: hidden;
     /* 关键：隐藏溢出的图片 */
 }

 .news-img-box img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* 确保图片填满容器且不变形 */
     transition: transform 0.6s ease;
     /* 图片放大的过渡时间，稍微慢点显高级 */
 }

 /* 日期标签小部件 */
 .news-date {
     position: absolute;
     top: 15px;
     left: 15px;
     background: rgba(255, 255, 255, 0.9);
     padding: 4px 10px;
     font-size: 0.75rem;
     font-weight: bold;
     color: var(--secondary-color);
     border-radius: 4px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     font-family: 'Arial', sans-serif;
 }

 /* 4. 内容区域样式 */
 .news-content {
     padding: 25px;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
     /* 让内容区撑满剩余空间 */
 }

 .news-heading {
     font-size: 1.35rem;
     font-family: 'Georgia', serif;
     color: var(--secondary-color);
     margin-bottom: 12px;
     line-height: 1.3;
     transition: color 0.3s ease;
     /* 限制标题最多显示2行，超出省略号 (Webkit内核浏览器) */
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .news-excerpt {
     font-size: 0.95rem;
     color: #666;
     font-family: 'Arial', sans-serif;
     margin-bottom: 20px;
     flex-grow: 1;
     /* 撑开空间，把 Read More 挤到底部 */
     /* 限制描述最多显示3行 */
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .read-more {
     font-size: 0.9rem;
     font-weight: bold;
     color: var(--primary-color);
     font-family: 'Arial', sans-serif;
     transition: letter-spacing 0.3s ease;
 }

 /* --- 5. 核心交互动效 (Hover Effects) --- */

 /* 整体卡片悬停状态 */
 .news-card:hover {
     transform: translateY(-8px);
     /* 向上浮动 */
     box-shadow: 0 15px 30px rgba(128, 8, 16, 0.15);
     /* 加深阴影，带一点点红色调 */
     border-bottom-color: var(--primary-color);
     /* 底部出现红条 */
 }

 /* 悬停时图片放大 */
 .news-card:hover .news-img-box img {
     transform: scale(1.08);
     /* 轻微放大 8% */
 }

 /* 悬停时标题变红 */
 .news-card:hover .news-heading {
     color: var(--primary-color);
 }

 /* 悬停时 Read More 箭头动一下 */
 .news-card:hover .read-more {
     letter-spacing: 1px;
     /* 字间距稍微拉开一点点 */
 }

 /* --- 响应式适配 --- */
 @media (max-width: 1024px) {
     .news-grid {
         grid-template-columns: repeat(2, 1fr);
         /* 平板端 2列 */
     }
 }

 @media (max-width: 768px) {
     .news-grid {
         grid-template-columns: 1fr;
         /* 手机端 1列 */
         gap: 40px;
     }

     .news-img-box {
         height: 200px;
         /* 手机端图片稍微矮一点 */
     }
 }

 /* --- [Fix] News Archive 按钮文字重叠修复 --- */
 @media (max-width: 768px) {

     /* 特别针对 News 区域底部的按钮 */
     .news-section .btn-outline {
         white-space: normal !important;
         /* 允许文字自动换行 */
         height: auto !important;
         /* 取消固定高度，让盒子随文字变高 */
         line-height: 1.6 !important;
         /* 增加行间距，防止两行文字叠在一起 */
         padding: 15px 10px !important;
         /* 减小左右内边距，给文字更多空间 */
         font-size: 0.85rem !important;
         /* 稍微减小字号，避免太拥挤 */
         display: block !important;
         /* 块级显示 */
         width: 100% !important;
         /* 占满宽度 */
     }
 }

 /* 控制主页news section divider */
 .news-section h2,
 #news h2,
 .news-section .section-title {
     text-align: center !important;
     /* 让文字居中 */
     width: 100%;
     /* 确保占满整行 */
     position: relative;
     /* 确保定位准确 */
 }

 /* 2. 选中标题生成的红线 (::after 伪元素) */
 .news-section h2::after,
 #news h2::after,
 .news-section .section-title::after {
     content: "";
     /* 确保伪元素存在 */
     display: block;
     /* 变成块级元素才能设置边距 */

     /* [核心] 左右自动边距 = 居中 */
     margin-left: auto !important;
     margin-right: auto !important;

     /* 假如原来的 CSS 是用 absolute 定位的，这行能修正它 */
     position: relative !important;
     left: auto !important;

     /* 确保红线样式还在 (以防万一被覆盖) */
     width: 65px;
     height: 3px;
     background-color: var(--primary-color);
     margin-top: 15px;
     /* 红线和文字的间距 */
     margin-bottom: 30px;
     /* 红线和下面内容的间距 */
 }



 /* --- Footer Redesign Styles --- */
 footer {
     background: #111;
     color: #aaa;
     padding: 80px 0 30px;
     /* 增加顶部内边距 */
     font-family: 'Arial', sans-serif;
     text-align: left;
     /* 恢复左对齐 */
 }

 /* Footer Grid 布局 */
 .footer-grid {
     display: grid;
     grid-template-columns: 2fr 1fr 1.5fr;
     /* 左侧稍宽，中间窄，右侧中等 */
     gap: 50px;
     margin-bottom: 60px;
     border-bottom: 1px solid #222;
     /* 底部 subtle 分割线 */
     padding-bottom: 50px;
 }

 .footer-col h4 {
     color: var(--white);
     font-size: 1.1rem;
     margin-bottom: 25px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 /* Col 1: Logo & Contact */
 .footer-logo {
     width: 200px;
     margin-bottom: 20px;
     transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     /* 有弹性的放大 */
 }

 address {
     font-style: normal;
     line-height: 1.8;
     font-size: 0.9rem;
 }

 address strong {
     color: var(--white);
     font-size: 1rem;
 }

 /* Col 2: Navigation */
 .footer-nav ul li {
     margin-bottom: 12px;
 }

 .footer-nav ul li a {
     color: #aaa;
     font-size: 0.95rem;
     transition: all 0.3s ease;
     display: inline-block;
 }

 .footer-nav ul li a:hover {
     color: var(--primary-color);
     /* 悬停变品牌红 */
     transform: translateX(5px);
     /* 轻微右移增加动感 */
 }

 /* Col 3: Accreditations */
 .footer-auth p {
     font-size: 0.9rem;
     margin-bottom: 20px;
 }

 .accreditation-logos img {
     max-width: 100%;
     /* 让组合图自适应容器宽度 */
     height: auto;
     border-radius: 4px;
     /* 可选：如果觉得原图颜色太跳脱，可以加一点灰度滤镜，悬停恢复 */
     /* filter: grayscale(30%); */
     /* transition: filter 0.3s ease; */
 }

 /* .accreditation-logos img:hover { filter: grayscale(0%); } */

 /* Bottom Copyright Bar */
 .footer-bottom {
     text-align: center;
     font-size: 0.85rem;
     color: #666;
 }

 .footer-bottom a {
     color: #666;
     margin: 0 10px;
     text-decoration: underline;
 }

 .footer-bottom a:hover {
     color: var(--primary-color);
 }

 /* 响应式适配 (Mobile & Tablet) */
 @media (max-width: 1024px) {
     .footer-grid {
         grid-template-columns: 1fr 1fr;
         /* 平板变两列 */
         gap: 40px;
     }

     .footer-contact {
         grid-column: span 2;
     }

     /* 联系方式占满一行 */
 }

 @media (max-width: 768px) {
     footer {
         padding: 60px 0 30px;
         text-align: center;
         /* 手机端居中对齐 */
     }

     .footer-grid {
         grid-template-columns: 1fr;
         /* 手机变单列 */
         gap: 50px;
     }

     .footer-contact {
         grid-column: span 1;
     }

     .footer-logo {
         margin: 0 auto 25px;
     }

     /* Logo 居中 */
     .footer-nav ul li a:hover {
         transform: none;
     }

     /* 移除手机端的位移动画 */
 }

 /* 认证 Logo 容器：Flex 布局，水平排列 */
 /* 单个 Logo 的盒子限制 */
 .accreditation-logos {
     display: flex;
     align-items: center;
     gap: 15px;
     margin-top: 20px;
     flex-wrap: wrap;
 }

 /* [修改点] 单个 Logo 的盒子：大幅加宽加高 */
 .auth-logo-box {
     background: #fff;
     padding: 10px;
     border-radius: 6px;
     width: 160px;
     height: 80px;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
     /* 关键动画属性 */
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
     border: 2px solid transparent;
     /* 预留边框位置，防止悬停时抖动 */
     position: relative;
     top: 0;
 }

 .auth-logo-box img {
     max-width: 100%;
     max-height: 100%;
     display: block;
     object-fit: contain;
     transition: transform 0.3s ease;
 }

 /* 悬停状态：盒子 */
 .auth-logo-box:hover {
     transform: translateY(-5px);
     /* 向上浮动 5px */
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
     /* 阴影加深 */
     border-color: var(--primary-color);
     /* 出现品牌红色边框 */
 }

 /* 悬停状态：盒子里的图片 */
 .auth-logo-box:hover img {
     transform: scale(1.05);
     /* 图片也微微放大一点 */
 }

 /* 3. 链接的基本修复 */
 .footer-logo-link:hover,
 .auth-logo-box:hover {
     cursor: pointer;
 }

 /* 1. 左侧学校主 Logo 动画 */
 .footer-logo-link {
     display: inline-block;
     transition: opacity 0.3s ease;
 }

 /* 悬停状态：Logo 微微放大 */
 .footer-logo-link:hover .footer-logo {
     transform: scale(1.05);
     /* 放大 5% */
     opacity: 1;
     /* 保持高亮 */
 }

 /* 手机端适配调整 */
 @media (max-width: 768px) {
     .accreditation-logos {
         justify-content: center;
         /* 手机上居中显示 */
     }
 }

 /* [修改点] Footer 专用大按钮 */
 .btn-footer-cta {
     display: inline-block;
     margin-top: 30px;
     padding: 12px 35px;
     /* 增加内边距，按钮变大 */
     font-size: 1rem;
     /* 字体变大 */
     font-weight: bold;
     color: #fff;
     border: 2px solid rgba(255, 255, 255, 0.3);
     border-radius: 4px;
     /*稍微方正一点，更显正式 */
     text-transform: uppercase;
     letter-spacing: 1px;
     transition: all 0.3s ease;
     background: rgba(255, 255, 255, 0.05);
 }

 .btn-footer-cta:hover {
     background: var(--primary-color);
     border-color: var(--primary-color);
     color: #fff;
     transform: translateY(-2px);
     /* 悬停微上浮 */
 }

 /* 手机端适配：如果 Logo 并排太挤，让它们自动换行 */
 @media (max-width: 480px) {
     .auth-logo-box {
         width: 140px;
         /* 手机上稍微收一点，但依然保持较大尺寸 */
         height: 70px;
     }
 }


 /* New Faculty & Staff 页面 */
 /* 1. 页面头部 (Page Header) */
 .page-header {
     text-align: center;
     padding: 80px 0 60px;
     background: #fff;
     animation: fadeIn 0.8s ease-out;
 }

 .page-header h1 {
     font-size: 3rem;
     color: var(--primary-color);
     /* 确保您定义了此变量，否则替换为 #800810 */
     margin-bottom: 20px;
 }

 .page-header p {
     font-family: 'Arial', sans-serif;
     color: #666;
     max-width: 700px;
     margin: 0 auto;
     font-size: 1.1rem;
     line-height: 1.6;
 }

 .divider {
     width: 60px;
     height: 3px;
     background: #800810;
     margin: 20px auto 30px;
 }

 /* 2. 教职工网格 (Staff Grid - 4 Columns) */
 .staff-section {
     padding-bottom: 100px;
 }

 .staff-grid {
     display: grid;
     /* 核心：PC端固定每行 4 列 */
     grid-template-columns: repeat(4, 1fr);
     gap: 30px;
 }

 /* 单个卡片 */
 .staff-card {
     background: #fff;
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
     position: relative;
     text-align: center;
     border-bottom: 3px solid transparent;
 }

 /* 悬停效果 */
 .staff-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 15px 30px rgba(128, 8, 16, 0.15);
     border-bottom-color: #800810;
 }

 /* 图片容器 */
 /* [修改] 图片容器：放弃固定高度，使用科学的纵横比 */
 .staff-img-box {
     width: 100%;
     /* height: 260px;  <-- 删除这行旧代码 */

     /* [新增关键代码] 强制设定为 3:4 的黄金肖像比例 */
     /* 浏览器会自动根据宽度计算出最合适的高度 */
     aspect-ratio: 3 / 4;

     overflow: hidden;
     background: #eee;
     position: relative;
     /* 增加定位基准 */
 }

 /* [修改] 图片本身：确保头部不被裁切 */
 .staff-img-box img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* 保持填充效果 */

     /* [新增关键代码] 图像定位：优先显示顶部中间 */
     /* 这确保了即使照片比例不对，被裁掉的也是身体部分，而不是头部 */
     object-position: top center;
     transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.3s ease;
     filter: grayscale(10%);
 }

 .staff-card:hover .staff-img-box img {
     transform: scale(1.05);
     filter: grayscale(0%);
 }

 /* 信息区域 */
 .staff-info {
     padding: 20px 15px;
 }

 .staff-name {
     font-size: 1.15rem;
     font-weight: bold;
     color: #1a1a1a;
     margin-bottom: 5px;
     font-family: 'Georgia', serif;
     transition: color 0.3s;
 }

 .staff-card:hover .staff-name {
     color: #800810;
 }

 .staff-title {
     font-family: 'Arial', sans-serif;
     font-size: 0.8rem;
     color: #777;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 /* 3. 模态框 (Popup Modal) */
 /* --- 修复 CSS --- */
 .modal-overlay {
     /* 之前的样式保持不变... */
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 99999 !important;
     /* [修改] 强制层级最高，超过 Header */
     background: rgba(0, 0, 0, 0.8);
     /* 稍微深一点 */
     backdrop-filter: blur(5px);

     /* [修改] 确保默认状态不仅是隐藏，而且不挡鼠标 */
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     /* 关键：隐藏时不阻挡点击 */

     transition: all 0.3s ease;
     display: flex;
     /* 保持 flex 布局，但通过 visibility 控制显示 */
     justify-content: center;
     align-items: center;
 }

 .modal-overlay.open {
     opacity: 1 !important;
     visibility: visible !important;
     pointer-events: auto !important;
     /* 显示时允许点击 */
 }

 .modal-content {
     background: #fff;
     width: 900px;
     max-width: 100%;
     max-height: 90vh;
     border-radius: 8px;
     overflow: hidden;
     display: flex;
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
     transform: translateY(20px);
     transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     position: relative;
 }

 .modal-overlay.open .modal-content {
     transform: translateY(0);
 }

 .modal-left {
     width: 35%;
     background: #f0f0f0;
 }

 .modal-left img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .modal-right {
     width: 65%;
     padding: 50px;
     overflow-y: auto;
     position: relative;
 }

 /* 1. 基础优化：扩大点击热区 (所有设备生效) */
 .modal-close {
     position: absolute;
     top: 20px;
     right: 30px;

     /* 字体设置：足够大，显眼 */
     font-size: 3.5rem;
     line-height: 1;
     font-weight: 300;
     /* 细一点更优雅 */

     /* 颜色与背景 */
     color: #888;
     background: transparent;
     /* 电脑上不需要背景圈 */

     /* 交互 */
     cursor: pointer;
     transition: color 0.3s ease, transform 0.3s ease;
     z-index: 100;

     /* 移除可能存在的固定宽高限制，让它像文字一样自然 */
     width: auto;
     height: auto;
 }

 .modal-close:hover {
     color: var(--primary-color);
     transform: rotate(90deg);
     /* 增加一个旋转动效，增加精致感 */
 }

 .modal-name {
     font-size: 2.2rem;
     color: #800810;
     margin-bottom: 5px;
     font-family: 'Georgia', serif;
 }

 .modal-title {
     font-size: 1.1rem;
     color: #555;
     font-family: 'Arial', sans-serif;
     margin-bottom: 30px;
     display: inline-block;
     border-bottom: 2px solid #eee;
     padding-bottom: 10px;
 }

 .modal-bio {
     font-family: 'Arial', sans-serif;
     font-size: 1rem;
     color: #444;
     line-height: 1.8;
 }

 .modal-bio p {
     margin-bottom: 15px;
 }

 /* 响应式适配 */
 @media (max-width: 1200px) {
     .staff-grid {
         grid-template-columns: repeat(3, 1fr);
     }

     /* 中屏 3列 */
 }

 @media (max-width: 768px) {
     .staff-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 15px;
     }

     /* 平板 2列 */
     .modal-content {
         flex-direction: column;
         overflow-y: scroll;
     }

     .modal-left {
         width: 100%;
         height: 250px;
     }

     .modal-right {
         width: 100%;
         padding: 25px;
     }

     .modal-close {
         /* 强制设置大触控区 */
         width: 44px;
         height: 44px;

         /* 使用 Flexbox 完美居中 X 符号 */
         display: flex;
         align-items: center;
         justify-content: center;

         /* 调整 X 的大小以适应圆圈 */
         font-size: 2rem;
         font-weight: 400;

         /* 位置微调，防止贴边 */
         top: 15px;
         right: 15px;

         /* 手机端样式：半透明圆圈背景 */
         background-color: rgba(255, 255, 255, 0.9);
         border-radius: 50%;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
         color: #333;
     }

     /* 手机端按下效果 */
     .modal-close:active {
         background-color: var(--primary-color);
         color: #fff;
         transform: scale(0.9);
         /* 按下微缩 */
     }

     /* 手机端移除旋转动画，保持干脆 */
     .modal-close:hover {
         transform: none;
     }

     /* 让整个弹窗关闭的动画变快一点，减少“拖沓感” */
     .modal-overlay {
         transition: opacity 0.2s ease !important;
         /* 从 0.3s 改为 0.2s */
     }
 }

 @media (max-width: 480px) {
     .staff-grid {
         grid-template-columns: 1fr;
     }

     /* 手机 1列 */
 }

 /* --- 弹窗里的 Email 样式 --- */
 .modal-email {
     margin-bottom: 20px;
     /* 和下方的 Bio 拉开距离 */
     font-family: 'Arial', sans-serif;
 }

 .modal-email a {
     color: var(--primary-color);
     /* 品牌红 */
     text-decoration: none;
     font-weight: bold;
     font-size: 1rem;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 5px 0;
     border-bottom: 1px dashed transparent;
     /* 预留虚线 */
     transition: all 0.3s;
 }

 .modal-email a:hover {
     opacity: 0.8;
     border-bottom-color: var(--primary-color);
     /* 悬停显示虚线 */
 }

 /* 自动加一个小信封图标 */
 /* 修改这一段即可 */
 .modal-email a::before {
     content: "✉";
     font-size: 1.6rem;
     /* [修改] 放大图标 */
     margin-right: 5px;
     /* [修改] 稍微拉近一点文字 */
     margin-top: -3px;
     /* [修改] 向上微调，保证垂直居中 */
     line-height: 1;
     /* 防止撑开行高 */
 }


 /* --- Welcome Page Styles --- */

 .section {
     padding: 80px 0;
     overflow: hidden;
     /* 防止浮动溢出 */
 }

 .section.light {
     background-color: var(--light-bg);
 }

 .section-title {
     font-size: 2.2rem;
     color: var(--primary-color);
     margin-bottom: 25px;
     font-family: 'Georgia', serif;
     position: relative;
     display: inline-block;
 }

 /* 页面大标题 */
 .page-header {
     text-align: center;
     padding: 80px 0 50px;
     background: #fff;
 }

 .page-header h1 {
     font-size: 3rem;
     color: var(--primary-color);
     margin-bottom: 10px;
 }

 .page-header .divider {
     width: 60px;
     height: 3px;
     background: var(--primary-color);
     margin: 20px auto;
 }

 /* .page-header p {
     font-size: 1.1rem;
     color: #666;
     font-style: italic;
 } */

 /* =========================================
           2. 杂志风格布局 (Float Layout for Text Wrapping)
           ========================================= */

 .wrap-container {
     width: 100%;
     display: block;
     /* 确保是块级元素 */
 }

 .wrap-container p {
     margin-bottom: 20px;
     color: #444;
     font-size: 1.05rem;
     line-height: 1.8;
     /* 增加行高，提升阅读舒适度 */
     text-align: justify;
     /* 关键：两端对齐，让文字块像报纸一样整齐 */
 }

 /* 图片容器样式 */
 .img-frame {
     position: relative;
     background: #fff;
     /* [核心修改1] 增加厚实的白边，像实体照片一样 */
     padding: 8px;
     border-radius: 4px;

     /* [核心修改2] 多层阴影叠加，制造扎实的物理厚度感 */
     /* 第一层：紧贴的深色阴影，定住根基 */
     /* 第二层：大范围的柔和阴影，制造悬浮氛围 */
     box-shadow:
         0 5px 15px rgba(0, 0, 0, 0.1),
         0 15px 35px rgba(0, 0, 0, 0.05);

     /* 初始位置和过渡动画 */
     transform: translateY(0);
     transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
     /* 使用更有弹性的贝塞尔曲线 */

     margin-bottom: 20px;
     z-index: 10;
     /* 确保浮起时层级够高 */
 }

 .img-frame img {
     width: 100%;
     height: auto;
     display: block;
     border-radius: 2px;
     /* 稍微降低一点默认对比度，让悬停时更亮 */
     filter: contrast(95%);
     transition: filter 0.4s ease;
 }

 /* [核心修改3] 鼠标悬停时的“上浮”交互 */
 .img-frame:hover {
     /* 向上物理位移 12像素 */
     transform: translateY(-12px);

     /* 阴影变得更大、更虚、更远，模拟离地高度增加 */
     box-shadow:
         0 20px 40px rgba(0, 0, 0, 0.15),
         0 35px 70px rgba(0, 0, 0, 0.1);
 }

 .img-frame:hover img {
     filter: contrast(105%);
 }

 .caption {
     font-size: 0.85rem;
     color: #888;
     text-align: center;
     padding-top: 8px;
     font-family: 'Arial', sans-serif;
     font-style: italic;
 }

 /* [核心] 浮动类 */
 .float-right {
     float: right;
     width: 35%;
     /* 图片宽度占比 */
     margin-left: 40px;
     /* 左侧留白 */
     margin-bottom: 20px;
     clear: right;
 }

 .float-left {
     float: left;
     width: 35%;
     /* 图片宽度占比 */
     margin-right: 40px;
     /* 右侧留白 */
     margin-bottom: 20px;
     clear: left;
 }

 /* 签名样式 */
 .signature {
     margin-top: 30px;
     padding-top: 20px;
     border-top: 1px solid #ddd;
     display: inline-block;
     min-width: 200px;
 }

 .signature strong {
     color: var(--primary-color);
     font-size: 1.1rem;
     font-family: 'Georgia', serif;
 }

 .signature span {
     display: block;
     color: #777;
     font-size: 0.9rem;
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-top: 5px;
 }

 /* 清除浮动工具 */
 .clearfix::after {
     content: "";
     display: table;
     clear: both;
 }

 /* =========================================
           3. 其他板块样式 (Quote, Mission, Beliefs)
           ========================================= */

 /* Quote Block */
 .quote-block {
     background-color: var(--primary-color);
     color: #fff;
     padding: 40px 50px;
     border-radius: 6px;
     margin-bottom: 50px;
     font-family: 'Georgia', serif;
     font-size: 1.25rem;
     line-height: 1.6;
     position: relative;
     box-shadow: 0 15px 30px rgba(128, 8, 16, 0.2);
 }

 .quote-block::before {
     content: "“";
     font-size: 6rem;
     position: absolute;
     top: -10px;
     left: 10px;
     opacity: 0.2;
     font-family: sans-serif;
 }

 .quote-author {
     text-align: right;
     margin-top: 15px;
     font-size: 1rem;
     font-weight: bold;
     opacity: 0.9;
     font-family: 'Arial', sans-serif;
 }

 /* Mission Banner (Parallax) */
 .mission-banner {
     background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/images/about/chem2.jpg');
     /* background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80'); */
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     /* 视差滚动 */
     padding: 120px 0;
     text-align: center;
     color: #fff;
 }

 .mission-box {
     max-width: 900px;
     margin: 0 auto;
     padding: 40px;
     background: rgba(0, 0, 0, 0.4);
     backdrop-filter: blur(5px);
     border: 1px solid rgba(255, 255, 255, 0.2);
 }

 .mission-divider {
     width: 80px;
     height: 3px;
     background: #fff;
     margin: 0 auto 30px;
 }

 /* Beliefs List */
 .beliefs-list {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px 50px;
     list-style: none;
     margin-bottom: 80px;
 }

 .beliefs-list li {
     position: relative;
     padding-left: 30px;
     color: #444;
     line-height: 1.6;
 }

 .beliefs-list li::before {
     content: "✔";
     color: var(--primary-color);
     position: absolute;
     left: 0;
     top: 0;
     font-weight: bold;
 }

 /* Graduate Profile Cards */
 .profile-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     gap: 25px;
 }

 .profile-card {
     background: #fff;
     padding: 30px;
     border-radius: 8px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     border-top: 3px solid transparent;
     transition: all 0.3s ease;
 }

 .profile-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
     border-top-color: var(--primary-color);
 }

 .profile-card h3 {
     color: var(--primary-color);
     font-size: 1.1rem;
     margin-bottom: 10px;
     font-family: 'Georgia', serif;
 }

 .profile-card p {
     color: #666;
     font-size: 0.95rem;
     line-height: 1.6;
 }

 /* 动画类 */
 .fade-in-up {
     opacity: 0;
     transform: translateY(30px);
     transition: opacity 0.8s ease-out, transform 0.8s ease-out;
 }

 .fade-in-up.visible {
     opacity: 1;
     transform: translateY(0);
 }

 /* =========================================
           4. 响应式适配 (Mobile)
           ========================================= */
 @media (max-width: 768px) {

     /* 手机端取消浮动，改为垂直堆叠 */
     .float-right,
     .float-left {
         float: none;
         width: 100%;
         margin: 0 0 30px 0;
         /* 底部留白 */
     }

     .wrap-container p {
         text-align: left;
     }

     /* 手机上取消两端对齐，避免字间距过大 */

     .beliefs-list {
         grid-template-columns: 1fr;
     }

     .quote-block {
         padding: 25px;
         font-size: 1.1rem;
     }

     .quote-block::before {
         font-size: 4rem;
         top: -5px;
     }

     .mission-banner {
         background-attachment: scroll;
         /* 手机取消视差 */
         padding: 60px 0;
     }
 }

 /* =========================================
   Admissions Overview Page Styles
   ========================================= */

 .page-header {
     text-align: center;
     padding: 100px 0 60px;
     background: #fff;
 }

 .page-header h1 {
     font-size: 3.5rem;
     color: var(--primary-color);
     margin-bottom: 20px;
 }

 .divider {
     width: 80px;
     height: 4px;
     background: var(--primary-color);
     margin: 0 auto 30px;
 }

 .page-header p {
     font-size: 1.2rem;
     color: #666;
     max-width: 700px;
     margin: 0 auto;
     font-style: italic;
     font-family: var(--font-heading);
     /* 这里的副标题保持衬线体更有质感 */
 }

 /* =========================================
           3. 介绍与数据板块 (Intro & Stats)
           ========================================= */
 .intro-text {
     font-size: 1.15rem;
     line-height: 1.9;
     color: #444;
     text-align: justify;
     /* PC端保持两端对齐，显得整齐 */
     margin-bottom: 50px;
     padding: 0 20px;
     /* 基础内边距 */
 }

 .highlight-red {
     color: var(--primary-color);
     font-weight: bold;
 }

 /* 数据统计条 */
 .stats-bar {
     display: flex;
     justify-content: space-around;
     align-items: center;
     background: var(--light-bg);
     padding: 50px;
     border-radius: 8px;
     margin: 50px 0;
     border-left: 5px solid var(--primary-color);
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
 }

 .stat-item {
     text-align: center;
 }

 .stat-number {
     font-size: 3.5rem;
     font-weight: bold;
     color: var(--primary-color);
     font-family: var(--font-heading);
     display: block;
     line-height: 1;
     margin-bottom: 10px;
 }

 .stat-label {
     font-size: 0.95rem;
     color: #555;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-weight: 600;
     font-family: var(--font-body);
 }

 /* =========================================
           4. 视频展示区 (Cinematic Video)
           ========================================= */
 .video-section {
     margin: 80px 0 100px;
 }

 .section-title {
     font-size: 2.2rem;
     color: var(--primary-color);
     margin-bottom: 40px;
     position: relative;
     display: block;
     /* 确保占满整行 */
 }

 .video-wrapper {
     position: relative;
     width: 100%;
     padding-bottom: 56.25%;
     /* 16:9 */
     height: 0;
     overflow: hidden;
     border-radius: 8px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
     background: #000;
     /* cursor: pointer; */
     /* z-index: 1; */
 }



 /* 封面图 - 请替换为您自己的图片链接 */
 .video-poster {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('https://prismsus.org/images/home/campus_1.jpg') no-repeat center center;
     background-size: cover;
     transition: transform 0.6s ease;
     z-index: 1;

 }

 /* [新增] 隐形点击层 - 确保它是整个区域里层级(z-index)最高的 */
 .click-mask {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 100;
     /* 极高的层级，防止被周围元素遮挡 */
     cursor: pointer;
     /* 手型光标 */
     background: transparent;
     /* 透明 */
 }

 .video-wrapper:hover .video-poster {
     transform: scale(1.03);
 }


 /* 播放按钮 */
 .play-btn {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 80px;
     height: 80px;
     background: rgba(128, 8, 16, 0.9);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 2;
     transition: all 0.3s ease;
     animation: pulse-red 2s infinite;

 }

 .play-btn::after {
     content: "";
     display: block;
     width: 0;
     height: 0;
     border-left: 20px solid #fff;
     border-top: 12px solid transparent;
     border-bottom: 12px solid transparent;
     margin-left: 5px;
 }

 .video-wrapper:hover .play-btn {
     transform: translate(-50%, -50%) scale(1.1);
     background: var(--primary-color);
 }

 /* 交互效果 - 当鼠标悬停在 mask 上时，下面的 poster 和 btn 产生变化 */
 .click-mask:hover~.video-poster {
     transform: scale(1.03);
 }

 .click-mask:hover~.play-btn {
     transform: translate(-50%, -50%) scale(1.1);
     background: var(--primary-color);
 }

 @keyframes pulse-red {
     0% {
         box-shadow: 0 0 0 0 rgba(128, 8, 16, 0.7);
     }

     70% {
         box-shadow: 0 0 0 20px rgba(128, 8, 16, 0);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(128, 8, 16, 0);
     }
 }

 /* =========================================
           5. 探索者宣言 Banner
           ========================================= */
 .explorer-banner {
     background-color: var(--primary-color);
     color: #fff;
     padding: 100px 0;
     text-align: center;
     margin-bottom: 80px;
     position: relative;
     overflow: hidden;
     /* [核心] 这行代码会把超出边框的装饰圆圈切掉，防止撑开页面 */
 }

 /* 背景纹理装饰 */
 .explorer-banner::before {
     content: "";
     position: absolute;
     top: -50%;
     left: -10%;
     width: 500px;
     height: 500px;
     border: 50px solid rgba(255, 255, 255, 0.05);
     border-radius: 50%;
 }

 .explorer-text h2 {
     color: #fff;
     font-size: 2.5rem;
     margin-bottom: 30px;
 }

 .explorer-text p {
     font-size: 1.3rem;
     font-style: italic;
     opacity: 0.95;
     max-width: 800px;
     margin: 0 auto;
     font-family: 'Times New Roman', serif;
 }

 /* =========================================
           6. 行动卡片网格 (Action Grid)
           ========================================= */
 .action-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 30px;
     margin-bottom: 100px;
 }

 .action-card {
     background: #fff;
     border: 1px solid #eee;
     border-radius: 8px;
     padding: 40px 30px;
     text-align: center;
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
     position: relative;
     top: 0;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     height: 100%;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
 }

 .action-card:hover {
     top: -10px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
     border-color: transparent;
 }

 .action-card::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 4px;
     background: var(--primary-color);
     transform: scaleX(0);
     transition: transform 0.3s ease;
 }

 .action-card:hover::before {
     transform: scaleX(1);
 }

 .action-icon {
     font-size: 2.5rem;
     margin-bottom: 20px;
 }

 .action-card h3 {
     font-size: 1.2rem;
     margin-bottom: 15px;
     color: var(--text-color);
 }

 .action-card p {
     font-size: 0.9rem;
     color: #666;
     margin-bottom: 30px;
     flex-grow: 1;
     font-family: var(--font-body);
 }

 /* 按钮样式修复 */
 .btn-card {
     display: inline-block;
     padding: 12px 30px;
     background: var(--primary-color);
     color: #fff;
     font-weight: bold;
     text-transform: uppercase;
     font-size: 0.85rem;
     border-radius: 4px;
     transition: background 0.3s;
     font-family: var(--font-body);
 }

 .btn-card:hover {
     background: var(--primary-dark) !important;
     color: #fff !important;
 }

 .btn-card.outline {
     background: transparent;
     border: 2px solid var(--primary-color);
     color: var(--primary-color);
 }

 .btn-card.outline:hover {
     background: var(--primary-color) !important;
     color: #fff !important;
 }

 /* 动画类 */
 .fade-in-up {
     opacity: 0;
     transform: translateY(30px);
     transition: opacity 0.8s ease-out, transform 0.8s ease-out;
 }

 .fade-in-up.visible {
     opacity: 1;
     transform: translateY(0);
 }


 /* =========================================
           7. 响应式适配 (Mobile Fixes)
           ========================================= */

 /* 平板尺寸适配 */
 @media (max-width: 1024px) {
     .action-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .page-header h1 {
         font-size: 2.8rem;
     }
 }

 /* 手机尺寸适配 (针对您的问题修复) */
 @media (max-width: 768px) {

     /* 1. 标题与边距修复 */
     .page-header {
         padding: 60px 20px 40px;
         /* 增加左右内边距，防止靠边 */
     }

     .page-header h1 {
         font-size: 2.2rem;
     }

     .page-header p {
         font-size: 1.1rem;
         padding: 0 10px;
         /* 增加文字左右呼吸感 */
     }

     /* 2. 正文间距修复 (解决单词间距过大) */
     .intro-text {
         text-align: left !important;
         /* [关键] 强制左对齐，消灭大间距 */
         padding-left: 20px !important;
         /* 增加留白 */
         padding-right: 20px !important;
         font-size: 1.05rem;
     }

     /* 3. 数据条垂直排列 */
     .stats-bar {
         flex-direction: column;
         gap: 40px;
         padding: 40px 20px;
         max-width: 100%;
         /* 确保不超过屏幕 */
         box-sizing: border-box;
         /* 确保 padding 不会把宽度撑大 */
     }

     .stat-number {
         font-size: 3rem;
     }

     /* 4. 视频与标题间距修复 */
     .video-section .section-title {
         margin-bottom: 60px !important;
         /* 强制拉开距离 */
     }

     /* 5. 卡片与标题间距修复 */
     .action-grid {
         grid-template-columns: 1fr;
         /* 单列显示 */
         gap: 40px;
         margin-top: 50px;
     }

     .action-card {
         padding: 30px 20px;
     }

     /* Banner 文字修复 */
     .explorer-banner {
         padding: 60px 20px;
     }

     .explorer-text h2 {
         font-size: 2rem;
     }

     .explorer-text p {
         text-align: left;
         line-height: 1.6;
     }
 }

 @media (hover: hover) {
     .click-mask:hover~.video-poster {
         transform: scale(1.03);
     }

     .click-mask:hover~.play-btn {
         transform: translate(-50%, -50%) scale(1.1);
         background: var(--primary-color);
     }
 }

 /* ==========================================================================
   Apply Page Specific Styles
   ========================================================================== */

 /* --- 1. 手风琴流程 (Accordion Process) --- */
 .accordion {
     border-top: 2px solid #eee;
 }

 .accordion-item {
     border-bottom: 1px solid #eee;
     background: #fff;
     transition: background 0.3s ease;
 }

 .accordion-item.active {
     background: #fff;
 }

 /* 标题栏 */
 .accordion-header {
     padding: 30px 20px;
     cursor: pointer;
     display: flex;
     align-items: center;
     position: relative;
     transition: all 0.3s ease;
 }

 .accordion-header:hover h3 {
     color: var(--primary-dark);
 }

 /* 序号 */
 .step-num {
     font-size: 2rem;
     font-weight: bold;
     color: #e0e0e0;
     margin-right: 30px;
     font-family: var(--font-heading);
     transition: color 0.3s ease;
     line-height: 1;
 }

 .accordion-item.active .step-num {
     color: var(--primary-color);
 }

 /* 标题 */
 .accordion-header h3 {
     font-size: 1.4rem;
     color: var(--text-color);
     margin: 0;
     flex-grow: 1;
     font-family: var(--font-heading);
     transition: color 0.3s ease;
 }

 .accordion-item.active .accordion-header h3 {
     color: var(--primary-color);
 }

 /* 加号/减号图标 */
 .accordion-icon {
     width: 30px;
     height: 30px;
     position: relative;
     border: 1px solid #ddd;
     border-radius: 50%;
     transition: all 0.3s ease;

     /* [关键修复 1] 禁止被挤压，保持正圆形 */
     flex-shrink: 0 !important;

     /* [关键修复 2] 给左边加点间距，防止文字贴太近 */
     margin-left: 15px;

 }

 .accordion-icon::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 12px;
     height: 2px;
     background: #888;
     transform: translate(-50%, -50%);
     transition: all 0.3s;
 }

 .accordion-icon::after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 2px;
     height: 12px;
     background: #888;
     transform: translate(-50%, -50%);
     transition: all 0.3s;
 }

 /* 展开状态图标 */
 .accordion-item.active .accordion-icon {
     border-color: var(--primary-color);
     background: var(--primary-color);
 }

 .accordion-item.active .accordion-icon::before {
     background: #fff;
     transform: translate(-50%, -50%) rotate(180deg);
 }

 .accordion-item.active .accordion-icon::after {
     background: #fff;
     transform: translate(-50%, -50%) rotate(90deg);
     /* 竖线变横线 */
     opacity: 0;
 }

 /* 内容区域 */
 .accordion-body {
     max-height: 0;
     overflow: hidden;
     opacity: 0;
     transition: max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.5s ease;
 }

 .accordion-item.active .accordion-body {
     opacity: 1;
 }

 .accordion-inner {
     padding: 0 20px 40px 80px;
     color: #555;
     font-size: 1.05rem;
     line-height: 1.8;
 }

 /* --- 2. 关键日期横幅 (Important Dates Banner) --- */
 .dates-banner {
     background: linear-gradient(rgba(128, 8, 16, 0.92), rgba(128, 8, 16, 0.92)), url('https://images.unsplash.com/photo-1506784983877-45594efa4cbe?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     padding: 100px 0;
     text-align: center;
     color: #fff;
     margin-bottom: 60px;
 }

 .dates-box {
     max-width: 900px;
     margin: 0 auto;
 }

 .dates-grid {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 50px;
     margin-top: 30px;
 }

 .date-label {
     display: block;
     font-size: 0.95rem;
     text-transform: uppercase;
     letter-spacing: 1px;
     opacity: 0.8;
     margin-bottom: 10px;
     font-family: var(--font-body);
 }

 .date-val {
     display: block;
     font-size: 2.5rem;
     font-weight: bold;
     font-family: var(--font-heading);
     line-height: 1;
 }

 .date-divider {
     width: 1px;
     height: 60px;
     background: rgba(255, 255, 255, 0.3);
 }

 /* 按钮组 */
 .cta-group {
     display: flex;
     justify-content: center;
     gap: 20px;
 }

 /* --- 3. 移动端适配 --- */
 @media (max-width: 768px) {

     /* 手风琴适配 */
     .accordion-inner {
         padding: 0 20px 30px 20px;
     }

     .step-num {
         font-size: 1.5rem;
         margin-right: 15px;
     }

     .accordion-header h3 {
         font-size: 1.1rem;
     }

     /* 日期适配 */
     .dates-grid {
         flex-direction: column;
         gap: 40px;
     }

     .date-divider {
         width: 60px;
         height: 1px;
     }

     .cta-group {
         flex-direction: column;
         gap: 15px;
     }

     .cta-group .btn-card {
         width: 100%;
         margin: 0 !important;
     }
 }

 /* 手风琴第五步 */
 /* 表格外部容器 (处理手机端溢出) */
 .table-wrapper {
     width: 100%;
     overflow-x: auto;
     /* 关键：手机屏幕太窄时允许横向滚动 */
     -webkit-overflow-scrolling: touch;
     border: 1px solid #eee;
     border-radius: 4px;
 }

 /* 表格本体 */
 .checklist-table {
     width: 100%;
     border-collapse: collapse;
     /* 去掉单元格间隙 */
     min-width: 500px;
     /* 保证最小宽度，防止内容挤压，手机上触发滚动 */
     font-family: var(--font-body);
     font-size: 0.95rem;
 }

 /* 表头样式 */
 .checklist-table th {
     background-color: #f9f9f9;
     color: var(--primary-color);
     font-weight: bold;
     text-align: left;
     padding: 15px 20px;
     border-bottom: 2px solid #eee;
     font-family: var(--font-heading);
 }

 /* 单元格样式 */
 .checklist-table td {
     padding: 15px 20px;
     border-bottom: 1px solid #eee;
     color: #555;
     vertical-align: top;
     /* 内容顶部对齐 */
     line-height: 1.6;
 }

 /* 左侧项目名称列 */
 .checklist-table .item-name {
     color: var(--text-color);
     background-color: #fff;
     /* 确保背景纯白 */
 }

 /* 最后一行的边框去掉 */
 .checklist-table tr:last-child td {
     border-bottom: none;
 }

 /* 斑马纹效果 (隔行变色，可选) */
 /* .checklist-table tr:nth-child(even) { background-color: #fafafa; } */

 /* --- 手机端适配 --- */
 @media (max-width: 768px) {

     .checklist-table th,
     .checklist-table td {
         padding: 12px 15px;
         /* 稍微减小内边距 */
     }
 }

 /* 手风琴第四步控制图片 */
 /* 横幅容器:Flex布局让它们并排 */
 .decision-banners {
     display: flex;
     gap: 30px;
     /* 两个 Logo 之间的间距 */
     margin-top: 30px;
     justify-content: flex-start;
     /* 左对齐 (如果想居中改成 center) */
 }

 /* 单个链接容器 */
 .banner-link {
     /* [修改] 不再强制占满宽度，改为根据内容自适应，或者固定一个舒适的宽度 */
     width: 220px;

     /* [修改] 去掉白色背景和阴影 */
     background: transparent;
     box-shadow: none;
     border: 2px solid #eee;
     /* 加一个淡淡的边框，更有点击感 */
     border-radius: 8px;

     display: flex;
     align-items: center;
     justify-content: center;
     padding: 15px 20px;
     /* 内边距 */
     transition: all 0.3s ease;
     text-decoration: none;
 }

 /* 图片本身 (Logo) */
 .banner-link img {
     /* [关键修改] 限制最大高度，防止 Logo 变得巨大 */
     max-height: 50px;
     width: auto;
     /* 宽度按比例自适应 */

     display: block;
     transition: transform 0.3s ease;

     /* [可选] 如果您的Logo是黑色的，想让它有点灰色不那么刺眼，可以加这行： */
     /* opacity: 0.8; */
 }

 /* 鼠标悬停效果 */
 .banner-link:hover {
     border-color: var(--primary-color);
     /* 悬停时边框变红 */
     transform: translateY(-3px);
     /* 轻微上浮 */
     background: #fff;
     /* 悬停时加个白底突显 */
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 }

 .banner-link:hover img {
     transform: scale(1.05);
     /* Logo 微放大 */
     opacity: 1;
 }

 /* --- 手机端适配 --- */
 @media (max-width: 768px) {
     .decision-banners {
         flex-direction: row;
         /* 手机上依然保持并排 (Logo比较小，放得下) */
         justify-content: space-between;
     }

     .banner-link {
         width: 48%;
         /* 手机上各占一半 */
         padding: 10px;
     }

     .banner-link img {
         max-height: 40px;
         /* 手机上 Logo 再小一点 */
     }
 }

 /* apply page (底部过渡栏)*/
 .help-strip {
     background-color: #f9f9f9;
     /* 浅灰背景，柔和过渡 */
     padding: 50px 0;
     /* 不需要太高，窄一点更精致 */
     border-top: 1px solid #eee;
     /* 顶部加一条极细的线增加层次 */
 }

 /* 让之前的 Dates Banner 紧贴这个栏 */
 .dates-banner {
     margin-bottom: 0 !important;
     /* [关键] 去掉 Banner 的下边距 */
 }

 .help-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .help-text h3 {
     font-size: 1.5rem;
     color: var(--primary-color);
     margin-bottom: 5px;
     font-family: var(--font-heading);
 }

 .help-text p {
     color: #666;
     font-size: 1rem;
     margin: 0;
 }

 /* 文字箭头链接 */
 .btn-text-arrow {
     font-size: 1.1rem;
     font-weight: bold;
     color: var(--text-color);
     transition: all 0.3s ease;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-family: var(--font-body);
 }

 .btn-text-arrow span {
     transition: transform 0.3s ease;
     font-size: 1.3rem;
     line-height: 1;
 }

 .btn-text-arrow:hover {
     color: var(--primary-color);
 }

 .btn-text-arrow:hover span {
     transform: translateX(5px);
     /* 箭头向右动 */
 }

 /* 手机适配 */
 @media (max-width: 768px) {
     .help-content {
         flex-direction: column;
         text-align: center;
         gap: 20px;
     }
 }


 /* ==========================================================================
   Tuition Page Specific Styles
   ========================================================================== */

 /* --- 1. 定价卡片网格 (Pricing Grid) --- */
 .pricing-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     /* 两列并排 */
     gap: 40px;
     max-width: 1140px;
     margin: 0 auto;
     align-items: stretch;
     /* 等高 */
 }

 .pricing-card {
     background: #fff;
     border: 1px solid #eee;
     border-radius: 8px;
     padding: 50px 40px;
     text-align: center;
     position: relative;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
     border-top: 5px solid transparent;
     /* 预留顶部红线 */
 }

 /* 悬停效果：上浮 + 顶部红线 */
 .pricing-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
     border-top-color: var(--primary-color);
 }

 /* 推荐标签 (Most Common) */
 .card-header-badge {
     position: absolute;
     top: 0;
     left: 50%;
     transform: translate(-50%, -50%);
     background: #D4AF37 !important;
     color: #fff !important;
     padding: 5px 15px;
     font-size: 0.8rem;
     font-weight: bold;
     text-transform: uppercase;
     border-radius: 20px;
     letter-spacing: 1px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
 }

 /* 标题与价格 */
 .pricing-card h3 {
     font-size: 1.5rem;
     color: var(--text-color);
     margin-bottom: 20px;
     font-family: var(--font-heading);
 }

 .price-tag {
     color: var(--primary-color);
     font-size: 3rem;
     font-weight: bold;
     font-family: var(--font-heading);
     /* 数字用衬线体更高级 */
     line-height: 1;
     margin-bottom: 10px;
 }

 .currency {
     font-size: 1.5rem;
     vertical-align: top;
     margin-right: 5px;
 }

 .period {
     font-size: 1rem;
     color: #999;
     font-weight: normal;
     vertical-align: middle;
 }

 .price-desc {
     color: #777;
     font-size: 0.95rem;
     margin-bottom: 30px;
 }

 /* 内部细分割线 */
 .divider-thin {
     height: 1px;
     background: #eee;
     width: 100%;
     margin: 30px 0;
 }

 /* 费用清单 */
 .fee-list {
     text-align: left;
     padding-left: 10px;
 }

 .fee-list li {
     margin-bottom: 12px;
     font-size: 0.95rem;
     color: #555;
     position: relative;
     padding-left: 25px;
 }

 /* 列表前的勾选图标 */
 .fee-list li::before {
     content: "✓";
     position: absolute;
     left: 0;
     top: 0;
     color: var(--primary-color);
     font-weight: bold;
 }

 /* 灰色不可用项 */
 .fee-list li.faded {
     color: #ccc;
     text-decoration: line-through;
 }

 .fee-list li.faded::before {
     content: "✕";
     color: #ccc;
 }

 /* --- 2. 奖学金板块 (Aid Grid) --- */
 /* 网格布局 */
 .aid-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     /* 左右等分 */
     gap: 40px;
     /* 卡片间距 */
     max-width: 1140px;
     margin: 0 auto;
     align-items: stretch;
     /* 让两个卡片高度自动拉齐 */
 }

 /* 通用卡片样式 */
 .aid-card {
     background: #fff;
     border-radius: 8px;
     padding: 0;
     /* 内部用 padding */
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     border: 1px solid #eee;
     overflow: hidden;
     /* 确保顶部色条圆角正常 */
     position: relative;
     display: flex;
     flex-direction: column;
 }

 .aid-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
 }

 /* --- 卡片头部 (Header) --- */
 .aid-header {
     padding: 30px 40px;
     display: flex;
     align-items: center;
     gap: 15px;
     border-bottom: 1px solid #f0f0f0;
 }

 .aid-icon {
     font-size: 2rem;
 }

 .aid-header h3 {
     margin: 0;
     font-size: 1.4rem;
     font-family: var(--font-heading);
 }

 /* --- 卡片内容 (Body) --- */
 .aid-body {
     padding: 30px 40px;
     font-size: 1.05rem;
     color: #555;
     line-height: 1.8;
     flex-grow: 1;
     /* 撑满剩余高度 */
 }

 .aid-body p {
     margin-bottom: 20px;
     text-align: left;
     /* 两端对齐，显得文字块很整齐 */
 }

 /* --- 样式区分：Merit Scholarship (金色/荣誉感) --- */
 .merit-card {
     border-top: 6px solid #D4AF37;
     /* 金色顶边 */
 }

 .merit-card .aid-header h3 {
     color: #bfa15f;
     /* 文字也用深金色 */
     color: #333;
     /* 或者保持深黑，看起来更清晰 */
 }

 /* --- 样式区分：Need-Based Aid (红色/支持感) --- */
 .need-card {
     border-top: 6px solid var(--primary-color);
     /* 红色顶边 */
 }

 .need-card .aid-header h3 {
     color: var(--primary-color);
 }

 .need-card a {
     color: var(--primary-color);
     font-weight: bold;
     text-decoration: underline;
 }

 /* SSS 申请强调框 */
 .aid-highlight-box {
     background: #f9f9f9;
     border-left: 4px solid var(--primary-color);
     padding: 15px 20px;
     margin-top: 20px;
     font-size: 0.95rem;
     color: #444;
 }

 .pricing-banner {
     /* 复用 Important Dates 的深红视差背景 */
     background: linear-gradient(rgba(128, 8, 16, 0.92), rgba(128, 8, 16, 0.92)), url('https://images.unsplash.com/photo-1506784983877-45594efa4cbe?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     /* 视差滚动核心 */
     padding: 100px 0;
     width: 100%;
     position: relative;
 }

 /* 针对深色背景下的卡片微调 */
 .pricing-banner .pricing-card {
     /* 增加阴影深度，让卡片在深色背景上更立体 */
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
     border: none;
     /* 去掉边框，纯白卡片更干净 */
 }

 /* 悬停时的效果增强 */
 .pricing-banner .pricing-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
     /* 阴影更重 */
     /* 顶部红线依然保留，与背景呼应 */
     border-top: 5px solid #fff;
     /* 或者改成白色顶边，或者保留红色 */
     border-top-color: #D4AF37 !important;
 }

 /* =========================================
   Financial Aid Determination (Text Only Style)
   ========================================= */

 /* 文档容器：模拟一张大白纸的效果 */
 .determination-doc {
     max-width: 1140px;
     /* 限制宽度，这是大器排版的关键 */
     margin: 0 auto;
     /* 居中 */
     background: #fff;
     padding: 60px 80px;
     /* 大量的内边距，制造呼吸感 */
     border-radius: 4px;
     /* 只需要极小的圆角，更像文件 */
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
     /* 唯美的高级阴影 */
     border-top: 5px solid var(--primary-color);
     /* 顶部红线装饰 */
 }

 /* 段落间距 */
 .doc-paragraph {
     margin-bottom: 30px;
 }

 .doc-paragraph p {
     font-size: 1.05rem;
     color: #555;
     line-height: 1.8;
     text-align: left;
     /* 两端对齐，让文字块像砖头一样整齐 */
 }

 /* 底部注脚 */
 .doc-footer {
     margin-top: 40px;
     padding-top: 20px;
     border-top: 1px dashed #ddd;
     /* 虚线分割 */
     color: #888;
     font-size: 0.95rem;
     font-style: italic;
     text-align: center;
 }


 /* =========================================
   Horizontal Timeline Styles (Light & Grand)
   ========================================= */

 /* 引言文字样式 */
 .timeline-intro {
     font-size: 1.1rem;
     color: #444;
     line-height: 1.8;
     max-width: 800px;
     margin: 0 auto 60px;
     /* 下方留出空间给时间轴 */
     padding: 20px;
     background: #f9f9f9;
     border-radius: 4px;
     border-left: 4px solid var(--primary-color);
 }

 /* 时间轴主容器 */
 .horizontal-timeline {
     position: relative;
     padding: 40px 0;
     margin-bottom: 50px;
 }

 /* 贯穿红线 (Desktop) */
 .timeline-line {
     position: absolute;
     top: 60px;
     /* 线条的高度位置 */
     left: 0;
     width: 100%;
     height: 4px;
     background: #eee;
     /* 默认灰色底线 */
     border-radius: 2px;
     z-index: 0;
 }

 /* 红色进度条装饰 (可选) */
 .timeline-line::after {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     background: linear-gradient(90deg, var(--primary-color) 0%, transparent 100%);
     opacity: 0.3;
 }

 /* 步骤行布局 */
 .timeline-row {
     display: flex;
     justify-content: space-between;
     /* 平均分布 */
     position: relative;
     z-index: 1;
 }

 /* 单个步骤 */
 .timeline-step {
     flex: 1;
     /* 平分宽度 */
     text-align: center;
     padding: 0 15px;
     position: relative;
 }

 /* 圆形节点 (Marker) */
 .step-marker {
     width: 44px;
     height: 44px;
     background: #fff;
     border: 4px solid #ddd;
     border-radius: 50%;
     margin: 38px auto 30px;
     /* 调整 margin 让圆圈刚好压在线条上 */
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     color: #999;
     font-family: var(--font-heading);
     transition: all 0.3s ease;
     position: relative;
 }

 /* 悬停效果：节点变红 */
 .timeline-step:hover .step-marker {
     border-color: var(--primary-color);
     color: var(--primary-color);
     transform: scale(1.1);
     background: #fff;
     box-shadow: 0 0 0 4px rgba(128, 8, 16, 0.1);
 }

 /* 卡片内容区 */
 .step-card {
     background: #fff;
     padding: 20px;
     border-radius: 8px;
     border: 1px solid transparent;
     transition: all 0.3s ease;
 }

 .timeline-step:hover .step-card {
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
     border-color: #eee;
     transform: translateY(5px);
     background-color: #800810;

 }

 .step-card h4 {
     font-size: 1.15rem;
     color: var(--text-color);
     margin-bottom: 15px;
     font-family: var(--font-heading);
 }

 .timeline-step:hover h4 {
     color: #fff;
 }

 .step-desc p {
     font-size: 0.9rem;
     color: #666;
     margin-bottom: 10px;
     line-height: 1.6;
 }

 .timeline-step:hover p {
     color: #fff;
 }

 /* 清单样式 */
 .step-checklist {
     text-align: left;
     background: #fdfdfd;
     padding: 10px 15px;
     border-radius: 4px;
     border-left: 2px solid #ddd;
     margin-top: 10px;
     font-size: 0.85rem;
     color: #555;
 }

 .timeline-step:hover .step-checklist {
     border-left-color: var(--primary-color);
 }

 .step-checklist li {
     margin-bottom: 5px;
     padding-left: 15px;
     position: relative;
 }

 .step-checklist li::before {
     content: "•";
     color: var(--primary-color);
     position: absolute;
     left: 0;
     font-weight: bold;
 }

 /* 小按钮链接 */
 .btn-text-small {
     display: inline-block;
     margin-top: 10px;
     font-size: 0.85rem;
     color: var(--primary-color);
     font-weight: bold;
 }

 .timeline-step:hover .btn-text-small {
     color: #D4AF37;
 }

 .timeline-step:hover a {
     color: #D4AF37 !important;
 }

 /* =========================================
   Financial Aid Calendar (Dark Impact Style)
   ========================================= */

 /* 1. 区域背景：深炭黑 */
 .calendar-section {
     background-color: #111;
     /* 极深背景 */
     background-image: radial-gradient(circle at 50% 0%, #2a2a2a 0%, #111 70%);
     /* 顶部微亮的光影 */
     padding: 100px 0;
     color: #fff;
     position: relative;
 }

 /* 2. 网格布局 */
 .calendar-grid {
     display: grid;
     /* 自动适应列数：卡片最小宽度 220px */
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 30px;
     max-width: 1140px;
     margin: 0 auto;
 }

 /* 3. 日历卡片主体 */
 .cal-card {
     background: #fff;
     /* 卡片本身是白色的 */
     border-radius: 8px;
     overflow: hidden;
     /* 保证头部圆角 */
     text-align: center;
     transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
     position: relative;
     top: 0;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
     /* 深色阴影 */
     display: flex;
     flex-direction: column;
 }

 /* 悬停动效 */
 .cal-card:hover {
     transform: translateY(-12px) scale(1.02);
     box-shadow: 0 20px 50px rgba(128, 8, 16, 0.4);
     /* 红色光晕 */
     z-index: 10;
 }

 /* 4. 卡片头部 (月份条) */
 .cal-header {
     background: #333;
     /* 默认深灰 */
     color: #fff;
     padding: 10px 0;
     text-transform: uppercase;
     font-weight: bold;
     letter-spacing: 2px;
     display: flex;
     justify-content: center;
     gap: 10px;
     font-size: 0.9rem;
 }

 /* 紧急日期的头部 (红色) */
 .cal-header.urgent {
     background: var(--primary-color);
 }

 /* 悬停时所有头部都变红 */
 .cal-card:hover .cal-header {
     background: var(--primary-color);
 }

 /* 5. 卡片主体 */
 .cal-body {
     padding: 20px 20px 30px;
     color: #333;
     flex-grow: 1;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
 }

 /* 巨大的日期数字 */
 .cal-day {
     display: block;
     font-size: 4rem;
     font-weight: bold;
     color: #333;
     font-family: var(--font-heading);
     line-height: 1;
     margin-bottom: 10px;
 }

 /* 悬停时日期变红 */
 .cal-card:hover .cal-day {
     color: var(--primary-color);
 }

 .cal-info h4 {
     font-size: 1.1rem;
     margin-bottom: 8px;
     color: #000;
     font-weight: bold;
 }

 .cal-info p {
     font-size: 0.9rem;
     color: #666;
     line-height: 1.5;
     margin: 0;
 }

 /* 6. 底部文字 */
 .calendar-footer {
     text-align: center;
     margin-top: 60px;
     opacity: 0.7;
     font-style: italic;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding-top: 30px;
     max-width: 600px;
     margin-left: auto;
     margin-right: auto;
 }

 /* =========================================
   Payment Schedule (Simple Impact Style)
   ========================================= */

 /* 1. 容器布局 */
 .payment-milestones {
     display: flex;
     justify-content: space-between;
     /* 横向均匀分布 */
     gap: 30px;
     max-width: 1140px;
     margin: 0 auto;
 }

 /* 2. 单个里程碑卡片 */
 .milestone-card {
     flex: 1;
     /* 三个卡片等宽 */
     background: linear-gradient(145deg, var(--primary-color), #50040a) !important;
     border: none !important;
     border-radius: 8px;
     padding: 40px 30px;
     text-align: center;
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
     border-top: 5px solid transparent;
     /* 预留顶部线条 */
     box-shadow: 0 10px 25px rgba(128, 8, 16, 0.3) !important;
     color: #fff;
 }

 /* 悬停效果：上浮 + 顶边变红 */
 .milestone-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 20px 50px rgba(128, 8, 16, 0.5) !important;
     border-top-color: var(--primary-color);
     filter: brightness(1.1);
 }

 /* 3. 日期视觉中心 (Visual Hero) */
 .mile-date {
     margin-bottom: 25px;
     line-height: 1;
 }

 .md-month {
     display: block;
     font-size: 1.2rem;
     font-weight: bold;
     color: rgba(255, 255, 255, 0.9) !important;
     letter-spacing: 2px;
     margin-bottom: 5px;
     font-family: var(--font-body);
 }

 /* [核心] 巨大的日期数字 */
 .md-day {
     display: block;
     font-size: 5rem;
     /* 极大字号，冲击力来源 */
     font-weight: bold;
     color: #fff !important;
     opacity: 1;
     font-family: var(--font-heading);
     letter-spacing: -2px;
     /* 紧凑一点更好看 */
 }

 /* 4. 文字内容 */
 .mile-content h3 {
     font-size: 1.3rem;
     color: rgba(255, 255, 255, 0.9) !important;
     margin-bottom: 15px;
     font-family: var(--font-heading);
 }

 .mile-content p {
     font-size: 1rem;
     color: rgba(255, 255, 255, 0.9) !important;
     line-height: 1.6;
 }

 /* --- 移动端适配 --- */
 @media (max-width: 768px) {
     .aid-grid {
         grid-template-columns: 1fr;
         /* 手机上变为单列 */
         gap: 30px;
         margin-top: 50px;
     }

     .aid-header,
     .aid-body {
         padding: 25px;
         /* 手机上减小内边距 */
     }

     .aid-body p {
         text-align: left;
         /* 手机上取消两端对齐 */
     }

     .pricing-grid {
         grid-template-columns: 1fr;
         /* 单列 */
         gap: 50px;
         /* 增加垂直间距 */
         margin-top: 50px;
     }

     .card-header-badge {
         transform: translate(-50%, -60%);
         /* 稍微上移 10% */
         /* 稍微宽一点防止换行 */
     }

     .pricing-card {
         padding: 60px 25px 40px 25px !important;
     }

     .pricing-banner {
         background-attachment: scroll;
         /* 手机取消视差，防止卡顿 */
         padding: 60px 0;
     }

     .determination-doc {
         padding: 40px 25px;
         /* 手机上减小内边距 */
         margin-top: 50px;
     }

     .doc-paragraph p {
         text-align: left;
         /* 手机上取消两端对齐 */
     }

     /* 隐藏横线 */
     .timeline-line {
         display: none;
     }

     /* 改为垂直布局 */
     .timeline-row {
         flex-direction: column;
     }

     .timeline-step {
         display: flex;
         text-align: left;
         /* 文字左对齐 */
         margin-bottom: 30px;
         padding: 0;
     }

     /* 调整节点位置到左侧 */
     .step-marker {
         margin: 0 20px 0 0;
         /* 右边留空给文字 */
         flex-shrink: 0;
     }

     /* 绘制垂直连接线 */
     .timeline-step::before {
         content: "";
         position: absolute;
         top: 44px;
         left: 22px;
         /* 从圆圈底部开始 */
         width: 2px;
         height: calc(100% + 30px);
         /* 连到下一个 */
         background: #eee;
         z-index: 0;
     }

     .timeline-step:last-child::before {
         display: none;
     }

     /* 最后一个不要线 */

     .step-card {
         padding: 15px 15px !important;
         box-shadow: none !important;
         transform: none !important;
     }

     .calendar-grid {
         /* 手机上强制双列，如果是超小屏(iPhone SE)则单列 */
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
         gap: 20px;
         margin-top: 50px;
     }

     .cal-day {
         font-size: 3rem;
     }

     .cal-body {
         padding: 15px;
     }

     .payment-milestones {
         flex-direction: column;
         /* 手机上垂直堆叠 */
         gap: 40px;
         margin-top: 50px;
     }

     .milestone-card {
         padding: 30px;
         border-top: 5px solid #eee;
         /* 手机上默认显示灰色顶边，更有边界感 */
     }

     .md-day {
         font-size: 4rem;
         /* 手机上稍微小一点 */
     }
 }

 /* =========================================
   Profile Page Styles
   ========================================= */

 /* --- 1. 下载功能栏 (Download Bar) --- */
 .download-bar {
     background: #f9f9f9;
     /* 浅灰背景 */
     border: 1px solid #eee;
     border-radius: 8px;
     padding: 30px 40px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     max-width: 900px;
     /* 限制宽度，显得精致 */
     margin: 0 auto;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
     border-left: 5px solid var(--primary-color);
     /* 左侧红线装饰 */
 }

 /* 左侧信息 */
 .dl-info {
     display: flex;
     align-items: center;
     gap: 20px;
 }

 .dl-icon {
     font-size: 2.5rem;
     background: #fff;
     width: 60px;
     height: 60px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 }

 .dl-text h3 {
     margin: 0 0 5px 0;
     font-size: 1.25rem;
     color: var(--text-color);
     font-family: var(--font-heading);
 }

 .dl-text p {
     margin: 0;
     font-size: 0.9rem;
     color: #888;
 }

 /* --- 2. 图片阅览区 (Image Viewer) --- */
 .profile-viewer-section {
     background-color: #fdfdfd;
     /* 极淡的背景，区分纸张颜色 */
 }

 .profile-page {
     max-width: 900px;
     /* 模拟 A4 纸宽度 */
     margin: 0 auto 50px;
     /* 页与页之间的间距 */
     position: relative;
 }

 .profile-page img {
     width: 100%;
     height: auto;
     display: block;
     /* 核心效果：让图片像纸张一样浮起来 */
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
     border-radius: 2px;
     /* 纸张几乎没有圆角 */
     background: #fff;
     /* 防止图片加载慢时显示透明 */
 }

 /* 移动端适配 */
 @media (max-width: 768px) {
     .download-bar {
         flex-direction: column;
         text-align: center !important;
         align-items: center !important;
         gap: 20px;
         padding-bottom: 40px !important;
         /* 保持左右间距适中 */
         padding-left: 25px !important;
         padding-right: 25px !important;
         /* display: inline-block; */
     }

     .dl-info {
         flex-direction: column;
         gap: 10px;
     }

     .profile-page {
         margin-bottom: 30px;
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
         /* 手机上阴影淡一点 */
     }
 }


 /* =========================================
   ------Academic Pages------
   ========================================= */

 /* =========================================
   Academic Calendar (Grand Style)
   ========================================= */

 /* =========================================
   Download Bar Styles (用于 Calendar & Profile)
   ========================================= */

 .download-bar.academic {
     background: #f9f9f9;
     /* 浅灰背景 */
     border: 1px solid #eee;
     border-radius: 8px;
     padding: 30px 40px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     max-width: 1140px !important;
     /* 限制宽度，显得精致 */
     margin: 0 auto;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
     border-left: 5px solid var(--primary-color);
     /* 左侧红线装饰，呼应品牌 */
     transition: transform 0.3s ease;
 }

 .download-bar:hover {
     transform: translateY(-3px);
     /* 悬停微浮起 */
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
 }

 /* 左侧信息 */
 .dl-info {
     display: flex;
     align-items: center;
     gap: 20px;
 }

 .dl-icon {
     font-size: 2.5rem;
     background: #fff;
     width: 60px;
     height: 60px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 }

 .dl-text h3 {
     margin: 0 0 5px 0;
     font-size: 1.25rem;
     color: var(--text-color);
     font-family: var(--font-heading);
 }

 .dl-text p {
     margin: 0;
     font-size: 0.9rem;
     color: #888;
 }

 /* 右侧按钮 */
 .btn-download {
     background-color: var(--primary-color);
     color: #fff;
     padding: 12px 25px;
     border-radius: 30px;
     text-decoration: none;
     font-weight: bold;
     transition: all 0.3s ease;
     display: inline-flex;
     align-items: center;
     box-shadow: 0 4px 10px rgba(128, 8, 16, 0.3);
 }

 .btn-download:hover {
     background-color: var(--primary-dark);
     transform: translateY(-2px);
     box-shadow: 0 6px 15px rgba(128, 8, 16, 0.4);
     color: #fff;
 }

 /* 1. 日历容器 */
 #prisms-calendar {
     background: #fff;
     padding: 30px;
     border-radius: 12px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
     max-width: 1200px;
     margin: 0 auto;
     font-family: var(--font-body, sans-serif);
 }

 /* 2. 事件样式 */
 .fc-event {
     cursor: pointer;
     border: none !important;
     transition: transform 0.2s;
 }

 .fc-event:hover {
     transform: scale(1.02);
 }

 /* 3. 弹窗遮罩层 (强制最高层级) */
 #custom-modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.6);
     z-index: 2147483647 !important;
     /* 最高层级 */
     display: none;
     /* 默认隐藏 */
     justify-content: center;
     align-items: center;
     backdrop-filter: blur(4px);
 }

 /* 4. 弹窗内容框 */
 #custom-modal-content {
     background: #fff;
     width: 90%;
     max-width: 500px;
     padding: 40px;
     border-radius: 8px;
     position: relative;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
     animation: modalPop 0.3s ease-out;
 }

 /* 红色顶条 */
 .modal-strip {
     height: 5px;
     background: var(--primary-color, #800810);
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
 }

 /* 关闭按钮 */
 .close-btn {
     position: absolute;
     top: 10px;
     right: 20px;
     font-size: 30px;
     cursor: pointer;
     color: #999;
     background: none;
     border: none;
 }

 .close-btn:hover {
     color: var(--primary-color, #800810);
 }

 .fc-today-button {
     text-transform: capitalize !important;
 }



 /* 动画 */
 @keyframes modalPop {
     from {
         transform: translateY(20px);
         opacity: 0;
     }

     to {
         transform: translateY(0);
         opacity: 1;
     }
 }

 /* 移动端适配 */

 @media (max-width: 768px) {
     .download-bar {
         flex-direction: column;
         text-align: center;
         gap: 20px;
         padding: 25px;
     }

     .dl-info {
         flex-direction: column;
         gap: 10px;
     }

     /* 1. 强制工具栏垂直排列 */
     .fc-header-toolbar {
         display: flex !important;
         flex-direction: column !important;
         /* 变成垂直列 */
         align-items: center !important;
         /* 居中对齐 */
         gap: 15px !important;
         /* 行与行之间的间距 */
     }

     /* 2. 调整元素的显示顺序 (Flex Order) */
     /* 我们希望标题显示在最上面 (第1行) */
     .fc-header-toolbar .fc-toolbar-chunk:nth-child(2) {
         order: -1;
         margin-bottom: 5px;
     }

     /* 左右两边的按钮组显示在下面 (第2,3行) */
     .fc-header-toolbar .fc-toolbar-chunk:nth-child(1),
     .fc-header-toolbar .fc-toolbar-chunk:nth-child(3) {
         width: 100%;
         display: flex;
         justify-content: center;
         /* 按钮居中 */
     }

     /* 3. 优化标题大小 */
     .fc-toolbar-title {
         font-size: 1.75rem !important;
         /* 手机上标题稍微小一点点，但依然醒目 */
     }

     /* 4. 给按钮之间加一点呼吸空间 */
     .fc-button {
         padding: 8px 16px !important;
         /* 增大触控面积 */
         font-size: 0.9rem !important;
         margin: 0 2px !important;
     }

     /* 5. 解决 "Today" 和箭头靠太近的问题 */
     .fc-prev-button,
     .fc-next-button {
         margin-right: 5px !important;
     }

     .fc-today-button {
         margin-left: 5px !important;
     }
 }

 /* ==========================================================================
   Events Page Specific Styles (Events 页面专用样式)
   ========================================================================== */

 /* --- 1. Hero Section (大器背景) --- */
 .events-hero {
     position: relative;
     width: 100%;
     height: 50vh;
     /* 占据一半屏幕高度 */
     min-height: 400px;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: #fff;
     /* 背景图 URL - 请替换为您自己的高清图片 */
     background-image: url('/images/academics/ae5.jpg');
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
     margin-bottom: 0;
 }

 /* 黑色遮罩 (Overlay) */
 .hero-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     /* 50% 透明度黑色 */
     z-index: 1;
 }

 .hero-content {
     position: relative;
     z-index: 2;
     max-width: 800px;
     padding: 0 20px;
 }

 /* Hero 内部排版 */
 .events-hero h1 {
     font-size: 3.5rem;
     font-weight: 700;
     margin-bottom: 15px;
     font-family: 'Georgia', serif;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
 }

 .hero-subtitle {
     font-size: 1.2rem;
     font-family: 'Arial', sans-serif;
     color: rgba(255, 255, 255, 0.9);
     line-height: 1.6;
     margin-bottom: 30px;
     font-style: italic;
 }

 .divider-light {
     width: 60px;
     height: 4px;
     background: #fff;
     margin: 0 auto;
     border-radius: 2px;
     opacity: 0.9;
 }


 /* --- 2. Main Layout (布局与分类) --- */
 .events-section {
     padding-top: 40px;
     padding-bottom: 100px;
 }

 /* 确保标题本身没有多余的顶部边距 */
 .events-block:first-child .block-title {
     margin-top: 0;
 }

 /* 两个区块之间的分割空间 */
 .section-spacer {
     height: 80px;
     border-bottom: 1px dashed #e0e0e0;
     /* 虚线分割 */
     margin-bottom: 80px;
     width: 100%;
 }

 /* 区块标题 (Upcoming / Past) */
 .block-title {
     font-size: 2rem;
     font-family: 'Georgia', serif;
     /* [修改] 颜色改为品牌红 #800810 */
     color: var(--primary-color);
     margin-bottom: 10px;
     font-weight: bold;
 }

 .divider-left {
     width: 50px;
     height: 3px;
     background: var(--primary-color);
     margin-bottom: 40px;
     border-radius: 2px;
 }

 /* 网格布局 */
 .events-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     /* 默认三列 */
     gap: 30px;
 }


 /* --- 3. Event Card (通用卡片样式) --- */
 .event-card {
     background: #fff;
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
     display: flex;
     flex-direction: column;
     position: relative;
     height: 100%;
     border-bottom: 3px solid transparent;
     /* 预留红条位置 */
 }

 .event-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 15px 30px rgba(128, 8, 16, 0.15);
     border-bottom-color: var(--primary-color);
 }

 /* 图片区域 */
 .event-img-box {
     position: relative;
     height: 220px;
     overflow: hidden;
     background-color: #eee;
 }

 .event-img-box img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s ease;
 }

 .event-card:hover .event-img-box img {
     transform: scale(1.08);
 }

 /* 日期徽章 */
 .date-badge {
     position: absolute;
     top: 15px;
     left: 15px;
     background: rgba(255, 255, 255, 0.95);
     width: 60px;
     height: 60px;
     border-radius: 6px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
     z-index: 10;
     line-height: 1;
 }

 .date-badge .day {
     font-size: 1.5rem;
     font-weight: bold;
     color: var(--primary-color);
     font-family: 'Georgia', serif;
     margin-bottom: 2px;
 }

 .date-badge .month {
     font-size: 0.75rem;
     font-weight: 700;
     text-transform: uppercase;
     color: #444;
     font-family: 'Arial', sans-serif;
 }

 /* 内容区域 */
 .event-content {
     padding: 25px;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
 }

 .event-meta {
     display: flex;
     gap: 15px;
     margin-bottom: 12px;
     font-size: 0.85rem;
     color: #777;
     font-family: 'Arial', sans-serif;
 }

 .event-meta i {
     color: var(--primary-color);
     margin-right: 5px;
 }

 .event-title {
     font-family: 'Georgia', serif;
     font-size: 1.25rem;
     color: var(--secondary-color);
     margin-bottom: 12px;
     line-height: 1.35;
     transition: color 0.3s ease;
 }

 .event-card:hover .event-title {
     color: var(--primary-color);
 }

 .event-desc {
     font-family: 'Arial', sans-serif;
     font-size: 0.95rem;
     color: #666;
     line-height: 1.6;
     margin-bottom: 20px;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .event-footer {
     margin-top: auto;
     padding-top: 15px;
     border-top: 1px solid #f9f9f9;
 }

 .event-link {
     font-size: 0.9rem;
     font-weight: bold;
     color: var(--primary-color);
     text-transform: uppercase;
     letter-spacing: 1px;
     display: inline-flex;
     align-items: center;
     transition: all 0.3s ease;
     text-decoration: none;
     font-family: 'Arial', sans-serif;
 }

 .event-link:hover {
     padding-left: 5px;
 }


 /* --- 4. Past Events Specifics (往期活动：视觉降级) --- */

 /* 图片默认黑白 */
 .past-card .event-img-box img {
     filter: grayscale(100%);
     transition: transform 0.6s ease, filter 0.6s ease;
 }

 /* 悬停恢复彩色 */
 .past-card:hover .event-img-box img {
     filter: grayscale(0%);
 }

 /* 徽章灰色 */
 .past-badge {
     background: #f0f0f0;
     box-shadow: none;
 }

 .past-badge .day {
     color: #888;
 }

 .past-badge .month {
     color: #999;
 }

 /* 标题和链接默认灰色 */
 .past-card .event-title {
     color: #555;
 }

 .past-card:hover .event-title {
     color: var(--primary-color);
 }

 .past-card .event-link {
     color: #777;
 }

 .past-card:hover .event-link {
     color: var(--primary-color);
 }


 /* --- 5. Animation Delays (配合 fade-in-up 脚本) --- */
 /* 波浪式显示 */
 .events-grid .event-card.fade-in-up:nth-child(3n+1) {
     transition-delay: 0s;
 }

 .events-grid .event-card.fade-in-up:nth-child(3n+2) {
     transition-delay: 0.15s;
 }

 .events-grid .event-card.fade-in-up:nth-child(3n+3) {
     transition-delay: 0.3s;
 }

 .events-hero h1.fade-in-up {
     transition-delay: 0s;
 }

 .events-hero .hero-subtitle.fade-in-up {
     transition-delay: 0.2s;
 }

 .events-hero .divider-light.fade-in-up {
     transition-delay: 0.4s;
 }


 /* --- 6. Responsive Styles (移动端适配) --- */
 @media (max-width: 1024px) {
     .events-grid {
         grid-template-columns: repeat(2, 1fr);
         /* 平板两列 */
     }
 }

 @media (max-width: 768px) {
     .events-hero {
         height: auto;
         padding: 80px 0;
     }

     .events-hero h1 {
         font-size: 2.2rem;
     }

     .events-grid {
         grid-template-columns: 1fr;
         /* 手机一列 */
         gap: 40px;
     }

     /* 手机端取消延迟，防止滑动卡顿感 */
     .events-grid .event-card.fade-in-up,
     .events-hero .fade-in-up {
         transition-delay: 0s !important;
     }

     .block-title {
         font-size: 1.5rem !important;
     }
 }

 /* ==========================================================================
   College Matriculation Page
   ========================================================================== */

 /* --- 1. Unified Page Header (模仿 Calendar 标题风格) --- */
 .unified-page-header {
     padding-top: 100px;
     /* 留出顶部导航空间 */
     padding-bottom: 50px;
     text-align: center;
     max-width: 900px;
     margin: 0 auto;
 }

 .page-title {
     font-family: 'Georgia', serif;
     /* 衬线体 */
     font-size: 3rem;
     /* 使用品牌红 #800810 */
     color: var(--primary-color, #800810);
     font-weight: 700;
     margin-bottom: 20px;
     letter-spacing: -0.5px;
 }

 .header-divider {
     width: 60px;
     height: 4px;
     background-color: var(--primary-color, #800810);
     margin: 0 auto 25px;
     /* 居中红线 */
     border-radius: 2px;
 }

 .page-subtitle {
     font-family: 'Arial', sans-serif;
     font-style: italic;
     /* 斜体 */
     font-size: 1.1rem;
     color: #666;
     line-height: 1.6;
 }

 /* --- 2. Highlights Section (保持红色背景) --- */
 .highlight-section {
     position: relative;
     /* 1. 背景设置：红膜 + 图片 */
     background: linear-gradient(rgba(128, 8, 16, 0.92),
             rgba(128, 8, 16, 0.92)), url('/images/academics/college_banner.jpg');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     /* 视差滚动效果 */

     /* 2. [关键修改] 高度调整 */
     /* 上下各 140px,总高度会显著增加,显得非常大气 */
     padding: 140px 0;
     color: #fff;
     text-align: center;
     box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.2);
 }

 .highlight-content {
     max-width: 900px;
     margin: 0 auto;
 }

 .highlight-title {
     font-family: 'Georgia', serif;
     font-size: 2.2rem;
     margin-bottom: 20px;
     color: #fff;
 }

 .divider-center-white {
     width: 60px;
     height: 3px;
     background: #fff;
     margin: 0 auto 25px;
     opacity: 0.8;
 }

 .highlight-text {
     font-family: 'Arial', sans-serif;
     font-size: 1.15rem;
     line-height: 1.8;
     font-weight: 300;
     opacity: 0.95;
 }


 /* --- 3. Image Display Section --- */
 .list-display-section {
     padding: 60px 0 0;
     background-color: #fff;
 }

 .list-image-wrapper {
     max-width: 1140px !important;
     margin: 0 auto;
     border: 1px solid #e0e0e0;
     padding: 10px;
     /* 相框留白 */
     background: #fff;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
     border-radius: 4px;
     /* transition: transform 0.3s ease; */
 }

 .list-image-wrapper:hover {
     /* transform: translateY(-5px); */
     cursor: default;
 }

 .matriculation-img {
     width: 100%;
     height: auto;
     display: block;
 }


 /* --- 4. Download Bar Section (横条设计) --- */
 /* 1. 区域背景 */
 .download-bar.college {
     background: #f9f9f9;
     /* 浅灰背景 */
     border: 1px solid #eee;
     border-radius: 8px;
     padding: 30px 40px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     max-width: 1140px !important;
     /* 限制宽度，显得精致 */
     margin: 0 auto;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
     border-left: 5px solid var(--primary-color);
     /* 左侧红线装饰，呼应品牌 */
     transition: transform 0.3s ease;
 }

 /* 移动端适配 */
 @media (max-width: 768px) {
     .page-title {
         font-size: 2.2rem;
     }

     /* 手机端下载条变为垂直排列 */
     .download-bar {
         flex-direction: column;
         align-items: flex-start;

     }

     .bar-right-action {
         width: 100%;
         text-align: right;
     }
 }

 /* ==========================================================================
   College Counseling Page
   ========================================================================== */

 /* --- 基础设置 --- */
 .style-serif {
     font-family: 'Playfair Display', 'Georgia', serif;
 }

 .text-primary {
     color: var(--primary-color);
 }

 /* 背景色工具类 */
 .bg-light-gray {
     background-color: #f9f9f9;
 }

 /* 文本排版工具类 */
 .text-lead {
     font-size: 1.1rem;
     line-height: 1.8;
     margin-bottom: 20px;
     color: #444;
 }

 .text-mb {
     margin-bottom: 20px;
 }

 /* 垂直居中对齐的 Grid (用于红框区域) */
 .grid-v-center {
     align-items: center;
 }

 /* 强制拉伸等高的 Grid (用于团队卡片) */
 .grid-stretch {
     align-items: stretch;
 }

 /* =========================================================
   2. 页面标题区域 (Page Header)
   ========================================================= */
 .page-header-container {
     text-align: center;
     padding-top: 100px;
     padding-bottom: 30px;
     /* ★ 修改点：从 60px 减小到 30px */
     max-width: 900px;
     margin: 0 auto;
 }

 /* 主标题：带红色下划线 */
 .main-page-title {
     font-family: 'Playfair Display', serif;
     font-size: 3.5rem;
     line-height: 1.1;
     color: var(--primary-color);
     margin-bottom: 20px;
     /* ★ 修改点：稍微减少标题下方的外边距 */
     position: relative;
     padding-bottom: 25px;
 }

 .main-page-title::after {
     content: '';
     display: block;
     width: 60px;
     height: 3px;
     background-color: var(--primary-color);
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
 }

 .header-subtitle {
     font-size: 1.3rem;
     color: #666;
     font-style: italic;
     margin-top: 20px;
     /* ★ 修改点：减少副标题上方间距 */
 }

 /* =========================================================
   3. 通用 Section 标题 (无下划线)
   ========================================================= */
 .section-header-center {
     text-align: center;
     margin-bottom: 50px;
 }

 .section-tight-top {
     padding-top: 20px;
     /* 强制减少顶部内边距 (默认通常是 60px-80px) */
     padding-bottom: 80px;
 }

 .section-title-clean {
     font-family: 'Playfair Display', serif;
     font-size: 2.2rem;
     color: var(--primary-color);
     margin-bottom: 20px;
     border: none !important;
     padding-bottom: 0 !important;
     position: relative;
 }

 .section-title-clean::after,
 .section-title-clean::before {
     display: none !important;
 }

 .section-desc {
     color: #666;
     font-size: 1.05rem;
 }

 /* =========================================================
   4. 红色数据方块 (Stat Box) - 居中版
   ========================================================= */
 .stat-card-box {
     background: var(--primary-color);
     color: #fff;
     padding: 50px 40px;
     border-radius: 4px;
     position: relative;
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
     text-align: center;
     /* 文本水平居中 */
     /* 垂直居中内部内容 */
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }

 .stat-card-box::before {
     content: '"';
     position: absolute;
     top: 10px;
     left: 20px;
     font-size: 5rem;
     font-family: 'Playfair Display', serif;
     color: rgba(255, 255, 255, 0.1);
     line-height: 0;
 }

 .stat-title {
     font-size: 3.5rem;
     color: #fff;
     margin-bottom: 15px;
     line-height: 1;
 }

 .stat-text {
     color: rgba(255, 255, 255, 0.9);
     font-size: 1.05rem;
     line-height: 1.6;
 }

 /* =========================================================
   5. 路线图卡片 (Roadmap Cards)
   ========================================================= */
 .card-roadmap {
     position: relative;
     overflow: hidden;
     border-top: 4px solid var(--primary-color);
     background: #fff;
     padding: 30px;
     height: 100%;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     transition: all 0.3s ease;
 }

 .card-roadmap:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
 }

 .watermark-bg {
     position: absolute;
     top: 10px;
     right: 15px;
     font-size: 5rem;
     font-weight: 900;
     color: var(--primary-color);
     opacity: 0.06;
     line-height: 1;
     z-index: 0;
     font-family: 'Playfair Display', serif;
 }

 .card-content-inner {
     position: relative;
     z-index: 1;
 }

 .roadmap-title {
     font-size: 1.5rem;
     margin-bottom: 10px;
 }

 .roadmap-label {
     font-weight: bold;
     font-size: 0.85rem;
     color: #666;
     text-transform: uppercase;
     margin-bottom: 15px;
     display: block;
 }

 /* =========================================================
   6. 红色 CTA 区域
   ========================================================= */
 .section-cta-red {
     position: relative;
     /* 为遮罩层定位做准备 */

     /* 背景图 URL:
       这里建议用一张“图书馆、校园建筑”或“抽象连接线”的图片。
       我暂时放了一张偏暗的抽象几何/建筑图作为示例。
    */
     background-image: url('/images/academics/math7.jpg');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     /* 视差效果：背景固定不动，更有高级感 */
     padding: 100px 0;
     /* 稍微增加高度，让背景露出来更多 */
     text-align: center;
     color: #fff;
     overflow: hidden;
     /* 防止边缘溢出 */
 }

 .cta-title {
     font-size: 2.2rem;
     color: #fff;
     margin-bottom: 30px;
 }

 /* ★ 关键：添加深红色半透明遮罩 ★ */
 .section-cta-red::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;

     /* 使用您的品牌红 (var(--primary-color)) 
       配合 opacity 来控制透明度。
       0.85 表示 85% 是红色, 15% 透出背景图。
       如果觉得背景太明显，可以把 0.85 改成 0.9。
    */
     background-color: var(--primary-color);
     opacity: 0.85;

     z-index: 1;
     /* 在背景图之上 */
 }

 /* ★ 确保文字和按钮在遮罩之上，否则会被盖住变暗 ★ */
 .section-cta-red .container {
     position: relative;
     z-index: 2;
 }

 /* 按钮微调：增加一点阴影，使其在复杂背景上更清晰 */
 .section-cta-red .btn-outline-white {
     background-color: rgba(0, 0, 0, 0.1);
     /* 极淡的黑色底，增加可读性 */
     border-color: rgba(255, 255, 255, 0.8);
     backdrop-filter: blur(2px);
     /* 磨砂玻璃感（可选，现代浏览器支持） */
 }

 .section-cta-red .btn-outline-white:hover {
     background-color: #fff;
     color: var(--primary-color);
     border-color: #fff;
 }

 .btn-outline-white {
     display: inline-block;
     padding: 15px 40px;
     border: 1px solid rgba(255, 255, 255, 0.6);
     color: #fff;
     text-decoration: none;
     font-size: 1.1rem;
     transition: all 0.3s ease;
     margin: 10px;
 }

 .btn-outline-white:hover {
     background: #fff;
     color: var(--primary-color);
     border-color: #fff;
 }

 /* =========================================================
   7. 团队卡片 (Team Cards)
   ========================================================= */
 .team-card {
     display: flex;
     gap: 25px;
     background-color: #fff;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
     padding: 30px;
     border-radius: 6px;
     height: 100%;
     box-sizing: border-box;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .team-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
 }

 .team-card-img-box {
     flex-shrink: 0;
 }

 .team-img-framed {
     width: 140px;
     height: 170px;
     object-fit: cover;
     box-shadow: 6px 6px 0px rgba(128, 8, 16, 0.1);
 }

 .team-card-content {
     flex-grow: 1;
     display: flex;
     flex-direction: column;
     text-align: left;
 }

 .team-name {
     margin: 0 0 5px;
 }

 .team-role {
     display: block;
     font-size: 0.85rem;
     text-transform: uppercase;
     font-weight: bold;
     color: #888;
     margin-bottom: 15px;
     border-bottom: 1px solid #f0f0f0;
     padding-bottom: 10px;
     letter-spacing: 0.5px;
 }

 .team-bio-text p {
     font-size: 0.95rem;
     line-height: 1.7;
     margin-bottom: 10px;
     color: #444;
 }

 /* 滚动条部分 */
 .bio-scrollable .team-bio-text {
     max-height: 250px;
     overflow-y: auto;
     padding-right: 10px;
 }

 .bio-scrollable .team-bio-text::-webkit-scrollbar {
     width: 5px;
 }

 .bio-scrollable .team-bio-text::-webkit-scrollbar-track {
     background: #f9f9f9;
 }

 .bio-scrollable .team-bio-text::-webkit-scrollbar-thumb {
     background: #ddd;
     border-radius: 3px;
 }


 /* =========================================================
   8. 移动端适配 (Mobile Responsiveness)
   ========================================================= */
 @media (max-width: 768px) {

     .section-tight-top {
         padding-top: 10px;
         /* 手机上几乎不需要间隙 */
     }

     /* 标题 */
     .main-page-title {
         font-size: 2.4rem;
         margin-bottom: 20px;
         padding-bottom: 20px;
     }

     .header-subtitle {
         font-size: 1rem;
         padding: 0 15px;
     }

     .page-header-container {
         padding-top: 50px;
         padding-bottom: 20px;
         /* 手机上进一步收紧 */
     }

     .text-lead {
         font-size: 0.95rem;
         /* 从 1.1rem 缩小到 0.95rem (约15px)，更适合手机阅读 */
         line-height: 1.6;
         /* 行高从 1.8 收紧到 1.6, 避免段落拉得太长 */
         color: #555;
         /* 稍微加深一点颜色，增加对比度（可选） */
         text-align: left;
         /* 手机上通常左对齐阅读体验最好 */
     }

     .section-title-clean {
         font-size: 1.8rem;
         margin-bottom: 15px;
         /* 减少标题和正文之间的空白 */
     }

     /* 红色数据块 */
     .stat-card-box {
         padding: 30px;
     }

     .stat-title {
         font-size: 2.5rem;
     }

     /* 缩小数字 */
     /* 路线图 */
     .watermark-bg {
         font-size: 4rem;
         top: 5px;
     }

     .roadmap-title {
         font-size: 1.3rem;
     }

     /* CTA */
     .section-cta-red {
         background-attachment: scroll;
         padding: 60px 0;
     }

     .cta-title {
         font-size: 1.8rem;
     }

     .btn-outline-white {
         display: block;
         width: 100%;
         max-width: 300px;
         margin: 10px auto;
     }

     /* 团队 */
     .team-card {
         flex-direction: column;
         align-items: center;
         text-align: center;
         height: auto;
         padding: 30px 20px;
     }

     .team-card-content {
         text-align: center;
     }

     .team-img-framed {
         width: 120px;
         height: 144px;
     }

     .grid-2 {
         grid-template-columns: 1fr;
         gap: 40px;
     }
 }

 /* =========================================================
   Academics Curriculum Page Styles (Final Consolidated)
   ========================================================= */

 .container-wide {
     max-width: 1140px;
     margin: 0 auto;
     padding: 0 20px;
     position: relative;
 }

 .style-serif {
     font-family: "Playfair Display", Georgia, "Times New Roman", serif;
 }

 /* =========================================
   Part 1: Hero Header (顶部横幅)
   ========================================= */
 .curriculum-hero {
     padding: 80px 0;
     background-color: #fdfdfd;
     text-align: center;
     border-bottom: 1px solid #eee;
 }

 .page-title {
     font-size: 3rem;
     color: var(--primary-color);
     margin-bottom: 15px;
     font-weight: 700;
 }

 .title-divider {
     width: 60px;
     height: 3px;
     background-color: var(--primary-color);
     margin: 0 auto 30px;
     border: none;
 }

 .hero-text-wrapper {
     max-width: 750px;
     margin: 0 auto 40px;
 }

 .text-lead {
     font-size: 1.15rem;
     line-height: 1.8;
     color: #444;
 }

 .btn-download-pill {
     display: inline-block;
     background-color: var(--primary-color);
     color: #fff;
     padding: 15px 40px;
     border-radius: 50px;
     text-decoration: none;
     font-family: "Playfair Display", serif;
     font-size: 1.1rem;
     box-shadow: 0 4px 15px rgba(139, 0, 0, 0.2);
     transition: transform 0.2s;
 }

 .btn-download-pill:hover {
     transform: translateY(-2px);
     color: #fff;
 }

 /* =========================================
   Part 2: Main Layout (核心布局)
   ========================================= */
 .section-curriculum {
     padding-top: 60px;
     padding-bottom: 20px;
     background-color: #fff;
     /* min-height: 800px; */
 }

 /* 电脑端副标题 */
 .section-main-title {
     text-align: center;
     font-size: 2.2rem;
     color: var(--primary-color);
     margin-bottom: 60px;
     font-weight: 700;
 }

 .main-layout {
     display: grid;
     grid-template-columns: 260px 1fr;
     /* 左侧固定260px，右侧自适应 */
     gap: 60px;
     align-items: start;
 }

 /* =========================================
   Part 3: Dept Sidebar (左侧隔离导航)
   ★ 已重命名为 dept- 前缀，防止冲突 ★
   ========================================= */
 .dept-sidebar-col {
     width: 100%;
     position: relative;
     z-index: 10;
 }

 .dept-sticky-menu {
     position: sticky;
     top: 100px;
     /* 距离顶部留空 */
     background: #fff;
     padding: 10px 0;
     border-right: 1px solid #f0f0f0;
 }

 .dept-nav-list {
     list-style: none;
     padding: 0;
     margin: 0;
 }

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

 /* 链接按钮样式 */
 .dept-tab-link {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 12px 20px;
     font-family: "Playfair Display", serif;
     font-size: 1.05rem;
     color: #555;
     text-decoration: none !important;
     border-radius: 4px 0 0 4px;
     border-left: 3px solid transparent;
     transition: all 0.3s ease;
 }

 /* Hover 效果 */
 .dept-tab-link:hover {
     background-color: #fcfcfc;
     color: #000;
     padding-left: 25px;
 }

 /* 激活状态 */
 .dept-tab-link.dept-active {
     background-color: #fff5f5;
     color: var(--primary-color);
     border-left: 3px solid var(--primary-color);
     font-weight: 700;
 }

 /* 小箭头 */
 .dept-arrow {
     opacity: 0;
     transform: translateX(-5px);
     transition: all 0.3s ease;
     font-family: sans-serif;
     font-size: 0.9em;
 }

 .dept-tab-link:hover .dept-arrow,
 .dept-tab-link.dept-active .dept-arrow {
     opacity: 1;
     transform: translateX(0);
 }

 /* =========================================
   Part 4: Right Content (右侧内容区)
   ========================================= */
 .content-col {
     min-height: 500px;
 }

 .catalog-category {
     display: none;
     /* 默认隐藏 */
     animation: fadeIn 0.4s ease-in-out;
 }

 .catalog-category.active {
     display: block;
     /* 激活显示 */
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .category-header {
     font-size: 2.5rem;
     color: var(--primary-color);
     margin: 0 0 30px 0;
     padding-bottom: 15px;
     border-bottom: 2px solid var(--primary-color);
     display: inline-block;
     line-height: 1.1;
 }

 /* --- 手风琴样式 --- */
 .accordion-item {
     border-bottom: 1px solid #eee;
 }

 /* 默认隐藏超过5个的项目 (由JS控制) */
 .accordion-item.hidden-item {
     display: none;
 }

 /* 显示时的动画效果 */
 .accordion-item.fade-in-item {
     animation: fadeInItem 0.5s ease forwards;
 }

 @keyframes fadeInItem {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .accordion-trigger {
     width: 100%;
     background: none;
     border: none;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 25px 0;
     cursor: pointer;
     text-align: left;
 }

 .course-title {
     font-size: 1.25rem;
     color: #222;
     font-weight: 600;
 }

 .accordion-trigger:hover .course-title {
     color: var(--primary-color);
 }

 .icon-circle {
     width: 32px;
     height: 32px;
     border: 1px solid #ccc;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease;
     flex-shrink: 0;
 }

 .plus-sign {
     font-style: normal;
     color: #888;
     transition: transform 0.3s ease;
 }

 /* 手风琴激活态 */
 .accordion-item.active .icon-circle {
     border-color: var(--primary-color);
     background: var(--primary-color);
 }

 .accordion-item.active .plus-sign {
     transform: rotate(45deg);
     color: #fff;
 }

 .accordion-item.active .course-title {
     color: var(--primary-color);
 }

 .accordion-content {
     max-height: 0;
     overflow: hidden;
     transition: all 0.4s;
     opacity: 0;
 }

 .accordion-item.active .accordion-content {
     max-height: 2000px;
     opacity: 1;
 }

 .content-inner {
     padding: 10px 0 30px 0;
 }

 /* --- Metadata Boxes --- */
 .meta-data-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
     gap: 20px;
     background: #f9f9f9;
     padding: 20px;
     border-radius: 8px;
     margin-bottom: 20px;
 }

 .meta-box {
     display: flex;
     flex-direction: column;
 }

 .meta-label {
     font-size: 0.75rem;
     text-transform: uppercase;
     color: #888;
 }

 .meta-value {
     font-size: 1rem;
     font-weight: 600;
     color: #333;
 }

 .badge-highlight {
     color: #d35400;
 }

 .badge-ap {
     color: #c0392b;
 }

 /* --- Prerequisites Row (先修课) --- */
 .prereq-row {
     margin-top: 15px;
     padding-top: 15px;
     border-top: 1px dashed #eee;
     font-size: 0.95rem;
     color: #555;
     display: flex;
     align-items: baseline;
 }

 .prereq-label {
     font-weight: 700;
     color: #222;
     margin-right: 8px;
     font-family: "Playfair Display", serif;
 }

 .prereq-value {
     color: #666;
 }

 /* --- Load More Button --- */
 .btn-load-more {
     /* ... 保留之前的颜色、圆角等设置 ... */
     background-color: #a83232;
     color: #ffffff !important;
     border-radius: 30px;
     padding: 12px 35px;

     /* === 核心修改：居中代码 === */
     display: none;
     /* 强制变成块级元素，这样 margin 才会生效 */
     width: fit-content;
     /* 关键：让按钮宽度适应文字，不要占满整行 */
     margin: 30px auto;
     /* 上下间距30px，左右自动(即居中) */

     /* 其他样式 */
     border: none;
     font-weight: 600;
     text-transform: uppercase;
     box-shadow: 0 4px 6px rgba(168, 50, 50, 0.2);
     transition: all 0.3s ease;
     cursor: pointer;
 }

 .btn-load-more:hover {
     background-color: #8a2828;
     /* 悬停时颜色变深 */
     box-shadow: 0 6px 12px rgba(168, 50, 50, 0.4);
     /* 投影变大 */
     transform: translateY(-2px);
     /* 按钮也轻微上浮 */
 }

 /* 按钮点击瞬间 */
 .btn-load-more:active {
     transform: translateY(1px);
     /* 点击时下沉，有按压感 */
     box-shadow: 0 2px 4px rgba(168, 50, 50, 0.2);
 }

 .btn-load-more.hidden {
     display: none;
 }

 /* =========================================
   Part 5: Research & Development Program
   (Final Fixed Version)
   ========================================= */

 /* 容器 & 防御性重置 (防止外联干扰) */
 .section-research {
     padding: 40px 0;
     background-color: #fcfcfc;
     border-bottom: 1px solid #eee;

     /* 核心防御 */
     border-left: none !important;
     border-right: none !important;
     border-top: none !important;
     background-image: none !important;
     box-shadow: none !important;
 }

 /* 标题区 */
 .research-header {
     text-align: center;
     max-width: 850px;
     margin: 0 auto 60px;
     position: relative;
     border: none !important;
 }

 .section-title {
     font-size: 2.4rem;
     color: var(--primary-color);
     margin-bottom: 25px;
     font-weight: 700;
     position: relative;
     display: inline-block;
     border: none !important;
 }

 /* 强制清除幽灵线 */
 .section-research .section-title::before,
 .section-research .section-title::after,
 .section-research .research-header::before,
 .section-research .research-header::after {
     content: none !important;
     display: none !important;
 }

 .research-intro {
     font-size: 1.15rem;
     line-height: 1.8;
     color: #444;
     text-align: center;
 }

 .subsection-title {
     text-align: center;
     font-size: 1.8rem;
     color: #222;
     margin-bottom: 40px;
     border: none !important;
 }

 /* Grid 布局 (3列) */
 .research-grid-3 {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 30px;
     align-items: stretch;
 }

 /* 卡片样式 */
 .research-card {
     background: #fff;
     border-radius: 6px;
     border: 1px solid #f0f0f0 !important;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
     transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s;
     position: relative;
     display: flex;
     flex-direction: column;
     overflow: hidden;
 }

 .research-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 15px 40px rgba(139, 0, 0, 0.12) !important;
 }

 .card-top-accent {
     height: 4px;
     background-color: var(--primary-color);
     width: 100%;
 }

 .card-body {
     padding: 35px 30px;
     flex-grow: 1;
     display: flex;
     flex-direction: column;
 }

 /* 卡片内标签 */
 .card-meta {
     margin-bottom: 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .badge-grade {
     background-color: #f3f3f3;
     color: #333;
     padding: 5px 10px;
     border-radius: 4px;
     font-size: 0.8rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .badge-senior {
     background-color: #333;
     color: #fff;
 }

 .badge-step {
     font-family: Georgia, serif;
     font-style: italic;
     color: #d0d0d0;
     font-size: 1rem;
 }

 /* 核心对齐修复区 */
 .card-title {
     font-size: 1.35rem;
     color: var(--primary-color);
     margin: 0 0 8px 0;
     font-weight: 700;
     line-height: 1.3;
     text-align: left;
     min-height: 3.6rem;
     /* 强制对齐高度 */
     display: flex;
     align-items: flex-start;
 }

 .card-subtitle {
     font-size: 0.95rem;
     color: #777;
     font-weight: 400;
     font-style: italic;
     margin: 0 0 20px 0;
     font-family: Georgia, serif;
     text-align: left;
     border: none !important;
     padding: 0 !important;
     min-height: 2.8rem;
     /* 强制对齐高度 */
     display: flex;
     align-items: flex-start;
 }

 .card-text {
     font-size: 0.95rem;
     line-height: 1.7;
     color: #555;
     text-align: left !important;
     margin-top: auto;
 }

 /* =========================================
   Part 6: Mobile Media Queries (移动端适配 - 最终美化版)
   ========================================= */
 @media (max-width: 768px) {

     /* 1. 字体与间距调整 */
     .page-title {
         font-size: 2.2rem;
     }

     .section-main-title {
         font-size: 1.6rem;
         margin-bottom: 25px;
     }

     .category-header {
         font-size: 1.8rem;
         margin-top: 10px;
     }

     .course-title {
         font-size: 1.1rem;
     }

     /* 2. 主布局变单列 */
     .main-layout {
         display: flex;
         flex-direction: column;
         gap: 40px;
         /* 增加间距，让侧边栏和内容不挤在一起 */
     }

     .section-curriculum {
         padding-top: 20px;
         padding-bottom: 80px;
     }

     /* 3. 侧边栏适配 (垂直堆叠列表 - 优雅版) */
     .dept-sidebar-col {
         width: 100%;
         margin-bottom: 10px;
     }

     .dept-sticky-menu {
         position: static;
         border: none;
         padding: 0;
         margin: 0;
         overflow: visible;
     }

     .dept-nav-list {
         display: flex;
         flex-direction: column;
         /* 垂直排列 */
         gap: 12px;
         /* 每一项之间的间距 */
     }

     .dept-tab-link {
         width: 100%;
         display: flex;
         justify-content: space-between;
         /* 文字靠左，箭头靠右 */
         align-items: center;

         padding: 18px 24px;
         /* 增加内边距，手指更容易点 */
         background-color: #fff;
         border: 1px solid #f0f0f0;
         border-radius: 8px;
         /* 圆角 */
         border-left: 4px solid transparent;
         /* 为激活状态预留位置 */

         font-family: "Playfair Display", serif;
         font-size: 1.05rem;
         color: #555;
         font-weight: 600;
         text-align: left;
         /* ★ 关键：左对齐，长文字换行才好看 */
         text-decoration: none !important;

         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
         /* 极淡的阴影，增加层次 */
         transition: all 0.2s ease;
     }

     /* 选中状态：左侧红条 + 文字变红 */
     .dept-tab-link.dept-active {
         background-color: #fff;
         color: var(--primary-color);
         border-color: #eee;
         border-left-color: var(--primary-color);
         /* 只有左边变红 */
         box-shadow: 0 8px 20px rgba(139, 0, 0, 0.08);
         /* 激活时阴影稍微加深 */
         transform: translateX(2px);
         /* 微微向右动一点，有反馈感 */
     }

     /* 移动端把小箭头显示出来，放在右侧 */
     .dept-arrow {
         display: block;
         opacity: 0.3;
         font-size: 1.2rem;
         font-weight: 300;
     }

     .dept-tab-link.dept-active .dept-arrow {
         opacity: 1;
         color: var(--primary-color);
     }

     /* 4. R&D 卡片适配 */
     .section-research {
         padding: 60px 0;
     }

     .research-grid-3 {
         grid-template-columns: 1fr;
         gap: 30px;
     }

     .card-body {
         padding: 25px 20px;
     }

     .card-title,
     .card-subtitle {
         min-height: auto;
         display: block;
         text-align: left;
     }
 }

 /* 核心：隐藏项目的样式 */
 .hidden-item {
     display: none !important;
     /* 使用 important 确保覆盖原有的 display 属性 */
 }

 /* 确保按钮可见，除非 JS 把它藏了 */
 .btn-load-more {
     cursor: pointer;
     /* display: block;  <-- 如果用了 flex 布局，不要强行写 block，不然会乱 */
 }


 /* =========================================
   Student Life Page Styles (Fixed Layout)
   ========================================= */


 /* 通用 Section 间距 */
 .sl-section {
     padding: 80px 0;
 }

 /* --- 1. 红色沉浸式介绍区 (Overlay Hero) --- */
 .sl-hero-section {
     position: relative;
     /* 背景图设置：红色渐变覆盖 + 底部图片 */
     background: linear-gradient(to bottom,
             rgba(128, 8, 16, 0.92),
             rgba(128, 8, 16, 0.85)),
         /* ↓↓↓ 请在此处替换您的真实背景图 URL ↓↓↓ */
         url('/images/student-life/student life_2.jpg');

     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     /* 视差滚动效果 */
     padding: 100px 0;
     color: #fff;
     text-align: center;
     margin-bottom: 80px;
 }

 /* 引用样式 */
 .sl-hero-quote {
     max-width: 900px;
     margin: 0 auto 40px;
     text-align: center;
     /* 让整个块居中 */
 }

 .sl-hero-quote blockquote {
     font-family: 'Georgia', serif;
     font-size: 1.6rem;
     font-style: italic;
     line-height: 1.5;
     margin-bottom: 25px;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
     position: relative;
     display: inline-block;
     /* 关键：让宽度自适应文字，不占满全屏 */
 }

 /* 使用 CSS 自动添加大引号 */
 .sl-hero-quote blockquote::before {
     content: "“";
     /* 自动生成引号 */
     font-family: serif;
     font-size: 4rem;
     /* 引号非常大 */
     line-height: 1;
     color: rgba(255, 255, 255, 0.4);
     /* 半透明白色 */

     /* 位置微调：让它看起来像在第一行文字前面 */
     vertical-align: -0.4rem;
     margin-right: 10px;
 }

 .sl-hero-quote cite {
     font-size: 1rem;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-weight: 700;
     opacity: 0.9;
     font-style: normal;
     display: block;
     margin-top: 10px;
 }

 /* 白色分割线 */
 .sl-divider-white {
     width: 80px;
     height: 3px;
     background-color: rgba(255, 255, 255, 0.5);
     margin: 0 auto 50px;
 }

 /* 介绍文字 */
 .sl-hero-text {
     max-width: 800px;
     margin: 0 auto;
 }

 .sl-hero-text p {
     font-size: 1.15rem;
     line-height: 1.8;
     color: rgba(255, 255, 255, 0.95);
     font-weight: 300;
     margin-bottom: 20px;
 }

 /* --- 2. 核心图文布局 (1140px Limit) --- */
 .sl-content-area {
     padding-bottom: 60px;
 }

 .sl-feature-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 60px;
     /* 图文间距 */
     margin-bottom: 100px;
     /* 行间距 */
 }

 /* 图片列 */
 .sl-media-col {
     flex: 1;
     max-width: 50%;
     /* 严格占一半 */
 }

 .sl-media-col img {
     width: 100%;
     height: auto;
     border-radius: 6px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     display: block;
     transition: transform 0.5s ease;
 }

 .sl-feature-row:hover .sl-media-col img {
     transform: scale(1.02);
     /* 悬停微放大 */
 }

 /* 文字列 */
 .sl-text-col {
     flex: 1;
     max-width: 50%;
 }

 .sl-text-col h2 {
     font-family: 'Georgia', serif;
     font-size: 2.2rem;
     color: #222;
     margin-bottom: 20px;
 }

 .sl-divider-left {
     width: 50px;
     height: 4px;
     background: var(--primary-color);
     margin-bottom: 25px;
 }

 .sl-text-col p {
     font-size: 1.05rem;
     line-height: 1.7;
     color: #555;
     margin-bottom: 15px;
     text-align: justify;
 }

 /* 反向布局 (图片在右) */
 .sl-feature-row.reverse {
     flex-direction: row-reverse;
 }

 /* --- 3. 极简卡片风格 (Simple White Cards) --- */
 .sl-bg-gray {
     background-color: var(--sl-gray-bg);
     border-top: 1px solid #eee;
 }

 .sl-grid-3 {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     /* 3列 */
     gap: 40px;
 }

 .sl-simple-card {
     background: #fff;
     padding: 50px 30px;
     border-radius: 8px;
     text-align: center;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
     transition: all 0.3s ease;
     border-bottom: 4px solid transparent;
     /* 预留底部红线 */
 }

 .sl-simple-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
     border-bottom-color: var(--primary-color);
     /* 悬停红线 */
 }

 .card-icon {
     font-size: 3.5rem;
     margin-bottom: 25px;
     display: inline-block;
 }

 .sl-simple-card h3 {
     font-size: 1.4rem;
     margin-bottom: 15px;
     color: #222;
     font-weight: 600;
 }

 .sl-simple-card p {
     font-size: 0.95rem;
     line-height: 1.6;
     color: #666;
 }

 /* --- 4. 移动端适配 (Responsive) --- */
 @media (max-width: 768px) {

     /* 图文强制上下堆叠 */
     .sl-feature-row,
     .sl-feature-row.reverse {
         flex-direction: column;
         gap: 30px;
         margin-bottom: 60px;
     }

     .sl-media-col,
     .sl-text-col {
         max-width: 100%;
         width: 100%;
     }

     /* 手机上图片高度 */
     .sl-media-col img {
         height: auto;
         max-height: 300px;
         object-fit: cover;
     }

     /* 卡片变单列 */
     .sl-grid-3 {
         grid-template-columns: 1fr;
         gap: 20px;
     }

     .sl-hero-quote blockquote {
         font-size: 1.3rem;
     }
 }


 /* ==============================================================
   Employment Page Specific Styles
   ============================================================== */
 .career-hero-fix {
     /* 1. 增加高度：让图片显示更多内容，不再是扁扁的一条 */
     min-height: 500px !important;

     /* 2. 调整焦点：center 25% 表示聚焦在图片上部 1/4 处 */
     /* 通常人脸都在照片的中上部，这样设置可以确保看到脸 */
     background-position: center 25% !important;

     /* 确保图片覆盖整个区域 */
     background-size: cover !important;
 }

 /* 1. 顶部简介区域 */
 .career-intro {
     max-width: 800px;
     margin: 60px auto 50px;
     /* 底部留白 */
     text-align: center;
 }

 .career-intro p {
     font-size: 1.1rem;
     line-height: 1.8;
     color: #555;
     margin-bottom: 20px;
 }

 /* 2. 职位列表容器 */
 .career-listings {
     display: flex;
     flex-direction: column;
     gap: 20px;
     /* 卡片之间的间距 */
     padding-bottom: 60px;
 }

 /* 3. 职位卡片 (核心设计 - 使用 Grid 保证绝对对齐) */
 .career-card {
     display: grid;
     /* 定义三列：1.职位信息(35%) 2.地点信息(45%) 3.箭头(自动) */
     grid-template-columns: 1.5fr 2fr auto;
     gap: 20px;
     align-items: center;
     /* ★关键：强制垂直居中 */

     background: #fff;
     padding: 30px 40px;
     border: 1px solid #eee;
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
     text-decoration: none !important;
     color: inherit;
     position: relative;
     overflow: hidden;
     transition: all 0.3s ease;
 }

 /* 左侧红条装饰 (悬停时显示) */
 .career-card::before {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     width: 4px;
     background: var(--primary-color, #800810);
     transform: scaleY(0);
     transition: transform 0.3s ease;
 }

 /* 悬停交互 */
 .career-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
     border-color: transparent;
 }

 .career-card:hover::before {
     transform: scaleY(1);
 }

 /* --- 卡片内部元素 --- */

 /* 左侧：职位名称与部门 */
 .career-info {
     display: flex;
     flex-direction: column;
 }

 .career-info h3 {
     font-size: 1.35rem;
     font-weight: 700;
     margin: 0 0 6px 0;
     color: #222;
     line-height: 1.2;
 }

 .career-dept {
     font-size: 0.85rem;
     color: var(--primary-color, #800810);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 /* 中间：图标信息 (强制水平排布) */
 .career-meta {
     display: flex;
     align-items: center;
     gap: 30px;
     /* 图标组之间的间距 */
     color: #666;
     font-size: 0.95rem;
 }

 /* 确保图标和文字垂直居中 */
 .career-meta span {
     display: inline-flex;
     align-items: center;
     gap: 8px;
 }

 .career-meta i {
     color: #999;
     font-size: 1rem;
     /* 微调图标位置，使其与文字视觉中心对齐 */
     position: relative;
     top: -1px;
 }

 /* 右侧：箭头动作 */
 .career-action {
     font-weight: 600;
     color: var(--primary-color, #800810);
     display: flex;
     align-items: center;
     gap: 10px;
     white-space: nowrap;
     /* 防止换行 */
 }

 .career-action i {
     transition: transform 0.3s ease;
 }

 .career-card:hover .career-action i {
     transform: translateX(5px);
     /* 箭头向右动 */
 }

 /* 4. 底部联系栏 */
 .career-contact {
     background: #fcfcfc;
     border: 1px dashed #ddd;
     border-radius: 8px;
     padding: 40px;
     text-align: center;
     margin-top: 20px;
 }

 .career-contact p {
     color: #666;
     margin-bottom: 20px;
 }

 .career-contact-btn {
     display: inline-block;
     padding: 12px 35px;
     background-color: var(--primary-color, #800810);
     color: #fff !important;
     border-radius: 4px;
     text-decoration: none;
     font-weight: 500;
     transition: opacity 0.3s;
 }

 .career-contact-btn:hover {
     opacity: 0.9;
 }

 /* =========================================
   移动端适配 (Mobile Responsive)
   ========================================= */
 @media (max-width: 768px) {

     /* 1. 将 Grid 改回 Flex 列布局，防止挤压 */
     .career-card {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         padding: 25px;
         gap: 15px;
     }

     /* 2. 中间信息分两行显示 */
     .career-meta {
         flex-direction: column;
         align-items: flex-start;
         gap: 10px;
         width: 100%;
         padding-bottom: 15px;
         border-bottom: 1px dashed #eee;
         /* 加个分割线更好看 */
     }

     /* 3. 箭头放到最下面 */
     .career-action {
         width: 100%;
         justify-content: space-between;
         /* 文字靠左，箭头靠右 */
         font-size: 0.9rem;
     }

     .career-info h3 {
         font-size: 1.25rem;
     }

     .career-hero-fix {
         min-height: 350px !important;
         background-position: center top !important;
     }

     /* 1. 针对 career-card 移除所有过渡时间 */
     /* 这一点最重要！没有了 transition，浏览器就不需要等待动画播放 */
     .career-card,
     .career-card::before,
     .career-card .career-action i {
         transition: none !important;
     }

     /* 2. 强制覆盖 hover 状态，使其与正常状态保持一致 */
     /* 即使手指按住，也不会发生位移或变色 */
     .career-card:hover {
         transform: none !important;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
         /* 保持原样 */
         border-color: #eee !important;
         /* 保持原样 */
     }

     /* 3. 隐藏左侧红条动画 */
     .career-card:hover::before {
         display: none !important;
         transform: scaleY(0) !important;
     }

     /* 4. 禁止箭头移动 */
     .career-card:hover .career-action i {
         transform: none !important;
     }

     /* 5. (可选) 添加“按压反馈”替代 Hover */
     /* 当手指真正按下时，给一个瞬间的灰色背景，提升手感 */
     .career-card:active {
         background-color: #f5f5f5 !important;
     }
 }

  /* =========================================
   CLUBS & ATHLETICS PAGE STYLES
   ========================================= */
        /* --- Header --- */
        .ca-page-header {
            text-align: center;
            padding: 90px 0 60px;
            background: #fff;
        }

        .ca-page-header h1 {
            font-family: 'Georgia', serif;
            font-size: 3.5rem;
            color: var(--primary-color);
            margin: 10px 0 20px;
        }

        .ca-subtitle {
            text-transform: uppercase;
            letter-spacing: 3px;
            color: #999;
            font-size: 0.85rem;
            font-weight: 600;
        }

        .ca-divider {
            width: 80px;
            height: 3px;
            background: var(--primary-color);
            margin: 0 auto 20px;
        }

        .ca-lead {
            font-size: 1.25rem;
            color: #555;
            font-family: 'Georgia', serif;
            font-style: italic;
            line-height: 1.6;
        }

        /* --- Section Container --- */
        .ca-section {
            padding: 80px 0;
        }

        .ca-bg-white {
            background: #fff;
        }

        .ca-bg-light {
            background: var(--ca-gray);
        }

        /* --- 1. Clubs: Split Layout with Collage --- */
        .ca-split-layout {
            display: flex;
            gap: 60px;
            align-items: center;
        }

        .ca-text-side {
            flex: 1;
        }

        .ca-heading {
            font-family: 'Georgia', serif;
            font-size: 2.5rem;
            color: var(--primary-color);
            margin-bottom: 15px;
        }

        .ca-red-line {
            width: 50px;
            height: 3px;
            background: var(--primary-color);
            margin-bottom: 25px;
        }

        .ca-text-side p {
            font-size: 1.1rem;
            line-height: 1.7;
            color: #444;
            margin-bottom: 20px;
        }

        .ca-schedule-box {
            background: #fffbfb;
            border-left: 4px solid var(--primary-color);
            padding: 15px 20px;
            color: #666;
            font-size: 0.95rem;
            margin-top: 20px;
        }

        /* 拼贴画廊 (Collage Grid) */
        .ca-visual-side {
            flex: 1.2;
            /* 图片区域稍微大一点 */
        }

        .ca-collage-grid {
            display: grid;
            grid-template-columns: 1.5fr 1fr;
            /* 左大右小 */
            grid-template-rows: 200px 200px;
            /* 两行 */
            gap: 15px;
        }

        .collage-item {
            position: relative;
            overflow: hidden;
            border-radius: 6px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .collage-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }

        .collage-item:hover img {
            transform: scale(1.05);
        }

        /* 布局：左边大图占两行，右边两张小图各占一行 */
        .collage-item.main {
            grid-column: 1 / 2;
            grid-row: 1 / 3;
            /* 跨两行 */
        }

        .collage-item.sub1 {
            grid-column: 2 / 3;
            grid-row: 1 / 2;
        }

        .collage-item.sub2 {
            grid-column: 2 / 3;
            grid-row: 2 / 3;
        }

        /* --- Clubs Directory --- */
        .ca-club-strip {
            margin-top: 60px;
            text-align: center;
        }

        .ca-club-strip h3 {
            font-size: 1.2rem;
            color: #333;
            margin-bottom: 25px;
            font-weight: 700;
        }

        .ca-tags-list {
            list-style: none;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }

        .ca-tags-list li {
            background: #fff;
            border: 1px solid #ddd;
            padding: 8px 16px;
            border-radius: 50px;
            /* 胶囊形状 */
            font-size: 0.9rem;
            color: #555;
            transition: all 0.3s;
        }

        .ca-tags-list li:hover {
            background: var(--primary-color);
            color: #fff;
            border-color: var(--primary-color);
            transform: translateY(-2px);
        }

        /* --- Parallax Banner --- */
        .ca-parallax-banner {
            position: relative;
            height: 400px;
            /* 替换背景图 */
            background: linear-gradient(to bottom, rgba(128, 8, 16, 0.92),
                    rgba(128, 8, 16, 0.85)),
                url('/images/student-life/Student_life1.jpg');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            /* 视差 */
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #fff;
        }

        .ca-parallax-text h2 {
            font-size: 4rem;
            font-family: 'Georgia', serif;
            margin: 0;
            text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }

        .ca-parallax-text p {
            font-size: 1.4rem;
            font-weight: 300;
            margin-top: 10px;
            letter-spacing: 1px;
        }

        /* --- Zig-Zag Layout (Athletics) --- */
        .ca-zig-zag-row {
            display: flex;
            align-items: center;
            gap: 0;
            /* 无间隙，或者设大一点做留白风格 */
            margin-bottom: 80px;
            /* 板块间距 */
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        }

        .ca-zig-zag-row:last-child {
            margin-bottom: 0;
        }

        .ca-zig-zag-row.reverse {
            flex-direction: row-reverse;
            /* 反向排列 */
        }

        .ca-zz-content {
            flex: 1;
            padding: 60px;
        }

        .ca-zz-image {
            flex: 1;
            height: 450px;
            /* 这里的图片高度决定了板块高度 */
            overflow: hidden;
        }

        .ca-zz-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.7s ease;
        }

        .ca-zig-zag-row:hover .ca-zz-image img {
            transform: scale(1.05);
        }

        .ca-tag {
            display: inline-block;
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--primary-color);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 15px;
        }

        .ca-zz-content h2 {
            font-family: 'Georgia', serif;
            font-size: 2.2rem;
            color: var(--ca-dark);
            margin-bottom: 20px;
        }

        .ca-zz-content p {
            font-size: 1.05rem;
            color: #555;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .ca-check-list {
            list-style: none;
            padding: 0;
        }

        .ca-check-list li {
            padding-left: 25px;
            position: relative;
            margin-bottom: 8px;
            color: #333;
            font-weight: 500;
        }

        .ca-check-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: var(--primary-color);
            font-weight: bold;
        }

        /* --- Mobile --- */
        @media (max-width: 768px) {

            .ca-page-header h1 {

                font-size: 2.0rem;
            }

            .ca-heading {
                font-size: 2.0rem;
            }

            .ca-bg-white{
                padding-top: 0 !important;
            }

            .ca-split-layout {
                flex-direction: column;
            }

            .ca-collage-grid {
                width: 100%;
            }

            .ca-zig-zag-row,
            .ca-zig-zag-row.reverse {
                flex-direction: column;
            }

            .ca-zz-image {
                width: 100%;
                height: 300px;
            }

            .ca-zz-content {
                padding: 40px 30px;
            }
        }