/* ============================================
   全局样式重置与基础设置
   ============================================ */

/* 全局重置：清除所有元素的默认内外边距，统一使用 border-box 盒模型 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 页面主体样式：设置字体、字号、行高、文字颜色和背景色 */
body {
    font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
}

/* 链接基础样式：去除下划线，设置默认颜色和过渡效果 */
a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s;
}

/* 链接悬停效果：鼠标悬停时变为南开红色 */
a:hover {
    color: #8b1a1a;
}

/* 容器：最大宽度限制，水平居中，左右内边距 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================
   顶部工具栏
   ============================================ */

/* 顶部工具栏容器：透明背景，绝对定位在页面顶部，最高层级 */
.top-bar {
    background-color: transparent;
    padding: 8px 0;
    font-size: 12px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

/* 顶部链接容器：右对齐显示 */
.top-links {
    text-align: right;
}

/* 顶部链接样式：白色文字，添加阴影增强可读性 */
.top-links a {
    margin-left: 15px;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* 顶部链接悬停效果：变为红色 */
.top-links a:hover {
    color: #ff0000;
}

/* 分隔符样式：用于链接之间的分隔 */
.separator {
    margin: 0 10px;
    color: rgba(255, 255, 255, 0.6);
}

/* ============================================
   网站头部（Header）
   ============================================ */

/* 头部容器：透明背景，绝对定位在顶部工具栏下方，层级略低于顶部工具栏 */
.header {
    background-color: transparent;
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    z-index: 999;
}

/* 头部内容容器：使用 Flexbox 布局，水平排列，两端对齐 */
.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
}

/* Logo 标题样式：大字号，白色，加粗，添加阴影 */
.logo h1 {
    font-size: 28px;
    color: #fff;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* ============================================
   主导航菜单
   ============================================ */

/* 导航菜单列表：Flexbox 横向布局，去除列表样式，设置间距 */
.main-nav ul {
    display: flex;
    list-style: none;
    gap: 5px;
}

/* 导航菜单项：相对定位，用于下拉菜单的定位参考 */
.main-nav li {
    position: relative;
}

/* 一级导航链接：块级显示，内边距，白色文字，添加阴影 */
.main-nav > ul > li > a {
    display: block;
    padding: 10px 18px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* 一级导航链接悬停效果：半透明白色背景，红色文字 */
.main-nav > ul > li > a:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ff0000;
}

/* ============================================
   下拉菜单
   ============================================ */

/* 下拉菜单容器：默认隐藏，绝对定位在菜单项下方，白色背景，添加阴影 */
.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    min-width: 180px;
    z-index: 100;
}

/* 下拉菜单链接：块级显示，灰色文字，底部边框分隔 */
.dropdown a {
    display: block;
    padding: 10px 20px;
    color: #666;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

/* 下拉菜单链接悬停效果：浅灰背景，南开红色文字 */
.dropdown a:hover {
    background-color: #f8f8f8;
    color: #8b1a1a;
}

/* 鼠标悬停在导航项上时显示下拉菜单 */
.main-nav li:hover .dropdown {
    display: block;
}

/* ============================================
   用户操作链接
   ============================================ */

/* 用户链接容器：Flexbox 横向布局，设置间距 */
.user-links {
    display: flex;
    gap: 15px;
}

/* 用户链接按钮样式：白色边框，圆角，白色文字 */
.user-links a {
    padding: 8px 15px;
    border: 1px solid #fff;
    border-radius: 3px;
    font-size: 13px;
    color: #fff;
}

/* 用户链接悬停效果：半透明白色背景，金色文字和边框 */
.user-links a:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffd700;
    border-color: #ffd700;
}

/* ============================================
   轮播图（Banner）
   ============================================ */

/* 轮播图容器：相对定位，全宽，隐藏溢出内容 */
.banner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* 轮播滑块容器：相对定位，使用 padding-bottom 技巧实现 16:9 响应式比例 */
.slider {
    width: 100%;
    position: relative;
    padding-bottom: 56.25%; /* 16:9 长宽比 (9/16 = 0.5625) */
}

/* 隐藏单选按钮：用于控制幻灯片切换，但不显示在页面上 */
.slider input[type="radio"] {
    display: none;
}

/* 幻灯片容器：绝对定位，填满父容器 */
.slides {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 单个幻灯片：绝对定位，默认透明，淡入淡出过渡效果 */
.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

/* 幻灯片图片：填满容器，使用 cover 模式保持比例 */
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 根据单选按钮选中状态显示对应的幻灯片 */
#slide1:checked ~ .slides .slide:nth-child(1),
#slide2:checked ~ .slides .slide:nth-child(2),
#slide3:checked ~ .slides .slide:nth-child(3) {
    opacity: 1;
}

/* 自动轮播动画：定义透明度变化的关键帧 */
@keyframes autoSlide {
    0%, 33.33% { opacity: 1; }      /* 前 1/3 时间显示 */
    33.34%, 100% { opacity: 0; }    /* 后 2/3 时间隐藏 */
}

/* 鼠标悬停时暂停自动轮播 */
.slider:hover .slide {
    animation-play-state: paused;
}

/* 第一张幻灯片：15秒循环，无延迟 */
.slides .slide:nth-child(1) {
    animation: autoSlide 15s infinite;
}

/* 第二张幻灯片：15秒循环，延迟 5 秒开始 */
.slides .slide:nth-child(2) {
    animation: autoSlide 15s infinite 5s;
}

/* 第三张幻灯片：15秒循环，延迟 10 秒开始 */
.slides .slide:nth-child(3) {
    animation: autoSlide 15s infinite 10s;
}

/* ============================================
   轮播指示点
   ============================================ */

/* 指示点容器：绝对定位在轮播图底部居中 */
.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

/* 单个指示点：圆形，半透明白色，可点击，过渡效果 */
.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.3s;
    display: block;
}

