/* ============================================================
   index-ex.css — 首页（index）专属样式
   从 public/template/frontend/index/index.html 的内联 <style> 中抽出，由该模板单独引入。
   包含两块，均以容器类做作用域，避免影响全站同名类（.tab_list / .tab / .card / .item1 / .item_img / .item_right 等）：
     1) .news-center —— 新闻中心三列栏目卡片
     2) .hot-video  —— 热播视频头部 tab 导航 + 右侧视频卡片
   注意：本文件必须在 sytlenew.css / jquery.horizontalmenu.css 之后引入，才能覆盖它们的基础样式。
   约定：布局用 flex + margin（不用 grid / flex gap），等比容器用 padding-top（不用 aspect-ratio）。
   ============================================================ */

/* ============ 新闻中心（片库风格卡片；样式取自改版稿，统一收敛到 .news-center 作用域，避免污染全站同名类）
   —— 布局全部走 flex（不使用 grid）；间距统一用 margin / padding（不使用 flex gap）；封面 16:9 用 padding-top 撑高（不使用 aspect-ratio） */
.news-center {
    --nc-ink: #2c3444;
    --nc-ink-2: #43506a;
    --nc-brand: #df4530;
    --nc-line: #eef1f6;
    --nc-card-shadow: 0 1px 2px rgba(24, 48, 84, .05), 0 10px 24px -16px rgba(24, 48, 84, .22);
    --nc-card-shadow-hover: 0 2px 6px rgba(24, 48, 84, .07), 0 24px 40px -18px rgba(24, 48, 84, .30);
    --nc-ease: cubic-bezier(.2, .7, .3, 1);
}

/* 卡片容器：flex 横向排列 + 自动换行；负外边距抵消最后一张卡片多出来的间距，左右边界仍与版心对齐 */
.news-center .cards {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-right: -20px;
    margin-bottom: -20px;
}

/* 卡片宽度：三列等宽（间距全部由 margin 控制，不用 gap） */
.news-center .cards > .card {
    width: calc(33.3333% - 20px);
    margin-right: 20px;
    margin-bottom: 20px;
}

/* 卡片本体 */
.news-center .card {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--nc-card-shadow);
    transition: transform .3s var(--nc-ease), box-shadow .3s var(--nc-ease);
}

.news-center .card:hover,
.news-center .card:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--nc-card-shadow-hover);
}

/* 封面：padding-top 百分比撑出 16:9 高度（兼容性优于 aspect-ratio），图片绝对定位铺满 */
.news-center .card__cover {
    position: relative;
    height: 0;
    padding-top: 56.25%;
    overflow: hidden;
    background: #eef2f7;
}

.news-center .card__cover img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--nc-ease);
}

.news-center .card:hover .card__cover img,
.news-center .card:focus-within .card__cover img {
    transform: scale(1.055);
}

/* 栏目说明条 */
.news-center .card__cap {
    padding: 11px 16px;
    border-bottom: 1px solid var(--nc-line);
    background: #fafbfd;
    text-align: center;
    font-size: 22.5px;
    font-weight: bold;
    letter-spacing: .4px;
    color: #37415a;
}

/* 新闻列表 */
.news-center .card__list {
    flex: 1;
    margin: 0;
    padding: 5px 16px 14px;
    list-style: none;
}

.news-center .card__list li + li {
    border-top: 1px dashed #edf0f5;
}

.news-center .card__list a {
    display: flex;
    align-items: flex-start;
    padding: 10px 2px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--nc-ink-2);
    text-decoration: none;
    transition: color .18s var(--nc-ease);
}

/* 列表前缀圆点：与文字的水平间距用 margin-right 表达，替代 flex gap */
.news-center .card__list 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(--nc-ease);
}

.news-center .card__list span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15.5px;
}

.news-center .card__list a:hover {
    color: var(--nc-brand);
}

.news-center .card__list a:hover::before {
    background: var(--nc-brand);
}

/*字体加粗：沿用模板原有的 .text-tit-weight 约定 */
.news-center .card__list li.text-tit-weight a {
    font-weight: 600;
    color: #26303f;
}

.news-center .card__list li.text-tit-weight a:hover {
    color: var(--nc-brand);
}

