/* ========================
   首页专用三栏布局
   - 文稿区 : 填充区 : 广告区 = 2 : 1 : 1
   - 仅当 .main 同时具有 .main-home 类时生效
   ======================== */

/* 首页主体布局：三栏布局，顶部对齐 */
.main.main-home {
    align-items: flex-start;
    /* 顶部对齐，避免各栏高度不一致时拉伸 */
    position: relative;
    /* 相对定位，为绝对定位的轮播区域提供定位上下文 */
    padding-top: 48px;
    /* 增加顶部内边距，在轮播区域和导航栏之间创建间距 */
    gap: 0;
    /*
      首页需要“分段控制”间距：
      - 文稿区 ↔ 填充区：保持 12px
      - 填充区 ↔ 广告区：更小（见 .home-fill 的 margin-right）
      flex 的 gap 只能统一设置，因此首页改用 margin 精确控制。
    */
}

/* 首页文稿区：占据2份宽度，显示文章列表 */
.main.main-home .content-main {
    flex: 2;
    /* 占据2份宽度 */
    margin-top: 290px;
    /* 顶部外边距：轮播区域顶部间距(24px) + 轮播区域高度(280px) - 14px = 290px，让文稿区下移到轮播区域下方 */
    margin-right: 8px;
    /* 文稿区 ↔ 填充区间距（略微缩小） */
    padding-top: 16px;
    /*
      首页对齐填充区标题：
      - 填充区卡片 .home-fill-card 的 padding-top 是 16px
      - 文稿区在 main.css 默认 padding-top 是 24px，会导致“首页推荐/更多”比填充区标题线更低
      因此首页覆盖为 16px，使两边顶部/标题线对齐。
    */
}

/* 首页填充区：占据1份宽度，显示标签、链接等补充内容 */
.main.main-home .home-fill {
    flex: 1;
    /* 占据1份宽度 */
    display: flex;
    /* 弹性布局 */
    flex-direction: column;
    /* 纵向排列 */
    gap: 6px;
    /* 卡片之间的间距 */
    margin-top: 290px;
    /* 顶部外边距：轮播区域顶部间距(24px) + 轮播区域高度(280px) - 14px = 290px，让填充区下移到轮播区域下方 */
    margin-right: 12px;
    /* 填充区 ↔ 广告区间距：留出一点呼吸空间 */
}

/* 首页广告区：顶部与轮播区顶部对齐 */
.main.main-home .sidebar-ads {
    margin-top: 0;
    /* 与内容区顶部对齐（避免右侧广告栏下沉） */
    flex: 0 0 260px;
    /* 首页广告栏固定宽度，避免“栏很宽但广告图很窄”造成视觉空白 */
    width: 260px;
    max-width: 260px;
}

/* 填充区卡片：单个填充内容卡片（如标签云、快速链接等） */
.home-fill-card {
    background-color: #ffffff;
    /* 白色背景 */
    border: 1px solid #e5e5e5;
    /* 浅灰色边框 */
    border-radius: 0;
    /* 直角 */
    padding: 16px 18px;
    /* 内边距 */
    margin-bottom: 0;
    /* 底部外边距（由父容器的gap控制） */
}

/* 填充区卡片标题 */
.home-fill-title {
    margin: 0 0 10px;
    /* 上下外边距：上0 下10px */
    font-size: 16px;
    /* 字体大小 */
    font-weight: bold;
    /* 粗体 */
    color: #222222;
    /* 深灰色文字 */
}

/* 填充区卡片文本内容 */
.home-fill-text {
    margin: 0;
    /* 无外边距 */
    font-size: 14px;
    /* 字体大小 */
    line-height: 1.7;
    /* 行高 */
    color: #555555;
    /* 中灰色文字 */
}

/* 填充区标签列表：标签云容器 */
.home-fill-tags {
    display: flex;
    /* 弹性布局 */
    flex-wrap: wrap;
    /* 允许换行 */
    gap: 8px;
    /* 标签之间的间距 */
}

/* 填充区单个标签：可点击的标签按钮 */
.home-fill-tag {
    display: inline-block;
    /* 行内块元素 */
    padding: 4px 10px;
    /* 内边距 */
    border-radius: 12px;
    /* 圆角边框 */
    background-color: #f5f5f5;
    /* 浅灰色背景 */
    color: #750a20;
    /* 红色文字 */
    font-size: 12px;
    /* 字体大小 */
    text-decoration: none;
    /* 无下划线 */
}

/* 填充区标签悬停状态：背景变红，文字变白 */
.home-fill-tag:hover {
    background-color: #750a20;
    /* 红色背景 */
    color: #ffffff;
    /* 白色文字 */
}

