/* ==========================================================================
   首页样式优化（home-optimize.css）
   仅做整体视觉质感升级与数据空状态修补，不改动 zaobao 原有版式、栅格与配色。
   需在 index.1/2/3.css 之后引入。
   ========================================================================== */

/* 1. 无封面占位：模板内未替换的 1×1 透明 gif 图片隐藏，
      .aspect-picture 容器呈现中性浅灰底，避免纯白空洞或破图图标 */
.aspect-picture:has(> img[src^="data:image"]),
.aspect-picture:has(div > img[src^="data:image"]) {
    background-color: #f6f6f6;
}

img[src^="data:image/gif;base64,R0lGODlh"] {
    visibility: hidden;
}

/* 加载失败的图片不显示 alt 文本与破图图标（布局尺寸由容器保持） */
article img,
[data-testid="rotator"] img {
    color: transparent;
}

/* 2. 全站基础质感 */
html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.home-page {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 3. 品牌色文本选中效果 */
::selection {
    background: rgba(168, 0, 52, 0.12);
}

/* 4. 链接与卡片标题：换行统一，避免长英文/数字串溢出卡片（不覆盖原站 hover 配色） */
.article-link,
.realtime_item,
.hotnews_day_item,
.hotnews_week_item {
    overflow-wrap: anywhere;
}

/* 5. 封面图容器统一灰底与圆角基准 */
.aspect-picture {
    background-color: #f6f6f6;
    border-radius: 4px;
}

article img,
[data-testid="rotator"] img {
    backface-visibility: hidden;
}

/* 6. Tab（中国/国际/财经、单日/一周）：聚焦态与点击反馈更柔和 */
.static-island .px-3.flex.group,
.static-island label {
    -webkit-tap-highlight-color: transparent;
    transition: background-color 150ms ease, color 150ms ease;
}

.static-island .px-3.flex.group:active,
.static-island label:active {
    transform: scale(0.97);
}

/* 7. 自定义滚动条（仅指针设备，桌面端视觉统一） */
@media (pointer: fine) {
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    ::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.14);
        border-radius: 8px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: rgba(168, 0, 52, 0.35);
    }
    ::-webkit-scrollbar-track {
        background: transparent;
    }
}

/* 8. 键盘可达性：品牌红焦点描边（鼠标点击不显示） */
a:focus-visible,
button:focus-visible,
label:focus-visible {
    outline: 2px solid rgba(168, 0, 52, 0.55);
    outline-offset: 2px;
    border-radius: 2px;
}

/* 9. 主内容文章标题：hover 品牌红 + 细腻过渡（限定图文卡/列表卡标题容器，
      不触碰已自带 peer-hover 蓝的缩略图配文链接） */
.prime_hero_item a.article-link .break-words,
.rotator_news_item a.article-link,
.prime_news_item a.article-link,
.forum_news_item a.article-link,
.finance_news_item a.article-link,
.special_news_item a.article-link,
.news-china_news_item a.article-link,
.news-world_news_item a.article-link,
.news-singapore_news_item a.article-link,
.news-sea_news_item a.article-link,
.news-china2_news_item a.article-link,
.news-world2_news_item a.article-link,
.culture_news_item a.article-link,
[data-testid="rotator"] .text-2xl {
    transition: color 160ms ease;
}

.prime_hero_item a.article-link:hover .break-words,
.rotator_news_item a.article-link:not(.article-feed-image):hover,
.prime_news_item a.article-link:not(.article-feed-image):hover,
.forum_news_item a.article-link:not(.article-feed-image):hover,
.finance_news_item a.article-link:not(.article-feed-image):hover,
.special_news_item a.article-link:not(.article-feed-image):hover,
.news-china_news_item a.article-link:not(.article-feed-image):hover,
.news-world_news_item a.article-link:not(.article-feed-image):hover,
.news-singapore_news_item a.article-link:not(.article-feed-image):hover,
.news-sea_news_item a.article-link:not(.article-feed-image):hover,
.news-china2_news_item a.article-link:not(.article-feed-image):hover,
.news-world2_news_item a.article-link:not(.article-feed-image):hover,
.culture_news_item a.article-link:not(.article-feed-image):hover {
    color: rgb(168 0 52);
}

/* 10. 封面缩略图：容器裁圆 + 图片 hover 放大时缓动手感更顺（原站已带 scale，仅统一时长曲线） */
.article-feed-image .aspect-picture,
.article-graphic-image .aspect-picture,
[data-testid="rotator"] .aspect-picture {
    overflow: hidden;
    border-radius: 4px;
}

/* 11. 侧栏“最新”时间轴：时间戳弱化层级，标题更紧凑可读 */
.static-island .text-xs.text-grey-400 {
    letter-spacing: 0.01em;
}

/* 12. 侧栏“热门”序号徽标：前三名品牌渐变火焰数字更立体（仅加投影，不改配色） */
.static-island .hotnews_day_item,
.static-island .hotnews_week_item {
    line-height: 1.5;
}

/* 13. 版块标题（22px）与“更多”箭头：箭头 hover 微位移 */
a[aria-label$="更多"] svg {
    transition: transform 160ms ease;
}
a[aria-label$="更多"]:hover svg {
    transform: translateX(2px);
}

/* 14. 版块“更多”箭头容器内联居中对齐 */
a[aria-label$="更多"] {
    display: inline-flex;
    align-items: center;
}

/* 15. 时政（观点）卡摘要：统一行距，与标题形成清晰层级 */
.forum_news_item .line-clamp-2.mt-2 {
    line-height: 1.6;
}

/* 16. 侧栏“最新”时间轴标题行高更舒展 */
.static-island[data-island="RealTimeGroupList"] .realtime_item {
    line-height: 1.5;
}

/* 17. 侧栏“热门”火焰序号图标块级化，避免前三名图标与数字错位 */
.static-island[data-island="HotNews"] svg {
    display: block;
}

/* 18. 卡片分隔线统一为更浅灰，弱化分割感（仅主内容 article，侧栏列表不动） */
main article .border-grey-150 {
    border-color: #ececec;
}

/* 19. 顶部通栏广告位占位：未投放时为浅灰虚线框 + “广告”角标，
      广告系统填充 .banner-slot 内图片后角标自动隐藏 */
.web-banner {
    width: 100%;
}
.banner-slot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 90px;
    background: #f6f6f6;
    border: 1px dashed #d8d8d8;
    border-radius: 6px;
    overflow: hidden;
    cursor: default;
    transition: border-color 160ms ease, background-color 160ms ease;
}
.banner-slot:hover {
    border-color: #c8c8c8;
    background: #f2f2f2;
}
.banner-slot-label {
    font-size: 13px;
    letter-spacing: 2px;
    color: #b0b0b0;
    user-select: none;
}
/* 已投放：去掉占位虚线/灰底/角标，图片铺满 */
.banner-slot.is-filled,
.banner-slot:has(img) {
    height: auto;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
}
.banner-slot:has(img) .banner-slot-label {
    display: none;
}
.banner-slot img {
    display: block;
    width: 100%;
    height: auto;
}
@media (max-width: 991px) {
    .banner-slot {
        height: 64px;
    }
}

/* 20. 减少动效偏好：尊重系统设置，关闭平滑滚动与缩放 */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    article img,
    [data-testid="rotator"] img,
    a[aria-label$="更多"] svg,
    .static-island .px-3.flex.group:active,
    .static-island label:active {
        transition: none !important;
        transform: none !important;
    }
}