/* =========================================================
   新闻动态内页骨架 · news.css（新闻列表页 + 详情页共用：banner / 面包屑 / 页脚内页覆盖，不影响首页）
   沿用全站设计令牌：--primary #1A5CFF / 蓝章 #0B57E8 / 深蓝标题 #0A2A7B
   白卡 24px 圆角 + 蓝色系阴影，与首页 S4 新闻卡片同款
   ========================================================= */

/* ============ 页头横幅（#0755E2 打底 + nb-ribbons.png 1920×220 满铺整显；用 margin-top 让出固定导航 83px，220 高度完整可见） ============ */
.news-banner{
  position:relative;overflow:hidden;
  margin-top:var(--nav-h);
  height:220px;
  background:#0755E2 url(images/nb-ribbons.png) no-repeat center / 100% 100%;
}
.news-banner .container{position:relative;z-index:2;height:100%;display:flex;flex-direction:column-reverse;justify-content:center} /* 中文标题在上、英文眉标在下 */
.news-banner .eyebrow{color:rgba(255,255,255,.85);margin-bottom:0;margin-top:10px} /* 反转后间距改由眉标上边距提供 */
.news-banner .eyebrow i{background:rgba(255,255,255,.85)} /* 横线与英文同色，不做渐变 */
.nb-title{display:flex;align-items:center;gap:14px;font-size:clamp(26px,2.8vw,36px);font-weight:900;letter-spacing:.06em;color:#fff;line-height:1.2}
.nb-title .ns-logo{width:40px;height:auto;flex:none;display:block}

/* ============ 面包屑（banner 与列表之间，浅底深字） ============ */
.crumb-bar{display:flex;align-items:center;gap:8px;padding:18px 0 0;font-size:13.5px;color:#7387AC}
.crumb-bar a{color:#0527A5;transition:color .2s}
.crumb-bar a:hover{color:#0B57E8}
.crumb-bar i{font-style:normal;color:#A7B7D4}

/* ============ 列表主体 ============ */
.news-page{position:relative;background:var(--surface);padding-bottom:32px} /* 底部留白收紧，内容整体上移 */
.news-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start;margin-top:18px;position:relative;z-index:3}

/* —— 左：新闻大卡 —— */
.nm-card{background:#fff;border-radius:24px;padding:28px 30px 32px;box-shadow:0 24px 60px rgba(10,35,90,.16);min-width:0}

/* 工具行：分类胶囊 + 检索框同行（复用全站 .tabs/.tab） */
.nm-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.nm-toolbar .tabs{margin:0}
.nm-search{display:flex;align-items:center;flex:1 1 220px;max-width:300px;min-width:200px;margin-left:auto;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:5px 5px 5px 18px;transition:border-color .25s,box-shadow .25s}
.nm-search:focus-within{border-color:#0B57E8;box-shadow:0 0 0 3px rgba(11,87,232,.12)}
.nm-search input{flex:1;min-width:0;border:0;outline:none;background:none;font-size:14px;color:var(--t1);font-family:inherit}
.nm-search input::placeholder{color:var(--t3)}
.nm-search button{width:34px;height:34px;flex:none;border-radius:50%;background:linear-gradient(120deg,var(--primary-2),var(--primary));color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(26,92,255,.3);transition:transform .25s var(--ease)}.nm-search button svg{width:17px;height:17px}
.nm-search button:hover{transform:scale(1.07)}

/* 新闻行列表（菱形点 + 单行省略 + 蓝色日期，符号语言与首页列表一致） */
.nr-list{display:block}
.nr-list li{display:flex;align-items:center;gap:12px;height:58px;padding:0 8px;border-bottom:1px solid #E5E9F2;border-radius:8px;transition:background .2s}
.nr-list li:hover{background:#F5F9FF}
.tag-sticky{flex:none;font-style:normal;font-size:12.5px;font-weight:800;color:#fff;background:linear-gradient(120deg,#FF7A3D,#F04E23);padding:4px 12px;border-radius:8px}
.nr-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;padding-left:18px;font-size:15.5px;color:#3D5875;transition:color .2s}
.nr-title.dia::before{content:"";position:absolute;left:2px;top:50%;width:7px;height:7px;background:#F0862B;transform:translateY(-50%) rotate(45deg);transition:background .2s}
.nr-list li:hover .nr-title{color:#0B57E8}
.nr-title.dia:hover::before{background:#0B57E8}
.nr-time{flex:none;font-family:var(--font-num);font-size:14.5px;color:#0B57E8}
.nr-list li.row-sticky .nr-title{font-weight:800;color:#16233F}

.nm-empty{padding:56px 0;text-align:center;color:var(--t3);font-size:15px}

/* 分页：总条数 + 方形描边页钮（参考截图样式，整行居中），当前页蓝底反白 */
.nm-pager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:26px}
.pg-total{font-size:14px;color:var(--t2);margin-right:10px}
.pg-total b{font-family:var(--font-num);font-weight:700;color:inherit;font-size:15px;margin:0 2px} /* 数字与"共/条"同色，稍大一号 */
.pg-btn{min-width:36px;height:36px;padding:0 10px;border-radius:8px;border:1px solid #DDE5F0;background:#fff;color:#3D5878;font-family:var(--font-num);font-size:14.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:2px;transition:all .22s var(--ease)}
.pg-btn svg{width:15px;height:15px}
.pg-btn:hover:not(.active):not(:disabled){border-color:rgba(11,87,232,.55);color:#0B57E8;transform:translateY(-2px)}
.pg-btn.active{background:#0B57E8;border-color:#0B57E8;color:#fff;box-shadow:0 8px 18px rgba(11,87,232,.28)}
.pg-btn:disabled{opacity:.4;cursor:not-allowed}
.pg-gap{color:var(--t3);font-family:var(--font-num);letter-spacing:.12em;padding:0 2px}

/* —— 右侧栏（赛事服务直达；不浮动，随页面滚动） —— */
.nm-side{display:flex;flex-direction:column;gap:20px}
.side-card{background:#fff;border:1px solid rgba(227,234,247,.9);border-radius:20px;padding:22px 20px;box-shadow:0 18px 44px rgba(10,45,110,.08)}
.sc-head{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;letter-spacing:.02em;color:#0A2A7B;padding-bottom:13px;margin-bottom:8px;border-bottom:1px dashed var(--line)}
.sc-head img{flex:none;display:block}

/* 赛事服务直达 */
.sv-row{display:flex;align-items:center;gap:11px;padding:11px 2px;font-size:14.5px;color:#22314E;transition:color .2s,transform .25s var(--ease)}
.sv-row+.sv-row{border-top:1px dashed var(--line)}
.sv-row img{flex:none;display:block}
.sv-row em{margin-left:auto;font-style:normal;display:flex;transition:transform .25s var(--ease)}
.sv-row:hover{color:#0B57E8;transform:translateX(3px)}
.sv-row:hover em{transform:translate(2px,-2px)}

/* —— 内页页脚：顶部留白 78→40px，内容整体上移（news.css 仅本页加载，不影响首页页脚） —— */
.site-footer{padding-top:40px}

/* ============ 响应式 ============ */
@media (max-width:995px){
  /* 窄屏下 100% 100% 会把 1920×220 飘带图横向压变形 → 改 cover 等比缩放居中裁切（桌面端不受影响） */
  .news-banner{background-size:cover;background-position:center}
  .nb-title .ns-logo{width:36px}
  .news-layout{grid-template-columns:1fr;gap:18px;margin-top:14px}
  .nm-card{padding:20px 18px 24px}
}
@media (max-width:620px){
  .nb-title{gap:10px}
  .nb-title .ns-logo{width:30px}
  .news-layout{margin-top:12px}
  .nm-toolbar .tabs{flex-wrap:wrap}
  .nm-search{flex:1 1 100%;max-width:none;margin-left:0}
  .nr-list li{height:52px;gap:8px;padding:0 4px}
  .nr-title{font-size:14.5px;padding-left:14px}
  .nr-time{font-size:13px}
  .pg-total{width:100%;margin-right:0;text-align:center}
  .nm-pager{justify-content:center}
  .pg-btn{min-width:34px;height:34px;padding:0 10px;font-size:13.5px}
}