/* 填充区链接列表：快速链接列表 */
.home-fill-list {
    margin: 0;
    /* 无外边距 */
    padding-left: 18px;
    /* 左侧内边距，用于列表缩进 */
    font-size: 14px;
    /* 字体大小 */
    color: #444444;
    /* 中灰色文字 */
}

/* 填充区链接列表项 */
.home-fill-list li {
    margin-bottom: 6px;
    /* 底部外边距 */
}

/* 填充区链接列表中的链接 */
.home-fill-list a {
    color: inherit;
    /* 继承父元素颜色 */
    text-decoration: none;
    /* 无下划线 */
}

/* 填充区链接列表悬停状态：文字变红并显示下划线 */
.home-fill-list a:hover {
    color: #750a20;
    /* 红色文字 */
    text-decoration: underline;
    /* 下划线 */
}

/* ========================
   首页图片轮播区域
   - 高度增加以减小下方间距
   ======================== */

/* 轮播容器：占据整个内容区域宽度 */
.home-carousel {
    width: 100%;
    height: 280px !important;
    /* 进一步增加高度，使用!important确保样式生效 */
    margin-bottom: 12px;
    /* 与文章列表的间距，与article-list的gap保持一致 */
    position: relative;
    border-radius: 0;
    overflow: hidden;
    background-color: #f5f5f5;
    /* 背景色，图片加载前显示 */
}

/* 全宽轮播：占据文稿区+填充区的宽度（3份） */
.main.main-home .home-carousel-fullwidth {
    position: absolute;
    /* 绝对定位，脱离flex流 */
    left: 0;
    /* 对齐到左侧，与.main容器的左边缘对齐 */
    top: 24px;
    /* 顶部间距，在轮播区域和导航栏之间创建距离 */
    width: calc(100% - 260px - 8px);
    /*
      宽度精确对齐“中间填充区”右边界：
      - 首页右侧广告栏固定为 260px，轮播覆盖“文稿区 + 填充区 + 填充区与广告之间的 8px 间距”
      - 因此用 100% - 260px - 8px，确保轮播右侧边界与 .home-fill 右侧边界（含 8px 间距）一致
      这样轮播右侧边界会与 .home-fill 右侧边界一致（不包含 home-fill 与广告区之间的 gap）。
    */
    height: 280px !important;
    /* 进一步增加高度，使用!important确保样式生效 */
    z-index: 0;
    /* 在内容下方 */
    margin-bottom: 0;
    /* 移除底部间距 */
}

/* 轮播图片容器：相对定位，用于放置多张图片 */
.carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 单张轮播图片：绝对定位，默认隐藏 */
.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* 默认隐藏 */
    transition: opacity 0.6s ease-in-out;
    /* 淡入淡出效果 */
}

/* 当前显示的轮播图片：显示 */
.carousel-slide.active {
    opacity: 1;
    /* 显示 */
    z-index: 1;
}

/* 轮播图片：填满容器，保持宽高比 */
.carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 填满容器，保持比例，裁剪多余部分 */
    display: block;
}

/* 轮播指示器容器：底部居中显示 */
.carousel-indicators {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
    /* 确保在图片上方 */
}

/* ========================
   轮播左右箭头按钮
   - 覆盖在图片左右两侧
   ======================== */

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    opacity: 0.92;
}

.carousel-nav span {
    font-size: 26px;
    line-height: 1;
    transform: translateY(-1px);
}

.carousel-prev {
    left: 12px;
}

.carousel-next {
    right: 12px;
}

.carousel-nav:hover {
    background: rgba(0, 0, 0, 0.55);
    opacity: 1;
}

.carousel-nav:active {
    transform: translateY(-50%) scale(0.98);
}

.carousel-nav:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 2px;
}

/* 单个指示器：小圆点 */
.carousel-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    /* 半透明白色 */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* 当前激活的指示器：不透明白色 */
.carousel-indicator.active {
    background-color: rgba(255, 255, 255, 1);
    /* 完全不透明白色 */
}

/* 指示器悬停效果 */
.carousel-indicator:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

/* ========================
   最受欢迎文章区域
   - 一行三个卡片，每个卡片上面图片，下面标题
   - 风格和文本区一致
   ======================== */

/* 最受欢迎文章区域容器 */
.popular-articles-section {
    margin-top: 32px;
    /* 与上方分页区域的间距 */
}