/* 指示点悬停效果：提高不透明度 */
.dot:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

/* 当前激活的指示点：根据单选按钮状态显示为完全不透明的白色 */
#slide1:checked ~ .slider-dots label:nth-child(1),
#slide2:checked ~ .slider-dots label:nth-child(2),
#slide3:checked ~ .slider-dots label:nth-child(3) {
    background-color: #fff;
}

/* ============================================
   内容标签页区域
   ============================================ */

/* 内容标签页容器：Flexbox 横向布局 */
.content-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    position: relative;
}

/* 标签导航：Flexbox 横向布局，居中 */
.tab-nav {
    display: flex;
    gap: 60px;
}

/* 更多链接：绝对定位到右侧 */
.more-link {
    position: absolute;
    right: 0;
    color: #999;
    font-size: 14px;
}

.more-link:hover {
    color: #5c1e1e;
}

/* 标签按钮：透明背景，南开红色文字 */
.tab-btn {
    padding: 0;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 22px;
    color: #5c1e1e;
    font-weight: bold;
    transition: all 0.3s;
    position: relative;
}

/* 标签按钮悬停效果 */
.tab-btn:hover {
    color: #8b1a1a;
}

/* 激活状态的标签按钮：底部下划线 */
.tab-btn.active {
    color: #5c1e1e;
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background-color: #5c1e1e;
}

/* 更多链接 */
.more-link {
    color: #999;
    font-size: 14px;
}

.more-link:hover {
    color: #5c1e1e;
}

/* ============================================
   主要内容区域
   ============================================ */

/* 主内容容器：上下内边距，白色背景 */
.main-content {
    padding: 40px 0;
    background-color: #fff;
}

/* 内容网格布局：三等分布局 */
.content-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 30px;
}

/* ============================================
   专题图片卡片区域
   ============================================ */

/* 大专题卡片容器 */
.topic-card-large {
    cursor: pointer;
    transition: transform 0.3s;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.topic-card-large:hover {
    transform: translateY(-3px);
}

/* 卡片链接 */
.topic-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* 专题卡片背景 */
.topic-card-bg {
    height: 260px;
    position: relative;
    background-size: cover;
    background-position: center;
}

/* 卡片遮罩层 */
.topic-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.3) 100%);
}

/* 第一个专题卡片背景 */
.topic-card-1 {
    background-image: url('../image/10007.jpg');
    background-color: #c41e3a;
}

/* 第二个专题卡片背景 */
.topic-card-2 {
    background-image: url('../image/10008.jpg');
    background-color: #8b0000;
}

/* 专题卡片信息区域 */
.topic-card-info {
    background-color: #fff;
    padding: 15px 20px;
}

