/* css/news.css */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* 手机点击不要出现蓝色闪块 */
}

/* 2. 强制禁止 Body 左右滑动 */
html, body {
    width: 100%;
    overflow-x: hidden; /*【关键】超出屏幕宽度的部分直接切掉 */
    max-width: 100vw;   /* 双重保险 */
}
:root {
    /* 默认亮色主题 */
    --bg-color: #ffffff;
    --text-primary: #1d1d1f;
    --text-secondary: #86868b;
    --nav-bg: rgba(255, 255, 255, 0.85);
    --border-color: rgba(0, 0, 0, 0.1);
    --code-bg: #f5f5f7;
    --accent-color: #007aff;
    
    /* 字体定义 */
    --font-main: -apple-system, "Noto Sans SC", "Helvetica Neue", sans-serif;
}

/* 深色模式适配 (JS会给html加data-theme="dark") */
[data-theme="dark"] {
    --bg-color: #000000;
    --text-primary: #f5f5f7;
    --text-secondary: #a1a1a6;
    --nav-bg: rgba(20, 20, 20, 0.85);
    --border-color: rgba(255, 255, 255, 0.15);
    --code-bg: #1c1c1e;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    background-color: var(--bg-color);
    color: var(--text-primary);
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 顶部导航栏 */
.news-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
    z-index: 100;
    box-sizing: border-box;
}

.back-btn {
    background: transparent;
    border: none;
    font-size: 18px;
    color: var(--accent-color);
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.nav-title {
    font-size: 16px;
    font-weight: 600;
}

.nav-placeholder {
    width: 40px; /* 与返回按钮同宽，确保标题居中 */
}

/* 主要内容区 */
.news-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 70px 20px 100px 20px; /* 顶部避开导航栏 */
    min-height: 100vh;
}

.page-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1.3;
}

.meta-info {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 30px;
}

/* 内容排版 */
.content-body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 20px 0;
    display: block;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.content-body p {
    font-size: 17px;
    margin-bottom: 20px;
    text-align: justify;
}

.content-body h2 {
    font-size: 22px;
    margin: 40px 0 15px 0;
    border-left: 4px solid var(--accent-color);
    padding-left: 10px;
}

.content-body ul, .content-body ol {
    padding-left: 20px;
    margin-bottom: 20px;
    color: var(--text-primary);
}
.content-body li {
    margin-bottom: 8px;
}

/* 修改 Target 2: 海报积木容器 */
.news-hero-block {
    position: relative; /* 确保子元素 absolute 是相对于我不乱跑 */
    width: 100%;       
    margin: 25px 0;    /* 只有容器本身与正文保持间距 */
    border-radius: 12px;
    overflow: hidden;  /* 关键：把图片多余的角切掉 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    background: #000; 
    line-height: 0;    /* 关键：防止容器内部产生行高留白 */
}


/* 核心修复：让图片保持原比例，不再强制拉伸到400px */
.news-hero-block img {
   width: 100%;
    height: auto;      
    display: block;
    object-fit: contain;
    
    margin: 0 !important; 
    padding: 0 !important;
    border-radius: 0 !important; 
    box-shadow: none !important;
    
    /* 新增这行，确保图片层级低于文字遮罩 */
    position: relative;
    z-index: 1; 
}


/* 文字覆盖层优化 */
.hero-text-overlay {
    position: absolute; /* 绝对定位：脱离文档流，浮在父元素上 */
    top: 0;             /* 从顶部开始 */
    left: 0;            /* 从左侧开始 */
    width: 100%;        /* 宽度占满父元素 */
    height: 100%;       /* 高度占满父元素 */
    
    /* 渐变背景：让文字更清晰，保持与预览页一致 */
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0.9) 100%);
    
    display: flex;
    align-items: flex-end; /* 文字沉底 */
    justify-content: center; /* 文字居中 */
    
    padding: 20px;
    box-sizing: border-box; /* 关键：防止padding把盒子撑大 */
    z-index: 10;            /* 关键：确保层级高于图片 */
    pointer-events: none;   /* 优化：让用户可以长按穿透遮罩层保存图片 */
}



