/* ============================================================================
   subpage.css —— 子栏目页（原 .mc 右栏 float 栅格）flex 改版样式
   作用域：.spx（挂在 <div class="wrapper main1 spx"> 上；header/footer 在它之外，不受影响）

   设计令牌与首页卡片语言逐项对齐（index-ex.css 的 .news-center / .hot-video）：
     白卡 #fff + 8px 圆角 + 柔阴影；hover 上浮 4px；封面 hover 放大 1.055；
     品牌红 #df4530；虚分隔 #edf0f5；列表圆点 #c9d3e2；页面底 #f4f6f7

   为什么所有规则都带 .spx 前缀：
     栏目模板的 <link> 在 </head> 之前，而模板内联 <style> 在那之后（浏览器会挂回 head 末尾），
     同权重时内联胜出。加 .spx 后权重升到 (0,2,x)/(0,3,x)，稳压内联与 sytlenew.css。
     （与 index-home.css 用 body.main #nav 提权是同一个道理。）

   引入位置：public/template/frontend/index/*.html 的 <head>，必须排在
             sytlenew.css / swiper / jquery.horizontalmenu / index-home.css 之后。
   硬约束：布局全 flex（不用 grid）；间距全 margin/padding（不用 flex gap）；
           等比容器用 height:0 + padding-top（不用 aspect-ratio）；卡片 <a> 必须 border-box。
   ============================================================================ */

.spx {
    --ink: #2c3444;
    --ink2: #43506a;
    --ink3: #8b95a6;
    --brand: #df4530;
    --line: #eef1f6;
    --dash: #edf0f5;
    --shadow: 0 1px 2px rgba(24, 48, 84, .05), 0 10px 24px -16px rgba(24, 48, 84, .22);
    --shadow-h: 0 2px 6px rgba(24, 48, 84, .07), 0 24px 40px -18px rgba(24, 48, 84, .30);
    --ease: cubic-bezier(.2, .7, .3, 1);
    --r: 8px;
}

.spx * { box-sizing: border-box; }

/* 覆盖全站 a{color:#3b3b3b; transition:all .4s} */
.spx a {
    color: var(--ink2);
    text-decoration: none;
    transition: color .2s var(--ease);
}

/* ============================================================================
   1. 栏位层：把老的 .mod / .ml / .mc float 栅格就地改成 flex
      保留原类名（.ml / .mc 不删），即使哪页漏了覆盖也只是退回老样子，不会崩
   ============================================================================ */
.spx.main1 .inner { padding: 20px 0 36px; }

.spx.main1 .mod {
    display: flex;
    align-items: flex-start;
}
/* clearfix 的 ::after 在 flex 容器里会变成多余子项，关掉 */
.spx.main1 .mod::after { display: none; }

.spx.main1 .ml {
    float: none;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
}

/* ⚠️ min-width:0 必须写：右栏里有 white-space:nowrap 的列表，
   不写的话 flex 项的最小内容宽度会把 320px 的侧栏撑宽 */
.spx.main1 .mc {
    float: none;
    width: auto;
    flex: 0 0 320px;
    min-width: 0;
    margin-left: 24px;
}

/* ============================================================================
   2. 子栏目切换条 .mtop → 白卡 + 胶囊 chips（方案 A 效果图样式）
      通栏 1200 宽，放在两栏之上，与左右两栏的起始位置对齐。
      结构仍是模板原有的 .mtop > .c > .mtop-item(.active) > a，只是换皮。
   ============================================================================ */
.spx .mtop {
    background: #fff;
    width: 100%;
    height: auto;
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: var(--r);
    box-shadow: var(--shadow);
}

.spx .mtop .c {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}

.spx .mtop .mtop-item {
    min-width: 0;
    padding: 0;
    margin: 4px 10px 4px 0;
}

.spx .mtop .mtop-item:last-child { margin-right: 0; }

.spx .mtop .mtop-item a {
    display: block;
    padding: 8px 18px;
    border-radius: 6px;
    background: #f4f7fb;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ink2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .2s var(--ease), color .2s var(--ease);
}

.spx .mtop .mtop-item a:hover {
    background: #fdecea;
    color: var(--brand);
}

/* 激活态：品牌红实底白字 */
.spx .mtop .mtop-item.active a,
.spx .mtop .mtop-item.active a:hover {
    background: var(--brand);
    color: #fff;
    font-weight: 600;
}

/* ============================================================================
   3. 右栏：模块白卡（面板卡头：红竖条 + 标题 + 更多）
   ============================================================================ */
.spx-panel {
    padding: 16px;
    margin-bottom: 20px;
    background: #fff;
    border-radius: var(--r);
    box-shadow: var(--shadow);
}
.spx-panel:last-child { margin-bottom: 0; }

.spx-panel__hd {
    display: flex;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.spx-panel__hd::before {
    content: "";
    flex: 0 0 auto;
    width: 3px;
    height: 16px;
    margin-right: 9px;
    border-radius: 2px;
    background: var(--brand);
}
.spx-panel__hd h3 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    color: #26303f;
}
.spx-more { flex: 0 0 auto; font-size: 13px; color: var(--ink3); }
.spx-more:hover { color: var(--brand); }
.spx-panel__bd { padding-top: 4px; }

