/* =========================================
   1. 首页整体框架：强制左右分栏
   ========================================= */

/* 找到包裹左侧和右侧的大盒子，强制设为 Flex */
.content-wrap {
    display: flex !important;       /* 【关键】开启 Flex 布局 */
    flex-direction: row !important; /* 强制横向排列 */
    justify-content: space-between; /* 两端对齐 */
    align-items: flex-start;        /* 顶部对齐 */
    gap: 20px;                      /* 左右间距 20px */
    width: 100%;                    /* 确保容器宽度 */
}

/* 左侧文章区域：自动占据剩余空间 */
.content {
    flex: 1 !important;             /* 【关键】自动伸展，占满剩余宽度 */
    min-width: 0;                   /* 防止长标题或大图撑破布局 */
    float: none !important;         /* 【重要】清除原模板可能存在的 float:left */
    width: auto !important;         /* 【重要】覆盖原模板可能的固定宽度 */
    margin-right: 0 !important;     /* 清除原模板可能的 margin */
}

/* 右侧侧边栏：固定宽度 */
.sidebar {
    width: 300px !important;        /* 固定宽度 300px */
    flex-shrink: 0 !important;      /* 防止被挤压 */
    float: none !important;         /* 【重要】清除原模板可能存在的 float:right */
    margin-left: 0 !important;      /* 清除原模板可能的 margin */
}

/* =========================================
   2. 列表项样式 (配合你的 List Var 代码)
   ========================================= */

/* 单个文章卡片容器 */
.new-excerpt {
    display: flex;                  /* 让图片和文字在卡片内也左右排列 */
    background: #fff;               /* 背景色 */
    margin-bottom: 20px;            /* 卡片间距 */
    padding: 20px;                  /* 内边距 */
    border-radius: 8px;             /* 圆角 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* 轻微阴影 */
    align-items: center;            /* 垂直居中 */
}

/* 左侧图片区域 */
.new-img-box {
    width: 240px;                   /* 图片固定宽度 */
    height: 150px;                  /* 图片固定高度 */
    flex-shrink: 0;                 /* 防止图片被压缩 */
    margin-right: 20px;             /* 图片和文字的间距 */
    overflow: hidden;               /* 裁剪多余部分 */
    border-radius: 4px;
}

.new-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;              /* 保持比例填满容器 */
}

/* 右侧文字区域 */
.new-text-box {
    flex: 1;                        /* 文字区域自动填满剩余空间 */
}

/* 分类标签 */
.new-cat {
    font-size: 12px;
    color: #999;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: inline-block;
}

/* 标题样式 */
.new-text-box h2 {
    font-size: 18px;
    line-height: 1.4;
    margin: 0;
    font-weight: bold;
}

.new-text-box h2 a {
    color: #333;
    text-decoration: none;
}

.new-text-box h2 a:hover {
    color: #fa0800; /* 悬停颜色 */
}


/* =========================================
   3. 手机端适配 (防消失 + 布局优化)
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. 父容器：改为上下堆叠模式 */
    .content-wrap {
        display: block !important;      /* 【关键】取消 Flex，改为普通流式布局，防止挤压 */
        width: 100% !important;
        gap: 0 !important;
    }
    
    /* 2. 左侧文章区：占满全宽 */
    .content {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
        margin-bottom: 30px !important; /* 文章和侧边栏拉开距离 */
    }
    
    /* 3. 右侧侧边栏：【核心修复】强制显示并占满全宽 */
    .sidebar {
        display: block !important;      /* 【关键】强制显示，对抗原模板可能的 display:none */
        visibility: visible !important; /* 【关键】确保可见性 */
        width: 100% !important;         /* 手机上侧边栏也变全宽，体验更好 */
        float: none !important;
        margin-left: 0 !important;
        flex-shrink: unset !important;  /* 防止被压缩 */
        opacity: 1 !important;          /* 防止透明度被设为0 */
    }

    /* 4. 保持刚才调好的列表样式 (左图右文) */
    .new-excerpt {
        display: flex !important;       /* 保持 Flex 让图片文字横向排列 */
        flex-direction: row !important;
        align-items: center;
        padding: 15px;                  /* 稍微减小内边距 */
    }

    .new-img-box {
        width: 110px !important;        /* 图片固定小宽度 */
        height: 75px !important;        /* 图片固定小高度 */
        margin-right: 15px !important;
        flex-shrink: 0;
    }

    .new-text-box h2 {
        font-size: 15px;
        line-height: 1.4;
        margin: 0;
        /* 保持单行省略号 */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}


