/* ============================================================================
   index-home.css — 首页整体视觉改版（分阶段落地，仅被 index 模板引入）
   第 1 批：页面底色 + 导航栏
   第 2 批：探校先锋官 / 教育大咖谈 的文字链接列表

   引入位置：public/template/frontend/index/index.html 的 <head>，
             必须排在 sytlenew.css / index-ex.css **以及模板内联 <style>** 之后。
   为什么规则都带 body.main 前缀：
     - 首页的橙色导航底色 `#nav{background:#fda844}` 写在 index.html 的内联 <style> 里，
       纯 `#nav` 选择器（1,0,0）在源码顺序上覆盖不掉；`body.main #nav`（1,1,1）可以。
     - 顺带把作用域限定在「首页 body.main」，即使本文件被别的模板误引入也不会外溢。
   ============================================================================ */

/* ---- 1. 页面整体底色：白 → 效果图灰 ---- */
body.main {
    background-color: #f4f6f7;
}

/* 首页顶部那张全屏背景图（<img data-url="images/求学择校网.jpg" style="z-index:-4">）
   目前因懒加载条件不满足（ele.top 不大于 0）而始终没有加载；显式关掉，
   避免它哪天被加载后盖住上面的底色。它本身是绝对定位、不参与布局，关掉不影响任何排版。 */
body.main > img[data-url="images/求学择校网.jpg"] {
    display: none;
}

/* ---- 2. 导航栏底色：橙 #fda844 → 白 ---- */
body.main #nav {
    background: #ffffff;
}

/* ---- 3. 导航文字：白 → 黑（font-size / line-height / padding 原样不动） ---- */
body.main #nav .wp-menu .menu-item a.menu-link {
    color: #000000;
}

/* 旧的 hover 规则是 color:#efeae8（接近白色），白底上会「消失」，必须一并覆盖 */
body.main #nav .wp-menu .menu-item.hover a.menu-link,
body.main #nav .wp-menu .menu-item a.menu-link:hover,
body.main #nav .wp-menu .menu-item a.hover {
    color: #bf2229;
}

/* ---- 4. 高亮「当前所在页面」的导航项 ---- */
/* 4.1 兜底：模板 myheader2.html 里已有 mhover（硬编码在「首页」），无 JS 时按它高亮 */
body.main #nav .wp-menu .menu-item.mhover a.menu-link,
/* 4.2 首选：由页面脚本按当前 URL 匹配后追加 is-current */
body.main #nav .wp-menu .menu-item.is-current a.menu-link {
    position: relative;
    color: #bf2229;
    font-weight: 600;
}

/* 高亮下划线：左右与文字同宽（文字左右内边距是 28px），贴在导航条下沿 */
body.main #nav .wp-menu .menu-item.mhover a.menu-link::after,
body.main #nav .wp-menu .menu-item.is-current a.menu-link::after {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 8px;
    height: 2px;
    background: #bf2229;
}

/* ============================================================================
   第 2 批：探校先锋官 / 教育大咖谈 的文字链接列表
   目标：① 条目之间加一条浅色虚线分隔（分隔线口径与新闻中心卡片列表一致）
        ② 精简条数（左栏 14 → 8，右栏 8 → 5）
        ③ 加大条目上下留白，整体更透气

   结构（模板原有，未改）：
     左栏  .m-100.txxfg > .body.f > .item-txxfg > .item-t > ul > li
     右栏  .m-100.txxfg > .body.f > .content-jydkt … > ul.jydkt_item > li.jydkt_list

   ⚠️ 优先级：左栏旧规则写在 sytlenew.css:2336，选择器是
      `.m-100.txxfg > div.body.f > .item-txxfg > div.item-t > ul > li`（0,6,2），
      它设了 line-height:32px / width:420px / margin-top:4px / margin-left:6px。
      所以下面的选择器必须写成等长（0,7,2）才能覆盖，不能简化成 `.item-t ul li`。
   ⚠️ 条数用 CSS 的 nth-child 截断，不动模板循环、不动控制器 limit
      （该站模板注释里有下标引用死代码，改 limit 有报错风险）。
   ⚠️ 两条列表的字号沿用现状（左 18px / 右 17px，都是各自的 !important），本次不改字号。
   ============================================================================ */