/* 响应式：与改版稿断点一致（列数变化只改宽度，间距写法保持不变） */
@media (max-width: 1024px) {
    .news-center .cards > .card {
        width: calc(50% - 20px);
    }
}

@media (max-width: 680px) {
    .news-center .cards > .card {
        width: calc(100% - 20px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .news-center .card,
    .news-center .card__cover img,
    .news-center .card__list a {
        transition-duration: .01ms !important;
    }
}

/* ============ 热播视频 · 头部 tab 导航（标签形式；样式全部限定在 .hot-video 作用域，公共 .tab_list 不动）
   说明：区块原来的 id="container-2" 与下方「直播频道」重复，已摘掉改用 .hot-video，
   因此原先由 #container-2 提供、这里仍需的宽度/定位在本作用域内补回。
   布局沿用 flex + margin，间距不用 gap；下划线用 ::after + transform，兼容性优先。 */
.hot-video {
    position: relative;
}

/* 补回原本由 #container-2 .tab 提供的宽度，否则会退回 .tab{width:820px} */
.hot-video .tab {
    width: 1200px;
}

/* tab 行高度：新的 tab 比原来（48px）矮，补 12px 底距，保持下方内容位置不变 */
.hot-video .tab_list {
    height: auto;
    padding-bottom: 12px;
}

/* tab 行：右对齐，落在标题横幅颜色较浅的一段上（右边留 200px 避开横幅右端的斜杠装饰） */
.hot-video .ah-tab {
    margin-left: 0;
    padding-left: 0;
    padding-right: 20px;
    text-align: right;
}

/* tab 项：覆盖全站 .tab_list a 的 190px 宽 / 60px 高 / icon2.jpg 斜切背景 */
.hot-video .tab_list a.ah-tab-item {
    position: relative;
    float: none;
    display: inline-block;
    width: auto;
    height: auto;
    line-height: 1.4;
    margin: 0 30px 0 0;
    padding: 6px 2px 10px;
    background: none;
    border-bottom: 0;
    font-size: 18.5px;
    color: #7c8798;
}

.hot-video .tab_list a.ah-tab-item:last-child {
    margin-right: 0;
}

/* 内层 span：抹掉原来的橙色胶囊 */
.hot-video .tab_list .list {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 0;
    line-height: 1.4;
    background: none;
    background-image: none;
    box-shadow: none;
    border-radius: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-align: left;
}

/* 激活态：红色文字 + 24×3 圆角下划线 */
.hot-video .tab_list a.ah-tab-item[data-ah-tab-active="true"] .list {
    color: #df4530;
    font-weight: 600;
    background-image: none;
    box-shadow: none;
}

.hot-video .tab_list a.ah-tab-item::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 3px;
    border-radius: 2px;
    background: #df4530;
    transform: translateX(-50%);
    transition: width .26s cubic-bezier(.2, .7, .3, 1);
}

.hot-video .tab_list a.ah-tab-item[data-ah-tab-active="true"]::after {
    width: 24px;
}

.hot-video .tab_list a.ah-tab-item:hover .list {
    color: #43506a;
    background-image: none;
    box-shadow: none;
}

.hot-video .tab_list a.ah-tab-item[data-ah-tab-active="true"]:hover .list {
    color: #df4530;
}

@media (prefers-reduced-motion: reduce) {
    .hot-video .tab_list a.ah-tab-item::after {
        transition-duration: .01ms !important;
    }
}

/* ============ 热播视频 · 右侧视频卡片 ============================================
   目标：在现有热播视频模块上加「卡片展示效果」，视觉语言与同页已上线的 .news-center
   （新闻中心）完全对齐，整页观感统一。

   【布局方式】
   - 容器 .right 保持原有 float:right / 930px（不动它，避免影响左侧 .left 的浮动关系），
     只追加 display:flex + flex-wrap:wrap + align-items:stretch → 同排卡片自动等高。
   - 两列等宽，列间距 / 行间距均为 14px，全部用 margin 表达（不用 flex gap）。
   - 卡片宽度 calc(50% - 7px)；第二列用 :nth-child(2n) 去掉右外边距，
     使 458×2 + 14 = 930，两列正好铺满 .right，右边界与版心 1300 对齐。
     注意：.item1 是每张卡片内唯一的 .item1，nth-child 数不到它，
     所以列间距必须做在 .right > a 上，不能做在 .item1 上。
   - 【与左侧说明面板上下对齐】这是本段的硬约束，改字号 / 尺寸时必须重新核算：
       左列 .left 自带 margin-top:14px（jquery.horizontalmenu.css），高 396 + padding 40 = 436，
       故左列占 y132 → 568。右列要齐平，需同时满足两条：
         ① .right 补 margin-top:14px          → 上沿同为 132（否则右列比左列高 14px）
         ② 卡片高 = 136                        → 132 + 3×136 + 2×14 = 568，末行下沿与左列齐平
       卡片高 136 = padding 12×2 + 内容 112，内容由缩略图高度决定（199×112，≈16:9）。
       ⚠️ 摘要的 min-height 必须让「标题 + 间距 + 摘要」不超过 112，否则文案会反过来撑高卡片、
          破坏对齐。当前 18×1.5×2 + 7 + 46 = 107 ≤ 112，留 5px 余量。
   - 版心 / 断点：.right 是固定 930px（全站为固定版心站点），故不设媒体查询，
     与模块内 tab 导航（.hot-video .tab{width:1200px}）保持一致。

   【内容结构】结构未改，仍是模板原有的节点，纯靠样式改造：
     .right
       └ <a>                      ← 卡片本体（白底 / 圆角 / 阴影 / 悬停上浮）458×136
           └ .item1 (.clearfix)   ← 改为 flex 行（原为 width:450px + float:left）
               ├ .item_img        ← 缩略图 199×112（≈16:9，原 215×125）
               │   └ img          ← 真实 {$vo.thumb}，object-fit:cover
               └ .item_right      ← 文案区 222px 宽（抹掉原有的 margin-left 避让）
                   ├ .tit         ← 标题，18px/600，最多 2 行截断
                   └ .con         ← 摘要，14px，最多 2 行截断 + min-height 46px

   【字号说明】18px / 14px 是按「贴近本站原有该模块的字号量级」定的
   （原模块标题 20px、摘要 13px），比改版稿的 14px / 12.5px 大一档。
   卡片本体的圆角 / 阴影 / 强调色 / 缓动仍与 .news-center 逐项同值，只有字号放大。

   【交互状态】
   - 卡片悬停 / 键盘聚焦：上浮 4px，阴影加深（与新闻中心同参数）
   - 缩略图悬停：放大 1.055 倍（与新闻中心封面同参数）
   - 标题悬停：转品牌红 #df4530（与新闻中心、本模块 tab 激活色一致）
   - 缩略图悬停叠加深色蒙层 + 白色播放三角，纯 CSS（::before / ::after），不新增 DOM
   - 全部过渡在 prefers-reduced-motion 下降级

   【刻意未迁移的部分】
   - 时长角标：项目没有视频时长字段；
   - 封面压字（栏目名 + 学校名）：那是改版稿的占位图形，这里用真实 {$vo.thumb}；
   - 卡片固定高度：改版稿 .vcard{min-height:112px} 是为「有无描述」两种栏目对齐，
     本模块摘要固定 2 行最小高度已能保证等高，无需再写死高度。
   ============================================================================== */

/* 令牌与 .news-center 的 --nc-* 同值（新闻中心已上线，两处如要改请一并改） */
.hot-video {
    --hv-brand: #df4530;
    --hv-line: #eef1f6;
    --hv-card-shadow: 0 1px 2px rgba(24, 48, 84, .05), 0 10px 24px -16px rgba(24, 48, 84, .22);
    --hv-card-shadow-hover: 0 2px 6px rgba(24, 48, 84, .07), 0 24px 40px -18px rgba(24, 48, 84, .30);
    --hv-ease: cubic-bezier(.2, .7, .3, 1);
}

.hot-video .ah-tab-content .right {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    /* 左侧 .left 有 margin-top:14px（jquery.horizontalmenu.css），这里补同值，
       否则右列比左列高 14px，上沿对不齐 */
    margin-top: 14px;
}

/* 卡片本体 */
.hot-video .ah-tab-content .right > a {
    flex: 0 0 auto;
    display: flex;
    width: calc(50% - 7px);
    margin: 0 14px 14px 0;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 8px;
    background: #fff;
    text-decoration: none;
    box-shadow: var(--hv-card-shadow);
    transition: transform .3s var(--hv-ease), box-shadow .3s var(--hv-ease);
}

.hot-video .ah-tab-content .right > a:nth-child(2n) {
    margin-right: 0;
}

.hot-video .ah-tab-content .right > a:hover,
.hot-video .ah-tab-content .right > a:focus-visible {
    outline: none;
    transform: translateY(-4px);
    box-shadow: var(--hv-card-shadow-hover);
}

/* 内层行：覆盖 jquery.horizontalmenu.css 的 width:450px + float:left + margin-left:14px */
.hot-video .ah-tab-content .right .item1 {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    float: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
}

/* .clearfix 的 ::after 在 flex 行里会变成一个多余子项，关掉 */
.hot-video .ah-tab-content .right .item1::after {
    display: none;
}

/* 缩略图：152×86 → 199×112（≈16:9），配合下方字号一起放大。
   卡片高 = 12×2 padding + 112 = 136，三行 + 行距正好让末行下沿落在 568，
   与左侧 .left 的下沿（132+436=568）齐平 */
.hot-video .ah-tab-content .right .item_img {
    position: relative;
    flex: 0 0 auto;
    float: none;
    width: 199px;
    height: 112px;
    margin-right: 13px;
    border-radius: 6px;
    overflow: hidden;
    background: #eef2f7;
}

.hot-video .ah-tab-content .right .item_img img {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    transition: transform .6s var(--hv-ease);
}

.hot-video .ah-tab-content .right > a:hover .item_img img,
.hot-video .ah-tab-content .right > a:focus-visible .item_img img {
    transform: scale(1.055);
}

/* 悬停播放按钮：::before 出深色蒙层，::after 出白色三角，不新增 DOM */
.hot-video .ah-tab-content .right .item_img::before,
.hot-video .ah-tab-content .right .item_img::after {
    content: "";
    position: absolute;
    opacity: 0;
    transition: opacity .25s var(--hv-ease);
}

.hot-video .ah-tab-content .right .item_img::before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(8, 18, 32, .34);
}