.topic-label {
    display: block;
    font-size: 14px;
    color: #333;
    margin-bottom: 12px;
    font-weight: 500;
    line-height: 1.5;
}

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

.topic-date {
    font-size: 13px;
    color: #999;
}

.topic-arrow {
    font-size: 20px;
    color: #999;
    transition: color 0.3s;
}

.topic-card-link:hover .topic-arrow {
    color: #5c1e1e;
}

/* ============================================
   新闻列表区域
   ============================================ */

/* 新闻区域容器：白色背景，圆角，轻微阴影 */
.news-section {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* 区域标题栏：Flexbox 布局，两端对齐，底部红色边框 */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #8b1a1a;
}

/* 区域标题：南开红色，较大字号 */
.section-header h2 {
    font-size: 20px;
    color: #8b1a1a;
}

/* "更多"链接：灰色文字 */
.more {
    color: #999;
    font-size: 13px;
}

/* "更多"链接悬停效果：变为南开红色 */
.more:hover {
    color: #8b1a1a;
}

/* 新闻列表容器：纵向 Flexbox 布局 */
.news-list {
    display: flex;
    flex-direction: column;
}

/* 新闻条目：横向 Flexbox 布局，虚线底部分隔 */
.news-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px dashed #d0d0d0;
    transition: background-color 0.3s;
}

/* 最后一个新闻项：去除底部边框 */
.news-item:last-child {
    border-bottom: none;
}

/* 新闻条目悬停效果：浅灰背景 */
.news-item:hover {
    background-color: #f9f9f9;
}

/* 日期徽章：正方形，南开红色背景，白色文字 */
.date-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    min-width: 60px;
    background-color: #8b1a1a;
    color: #fff;
    border-radius: 5px;
    flex-shrink: 0;
}

/* 日期徽章 - 日期数字：大字号，加粗 */
.date-badge .day {
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 3px;
}

/* 日期徽章 - 月份：小字号 */
.date-badge .month {
    font-size: 12px;
    line-height: 1;
}

/* 新闻标题容器：自适应宽度，垂直居中 */
.news-item h3 {
    flex: 1;
    font-size: 15px;
    line-height: 1.8;
    font-weight: normal;
    margin: 0;
    display: flex;
    align-items: center;
}

/* 新闻标题链接：黑色文字，无下划线 */
.news-item h3 a {
    color: #333;
    text-decoration: none;
    display: block;
    width: 100%;
}

/* 新闻标题链接悬停效果：南开红色 */
.news-item h3 a:hover {
    color: #8b1a1a;
}

/* ============================================
   新闻列表区域（第三列）
   ============================================ */

/* 新闻列表区域容器 */
.news-list-section {
    background-color: transparent;
}

/* 新闻列表：纵向 Flexbox 布局 */
.news-list {
    display: flex;
    flex-direction: column;
}

/* 新闻条目：横向布局，带日期 */
.news-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    transition: background-color 0.3s;
}

.news-item:first-child {
    padding-top: 0;
}

.news-item:last-child {
    border-bottom: none;
}

/* 新闻条目悬停效果 */
.news-item:hover {
    background-color: #f9f9f9;
}

/* 新闻日期徽章 */
.news-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 45px;
    flex-shrink: 0;
}

.news-day {
    font-size: 28px;
    font-weight: bold;
    color: #5c1e1e;
    line-height: 1;
}

.news-month {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

/* 新闻标题 */
.news-item h4 {
    font-size: 14px;
    line-height: 1.6;
    font-weight: normal;
    margin: 0;
    flex: 1;
}

/* 新闻标题链接 */
.news-item h4 a {
    color: #333;
}

/* 新闻标题链接悬停效果：南开红色 */
.news-item h4 a:hover {
    color: #5c1e1e;
}

/* ============================================
   媒体南开区域
   ============================================ */

/* 媒体区域容器 */
.media-section {
    background-color: #fff;
    padding: 40px 0;
    margin-bottom: 30px;
}

/* 媒体布局：左右两栏 */
.media-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

/* 左侧大图 */
.media-image {
    overflow: hidden;
    border-radius: 5px;
}

.media-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 380px;
}

/* 右侧内容区域 */
.media-content-right {
    display: flex;
    flex-direction: column;
}

/* 媒体标签页 */
.media-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    position: relative;
}

.media-tab-nav {
    display: flex;
    gap: 50px;
}

