/* 体育资讯板块样式 —— 单一来源（SSR 与前端 widget 共用）
 *
 * 使用方:
 *   1) 服务端 SSR: PublicController 在 index/news 页 head 注入
 *      <link rel="stylesheet" href="/public/sports_news.css" id="sports-news-style">
 *   2) 前端 widget: sports_widget.js 的 ensureStyle() 在没有该 link 时按需注入同一个 link。
 *
 * 目的: 服务端首屏渲染与 XHR 二次渲染使用同一份 CSS, 两屏样式完全一致, 刷新不再闪两种样式。
 *
 * 注意: 模式类 .mode-home/.mode-news 的优先级 (0,3,0) 高于媒体查询里的 .sports-news .grid (0,2,0),
 *       所以媒体查询里必须同时列出 .sports-news.mode-home .grid, 否则首页小屏仍是 3 列。
 */

.sports-news{margin:36px 0;background:#eef1f8;border-radius:20px;padding:34px 28px 26px}
.sports-news .hd{text-align:center;margin-bottom:26px}
.sports-news .hd h2{margin:0 0 10px;font-size:26px;letter-spacing:1px;color:#101828}
.sports-news .hd h2::before{content:'';display:inline-block;width:26px;height:26px;margin-right:10px;vertical-align:-4px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101828' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0V6'/%3E%3Cpath d='M18 14h-8'/%3E%3Cpath d='M15 18h-5'/%3E%3Cpath d='M10 6h8v4h-8V6Z'/%3E%3C/svg%3E")}
.sports-news .hd .sub{font-size:14px;color:#667085;letter-spacing:2px}
.sports-news .hd .cnt{display:inline-block;margin-top:6px;font-size:12px;color:#98a2b3}
/* 默认 5 列(新闻页 5x4 = 20) */
.sports-news .grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
/* 首页 3 列(3x3 = 9) */
.sports-news.mode-home .grid{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width: 980px){.sports-news .grid,.sports-news.mode-home .grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width: 520px){.sports-news .grid,.sports-news.mode-home .grid{grid-template-columns:1fr;}.sports-news{padding:24px 14px 18px;border-radius:14px}}
.sports-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 10px rgba(16,24,40,.06);display:flex;flex-direction:column}
/* IE/兼容模式不支持 aspect-ratio, 用 padding-top 保底占位 */
.sports-card .img{background:#e4e7ec;overflow:hidden;position:relative;height:0;padding-top:56.25%}
.sports-card .img img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block}
.sports-card .bd{padding:14px 16px 18px}
.sports-card .meta{font-size:13px;color:#98a2b3;margin-bottom:8px}
.sports-card .t{font-size:16px;line-height:1.45;margin:0 0 8px;font-weight:700;color:#1d2939}
.sports-card .t a{color:inherit;text-decoration:none}
.sports-card .t a:hover{color:#175cd3}
.sports-card .ex{font-size:14px;line-height:1.65;color:#667085;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.6em}
.sports-news .pager{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:20px}
.sports-news .pager button{border:1px solid rgba(16,24,40,.14);background:#fff;color:#344054;border-radius:10px;padding:7px 16px;cursor:pointer}
.sports-news .pager button:hover{border-color:#175cd3;color:#175cd3}
.sports-news .pager button[disabled]{opacity:.45;cursor:not-allowed}
.sports-news .pager span{color:#667085;font-size:13px}
/* “查看更多资讯”入口(SSR 与 widget 都渲染, 保证翻页回来后仍在) */
.sports-news .more{margin-top:16px;text-align:center}
.sports-news .more a{display:inline-block;padding:8px 14px;border:1px solid #d0d7de;border-radius:10px;color:#344054;text-decoration:none;background:#fff}
.sports-news .more a:hover{border-color:#175cd3;color:#175cd3}