/* 最受欢迎文章网格：一行三个卡片，自动换行 */
.popular-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 三列等宽 */
    grid-auto-rows: auto;
    /* 自动行高 */
    grid-auto-flow: row;
    /* 确保按行排列，自动换行 */
    gap: 12px;
    /* 卡片之间的间距 */
    width: 100%;
    /* 确保占据父容器全宽 */
    max-width: 100%;
    /* 确保不超过父容器宽度 */
    box-sizing: border-box;
    /* 包含内边距和边框在宽度内 */
}

/* 单个最受欢迎文章卡片 */
.popular-article-card {
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* 允许网格项收缩，确保换行 */
    width: 100%;
    /* 占据网格单元格全宽 */
    max-width: 100%;
    /* 确保不超过网格单元格宽度 */
    box-sizing: border-box;
    /* 包含边框在宽度内 */
}

/* 卡片链接：占据整个卡片区域 */
.popular-article-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

/* 卡片图片容器 */
.popular-article-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    /* 固定宽高比：宽度:高度 = 4:3，即高度:宽度 = 3:4 */
    overflow: hidden;
    background-color: #f5f5f5;
    /* 背景色，图片加载前显示 */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* 卡片图片：填满容器，保持宽高比 */
.popular-article-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 填满容器，保持比例，裁剪多余部分 */
    display: block;
}

/* 卡片标题区域 */
.popular-article-title {
    padding: 16px 18px;
    /* 内边距，与文本区风格一致 */
    background-color: #ffffff;
    /* 白色背景，与文本区一致 */
    font-size: 15px;
    /* 字体大小，与文本区风格一致 */
    line-height: 1.6;
    /* 行高 */
    color: #222222;
    /* 文字颜色，与文本区风格一致 */
    font-weight: normal;
    /* 正常字重 */
    flex: 1;
    /* 占据剩余空间 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    /* 最多显示七行 */
    line-clamp: 7;
    /* 标准属性 */
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: calc(1.6em * 8);
    /* 确保高度为7行：line-height * 7行 */
    height: calc(1.6em * 8);
    /* 固定高度为7行 */
}

/* 卡片链接悬停效果 */
.popular-article-link:hover .popular-article-title {
    color: #750a20;
    /* 悬停时文字变红，与文本区风格一致 */
}

/* ========================
   移动端响应式适配（手机等小屏幕）
   - 断点：768px 及以下
   ======================== */
@media (max-width: 768px) {

    /* 首页三栏布局：横向排列的三组变为纵向排列 */
    .main.main-home {
        flex-direction: column;
        align-items: stretch;
        padding-top: 0;
        /* 移动端时重置顶部内边距，因为轮播区域使用正常流布局 */
    }

    /* 全宽轮播在小屏幕时占据全宽，显示在最前面 */
    .main.main-home .home-carousel-fullwidth {
        position: relative;
        /* 在小屏幕时改为相对定位，使用正常流布局 */
        width: 100%;
        order: 0;
        /* 显示在最前面 */
        margin-top: 8px;
        /* 与导航栏之间的间距 */
        margin-bottom: 12px;
        /* 恢复底部间距 */
        top: auto;
        /* 取消绝对定位的top值 */
        left: auto;
        /* 取消绝对定位的left值 */
        height: 240px !important;
        /* 小屏幕时保持高度，使用!important确保样式生效 */
        z-index: auto;
        /* 重置z-index，使用正常流布局 */
    }

    /* 文稿区在小屏幕时占满宽度，排在轮播后 */
    .main.main-home .content-main {
        flex: 1;
        width: 100%;
        order: 1;
        /* 确保内容第一排列 */
        margin-top: 0;
        /* 移除顶部间距，因为轮播已经有margin-bottom */
        margin-right: 0;
    }

    /* 填充区在小屏幕时移到文稿区下方 */
    .main.main-home .home-fill {
        flex: 1;
        width: 100%;
        margin-top: 0;
        order: 2;
        /* 确保填充区在文稿区下方 */
        margin-right: 0;
    }

    /* 广告区在小屏幕时移到最下方 */
    .main.main-home .sidebar-ads {
        flex: 1;
        width: 100%;
        max-width: none;
        margin-top: 0;
        order: 3;
        /* 确保广告区在最后 */
    }

    /* 轮播区域在小屏幕时保持相同高度 */
    .home-carousel {
        height: 240px !important;
        /* 小屏幕时稍微降低高度，但仍比原来更高以减小间距 */
    }

    /* 最受欢迎文章网格：小屏幕时改为每行两个卡片 */
    .popular-articles-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 两列布局 */
        gap: 12px;
    }

    /* 最受欢迎文章卡片图片：小屏幕时保持相同的宽高比 */
    .popular-article-image {
        aspect-ratio: 4 / 3;
        /* 移动端也保持相同的宽高比 */
    }
}