/* ============================================================
   NTKRIB 品牌资讯列表页（浅色）
   版式参考：uemo.net/tools/resources/units/preview/id/365「新闻浅色005」
   导航与内容宽度与首页（index.html）保持一致
   ============================================================ */
* { box-sizing: border-box; }
html { background: #fff; }
body.nl {
  margin: 0; background: #fff; color: #14151a;
  font-family: 'Plus Jakarta Sans', "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-size: 14px; line-height: 1.7; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.nl a { color: inherit; text-decoration: none; }
body.nl img { max-width: 100%; display: block; }

/* ---------- 导航：与首页同一套（#reactbits-header 由 js/site-nav.js 渲染） ----------
   首页导航是白字压在深色星空上；本页白底，故固定为首页「滚动后」的深色毛玻璃条，
   白 logo / 白 MENU 正常可见，面板样式与首页完全一致。 */
.nl #reactbits-header .staggered-menu-header {
  background: rgba(0, 0, 0, .86);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.nl .sm-logo { cursor: pointer; }

/* ---------- 内容列：与首页 .scene-inner 同宽 ---------- */
/* 2026-09-12 单列定义：与 list-hero.css 里那份相同（资讯页不引 site-page.css，
   靠本页加载的 list-hero.css 提供这两个变量）。 */
.nl-wrap { width: var(--col-w); margin: 0 auto; }

.nl-main { padding: 136px 0 110px; }

/* ---------- 标题区（与内页 .ip-head 同一套规格） ---------- */
.nl-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 40px;
  margin: 0 0 40px;
}
.nl-head h1 { margin: 0; }
.nl-en { display: block; font-size: 60px; line-height: 75px; font-weight: 700; color: #14151a; }
.nl-zh { display: block; margin-top: 4px; font-size: 48px; line-height: 60px; font-weight: 700; color: #14151a; }
.nl-head p { margin: 0; color: rgba(20, 21, 26, .6); font-size: 13px; line-height: 1.9; flex: 0 1 auto; }
@media (min-width: 1440px) { .nl-head p { white-space: nowrap; } }

/* ---------- 列表行：日期 / 正文 / 图片 ---------- */
.nl-row {
  display: grid; grid-template-columns: 190px minmax(0, 1fr) 35.86%;  /* 图片列 = 667/1860，与红框同比例 */
  gap: 20px 44px; padding: 46px 0; border-top: 1px solid rgba(20, 21, 26, .2);
  align-items: start;
}
.nl-date span { display: block; color: rgba(20, 21, 26, .6); font-size: 14px; line-height: 22.4px; }
.nl-date b { display: block; color: #14151a; font-size: 26px; line-height: 26px; font-weight: 400; }
.nl-text { min-width: 0; }
.nl-text h3 { margin: 0; font-size: 22px; line-height: 35.2px; font-weight: 700; color: #14151a; }
.nl-text p {
  margin: 10px 0 0; color: rgba(20, 21, 26, .6); font-size: 14px; line-height: 24.5px;
  max-width: 52em;                                   /* 与红框同宽 ≈727px @14px */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nl-more {
  display: inline-flex; align-items: center; margin-top: 106px; padding: 12px 26px;
  border-top: 1px solid rgba(20, 21, 26, .3); border-bottom: 1px solid rgba(20, 21, 26, .3);
  font-size: 12px; line-height: 19.2px; font-weight: 700; color: #14151a;
  background: transparent; cursor: pointer;
  transition: border-color .3s, background .3s, color .3s;
}
.nl-row:hover .nl-more { border-color: rgba(20, 21, 26, .75); }
/* 悬停效果：鼠标移到按钮上切换配色（白底黑字 → 黑底白字） */
.nl-row .nl-more:hover { background: #14151a; color: #fff; border-color: #14151a; }

/* 图片框 = 用户红框尺寸（667 × 306，宽高比 2.18:1）；图片完整不裁切 */
.nl-img { display: flex; align-items: flex-start; justify-content: center; }
.nl-img img {
  display: block; width: 100%; height: auto; aspect-ratio: 667 / 306; max-width: 100%;
  object-fit: contain; transition: transform .5s ease;
}
.nl-row:hover .nl-img img { transform: scale(1.03); }

/* ---------- 分页 ---------- */
.nl-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 74px 0 0; flex-wrap: wrap; }
.nl-pager button, .nl-pager span {
  min-width: 44px; height: 44px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(20, 21, 26, .18); background: #fff; color: #14151a;
  font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer;
  transition: border-color .25s, background .25s, color .25s;
}
.nl-pager button:hover { border-color: #14151a; }
.nl-pager .is-active { background: #14151a; border-color: #14151a; color: #fff; cursor: default; }
.nl-pager .is-gap { border: 0; background: none; min-width: 20px; padding: 0; color: rgba(20, 21, 26, .4); cursor: default; }
.nl-pager button[disabled] { color: rgba(20, 21, 26, .28); cursor: not-allowed; border-color: rgba(20, 21, 26, .1); }
.nl-pager .nl-arrow { letter-spacing: .04em; }

/* ---------- 页脚 ---------- */
/* 底部已统一为全站共用组件：css/site-footer.css + js/site-footer.js */

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  .nl-en { font-size: 44px; line-height: 56px; }
  .nl-zh { margin-top: 3px; font-size: 36px; line-height: 46px; }
  .nl-head { gap: 26px; }
}
@media (max-width: 760px) {
  .nl-main { padding: 108px 0 70px; }
  .nl-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 28px; }
  .nl-en { font-size: 32px; line-height: 40px; }
  .nl-zh { margin-top: 2px; font-size: 30px; line-height: 37.5px; }
  .nl-row { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 40px 0; }
  .nl-text h3 { font-size: 18px; line-height: 28.8px; }
  .nl-text p { max-width: none; }
  .nl-more { margin-top: 18px; }
  .nl-img { justify-content: flex-start; }
  .nl-img img { width: 100%; }
  .nl-pager { margin-top: 46px; }
}