/* ---- 左栏：探校先锋官 ---- */
/* 保留原规则的 width:420px：本栏容器宽 468px，多出的 48px 正是与右边「教育大咖谈」
   栏之间的安全间距（两栏容器之间只隔 12px）。若把它放开成 auto，长标题会一路顶到
   右栏文字上、看起来像连成一行。（试过用 padding-right 收窄，反而把整栏撑宽了。） */
body.main .m-100.txxfg > .body.f > .item-txxfg > .item-t > ul > li {
    margin: 0;                /* 旧值 margin-top:4px / margin-left:6px */
    padding: 14px 0;          /* 条目之间的留白 */
    line-height: 1.5;         /* 旧值 32px */
    border-top: 1px dashed #edf0f5;
}

body.main .m-100.txxfg > .body.f > .item-txxfg > .item-t > ul > li:first-child {
    border-top: 0;
}

/* 单行截断：把省略号做在 a 上，避免长标题把行高撑成两行 */
body.main .m-100.txxfg > .body.f > .item-txxfg > .item-t > ul > li a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---- 右栏：教育大咖谈 ---- */
/* ⚠️ 必须保留原规则的 width:400px：本列表带 white-space:nowrap，若把宽度放开成 auto，
   最小内容宽度会按「最长的那条标题」计算（实测撑到 619px），
   于是整个右栏被推到 x1459、超出 1300 版心，同时把左栏挤窄。 */
body.main .m-100.txxfg > .body.f > .content-jydkt .jydkt_item > li.jydkt_list {
    margin: 0;                /* 旧值 margin-top:3px / margin-left:6px */
    padding: 14px 0;
    line-height: 1.5;         /* 旧值 32px */
    border-top: 1px dashed #edf0f5;
}

body.main .m-100.txxfg > .body.f > .content-jydkt .jydkt_item > li.jydkt_list:first-child {
    border-top: 0;
}

body.main .m-100.txxfg > .body.f > .content-jydkt .jydkt_item > li.jydkt_list a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 精简展示条数：只留前 5 条（原 8 条） */
body.main .m-100.txxfg > .body.f > .content-jydkt .jydkt_item > li.jydkt_list:nth-child(n+6) {
    display: none;
}

/* ---- 第 3 批：焦点图右侧「头条热搜」列表（.post-21.yydt） ----
   处理口径与上面两条列表一致：浅色虚线分隔 + 精简条数 + 加大留白。
   ⚠️ 保留原规则的 width:315px —— 同属「li 带 white-space:nowrap」的情形，
      放开成 auto 有把 .post-21 这个 flex 子项撑宽、挤压左侧焦点图的风险
      （容器 .post-21 实测 x962-1300，宽 338）。
   ⚠️ 可用高度有限：父级 .flexContent 是固定 height:407px，列表容器约 392px。
      新条目高 = 27px 行高 + 14×2 内边距 = 55px，加分隔线后 7 条约 392px，正好放满。 */
body.main .flexContent .post-21 li.item_list {
    margin: 0 0 0 6px;        /* 旧值 margin:4px 0 0 6px（上边距改由内边距承担） */
    padding: 14px 0;
    line-height: 1.5;         /* 旧值 32px */
    border-top: 1px dashed #edf0f5;
}

body.main .flexContent .post-21 li.item_list:first-child {
    border-top: 0;
}

body.main .flexContent .post-21 li.item_list a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 精简展示条数：只留前 7 条（原 11 条） */
body.main .flexContent .post-21 li.item_list:nth-child(n+8) {
    display: none;
}