/* =========================================
   4. 独立修复：右侧侧边栏 (.sidebar) 排版问题
   ========================================= */

/* 【电脑端】修复右侧重叠、混乱问题 */
@media (min-width: 769px) {
    /* 1. 强制右侧列表项横向排列 (左图右文) */
    .sidebar ul, 
    .sidebar .hot-list, 
    .sidebar .rank-list {
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .sidebar li {
        display: flex !important;         /* 核心：开启 Flex 让图文并排 */
        align-items: center !important;   /* 垂直居中 */
        margin-bottom: 15px !important;   /* 条目之间的间距 */
        overflow: hidden;                 /* 防止内容溢出撑破容器 */
    }

    /* 2. 锁定右侧小图尺寸，防止变形 */
    .sidebar img {
        width: 80px !important;           /* 固定小图宽度 */
        height: 60px !important;          /* 固定小图高度 */
        object-fit: cover !important;     /* 裁剪填满，不变形 */
        flex-shrink: 0 !important;        /* 严禁被文字挤压 */
        margin-right: 10px !important;    /* 图文间距 */
        border-radius: 4px;
    }

    /* 3. 修复右侧文字溢出、重叠 */
    .sidebar a, 
    .sidebar .title {
        font-size: 14px !important;
        line-height: 1.4 !important;
        color: #333 !important;
        word-break: break-all !important; /* 强制长单词换行，防止溢出重叠 */
        
        /* 限制最多显示2行，超出省略号 */
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* 【手机端】修复右侧排版混乱问题 */
@media (max-width: 768px) {
    /* 1. 手机端右侧列表也强制横向排列 */
    .sidebar li {
        display: flex !important;
        align-items: center !important;
        margin-bottom: 15px !important;
    }

    /* 2. 手机端右侧图片缩小 */
    .sidebar img {
        width: 70px !important;
        height: 50px !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
        margin-right: 10px !important;
    }

    /* 3. 手机端右侧文字防溢出 */
    .sidebar a {
        font-size: 14px !important;
        line-height: 1.4 !important;
        word-break: break-all !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}


/* =========================================
   5. 独立修复：手机端左侧自适应与标题换行优化
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. 核心：强制左侧文章卡片不超出手机屏幕 */
    .content .new-excerpt {
        box-sizing: border-box !important; /* 让 padding 包含在宽度内 */
        max-width: 100% !important;        /* 绝对不允许超过屏幕宽度 */
        overflow: hidden !important;       /* 隐藏溢出内容 */
    }

    /* 2. 修复左侧图片：防止原图过大撑破布局 */
    .content .new-img-box img {
        max-width: 100% !important;        /* 图片最大不能超过父容器 */
        height: auto !important;           /* 高度自适应，保持比例 */
    }

    /* 3. 【核心修改】左侧标题：允许换行，且限制最多2行 */
    .content .new-text-box h2,
    .content .new-text-box a {
        /* 清除之前可能存在的强制不换行 */
        white-space: normal !important;    
        
        /* 允许长单词在边界处断行，而不是硬切 */
        overflow-wrap: break-word !important; 
        word-break: normal !important;     
        
        /* 限制最多显示 2 行，超出部分显示省略号 */
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;  /* 这里的 2 代表最多显示2行 */
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* =========================================
   6. 【终极修复】手机端右侧列表排版与间距
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. 强制右侧列表项变为“横向排列” (Flex布局) */
    .sidebar li, 
    .sidebar article, 
    .sidebar .item {
        display: flex !important;         /* 【关键】开启横向排列 */
        flex-direction: row !important;   /* 强制从左到右 */
        align-items: flex-start !important; /* 顶部对齐，防止文字长短不一导致错位 */
        
        margin-bottom: 20px !important;   /* 【解决你的问题】每个话题之间相隔 20px */
        padding-bottom: 15px !important;  /* 增加一点内边距让视觉更宽松 */
        border-bottom: 1px solid #f0f0f0; /* (可选)加一条淡淡的分割线，区分更明显 */
        
        overflow: hidden;                 /* 防止内容溢出 */
        clear: both !important;           /* 清除可能存在的浮动干扰 */
    }

    /* 2. 锁定右侧小图尺寸 (防止图片太大或变形) */
    .sidebar li img, 
    .sidebar article img, 
    .sidebar .item img,
    .sidebar .new-img-box img {
        width: 80px !important;           /* 固定宽度 80px */
        height: 60px !important;          /* 固定高度 60px */
        object-fit: cover !important;     /* 保持比例裁剪，不变形 */
        flex-shrink: 0 !important;        /* 【关键】防止图片被文字挤压变小 */
        margin-right: 12px !important;    /* 图片和右边文字的间距 */
        border-radius: 4px;               /* 稍微圆角，好看一点 */
        display: block;                   /* 确保图片是块级元素 */
    }

    /* 3. 优化右侧文字区域 */
    .sidebar .text-wrap, 
    .sidebar .new-text-box,
    .sidebar li > div,
    .sidebar article > div {
        flex: 1 !important;               /* 文字区域自动填满剩余空间 */
        min-width: 0;                     /* 允许文字换行 */
    }

    /* 4. 调整右侧标题字体大小 */
    .sidebar h2, 
    .sidebar h3, 
    .sidebar .title, 
    .sidebar a {
        font-size: 14px !important;       /* 手机上标题稍微小一点 */
        line-height: 1.4 !important;      /* 行高适中 */
        margin-bottom: 4px !important;    /* 标题和摘要之间的间距 */
        display: block;                   /* 强制占一行 */
    }
    
    /* 5. 隐藏右侧可能出现的数字排行或多余的小字 (如果不需要可以删掉这段) */
    .sidebar .count, 
    .sidebar .date,
    .sidebar span {
        font-size: 12px !important;
        color: #999;
        display: block;
    }
}


/* =========================================
   9. 【修正版】电脑版右侧列表 + 图片留白
   ========================================= */
@media (min-width: 769px) {
    
    /* 1. 容器布局：保持横向排列 */
    .sidebar ul li, 
    .sidebar > div > div,       
    .sidebar .widget > ul > li, 
    .sidebar article,
    .sidebar .item,
    .sidebar .post {
        
        display: flex !important;         /* 保持 Flex 布局 */
        flex-direction: row !important;   
        align-items: flex-start !important; 
        
        margin-bottom: 20px !important;   
        padding-bottom: 20px !important;  
        border-bottom: 1px solid #eaeaea; 
        
        width: 100% !important;           
        box-sizing: border-box !important;
        clear: both !important;           
        overflow: hidden;                 
    }

    /* 2. 【重点修改】图片处理：强制固定大小 + 增加右侧留白 */
    .sidebar img, 
    .sidebar .new-img-box img, 
    .sidebar .thumb img,
    .sidebar a img {
        float: none !important;           /* 取消浮动 */
        
        /* --- 这里控制图片的大小 --- */
        width: 85px !important;           /* 稍微调大一点点宽度 */
        height: 65px !important;          /* 固定高度，防止太高 */
        min-width: 85px !important;       /* 【关键】死死顶住宽度，不让它被挤压 */
        min-height: 65px !important;      /* 防止高度塌陷 */
        object-fit: cover !important;     /* 图片裁剪模式，防止变形 */
        
        /* --- 这里控制留空位 --- */
        margin-right: 15px !important;    /* 【关键】图片和右边文字的硬性间距 */
        margin-bottom: 0 !important;      
        display: block !important;        
        background-color: #f0f0f0;        /* (可选)如果图片加载慢，显示灰色背景占位 */
    }

    /* 3. 文字区域：自动填满剩余空间 */
    .sidebar .title, 
    .sidebar h3, 
    .sidebar h4, 
    .sidebar .text, 
    .sidebar p {
        flex: 1 !important;               /* 占据剩余宽度 */
        margin: 0 !important;             
        line-height: 1.4 !important;      
        font-size: 14px !important;       
        word-wrap: break-word !important; 
    }
}