.content-body .hero-text {
    color: white;
    font-size: 24px;
    line-height: 1.4;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
    
    /* === 修复核心代码 START === */
    border: none;         /* 1. 彻底删除边框 -> 解决蓝色竖杠 */
    border-left: none;    /* 双重保险 */
    padding: 0;           /* 2. 删除内边距 -> 解决文字偏移 */
    margin: 0;            /* 3. 删除外边距 -> 解决高度不一致 */
    /* === 修复核心代码 END === */
}

/* 默认黑体 */
.font-default { 
    font-family: -apple-system, "Noto Sans SC", sans-serif; 
    font-weight: 700;
}

/* 预览页实际上把 Serif 也设为了无衬线体，或者你可以改为真正的衬线体 "Noto Serif SC" */
.font-serif { 
    font-family: "Noto Sans SC", serif; 
    font-weight: 500;
} 

/* 手写体 */
.font-cursive { 
    font-family: "ZCOOL KuaiLe", cursive; 
    letter-spacing: 2px;
} 

/* 科技/机械体 */
.font-mono { 
    font-family: "Orbitron", monospace; 
    letter-spacing: 1px;
}

/* 加载动画 */
.loading-scan { display: flex; justify-content: center; padding-top: 50px; }
.spinner {
    width: 30px; height: 30px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* =================================================================
   Quill 富文本通用渲染样式库
   (让 news.html 能完美显示后台编辑的所有格式)
   ================================================================= */

/* --- 1. 对齐方式 (基础必看) --- */
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }

/* --- 2. 标题优化 (覆盖默认样式，让文章更有层次) --- */
/* 一级大标题 */
.content-body h1 { 
    font-size: 1.8em; 
    margin-top: 30px; 
    margin-bottom: 15px; 
    font-weight: 800;
    line-height: 1.3;
}

/* 二级标题 (保留你原本喜欢的左侧蓝条风格) */
.content-body h2 { 
    font-size: 1.5em; 
    margin-top: 25px; 
    margin-bottom: 12px;
    border-left: 5px solid #007aff; /* 歆爱蓝 */
    padding-left: 12px;
    font-weight: 700;
}

/* 三级小标题 */
.content-body h3 {
    font-size: 1.25em;
    margin-top: 20px;
    font-weight: 600;
    color: #444;
}

/* --- 3. 列表样式 (防止前面没有圆点) --- */
.content-body ul, .content-body ol {
    padding-left: 28px; /* 留出缩进给圆点 */
    margin-bottom: 16px;
}
.content-body li {
    margin-bottom: 6px; /* 列表项稍微松散一点好读 */
}
/* 处理列表嵌套 */
.content-body li.ql-indent-1 { margin-left: 2em; }
.content-body li.ql-indent-2 { margin-left: 4em; }

/* --- 4. 引用块 (Blockquote) --- */
.content-body blockquote {
    border-left: 4px solid #ccc;
    background: #f9f9f9; /* 浅灰底色 */
    margin: 15px 0;
    padding: 10px 15px;
    color: #666;
    font-style: italic;
    border-radius: 0 4px 4px 0;
}

/* --- 5. 字体样式补充 --- */
/* 如果你在后台用了删除线 */
.content-body s { text-decoration: line-through; }
/* 如果你在后台用了下划线 */
.content-body u { text-decoration: underline; }

/* --- 6. 视频容器适配 (防止视频溢出) --- */
.content-body iframe.ql-video {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* 保持 16:9 比例 */
    border-radius: 8px;
    margin: 15px 0;
}
.content-body {
    word-wrap: break-word;
    word-break: break-word; 
    overflow-wrap: break-word;
}
/* --- 7. 暗黑模式适配 (如果你的网页支持夜间模式) --- */
[data-theme="dark"] .content-body blockquote {
    background: #1c1c1e;
    border-left-color: #444;
    color: #aaa;
}
[data-theme="dark"] .content-body h3 {
    color: #ccc;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 768px) {
    /* 1. 改为 auto，让高度随图片自动适应，彻底消除黑色空隙 */
    .news-hero-block { 
        height: auto !important; 
        min-height: auto !important;
    }
    
    /* 2. 稍微调整下文字大小，加上 !important 防止被 JS 的内联样式覆盖 */
    .hero-text { 
        font-size: 30px; 
        padding-bottom: 20px; /* 移动端底部稍微留点距离 */
    }

    .page-title { font-size: 24px; }
}