/**
 * CLS (Cumulative Layout Shift) 修复样式
 * 解决移动端CLS > 0.1的问题
 */

/* ========================================
   1. 图片容器 - 使用 aspect-ratio 预留空间
   ======================================== */

/* 通用图片容器 - 16:9 比例 */
.img_box {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #f0f0f0; /* 占位背景色 */
}

.img_box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 用户头像 - 1:1 正方形 */
.user_pic,
.pic_avatar,
.pic.fl img,
.avatar .pic img {
    aspect-ratio: 1 / 1;
    width: 40px;
    height: 40px;
    object-fit: cover;
    background-color: #e0e0e0;
}

/* 文章列表缩略图 */
#job .item .pic,
#info .item_list .item .pic {
    width: 180px;
    min-width: 180px;
    aspect-ratio: 16 / 10;
    background-color: #f5f5f5;
}

#job .item .pic img,
#info .item_list .item .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 侧边栏图片 */
.side_right .new_item .pic {
    width: 80px;
    min-width: 80px;
    aspect-ratio: 4 / 3;
    background-color: #f5f5f5;
}

.side_right .new_item .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========================================
   2. 轮播图 Banner - 预留固定高度
   ======================================== */

/* 轮播图容器 */
.banner .banner_left,
.slider6 {
    min-height: 300px; /* 移动端预留高度 */
    background-color: #f0f0f0;
}

@media (min-width: 768px) {
    .banner .banner_left,
    .slider6 {
        min-height: 350px;
    }
}

/* bxSlider 容器 */
.bx-wrapper {
    min-height: inherit;
}

.slider6 .slide {
    min-height: 300px;
}

@media (min-width: 768px) {
    .slider6 .slide {
        min-height: 350px;
    }
}

.slider6 .slide img {
    width: 100%;
    height: auto;
    aspect-ratio: 546 / 350;
    object-fit: cover;
}

/* ========================================
   3. 广告位 - 预留固定空间
   ======================================== */

/* Google Adsense 广告容器 */
ins.adsbygoogle {
    display: block;
    min-height: 100px; /* 移动端最小高度 */
    background-color: #fafafa;
}

@media (min-width: 768px) {
    ins.adsbygoogle {
        min-height: 250px;
    }
}

/* 自定义广告位 */
.ad-container,
.advertisement {
    min-height: 100px;
    background-color: #f9f9f9;
}

/* ========================================
   4. 疫情数据区块 - 预留空间
   ======================================== */

.info_covid {
    min-height: 400px;
}

.info_covid_top {
    min-height: 300px;
}

#high_container {
    min-height: 400px;
    width: 100%;
}

/* ========================================
   5. 评论区域 - 预留空间
   ======================================== */

.review_section {
    min-height: 200px;
}

.review_list {
    min-height: 150px;
}

/* ========================================
   6. 字体加载优化 - 防止FOUT/FOIT
   ======================================== */

/* 确保字体加载时不会导致布局偏移 */
body {
    font-display: swap;
}

/* 文本容器防止字体切换导致的偏移 */
.title,
.desc,
.content {
    line-height: 1.5;
    min-height: 1.5em;
}

/* ========================================
   7. 动态加载区域 - 骨架屏占位
   ======================================== */

/* 加载更多按钮区域 */
.click.ajax_data,
.click.review_ajax,
.click.job_page {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 列表项骨架 */
.ajax_info .item,
.side_html .item {
    min-height: 120px;
}

/* ========================================
   8. 问答列表项 - 预留空间
   ======================================== */

.side_right .item_list .item {
    min-height: 80px;
}

.item_list .vContent_pic {
    min-height: 100px;
}

.vContent_pic .fl {
    width: 100px;
    aspect-ratio: 1 / 1;
    background-color: #f5f5f5;
}

/* ========================================
   9. 搜索结果 - 预留空间
   ======================================== */

.search_nav {
    min-height: 40px;
}

.category {
    min-height: 50px;
}

.result {
    min-height: 30px;
}

/* ========================================
   10. 移动端特定修复
   ======================================== */

@media (max-width: 767px) {
    /* 移动端图片容器 */
    #job .item .pic,
    #info .item_list .item .pic {
        width: 120px;
        min-width: 120px;
    }
    
    /* 移动端轮播图 */
    .banner .banner_left,
    .slider6,
    .slider6 .slide {
        min-height: 200px;
    }
    
    /* 移动端列表项 */
    .ajax_info .item,
    .side_html .item {
        min-height: 100px;
    }
    
    /* 隐藏右侧边栏时预留空间 */
    .side_right {
        min-height: auto;
    }
}

/* ========================================
   11. 懒加载图片过渡效果
   ======================================== */

img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

img[loading="lazy"].loaded,
img[loading="lazy"]:not([src=""]) {
    opacity: 1;
}

/* 图片加载前的占位背景 */
.theme_img {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.theme_img img {
    position: relative;
    z-index: 1;
}

/* ========================================
   12. 固定布局容器
   ======================================== */

/* 防止内容区域宽度变化 */
.wide {
    max-width: 1200px;
    margin: 0 auto;
}

.side_left {
    min-height: 500px;
}

.side_right {
    min-height: 300px;
}

/* 头部固定高度 */
#header {
    min-height: 60px;
}

/* 页脚固定高度 */
#footer {
    min-height: 100px;
}