.hot-video .ah-tab-content .right .item_img::after {
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    margin: -8px 0 0 -6px;
    border-style: solid;
    border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent #fff;
}

.hot-video .ah-tab-content .right > a:hover .item_img::before,
.hot-video .ah-tab-content .right > a:hover .item_img::after,
.hot-video .ah-tab-content .right > a:focus-visible .item_img::before,
.hot-video .ah-tab-content .right > a:focus-visible .item_img::after {
    opacity: 1;
}

/* 文案区：覆盖 .ah-tab-content .right .item_right(228px) 与 .tab_con .item_right(269px/200px) 的左外边距 */
.hot-video .ah-tab-content .right .item_right {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;
}

/* 标题：覆盖 .tab_con .tit(20px/bold/line-height:28px/margin-bottom:10px)
   字号 14px → 18px（贴近本站原有的 20px 标题量级） */
.hot-video .ah-tab-content .right .item_right .tit {
    margin-bottom: 0;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    color: #26303f;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .18s var(--hv-ease);
}

/* 摘要：覆盖 .tab_con .con(13px)；字号 12.5px → 14px
   固定最小高度保证有无摘要的卡片等高，且不超过缩略图高度（否则会把卡片撑高、破坏与左列的等高对齐） */
.hot-video .ah-tab-content .right .item_right .con {
    margin-top: 7px;
    min-height: 46px;
    font-size: 15px;
    line-height: 1.65;
    color: #8b95a6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hot-video .ah-tab-content .right > a:hover .item_right .tit,
.hot-video .ah-tab-content .right > a:focus-visible .item_right .tit {
    color: var(--hv-brand);
}

@media (prefers-reduced-motion: reduce) {
    .hot-video .ah-tab-content .right > a,
    .hot-video .ah-tab-content .right .item_img img,
    .hot-video .ah-tab-content .right .item_img::before,
    .hot-video .ah-tab-content .right .item_img::after,
    .hot-video .ah-tab-content .right .item_right .tit {
        transition-duration: .01ms !important;
    }
}