/**
 * 视频列表卡片样式。
 *
 * 来源：原 template/elec_2023_led/portal/list_video.htm 里的第二段内联 <style>
 *       （4050 字符 / 24 条规则），原样抽出。
 *
 * 这段样式控制视频卡片的 3 列网格、图片缩放、hover 遮罩与底部「查看更多」按钮。
 * 迁移时漏了抽出它（同一批的 index.htm / header.htm / forumdisplay_list.htm
 * 都抽成了 home-index.css / header-block.css / forum-list.css），
 * 结果 /video/ 与 /video/novastar/ 的卡片退化成无样式的竖排图文堆叠。
 *
 * 2026-10-30 重做卡片外观。原因不是样式写错，是**数据本身没图**：
 * 视频文章正文只有 <video> 附件，既没有特色图也没有正文图，也没有 poster，
 * 于是原来的 220px 固定高度封面区整块空白，卡片看上去就剩一条白字条浮在灰底上，
 * 完全看不出是视频。所以这一版做了四件事：
 *   1. 封面区从固定 220px 改成 16:9（`aspect-ratio`），宽度变化时比例不变；
 *   2. 没图时给深蓝渐变的占位底 —— 空白也要看起来是"设计过的封面"，而不是漏图；
 *   3. 播放键从「悬停才淡入」改成**常驻**，用 CSS 画（不再依赖 ico2.png），
 *      图标边缘清晰、不糊；再加一个"视频"角标，静置状态也能一眼认出是视频；
 *   4. 网格从 float 33.33% 改成 grid（列数仍和原来一样是 **3 列**，不是 4 列）。
 *      视频清单是在后台正文里持续往里加的，条目数会一直变，
 *      按 4 列排只在这正好 4 条时才凑巧整齐，加一条就又是 3+2。
 *      一行 3 个是长线布局，卡片也够大（1200px 容器下单张约 386px）。
 *
 * 与原内联样式其余**有意**差异：
 *   - 卡片标题选择器由 `.item .txt h1` 改为 `.item .txt .name h2`（标题标签从 h1 降为 h2）。
 *     多带一层 .name 是为了和下面那条「英文副标题」规则拉开优先级。
 *   - 原 `.item .img:before` 用 url(../style/ico2.png) 画播放图标，现改为 CSS 三角形。
 *     ico2.png 文件保留未删（别处可能引用），只是本文件不再依赖它。
 *   - `.txt` 去掉了 `height:44px` + `box-sizing:unset` 这套写死高度，改成自适应；
 *     卡片用 flex 纵向排列，标题 1 行和 2 行的卡片底边仍然对齐。
 *
 * 另：原内联样式里 `.more` 写了两遍（第二遍是后来叠的补丁，覆盖了第一遍的全部
 * 属性）。两遍都保留，计算结果与原站一致。
 *
 * @package leddxs
 */

/* --------------------------------------------------------------------------
   页面容器：视频页的浅灰底 + 上下留白。
   class 名是 wrap-mpn —— 已按字节核对过，模板里也是 wrap-mpn（不是 mpn1/mpn2）。
   这个类在其它样式文件里没有定义，全靠这一段。
   -------------------------------------------------------------------------- */
.wrap-mpn {
    background: #f4f6f9;
    padding: 64px 0 72px;
}

/* 2026-10-16 统一：footer 上边距清零规则已移除，恢复 footer.css 的原站设计
   （margin-top 60px + 2px 分隔线），全站 footer 表现一致。 */


/* --------------------------------------------------------------------------
   卡片网格
   -------------------------------------------------------------------------- */
.list[data-v-5709d85e] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 20px;
    overflow: visible;
    margin: 0;
}

.item[data-v-5709d85e] {
    display: flex;
    flex-direction: column;
    width: auto;
    padding: 0;
    float: none;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 0;
    background: #fff;
    box-shadow: 0 2px 10px rgba(3, 41, 116, .06);
    text-decoration: none;
    transition: transform .35s ease, box-shadow .35s ease;
}

.item:hover[data-v-5709d85e] {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(3, 41, 116, .16);
    text-decoration: none;
}

/* 封面区：16:9。没图时（.is-empty）用深蓝渐变兜底，
   并在上面压一层极淡的斜向高光，避免大块纯色显得像加载失败。 */
.item .img[data-v-5709d85e] {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    background: #0e2a5c;
}