/* ============================================================================
   第 4 批：首页顶部「宣传片」模块（原 .video-container）卡片化
   目标：① 裸排列 → 白底横版卡片（左图右文，与「新闻中心」卡片同一套语言）
        ② 不使用播放标识：原「白色圆底播放图」先改成透明底 + 红三角，用户看后觉得不好看，最终整块去掉
        ③ 标题/来源字号放大、上下留白加大（按用户要求）

   结构（模板已同步调整）：
     .m-100 > .video-cards > a.video-card
        > .video-card__thumb > .video-card__ratio > img
        > .video-card__body  > .video-card__title + .video-card__meta
        > .video-card__no（空元素，序号由 CSS 计数器输出 01/02/03，不动模板循环）

   ⚠️ 图片仍是 data-url 懒加载，不写 src；等比容器用 padding-top（不用 aspect-ratio）
   ⚠️ 布局用 flex + margin（不用 grid / flex gap）
   ⚠️ 卡片是 <a>，必须 box-sizing:border-box（content-box 会让内边距加到宽度之外，一行放不下三张）
   ⚠️ 旧的内联样式（.video-container / .video-item / .video-thumbnail / .video-img / .title-icon）
      已随结构改造从 index.html 的内联 <style> 里删除
   ============================================================================ */

/* 卡片行：20px 间距靠 margin，容器负右外边距吃掉最后一列 */
body.main .video-cards {
    display: flex;
    flex-wrap: wrap;
    margin-top: 12px;
    margin-right: -20px;
    counter-reset: vcard;
}

body.main .video-cards > .video-card {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;      /* ⚠️ 必须：<a> 默认是 content-box，不加会把 14px 内边距算在宽度之外，一行放不下三张 */
    width: calc(33.3333% - 20px);
    margin-right: 20px;
    margin-bottom: 20px;
    padding: 14px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(30, 40, 60, .04), 0 10px 22px -16px rgba(30, 40, 60, .30);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    counter-increment: vcard;
    transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s cubic-bezier(.2, .7, .3, 1);
}

body.main .video-cards > .video-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 6px rgba(30, 40, 60, .06), 0 22px 34px -18px rgba(30, 40, 60, .34);
}

/* ---- 左侧封面：132px 宽、16:10 ---- */
body.main .video-card__thumb {
    position: relative;
    flex: 0 0 auto;
    width: 132px;
    border-radius: 6px;
    overflow: hidden;
}

body.main .video-card__ratio {
    display: block;
    position: relative;
    height: 0;
    padding-top: 60%;          /* 132 × 0.6 ≈ 79px，与旧图（120×80）同量级 */
    background: #e9edf2;
}

body.main .video-card__ratio img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

body.main .video-card:hover .video-card__ratio img {
    transform: scale(1.06);
}

/* ---- 播放键：已按用户要求整块去掉（先是把白底改成透明底 + 红三角，试后觉得不好看），
        封面区域不再叠任何标识，悬停时靠封面微放大 + 卡片上浮表达可点 ---- */

/* ---- 右侧文字：字号放大、上下留白加大 ---- */
body.main .video-card__body {
    min-width: 0;
    margin-left: 16px;
    padding-right: 30px;
}

body.main .video-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.65;
    color: #1a1a1a;
    transition: color .25s cubic-bezier(.2, .7, .3, 1);
}

body.main .video-card:hover .video-card__title {
    color: #bf2229;
}

body.main .video-card__meta {
    display: block;
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.6;
    color: #999999;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---- 右下角序号水印 01 / 02 / 03 ---- */
body.main .video-card__no {
    position: absolute;
    right: 10px;
    bottom: 0;
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    color: #f1f3f6;
    transition: color .3s cubic-bezier(.2, .7, .3, 1);
}

body.main .video-card__no::before {
    content: counter(vcard, decimal-leading-zero);
}

body.main .video-card:hover .video-card__no {
    color: #fbeaeb;
}

/* ---- 窄屏兜底：列数只改宽度，间距写法不变 ---- */
@media (max-width: 1024px) {
    body.main .video-cards > .video-card {
        width: calc(50% - 20px);
    }
}

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