.media-tab-btn {
    padding: 0;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: #5c1e1e;
    font-weight: bold;
    transition: all 0.3s;
    position: relative;
}

.media-tab-btn:hover {
    color: #8b1a1a;
}

.media-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background-color: #5c1e1e;
}

.media-more {
    position: absolute;
    right: 0;
    color: #999;
    font-size: 14px;
}

.media-more:hover {
    color: #5c1e1e;
}

/* 媒体新闻列表 */
.media-news-list {
    flex: 1;
}

.media-news-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.media-news-item:last-child {
    border-bottom: none;
}

.media-news-item h4 {
    font-size: 14px;
    font-weight: normal;
    margin: 0;
    flex: 1;
    margin-right: 20px;
}

.media-news-item h4 a {
    color: #333;
}

.media-news-item h4 a:hover {
    color: #5c1e1e;
}

.media-source {
    color: #5c1e1e;
    font-weight: 500;
}

.media-date {
    font-size: 13px;
    color: #999;
    flex-shrink: 0;
}

/* ============================================
   影像南开区域
   ============================================ */

/* 视频区域容器：浅紫色背景 */
.video-section {
    background: linear-gradient(135deg, #f5f0f5 0%, #e8e0e8 100%);
    padding: 40px 0;
}

/* 视频标题区域 */
.video-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    position: relative;
}

.video-header h2 {
    font-size: 22px;
    color: #5c1e1e;
    font-weight: bold;
    position: relative;
}

.video-header h2::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background-color: #5c1e1e;
}

.video-more {
    position: absolute;
    right: 0;
    color: #5c1e1e;
    font-size: 14px;
}

.video-more:hover {
    color: #8b1a1a;
}

/* 视频网格布局：3 列等宽网格 */
.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* 视频条目 */
.video-item {
    cursor: pointer;
    transition: transform 0.3s;
}

/* 视频条目悬停效果 */
.video-item:hover {
    transform: translateY(-5px);
}

/* 视频缩略图容器 */
.video-thumb {
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

/* 视频缩略图 */
.video-thumb img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

/* 视频信息区域 */
.video-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

/* 播放图标 */
.video-play-icon {
    width: 30px;
    height: 30px;
    background-color: #5c1e1e;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

/* 视频标题 */
.video-title {
    font-size: 14px;
    color: #333;
}

/* 视频标题：居中显示 */
.video-title {
    margin-top: 10px;
    font-size: 13px;
    text-align: center;
}

/* ============================================
   页脚（Footer）
   ============================================ */

/* 页脚容器：深色背景，灰色文字，上下内边距，顶部间距 */
.footer {
    background-color: #2c2c2c;
    color: #999;
    padding: 30px 0 20px;
    margin-top: 40px;
}

/* 页脚链接区域：居中显示，底部边框分隔 */
.footer-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #444;
    margin-bottom: 20px;
}

/* 页脚链接：灰色文字 */
.footer-links a {
    color: #999;
    font-size: 13px;
}

/* 页脚链接悬停效果：白色文字 */
.footer-links a:hover {
    color: #fff;
}

/* 页脚信息区域：Flexbox 布局，均匀分布 */
.footer-info {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

/* 校区信息标题：白色，较大字号 */
.campus-info h4 {
    color: #fff;
    font-size: 14px;
    margin-bottom: 5px;
}

/* 校区信息文字：小字号 */
.campus-info p {
    font-size: 12px;
}

/* 版权信息：居中显示，顶部边框分隔 */
.footer-copyright {
    text-align: center;
    font-size: 12px;
    padding-top: 20px;
    border-top: 1px solid #444;
}

/* ============================================
   响应式设计（Responsive Design）
   ============================================ */

/* 平板设备（最大宽度 1024px）：内容网格改为单列，媒体和视频网格改为 2 列 */
@media (max-width: 1024px) {
    .content-grid {
        grid-template-columns: 1fr;
    }
    
    .topics-section {
        flex-direction: column;
    }
    
    .media-grid,
    .video-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 移动设备（最大宽度 768px）：头部垂直布局，导航换行，媒体和视频单列，页脚信息垂直排列 */
@media (max-width: 768px) {
    .header .container {
        flex-direction: column;
        gap: 15px;
    }
    
    .main-nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .media-grid,
    .video-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-info {
        flex-direction: column;
        gap: 15px;
    }
}