.item .img.is-empty[data-v-5709d85e] {
    background:
        radial-gradient(120% 90% at 78% 12%, rgba(59, 130, 246, .38) 0%, rgba(59, 130, 246, 0) 58%),
        linear-gradient(140deg, #12336b 0%, #0e2a5c 46%, #081a3d 100%);
}

/* 空封面上的装饰：两条斜向的细亮线，模拟屏幕扫描感，纯装饰、不占位。 */
.item .img.is-empty[data-v-5709d85e]::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .07) 42%, rgba(255, 255, 255, .07) 44%, transparent 44%),
        linear-gradient(105deg, transparent 60%, rgba(255, 255, 255, .05) 60%, rgba(255, 255, 255, .05) 61.5%, transparent 61.5%);
    pointer-events: none;
    opacity: 1;
}

.item .img img[data-v-5709d85e] {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform .6s ease;
}

.item:hover img[data-v-5709d85e] {
    transform: scale(1.08);
}

/* 播放键：常驻（原来只在 hover 时淡入，静置完全看不到）。
   白底圆 + 蓝色三角，落在深封面和实拍图上都能看清。 */
.item .play[data-v-5709d85e] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 54px;
    height: 54px;
    margin: auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    transition: transform .3s ease, background .3s ease;
    pointer-events: none;
    z-index: 3;
}

.item .play[data-v-5709d85e]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    margin: -10px 0 0 -6px;
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent #12336b;
}

.item:hover .play[data-v-5709d85e] {
    background: #fff;
    transform: scale(1.1);
}

/* 「视频」角标：静置状态下的语义提示，比只靠播放键更明确。 */
.item .tag[data-v-5709d85e] {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 4;
    height: 24px;
    line-height: 24px;
    padding: 0 10px;
    border-radius: 12px;
    font-size: 12px;
    color: #fff;
    background: rgba(3, 41, 116, .66);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    pointer-events: none;
}

/* 标题区：去掉原来写死的 44px 高度，改自适应；flex:1 让同排卡片底边对齐。 */
.item .txt[data-v-5709d85e] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 16px 18px 18px;
    border-radius: 0 0 12px 12px;
    box-sizing: border-box;
}

.item .txt .name[data-v-5709d85e] {
    display: block;
    width: 100%;
    vertical-align: middle;
}

/* 卡片标题。原值 18px/22px，这里收小到 17px/1.55：
   行高放开后两行标题不会挤，字号又比按钮文案明显大一级。 */
.item .txt .name h2[data-v-5709d85e] {
    margin: 0;
    color: #1c1c1c;
    font-size: 17px;
    line-height: 1.55;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 英文副标题。
   原卡片模板里并没有这个元素（卡片只输出一个中文标题），
   属于原站遗留的备用规则。保留原样 —— 现在它不会命中任何元素：
   标题在 .name 里，被上面那条更具体的选择器接管；
   万一以后卡片补上副标题，把副标题放在 .name 之外即可直接生效。 */
.item .txt h2[data-v-5709d85e] {
    color: #b2b2b2;
    margin-bottom: 10px;
    opacity: .6;
    font-size: 18px;
    line-height: 18px;
    font-family: "Gilroy-Bold"
}

/* 查看更多（原内联样式里的第二遍 .more，覆盖上面第一遍的全部属性）
   text-decoration 加 !important：全站有 a:hover{text-decoration:underline}。 */
.more[data-v-5709d85e] {
    display: block;
    color: #FFFFFF !important;
    font-size: 14px;
    text-align: center;
    border-radius: 25px;
    height: 50px;
    line-height: 50px;
    width: 160px;
    cursor: pointer;
    background: #202ba6;
    margin: 36px auto 0;
    text-decoration: none !important;
    transition: background .3s ease;
}

.more:hover[data-v-5709d85e] {
    background: #032974;
    text-decoration: none !important;
}

/* 900px 以下 3 列太挤，退回 2 列 */
@media (max-width: 900px) {
    .list[data-v-5709d85e] { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

@media (max-width: 800px) {
    .wrap-mpn { padding: 20px 0 50px 0 !important }
    .about-wrap[data-v-454e09d1] { margin: 20px 0 }
    .cit-tit[data-v-454e09d1] { margin: 0 4% 20px 4% !important }
    /* 列数已在上面的 900px 断点收成 2 列，这里只把间距和字号收紧 */
    .list[data-v-5709d85e] { gap: 12px }
    .item .play[data-v-5709d85e] { width: 42px; height: 42px }
    .item .play[data-v-5709d85e]::before { margin: -8px 0 0 -5px; border-width: 8px 0 8px 12px }
    .item .txt[data-v-5709d85e] { padding: 12px 12px 14px }
    .item .txt .name h2[data-v-5709d85e] { font-size: 14px; line-height: 1.5 }
    .more[data-v-5709d85e] { margin-top: 24px }
}

@media (max-width: 480px) {
    .list[data-v-5709d85e] { grid-template-columns: 1fr }
}