/* 图文小条目（教育头条 / 教育话合物） */
.spx-mini { margin: 0; padding: 0; list-style: none; }
.spx-mini li + li { border-top: 1px dashed var(--dash); }
.spx-mini a { display: flex; align-items: flex-start; padding: 12px 0; }
.spx-mini__fig {
    display: block;
    position: relative;
    flex: 0 0 auto;
    width: 96px;
    height: 0;
    /* ⚠️ 必须写固定 px：padding 的百分比按「包含块宽度」解析，不是元素自身宽度，
       这里包含块是整行（≈288px），写 56.25% 会撑成 162px 高。96 × 0.5625 = 54 */
    padding-top: 54px;
    border-radius: 5px;
    overflow: hidden;
    background: #eef2f7;
}
.spx-mini__fig img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}
.spx-mini a:hover .spx-mini__fig img { transform: scale(1.055); }
.spx-mini__tit {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 12px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.spx-mini a:hover .spx-mini__tit { color: var(--brand); }

/* 纯文字形态：某一条没有缩略图时，模板会给它加 .spx-mi--text，这里改成「圆点 + 文字」，
   与 .spx-dots 一致。这样「教育头条」既能整组做图文，也能整组或混排纯文字。 */
.spx-mini li.spx-mi--text a::before {
    content: "";
    flex: 0 0 auto;
    width: 4px;
    height: 4px;
    margin-top: 8px;
    margin-right: 9px;
    border-radius: 50%;
    background: #c9d3e2;
    transition: background .18s var(--ease);
}
.spx-mini li.spx-mi--text a:hover::before { background: var(--brand); }
.spx-mini li.spx-mi--text .spx-mini__tit { margin-left: 0; }

/* 图文组与后面的纯文字组之间补一条虚线分隔（各组的 li+li 只在组内生效） */
.spx-panel__bd .spx-mini + .spx-dots { border-top: 1px dashed var(--dash); }

/* 圆点文字列表（首页 .card__list 同款：4px 圆点 + 虚线分隔 + 单行省略） */
.spx-dots { margin: 0; padding: 0; list-style: none; }
.spx-dots li + li { border-top: 1px dashed var(--dash); }
.spx-dots a {
    display: flex;
    align-items: flex-start;
    padding: 11px 0;
    font-size: 14.5px;
    line-height: 1.5;
}
.spx-dots a::before {
    content: "";
    flex: 0 0 auto;
    width: 4px;
    height: 4px;
    margin-top: 8px;
    margin-right: 9px;
    border-radius: 50%;
    background: #c9d3e2;
    transition: background .18s var(--ease);
}
.spx-dots a:hover::before { background: var(--brand); }
.spx-dots span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.spx-dots a:hover { color: var(--brand); }

/* 直播频道：竖向 16:9 封面卡 */
.spx-lives { display: flex; flex-direction: column; }
.spx-live { display: block; margin-bottom: 14px; }
.spx-live:last-child { margin-bottom: 0; }

/* 最多展示 3 条：用 nth-child 截断，不动模板循环、不动控制器 limit
   （与 index-home.css 里截断 txxfg 列表条数的口径一致） */
.spx .spx-lives .spx-live:nth-child(n+4) { display: none; }
.spx-live__fig {
    display: block; /* ⚠️ 必须是块级：行内 span 的垂直 padding 不撑开行盒，图会整个塌掉 */
    position: relative;
    height: 0;
    padding-top: 56.25%;
    border-radius: 6px;
    overflow: hidden;
    background: #eef2f7;
}
.spx-live__fig img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}
.spx-live:hover .spx-live__fig img { transform: scale(1.055); }
.spx-live__tit {
    display: block;
    margin-top: 9px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ink2);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.spx-live:hover .spx-live__tit { color: var(--brand); }

/* 高考百宝箱：把旧片段 public@baibaoxiang 的 <ul><li class="text-item"> 重绘成 3 列图标格
   （不改 baibaoxiang.html —— 未迁移的页面仍旧观感） */
.spx .spx-bbx > ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 -8px 0 0;
    padding: 0;
    list-style: none;
}
.spx .spx-bbx > ul > li.text-item {
    width: calc(33.3333% - 8px);
    margin: 0 8px 8px 0;
}
.spx .spx-bbx > ul > li.text-item > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 4px 10px;
    border-radius: 6px;
    background: #f7f9fc;
    transition: background .2s var(--ease), transform .3s var(--ease);
}
.spx .spx-bbx > ul > li.text-item > a:hover {
    background: #fdecea;
    /* 这里刻意不做 translateY：小方块上浮同样会触发「边缘抽搐」（见第 4 节 .spx-row 的说明），
       它的命中区就是 <a> 自身，去掉位移后 hover 反馈由底色变化承担 */
}
.spx .spx-bbx > ul > li.text-item img {
    display: block;
    width: 79px;
    height: 62px;
}
.spx .spx-bbx > ul > li.text-item span {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink2);
}
.spx .spx-bbx > ul > li.text-item > a:hover span { color: var(--brand); }

