/* --- 全局变量 --- */
 :root {
     --news-red: #800810;
     /* PRISMS 品牌红 */
     --news-dark: #1a1a1a;
     /* 深灰黑 */
     --news-grey: #666666;
     /* 辅助灰 */
     --font-title: 'Playfair Display', serif;
     /* 标题字体 */
     --font-body: 'Lato', sans-serif;
     /* 正文字体 */

     /* [设置] 请根据您实际导航栏高度调整这里 */
     --nav-height-buffer: 160px;
 }

 body>header,
 .navbar,
 .site-header,
 #header {
     position: fixed !important;
     /* 确保它固定在顶部 */
     z-index: 9999 !important;
     /* 9999 意味着最顶层，没人能盖过它 */
     top: 0;
     left: 0;
     width: 100%;
     background-color: #fff;
     /* 确保背景是白色的，不是透明的 */
 }

 /* 2. 确保文章内容在导航栏下方 */
 .news-article-template {
     position: relative;
     z-index: 1;
     /* 给文章一个较低的基础层级 */
 }

 body,
 html {
     margin: 0;
     padding: 0;
 }

 .news-article-template {
     background-color: #fff;
     font-family: var(--font-body);
     color: var(--news-dark);
     line-height: 1.8;
     width: 100%;
     overflow-x: hidden;
     padding-bottom: 120px;
     /* 页面底部留白 */
 }

 /* =========================================
           [A] 头部区域：配合导航栏设计
           ========================================= */
 .news-header {
     /* 关键：给导航栏留出位置，同时保持呼吸感 */
     padding-top: var(--nav-height-buffer);
     padding-bottom: 50px;
     padding-left: 20px;
     padding-right: 20px;
     max-width: 880px;
     margin: 0 auto;
     text-align: center;

     /* 简单的淡入动画，防止加载时的闪烁 */
     opacity: 0;
     animation: fadeIn 1.2s ease-out forwards;
 }

 /* 顶部装饰线：用于平衡视觉中心 */
 .header-deco-line {
     width: 2px;
     height: 50px;
     /* 竖线 */
     background-color: var(--news-red);
     margin: 0 auto 30px;
 }

 /* 元数据 (Date | Category) */
 .news-meta {
     font-size: 0.8rem;
     font-weight: 700;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: var(--news-red);
     margin-bottom: 25px;
     display: block;
 }

 /* 主标题 */
 .news-title {
     font-family: var(--font-title);
     font-size: 3.6rem;
     /* 纯文字版面，标题要够大 */
     font-weight: 700;
     line-height: 1.15;
     margin-bottom: 30px;
     color: var(--news-dark);
 }

 /* 导语/副标题 */
 .news-subtitle {
     font-family: var(--font-title);
     font-size: 1.5rem;
     font-style: italic;
     color: var(--news-grey);
     max-width: 760px;
     margin: 0 auto;
     font-weight: 400;
     line-height: 1.6;
 }

 /* =========================================
           [B] 正文区域
           ========================================= */
 .news-content-body {
     max-width: 740px;
     /* 窄栏阅读更舒适 */
     margin: 0 auto;
     font-size: 1.15rem;
     color: #333;
     padding: 0 20px;
 }

 /* 段落间距 */
 .news-content-body p {
     margin-bottom: 30px;
 }

 /* 内容开始的分割线 (替代原本的图片位置) */
 .content-divider {
     width: 80px;
     height: 2px;
     background-color: #eee;
     margin: 30px auto 60px;
 }

 /* 首字下沉 */
 .drop-cap::first-letter {
     font-family: var(--font-title);
     font-size: 4.5rem;
     float: left;
     line-height: 0.8;
     margin-right: 15px;
     margin-top: -2px;
     color: var(--news-red);
 }

 /* 小标题 */
 .news-content-body h3 {
     font-family: var(--font-title);
     font-size: 1.8rem;
     margin-top: 60px;
     margin-bottom: 25px;
     color: var(--news-dark);
 }

 /* =========================================
           [C] 统一尺寸画廊 (自动对齐)
           ========================================= */
 .news-uniform-gallery {
     max-width: 1100px;
     margin: 70px auto 30px;
     /* [修改] 下方间距从 70px 减小到 30px */
     padding: 0 20px;

     /* 1. 启用弹性布局，覆盖掉 Grid */
     display: flex !important;
     /* 加 !important 以防 grid-3-col 没删干净 */
     flex-wrap: wrap;
     justify-content: center;
     /* 默认居中（适合1-3张） */
     gap: 30px;
 }

 /* 默认三列 */
 .grid-3-col {
     grid-template-columns: 1fr 1fr 1fr;
 }

 .uni-item {
     margin: 0;
     box-sizing: border-box;
     /* 默认逻辑：允许放大，基础宽度 300px */
     flex: 1 1 300px;
     max-width: 900px;
     /* 单张时限制最大宽度，防止过大 */
 }

 /* A. 只有 2 张图时：每张占一半 (饱满模式) */
 .uni-item:first-child:nth-last-child(2),
 .uni-item:first-child:nth-last-child(2)~.uni-item {
     /* (100% - 30px间距) / 2 */
     flex: 0 0 calc(50% - 15px);
     max-width: none;
     /* 解除最大宽度限制 */
 }

 /* B. 有 4 张及以上时：严格三列 (整齐模式) */
 .uni-item:first-child:nth-last-child(n+4),
 .uni-item:first-child:nth-last-child(n+4)~.uni-item {
     /* (100% - 60px间距) / 3 */
     flex: 0 0 calc(33.333% - 20px);
     max-width: none;
 }

 /* 当数量 >= 4 时，容器改为左对齐，让第4张乖乖待在左边 */
 .news-uniform-gallery:has(.uni-item:nth-child(4)) {
     justify-content: flex-start;
 }

 /* 图片容器：强制 3:2 比例 */
 .img-frame {
     width: 100%;
     aspect-ratio: 3 / 2;
     overflow: hidden;
     border-radius: 4px;
     background-color: #f4f4f4;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
     transition: transform 0.4s ease, box-shadow 0.4s ease;
 }

 .img-frame img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.8s ease;
 }

 /* 悬停交互 */
 .uni-item:hover .img-frame {
     transform: translateY(-5px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
 }

 .uni-item:hover img {
     transform: scale(1.05);
     /* 稍微温和一点的放大 */
 }

 .uni-caption {
     margin-top: 15px;
     font-size: 0.95rem;
     color: #555;
     text-align: center;
     font-family: var(--font-body);
 }

 /* =========================================
           [D] View All 按钮区域
           ========================================= */
 .button-wrapper {
     text-align: center;

     /* [修改] 距离上方元素的间距 (控制分割线与图片的距离) */
     margin-top: 20px;
     /* 从 80px 减小到 20px */

     /* [修改] 内部留白 (控制按钮与分割线的距离) */
     padding-top: 40px;
     /* 从 60px 减小到 40px */

     border-top: 1px solid #eee;
     /* 保留那条淡淡的分割线 */
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
     clear: both;
 }

 .btn-view-all {
     display: inline-block;
     text-decoration: none;
     font-family: var(--font-title);
     font-weight: 700;
     font-size: 1rem;
     text-transform: uppercase;
     letter-spacing: 1px;

     /* 按钮样式：红色实心 */
     background-color: var(--news-red);
     color: #fff;
     padding: 16px 45px;
     border-radius: 4px;

     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(128, 8, 16, 0.2);
 }

 .btn-view-all:hover {
     background-color: var(--news-dark);
     /* 悬停变黑 */
     transform: translateY(-2px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
 }

 /* =========================================
           [E] 动画与适配
           ========================================= */
 @keyframes fadeIn {
     to {
         opacity: 1;
     }
 }

 .scroll-fade {
     opacity: 0;
     transform: translateY(30px);
     transition: opacity 0.8s ease-out, transform 0.8s ease-out;
 }

 .is-visible {
     opacity: 1 !important;
     transform: translateY(0) !important;
 }

 /* 手机适配 */
 @media (max-width: 768px) {
     .news-header {
         padding-top: 120px;
     }

     /* 手机导航栏通常较矮 */
     .news-title {
         font-size: 2.5rem;
     }

     .grid-3-col {
         grid-template-columns: 1fr;
     }

     /* 画廊变单列 */



     .news-uniform-gallery {
         gap: 40px;
         /* 手机上间距加大一点 */
     }

     /* 手机上无论多少张，都强制单列 */
     .uni-item,
     .uni-item:first-child:nth-last-child(2),
     .uni-item:first-child:nth-last-child(2)~.uni-item,
     .uni-item:first-child:nth-last-child(n+4)~.uni-item {
         flex: 0 0 100% !important;
         /* 手机上强制一行一个 */
         max-width: 100%;
     }
 }