/* ================================================================
   news.css — 新闻动态页面专用样式
   通用样式见 common.css
   ================================================================ */

/* Banner 背景图 */
.page-banner{background-image:url('assets/about/news-banner.jpg')}

/* 分类标签 */
.news-tabs{background:var(--c-white);border-bottom:1px solid var(--c-gray-100);position:sticky;top:var(--nav-h);z-index:99;box-shadow:0 2px 8px rgba(0,0,0,.03)}
.news-tabs-list{display:flex;justify-content:flex-start;gap:0;padding:0 var(--side-pad)}
.news-tab{padding:16px 32px 16px 0;font-size:15px;font-weight:500;color:var(--c-gray-500);transition:all var(--transition);position:relative;cursor:pointer;letter-spacing:2px;margin-right:32px}
.news-tab:hover{color:var(--c-primary)}
.news-tab.active{color:var(--c-primary);font-weight:600}
.news-tab.active::after{content:'';position:absolute;bottom:0;left:0;width:40px;height:3px;background:var(--c-gold);border-radius:2px}

/* 新闻列表 */
.news-main{padding:60px var(--side-pad) 80px}
.news-list{max-width:100%;margin:0 auto}
.news-item{display:flex;align-items:stretch;gap:32px;padding:32px 0;border-bottom:1px solid var(--c-gray-100);transition:all var(--transition);cursor:pointer;position:relative}
.news-item:hover{background:var(--c-gray-50);border-radius:var(--radius-lg);padding-left:16px;padding-right:16px}
.news-item:hover .news-thumb img{transform:scale(1.08)}
.news-item:hover .news-item-title{color:var(--c-primary)}
.news-item:hover .news-arrow{background:var(--c-primary);color:#fff;transform:translateX(4px)}

/* 缩略图 */
.news-thumb{flex:0 0 280px;width:280px;height:170px;border-radius:var(--radius-md);overflow:hidden;background:var(--c-gray-100);position:relative}
.news-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s var(--ease-out-expo)}

/* 日期块 */
.news-date-block{flex:0 0 90px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.news-day{font-size:40px;font-weight:700;color:var(--c-primary);line-height:1;font-family:var(--font-en)}
.news-month{font-size:13px;color:var(--c-gray-500);margin-top:6px;letter-spacing:1px}

/* 内容区 */
.news-content{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0}
.news-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 14px;border-radius:20px;font-size:12px;font-weight:600;color:#fff;letter-spacing:1px;margin-bottom:12px;width:fit-content}
.news-tag::before{content:'';width:5px;height:5px;border-radius:50%;background:#fff;opacity:.7}
.news-tag--group{background:var(--c-primary)}
.news-tag--industry{background:#2A9D4E}
.news-tag--notice{background:var(--c-gold)}
.news-item-title{font-size:18px;font-weight:700;color:var(--c-dark);line-height:1.5;margin-bottom:8px;transition:color var(--transition);letter-spacing:1px}
.news-excerpt{font-size:14px;color:var(--c-gray-500);line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-meta{display:flex;align-items:center;gap:16px;margin-top:12px;font-size:13px;color:var(--c-gray-300)}
.news-meta .nm-item{display:inline-flex;align-items:center;gap:5px}
.news-meta svg{width:14px;height:14px;fill:currentColor}

/* 箭头按钮 */
.news-arrow{flex:0 0 48px;width:48px;height:48px;border-radius:50%;background:var(--c-gray-100);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--c-gray-500);transition:all var(--transition);align-self:center}
.news-arrow svg{width:18px;height:18px;fill:currentColor}

/* 分页 */
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:60px}
.page-btn{width:40px;height:40px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--c-gray-500);background:var(--c-white);border:1px solid var(--c-gray-100);cursor:pointer;transition:all var(--transition)}
.page-btn:hover{color:var(--c-primary);border-color:var(--c-primary)}
.page-btn.active{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
.page-btn.disabled{opacity:.4;cursor:not-allowed}

/* 响应式 - 页面专用 */
@media(max-width:1200px){
  .news-thumb{flex:0 0 220px;width:220px;height:140px}
}
@media(max-width:1024px){
 
  
  /* ========== 手机端news-tabs：一行横向滚动，禁止换行 ========== */
  .news-tabs-list{
    flex-wrap:nowrap !important;
    overflow-x:auto;   white-space: nowrap;
    -webkit-overflow-scrolling:touch;
  }
  .news-tabs-list::-webkit-scrollbar{height:3px;}
  .news-tabs-list::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px;}



  .news-tab{padding:12px 24px 12px 0;font-size:14px;margin-right:24px}
  .news-thumb{flex:0 0 180px;width:180px;height:120px}
  .news-day{font-size:32px}
 
  .news-main{padding:40px var(--side-pad) 60px}

  /* ========== 新增：手机端新闻时间悬浮图片左上角 ========== */
  .news-item{
    flex-direction:column;
    gap:16px;
    position:relative; /* 作为绝对定位父级 */
  }
  .news-thumb{
    flex:0 0 auto;
    width:100%;
    height:180px;
  }
  .news-date-block{
    position:absolute;
    z-index:2;
    flex-direction:column;
    gap:0;
    background:rgba(0,0,0,0.45);
    color:#fff;
    padding:6px 10px;
    border-radius:6px;
  }
  .news-day{
    font-size:24px;
    color:#ffffff;
  }
  .news-month{
    font-size:11px;
    color:rgba(255,255,255,.85);
    margin-top:2px;
  }
  /* ===================================================== */

}
@media(max-width:640px){
  .news-main{padding:32px var(--side-pad)}
  .news-item{flex-direction:column;gap:16px}
  .news-thumb{flex:0 0 auto;width:100%;height:180px}
  .news-date-block{flex-direction:row;align-items:baseline;gap:12px}
  .news-day{font-size:28px}
  .news-arrow{display:none}
  .news-item-title{font-size:16px}
  .news-excerpt{font-size:13px}
  .page-btn{width:36px;height:36px}
}