/* =========================================================
   帝国CMS 天蓝/白主题 (匹配图片中足球直播网的清爽风格)
   ========================================================= */

/* 外层容器：与下方直播列表保持相同宽度（假设为1200px），并排双列 */
.sky-content-wrapper {
    width: 1200px;         /* 如果您的网页主体宽度是1000px，请对应修改此处 */
    max-width: 100%;
    margin: 20px auto;     /* 上下保持20px间距 */
    display: flex;
    justify-content: space-between;
    gap: 20px;             /* 两列之间的间距 */
    box-sizing: border-box;
    font-family: -apple-system, "Microsoft YaHei", sans-serif;
}

/* 左右独立的白色内容卡片 */
.sky-list-box {
    flex: 1;               /* 平分宽度 */
    background-color: #ffffff;
    border: 1px solid #eaeaea; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02); /* 极轻微阴影，符合扁平化 */
    padding: 20px;
    box-sizing: border-box;
}

/* 头部：标题与更多 */
.sky-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0f0f0; /* 与图片中直播列表上方的浅色线条呼应 */
    padding-bottom: 12px;
    margin-bottom: 15px;
}

/* 标题设计：左侧加入天蓝色竖线，呼应导航栏的天蓝色 */
.sky-box-title {
    font-size: 18px;
    font-weight: normal;
    color: #333333;
    margin: 0;
    position: relative;
    padding-left: 12px;
}
.sky-box-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background-color: #63b4f6; /* 天蓝色，取自顶部导航栏相近色 */
    border-radius: 2px;
}

/* 更多链接 */
.sky-box-more {
    font-size: 13px;
    color: #999999;
    text-decoration: none;
    transition: color 0.2s;
}
.sky-box-more:hover {
    color: #ff3333; /* 悬停变为红色，呼应导航底部红线及"直播中"红字 */
}

/* =========================================================
   修正：录像与集锦列表防撑破、截断与完整时间对齐
   ========================================================= */

.sky-news-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sky-news-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 38px; /* 适当拉开行高，显得不那么拥挤 */
    border-bottom: 1px dashed #f2f2f2;
    overflow: hidden; /* 防止溢出 */
}
.sky-news-list li:last-child {
    border-bottom: none;
}

/* 列表超链接容器 */
.sky-news-list a {
    display: flex;
    align-items: center;
    color: #333333;
    text-decoration: none;
    font-size: 14px;
    flex: 1;
    min-width: 0; /* 【关键修复】：Flex布局防溢出必须加 */
    transition: color 0.2s;
}

/* 标题截断限制 */
.list-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
}

/* 前置小圆点修饰 */
.list-dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    background-color: #cccccc;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0; /* 圆点不可压缩 */
    transition: background-color 0.2s;
}

/* 【已修改】完整日期样式 */
.list-date {
    font-size: 13px;
    color: #999999;
    margin-left: 15px;
    font-family: Arial, sans-serif;
    flex-shrink: 0; /* 【关键修复】：保证长段的完整日期绝对不会被挤压换行 */
}

/* 悬停交互效果 */
.sky-news-list li:hover a {
    color: #e60012; 
}
.sky-news-list li:hover .list-dot {
    background-color: #e60012;
}

/* =========================================================
   资讯展示框排版样式 (上图文 + 下双列列表)
   ========================================================= */

/* 外层容器属性 */
.sky-news-section {
    width: 1200px;
    max-width: 100%;
    margin: 20px auto;
    background-color: #ffffff;
    border: 1px solid #eaeaea;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    padding: 20px;
    box-sizing: border-box;
    font-family: -apple-system, "Microsoft YaHei", sans-serif;
}

/* 模块头部标题 */
.sky-box-header {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 12px;
    margin-bottom: 20px;
}
.sky-box-title {
    font-size: 18px;
    font-weight: normal;
    color: #333333;
    margin: 0;
    position: relative;
    padding-left: 12px;
}
.sky-box-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background-color: #63b4f6; /* 呼应网站的天蓝色 */
    border-radius: 2px;
}

/* 上方：三篇头条网格布局 */
.sky-headline-grid {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

/* 头条图片卡片 */
.headline-card {
    flex: 1;               
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    display: block;
    height: 180px;
    background-color: #f8f8f8;
}

.headline-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* 悬停放大图片效果 */
.headline-card:hover img {
    transform: scale(1.05);
}

/* 卡片底部半透明标题栏 */
.headline-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    color: #ffffff;
    padding: 30px 15px 12px;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================================
   修复：双列列表防撑破、截断与时间对齐
   ========================================================= */

.sky-regular-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr; 
    column-gap: 40px; /* 稍微缩小一点列间距，给超长文字多留空间 */
}

.sky-regular-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 42px;
    border-bottom: 1px dashed #f2f2f2;
    overflow: hidden; /* 防止任何子元素溢出本行 */
}

.sky-regular-list a {
    display: flex;
    align-items: center;
    color: #333333;
    text-decoration: none;
    font-size: 14px;
    flex: 1;
    min-width: 0; /* 【关键修复点】：Flex布局下必须加这个，否则长文本无法截断会撑破盒子 */
    transition: color 0.2s;
}

.list-dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    background-color: #cccccc;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0; /* 圆点绝对不能被挤压缩小 */
}

.list-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block; 
    width: 100%; /* 配合 min-width: 0 实现完美尾部省略号截断 */
}

.list-full-date {
    color: #999999;
    font-size: 13px;
    margin-left: 15px;
    font-family: Arial, sans-serif;
    flex-shrink: 0; /* 【关键修复点】：保证日期永远不会被左侧长标题挤压换行 */
}

.sky-regular-list li:hover a {
    color: #e60012;
}
.sky-regular-list li:hover .list-dot {
    background-color: #e60012;
}