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

/* 使用通用选择符 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 使用类型选择符，进行组合声明 */
body {
    font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
}

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

img {
    max-width: 100%;
    display: block;
}

/* =========================================
   2. 顶部通栏样式
   ========================================= */

/* 使用类选择符 */
.hero-banner img {
    width: 100%;
    display: block;
}

/* 默认状态：PC端显示PC版图片，隐藏移动版图片 */
.top-banner-pc {
    display: block;
    width: 100%; /* 建议添加，防止图片溢出 */
    height: auto;
}

.top-banner-mobile {
    display: none;
}

/* 移动端适配：当屏幕宽度小于等于 768px 时，隐藏PC版，显示移动版 */
@media screen and (max-width: 768px) {
    .top-banner-pc {
        display: none;
    }
    
    .top-banner-mobile {
        display: block;
        width: 100%;
        height: auto;
    }
}

/* =========================================
   3. 分站导航区：Flexbox弹性布局
   ========================================= */
.nav-icons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 30px 20px;
    max-width: 700px;
    margin: 0 auto;
}

.nav-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
    width: 80px;
    transition: transform 0.2s;
}

.nav-icon-item:hover {
    transform: scale(1.1);
}

.nav-icon-item img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: #f0f0f0;
    padding: 8px;
    margin-bottom: 8px;
}

.nav-icon-item span {
    font-size: 13px;
    text-align: center;
    white-space: nowrap;
}

/* =========================================
   4. 主体内容区：Grid 两列卡片布局
   ========================================= */
.post-list {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 15px;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 两列等宽布局 */
    gap: 30px; /* 卡片之间的间距 */
}

.card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 20px;
    transition: transform 0.3s ease;
    
    /* 让卡片内部垂直排列，方便控制底部按钮 */
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-5px); /* 鼠标悬停时卡片微微上浮 */
}

/* 🌟 核心修改：小 Banner 完整显示样式 🌟 */
.card > a:first-child img {
    width: 100%;
    /* 580:400 的比例大约是 1.45。
       使用 aspect-ratio 可以完美锁定比例，无论卡片多宽，高度都会自动计算，
       图片绝对不会被裁切，也不会因为高度写死而导致变形！ */
    aspect-ratio: 580 / 200; 
    object-fit: contain; /* 完整显示图片 */
    border-radius: 6px;
    margin-bottom: 15px;
    background-color: #f0f0f0; /* 防止图片加载前出现空白闪烁 */
}

.card h3 {
    font-size: 16px;
    margin-bottom: 10px;
    flex: 1; /* 让标题区域占据剩余空间，把阅读更多顶到底部 */
}

.card h3 a {
    color: #333;
    transition: color 0.3s;
}

.card h3 a:hover {
    color: #1890ff; /* 悬停时文字变蓝 */
}

.read-more {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 15px;
    background-color: #1890ff;
    color: #fff !important;
    border-radius: 4px;
    font-size: 14px;
    transition: background-color 0.3s;
    align-self: flex-start; /* 按钮靠左对齐 */
}

.read-more:hover {
    background-color: #40a9ff;
}

/* =========================================
   5. 摄影轮播图核心样式
   ========================================= */
/* 🌟 核心修改：轮播图不再横跨两列，只占一列 🌟 */
.carousel {
    /* grid-column: 1 / -1;  <-- 删除这一行 */
    position: relative;
    width: auto; /* 或者100% */
    height: auto; /* 如果是500px这种明确的高度，可以防止布局塌陷 */
    overflow: hidden;
    border-radius: 8px;
    background-color: #000; /* 黑色背景，让竖图留白部分更好看 */
}

/* 图片轨道：使用 Flex 横向排列 */
.carousel-track {
    display: flex;
    height: 100%;
}

/* 每一张幻灯片：占满容器宽度 */
.carousel-slide {
    flex: 0 0 100%;
    height: 100%;
}

/* 图片完整显示，不裁剪 */
.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 核心：完整显示图片 */
    display: block;
}

/* 左右切换箭头 */
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    padding: 15px 20px;
    cursor: pointer;
    font-size: 18px;
    z-index: 10;
    transition: background 0.3s;
}

.arrow:hover {
    background: rgba(0, 0, 0, 0.8);
}

.arrow-left { left: 15px; }
.arrow-right { right: 15px; }

/* 底部导航小圆点 */
.pagination {
    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: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s;
}

.dot.active {
    background: #fff;
    width: 24px;
    border-radius: 6px;
}

/* =========================================
   6. 底部备案信息样式
   ========================================= */
footer {
    text-align: center;
    padding: 30px 0;
    font-size: 12px;
    color: #999;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

footer a:hover {
    color: #1890ff;
}

/* =========================================
   7. 移动端响应式适配
   ========================================= */
@media (max-width: 768px) {
    /* 手机端隐藏PC端顶图，显示移动端顶图 */
    .top-banner-pc { display: none; }
    .top-banner-mobile { display: block; }

    /* 手机端卡片变为单列 */
    .post-list {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 20px auto;
    }

    /* 手机端轮播图高度调低 */
    .carousel {
        height: 250px;
    }
}

/* =========================================
   8. 底部音乐播放器
   ========================================= */
#music-player {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #396f2b;
    color: #fff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
    z-index: 1000;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 8px 0;
}

/* 播放器内部容器 —— 改为纵向排列两行 */
.player-controls {
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;   /* 关键：纵向排列 top-row 和 bottom-row */
    align-items: center;
    gap: 6px;
}

/* --- 第一行：歌名 + 按钮 --- */
.top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
}

/* 歌曲信息 */
.track-info {
    flex: 1;
    min-width: 0;             /* 防止 flex 子项溢出 */
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 按钮通用样式 */
.player-controls button {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background 0.3s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;           /* 按钮不被压缩 */
}

.player-controls button:hover {
    background-color: rgba(255,255,255,0.2);
    transform: scale(1.1);
}

/* --- 第二行：进度条 + 音量 --- */
.bottom-row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
}

/* 进度条区域 */
.progress-container {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    flex: 1;                  /* 进度条占据剩余空间 */
    min-width: 0;
}

#progress-bar {
    flex: 1;
    cursor: pointer;
    accent-color: #fff;
}

/* 音量控制 */
.volume-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

#volume-slider {
    width: 80px;
    cursor: pointer;
    accent-color: #fff;
}

/* =========================================
   移动端适配
   ========================================= */
@media (max-width: 768px) {
    #music-player {
        padding: 10px 0;
    }

    .player-controls {
        width: 88%;
        gap: 5px;
    }

    .top-row {
        gap: 5px;
    }

    .track-info {
        font-size: 13px;
    }

    .player-controls button {
        padding: 6px;
    }

    .bottom-row {
        gap: 8px;
    }

    #volume-slider {
        width: 50px;          /* 手机端音量条缩短 */
    }
}

/* =========================================
   9. footer备案信息显示在音乐播放器上方
   ========================================= */
footer {
    padding-bottom: 90px;
}