/**
* 快讯列表卡片化
*
* ── 为什么只用 CSS，不覆盖模板 ────────────────────────────────────
* archive-newsflashes.php 有 197 行，里面除了列表还包含页面骨架、发布弹层、
* 分页组件和 Vue 挂载点；而且列表有**两套渲染路径**：
* ① 服务端首屏 HTML（v-if="list == ''"）
* ② Vue 拉到数据后的版本（v-else v-for）
* 两套结构必须同步改，否则首屏与加载后不一致。
*
* 而本次要去掉的【顶】【踩】【快讯分类】【分享到】恰好全部在 .new-meta
* 这一个完整节点内，两套路径的类名一致 —— 一条 display:none 即可同时命中。
* 卡片化也纯属视觉调整。综合下来 CSS 方案零维护成本、零 Vue 破坏风险，
* 优于再覆盖一个模板文件。
*
* 副作用：投票/分享的 DOM 仍会输出（只是不可见），vote() / openWin()
* 的事件绑定还在但用户点不到。属于可接受的取舍。
*
* ── 作用域 ────────────────────────────────────────────────────────
* 一律限定在 .news-list-box 内。该类名只出现在三处，都是列表场景：
* archive-newsflashes.php 快讯归档页 /news
* TempParts/Newsflashes/category.php 快讯分类页
* Search/newsflashes.php 快讯搜索结果
*
* 而 .news-item / .news-item-date 等类名还被用户页（User/newsflashes.php）
* 和侧栏小工具复用 —— 不加作用域会样式外溢。
*/
/* =========================================================================
* 一、移除【顶】【踩】【快讯分类】【分享到】
* ====================================================================== */
.news-list-box .new-meta {
display: none !important;
}
/* =========================================================================
* 二、日期分组标题
*
* 父主题把日期徽章绝对定位在左上角（left:20px; top:20px; 43×56），
* 并给 ul 加了 margin-left:80px 让位。改成静态的分组标题横在列表上方，
* 卡片就能吃满 884px 的内容区宽度。
* ====================================================================== */
.news-list-box .news-item {
position: static;
margin-bottom: 8px;
}
.news-list-box .news-item-date {
position: static;
width: auto;
height: auto;
/* 父主题通过内联 CSS 给它加了 1px 主色描边（Modules/Templates/Main.php）。
胶囊的描边画在里层的 p 上，外层这个框要去掉 */
border: 0 !important;
padding: 0;
margin: 6px 0 18px;
/* 居中 */
display: flex;
justify-content: center;
}
/*
* 日期胶囊本体
*
* 参考效果：「8月15日」主色底白字 ｜「星期六」白底主色字，整体圆角胶囊、居中。
*
* 数据由 inc/news.php 的 b2_get_newsflashes_item_data 过滤器改写为：
* 8月15日星期六
* 父主题原始结构是 8月15（无星期），见下方兜底规则。
*
* ⚠️ 父主题为了做竖排徽章，给这个 p 设了 flex-direction:column、width:41px，
* span 还带 display:block / text-align:center / line-height:27px。
* 改横排必须把这几样一起覆盖 —— 只改 display:flex 不够，
* flex-direction 仍继承 column，两段会上下堆叠。
*/
.news-list-box .news-item-date p {
display: inline-flex;
flex-direction: row !important;
align-items: stretch;
gap: 0 !important;
width: auto !important;
height: auto !important;
margin: 0;
border: 1px solid var(--b2c-primary, #ff3a55);
border-radius: 999px;
overflow: hidden;
font-size: 13px;
font-weight: 600;
}
/*
* ⚠️ 下面两段的选择器刻意都挂在 `p` 下面，保持与兜底规则同等特异性。
*
* 踩过的坑：曾用 `.news-list-box .news-item-date p span` 做通用兜底，
* 再用 `.news-list-box .b2c-nd-day` 定制。前者是 3 类 + 2 标签，
* 后者只有 2 类 —— 即便双方都带 !important，也是特异性高的前者胜出，
* 结果「星期X」那一段直接掉出胶囊外面。
*/
.news-list-box .news-item-date p .b2c-nd-day,
.news-list-box .news-item-date p .b2c-nd-week {
display: block;
width: auto;
/* 父主题给这两个 span 定死了高度（26px / 28px，竖排徽章的残留），
不放开的话胶囊两段会一高一低差 2px */
height: auto;
padding: 8px 15px;
line-height: 1.3;
font-size: inherit;
text-align: center;
white-space: nowrap;
border-radius: 0;
}
/* 左段：主色底、白字 */
.news-list-box .news-item-date p .b2c-nd-day {
background: var(--b2c-primary, #ff3a55);
color: #fff;
}
/* 右段：白底、主色字 */
.news-list-box .news-item-date p .b2c-nd-week {
background: #fff;
color: var(--b2c-primary, #ff3a55);
}
/*
* 兜底：过滤器未生效时（父主题改了数据结构、或本模块被停用），
* 日期仍是原始的 8月15 两段无 class 结构。
* 此时渲染成单色胶囊，不至于错位或露白。
*/
.news-list-box .news-item-date p > span:not([class]) {
display: block;
width: auto;
height: auto;
padding: 8px 3px;
line-height: 1.3;
font-size: inherit;
text-align: center;
background: var(--b2c-primary, #ff3a55);
color: #fff;
}
.news-list-box .news-item-date p > span:not([class]):first-child { padding-left: 15px; }
.news-list-box .news-item-date p > span:not([class]):last-child { padding-right: 15px; }
/* 收回让位给徽章的缩进 */
.news-list-box .news-item ul {
margin-left: 0 !important;
padding: 0;
}
/* =========================================================================
* 三、卡片
* ====================================================================== */
/*
* ⚠️ 关键一步：把外层容器改成透明。
*
* 父主题的 .newsflashes-list 本身是纯白面板（#fff + 圆角），
* 白色卡片叠在白色面板上，边界完全看不出来 —— 卡片其实一直在，
* 只是"隐形"。页面底色是 .site 的 #F7F9FA 浅灰，
* 容器透明后浅灰透上来，卡片才浮得起来。
*
* 封面横幅（.newsflahses-cover）自带背景图，不依赖这个白底，所以安全。
*/
.newsflashes-list {
background: transparent !important;
}
/*
* 序号：用 CSS 计数器，不改模板。
*
* 好处是服务端首屏 HTML 和 Vue 渲染后的两套结构都自动带上编号，
* 无需分别维护（这正是本模块坚持纯 CSS 的价值）。
*
* 计数器挂在 ul 上 → 每个日期分组从 01 重新开始，
* 符合"当天第 N 条"的阅读预期；若想全页连续，把 counter-reset 移到
* .news-list-box 上即可。
*/
.news-list-box .news-item ul {
counter-reset: b2c-news;
}
.news-list-box .news-item li {
background: var(--b2c-card-bg, #fff);
border-radius: var(--b2c-radius, 6px);
padding: 18px 20px;
margin: 0 0 12px;
transition: box-shadow .22s ease, transform .22s ease;
/* 让编号与内容左右并排 */
display: flex;
gap: 18px;
align-items: flex-start;
}
.news-list-box .news-item li::before {
counter-increment: b2c-news;
/* decimal-leading-zero → 01、02……两位数补零 */
content: counter(b2c-news, decimal-leading-zero);
flex: none;
min-width: 46px;
font-family: "Arial Black", Impact, "Helvetica Neue", sans-serif;
font-size: 30px;
font-weight: 800;
line-height: 1.05;
letter-spacing: -.02em;
color: var(--b2c-primary, #ff3a55);
}
.news-list-box .news-item li > .news-item-content {
flex: 1;
min-width: 0;
}
.news-list-box .news-item li:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, .07);
transform: translateY(-2px);
}
.news-list-box .news-item li:last-child {
margin-bottom: 0;
}
/* 标题 —— 时间/作者行已隐藏，这里补足与摘要之间的呼吸感 */
.news-list-box .news-item li h2 {
margin: 0 0 11px;
font-size: 16px;
line-height: 1.55;
font-weight: 600;
}
.news-list-box .news-item li h2 a {
color: var(--b2c-text, #1a1a1a);
}
.news-list-box .news-item li:hover h2 a {
color: var(--b2c-primary, #ff3a55);
}
/*
* 时间 + 作者：整行隐藏。
*
* 日期已由分组胶囊统一给出，逐条再标时间和作者对读者的决策价值很低，
* 且夹在标题与摘要之间会打断阅读节奏。
*
* 与列表其它信息一样只是隐藏、不改模板 —— 详情页的时间与作者照常显示。
*/
.news-list-box .news-item-header {
display: none !important;
}
/*
* 摘要
*
* ⚠️ 父主题对 .b2-hover 用的是 max-height: 66px + overflow:hidden 的硬裁，
* 不是真正的 line-clamp（它虽然写了 -webkit-line-clamp:3，但 display 是
* flow-root，clamp 不生效）。66px 是按它自己的行高凑出的整 3 行。
*
* 所以这里行高必须用 px 并让 max-height 正好是它的整数倍，否则会露出半行 ——
* 实测把行高改成 1.8（=24.3px）后 3 行需 72.9px，超出 66px 的裁剪线，
* 卡片底部就出现被拦腰切断的文字。
*
* 24px × 3 = 72px，正好齐。改行高时记得同步改 max-height。
*/
.news-list-box .news-item li .b2-hover {
margin: 0;
font-size: 13.5px;
line-height: 24px;
max-height: 72px;
color: var(--b2c-text-muted, #666);
}
/* 原文连接：与正文拉开，做成一个弱按钮 */
.news-list-box .item-from,
.news-list-box .news-item li .b2-hover > a {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 6px;
font-size: 12.5px;
color: var(--b2c-primary, #ff3a55);
white-space: nowrap;
}
/* 正文与配图并排 */
.news-list-box .news-item-h {
display: flex;
gap: 16px;
align-items: flex-start;
}
.news-list-box .news-item-h > div:first-child {
flex: 1;
min-width: 0;
}
.news-list-box .news-item-img {
width: 140px;
height: 92px;
flex: none;
object-fit: cover;
border-radius: var(--b2c-radius, 6px);
}
/* b2_get_img 输出的是 ，宽度约束要落在包裹层上 */
.news-list-box .news-item-h picture {
flex: none;
width: 140px;
line-height: 0;
}
.news-list-box .news-item-h picture .news-item-img {
width: 100%;
}
/* =========================================================================
* 四、窄屏
* ====================================================================== */
@media (max-width: 768px) {
.news-list-box .news-item li {
padding: 15px;
margin-bottom: 10px;
gap: 12px;
}
/* 编号缩小，把横向空间还给正文 */
.news-list-box .news-item li::before {
min-width: 32px;
font-size: 22px;
}
.news-list-box .news-item li h2 {
font-size: 15px;
}
/* 配图改到正文下方通栏，横排在窄屏会把文字挤成窄条 */
.news-list-box .news-item-h {
flex-direction: column;
gap: 12px;
}
.news-list-box .news-item-h picture,
.news-list-box .news-item-img {
width: 100%;
height: auto;
max-height: 180px;
}
.news-list-box .news-item-header {
gap: 10px;
margin-bottom: 8px;
}
}