/* 广告位：保留原素材，只套一层卡片外框
   ⚠️ 外层 .spx-ad 是「静态命中区」，只负责行距；白卡外观与 hover 位移都在内层 .spx-ad__card 上。
      这样 hover 判定区不随位移移动 —— 否则鼠标贴住下边缘时会「上浮 → 移出 → 落回 → 再上浮」反复触发（边缘抽搐）。
      外层因此也不能写 overflow:hidden（会把内层的位移裁掉），圆角改由内层与其 img 各带一份。 */
.spx-ad {
    margin-bottom: 20px;
}
.spx-ad:last-child { margin-bottom: 0; }
.spx-ad__card {
    display: block;
    border-radius: var(--r);
    background: #fff;
    box-shadow: var(--shadow);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.spx-ad:hover .spx-ad__card { transform: translateY(-4px); box-shadow: var(--shadow-h); }
.spx-ad__card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r);
}

/* ============================================================================
   4. 左主栏：横版文章卡（图左文右）
   ⚠️ 分两层：外层 .spx-row 是「静态命中区」，只负责行距与序号计数器，**不参与位移**；
      白卡外观与 hover 上浮都在内层 .spx-row__card 上。
      为什么不直接把 hover 位移做在卡片上：translateY 会让元素从鼠标下移开 ——
      鼠标停在卡片下边缘时，上浮 → 移出 → :hover 结束 → 落回 → 又进入 → 反复触发，
      表现为「鼠标贴边时卡片抽搐」。判定区不动的写法从根上消除这个循环。
      （不要用「加透明命中区扩展」那种绕法：它会把可点击范围扩到卡片外面的一圈空隙上。）
   ============================================================================ */
.spx-rows {
    display: flex;
    flex-direction: column;
    counter-reset: srow; /* 序号由 CSS 计数器输出，不动模板循环 */
}
.spx-row {
    margin-bottom: 16px;
    counter-increment: srow;
}
.spx-row:last-child { margin-bottom: 0; }
.spx-row__card {
    display: flex;
    align-items: stretch;
    padding: 14px;
    background: #fff;
    border-radius: var(--r);
    box-shadow: var(--shadow);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.spx-row:hover .spx-row__card {
    transform: translateY(-4px);
    box-shadow: var(--shadow-h);
}

.spx-row__fig {
    display: block;
    position: relative;
    flex: 0 0 258px;
    height: 0;
    padding-top: 145px;   /* 258 × 0.5625 ≈ 145（定宽，不能用百分比） */
    border-radius: 6px;
    overflow: hidden;
    background: #eef2f7;
}
.spx-row__fig img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}
.spx-row:hover .spx-row__fig img { transform: scale(1.055); }

.spx-row__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 18px;
}
.spx-row__tit {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.55;
    min-height: 3.1em;    /* 固定 2 行，保证每张卡等高 */
    color: #26303f;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.spx-row:hover .spx-row__tit { color: var(--brand); }
.spx-row__desc {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.7;
    min-height: 3.4em;    /* 摘要为空也占住 2 行高度 */
    color: var(--ink3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.spx-row__meta {
    display: flex;
    align-items: center;
    margin: auto 0 0;      /* 底部对齐 → 卡片等高时 meta 齐平 */
    padding-top: 14px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ink3);
}

.spx-tag {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 4px;
    background: #fdf0ee;
    font-size: 12px;
    color: var(--brand);
}
.spx-stamp { flex: 0 0 auto; margin-left: 10px; color: #b3bcc9; }
.spx-idx {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 15px;
    font-weight: 700;
    font-style: italic;
    color: #d7dee8;
}
.spx-idx::before { content: counter(srow, decimal-leading-zero); }

/* ============================================================================
   5. 分页（保留原 <div class="pag"><php>echo $page;</php></div> 容器，只重绘外观）
   ============================================================================ */
.spx .pag { display: flex; flex-wrap: wrap; align-items: center; margin-top: 20px; }
.spx .pag ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}
.spx .pag ul li { display: block; float: none; margin: 0 8px 8px 0; }
.spx .pag ul li a,
.spx .pag ul li span {
    display: block;
    float: none;
    margin: 0;
    padding: 8px 15px;
    border: 0;
    border-radius: 6px;
    background: #fff;
    box-shadow: var(--shadow);
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink2);
}
.spx .pag ul li a:hover { color: var(--brand); }
.spx .pag ul li.active span { background: var(--brand); color: #fff; }
.spx .pag ul li.disabled span { background: #eef1f5; color: #c3cbd6; box-shadow: none; }

/* ============================================================================
   6. 动效降级
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    .spx .spx-row__card,
    .spx .spx-row__fig img,
    .spx .spx-mini__fig img,
    .spx .spx-live__fig img,
    .spx .spx-ad__card,
    .spx .spx-bbx > ul > li.text-item > a {
        transition-duration: .01ms !important;
    }
}
