/*!
 * MXone 前端视图补丁 —— 媒体库列表页 / 搜索页
 *
 * 只作用于 #view-list（媒体库列表）与 #view-search（搜索）两个视图，
 * 不碰模板、也不碰首页/详情/播放。放这里的都是**模板在 SPA 化之后没覆盖对**的地方：
 *   P0   列表海报墙被模板的 nth-child 规则悄悄截断（功能性缺陷，不只是样式）；
 *   P1-1 筛选条的「分组」设计失效（模板那套依赖 .library 祖先 + library-box-first）；
 *   P1-3 筛选标签行会横向撑破整页；
 *   P2   搜索结果卡片剧情行截断。
 *
 * 所有规则都用 ID 选择器限定作用域，特异性高于模板的类选择器，因此**不需要 !important**，
 * 也不会误伤同样用到这些类名的其它视图。
 */

/* ============================================================
 * P0  可见性保险 —— 把「渲染几条就显示几条」交还给 JS
 * ------------------------------------------------------------
 * 模板用一串 nth-child 规则按断点隐藏多余海报（style.css:4521-4525，以及
 * 4539 / 4575 / 4650 / 4702 / 5085 / 6026 各断点），本意是「首页一屏就摆那么多」。
 * 但列表页 / 收藏页是**分页**的：JS 每页请求 30 条，模板却只放行前 12~16 条，
 * 于是「第 1 页看到的条数」小于「每页请求的条数」——点「下一页」会直接跳过中间那十几条，
 * 被跳过的内容永远点不到（「我的收藏 60 条」实际只能看到 12 条）。
 *
 * 这里用 ID 选择器把可见性交还给 JS：JS 渲染多少条就显示多少条。
 * 模板那串规则里特异性最高的是 `.module-lines-list .module-item:nth-child(...)`
 * = (0,3,0)（:nth-child 算一个类级），而 ID 选择器是 (1,1,0)，仍然稳压它，
 * 所以不需要 !important。列表页与「继续观看/热门排行/我的收藏」共用的 #more-grid 一起覆盖。
 * ============================================================ */
#l-results .module-item,
#more-grid .module-item {
  display: inline-block;
}

/* 说明：列表页每页 30 条（app.list.js 的 LIST_PER）是挑过的数字 ——
 * 每行卡片数为宽屏 6、≤1239 与 ≤899 为 5、≤559 为 3（style.css:4642/4698/5060/6007），
 * 30 同时是 6 / 5 / 3 的整数倍，任何断点最后一排都是满排、不会出现半排。
 * 所以这里不再按屏幕调 LIST_PER，改了反而破坏整除关系。 */

/* ============================================================
 * P1-1  筛选条分组
 * ------------------------------------------------------------
 * 模板筛选条（vod/screen.html）的样式挂在两处前提上：
 *   1. 外层有 .library 祖先 —— `.library .library-box:last-child`（末组居中）才生效；
 *   2. 组标签用 .library-box-first —— `.library-box-first .library-item`（放大加粗）才生效。
 * 但 `.library-box-first .library-item` 会命中它下面**所有** .library-item（style.css:3232），
 * 照搬成「每组一个 library-box-first」会把普通选项也一起放大加粗，明显不对。
 * 因此 app.list.js 改输出：
 *   <div class="library">                        ← 补回 .library 祖先（只为末组居中）
 *     <div class="library-box scroll-box">
 *       <div class="scroll-content">
 *         <span class="library-label">类型</span>   ← 真正的组标签
 *         <div class="library-list"> …选项… </div>
 * 组标签、选中下划线、组间分隔线三件事在下面用 #l-filter 作用域重做。
 * ============================================================ */

/* 组标签：比普通选项更大更粗更深，一眼能分出「类型 / 地区 / 年份 / 排序」。
 * 固定宽度让各组标签左对齐、选项起点整齐；line-height 对齐 .library-item 的 35px。 */
#l-filter .library-label {
  flex: 0 0 auto;
  width: 3.6em;
  font-size: 15px;
  font-weight: 700;
  color: rgba(0, 0, 0, .87);
  line-height: 35px;
  white-space: nowrap;
}

/* 选项之间留缝：模板靠 HTML 里的空白符制造间隙，而 JS 是字符串拼接
 * （`</a><a>` 之间没有空白），inline-block 的 .library-item 会贴在一起；
 * 这里显式给 gap，并在桌面端允许换行（见下方 P1-3）。 */
#l-filter .library-box .library-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 选中项：模板默认是「桃色底胶囊」，这里改成更明确的「红字 + 红色下划线」
 * （就是模板 .library-box-first 选中态的做法，见 style.css:3238-3253），
 * 分组里哪一项被选中一眼可见。 */
#l-filter .library-item.selected {
  background: 0 0;
  color: #ff2a14;
  font-weight: 700;
  position: relative;
}

#l-filter .library-item.selected::after {
  content: '';
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 4px;
  height: 3px;
  background: #ff2a14;
  border-radius: 50px;
}

/* 组与组之间的分隔线：模板 .library-box::after 画的是 1px 顶边线，
 * 但颜色被改成了很淡的 #f3f5f7（style.css:3255），几乎看不见。
 * 这里调回基础灰，让「类型 / 地区 / 年份 / 排序 / 统计」一组一组分得清。 */
#l-filter .library-box::after {
  background: #eaedf1;
}

/* 上面两条都写死了浅色值，而它们的选择器比主题的深色皮肤规则更具体
 * （#l-filter 一上就把权重抬到 ID 级），深色皮肤下盖不掉：
 *   .library-label  rgba(0,0,0,.87) 压 #16161a → 对比度 1.14，「类型 / 地区 / 年份 / 排序」
 *                  四个组名整个看不见（实测，390 与 1440 都是）；
 *   .library-box::after  #eaedf1 的 1px 分隔线在深色页面上是一条刺眼的亮线。
 * 按主题深色皮肤自己的写法补一套：文字用 hsla(0,0%,100%,.87)（同文件 .library-stat
 * 用的是 .6），分隔线用主题的 #32323c（mxhtmlblack.css:96）。 */
html:not(.theme-white) #l-filter .library-label {
  color: hsla(0, 0%, 100%, .87);
}
html:not(.theme-white) #l-filter .library-box::after {
  background: #32323c;
}

/* ============================================================
 * P1-3  筛选标签行横向溢出
 * ------------------------------------------------------------
 * 模板 .library-box .scroll-content{display:flex}（style.css:3259）+
 * .library-item{white-space:nowrap}（3281），而 flex item 默认 min-width:auto
 * 不允许收缩到 min-content 以下；.scroll-box 在桌面端又没有 overflow 规则
 * （只有 ≤899 / ≤559 各给了一条，见 5116 / 6047），类型标签一多、名字一长
 * 就会顶破 .content，整页出现横向滚动条。
 * 上面已经让 .library-list 变成可换行的 flex；这里再让承载「组名 + 选项」的
 * .scroll-content 也能换行，避免组名和选项条挤在同一行时互相顶。
 * （.library-list 是 flex item 且原本 display:inline-block，只给外层 wrap 不够，
 *  必须让它自己也 flex-wrap，否则内部仍然溢出。）
 * ============================================================ */
#l-filter .library-box .scroll-content {
  flex-wrap: wrap;
}

/* ============================================================
 * P2  搜索结果卡片信息层级
 * ------------------------------------------------------------
 * 卡片由 app.js 的 MX.searchItem 生成（不归本文件管），这里只补「剧情」一行：
 *   模板 `.module-search-item .video-info-items:nth-child(3) .video-info-item`
 *   被一条共享规则强制 white-space:nowrap + ellipsis（style.css:630），
 *   剧情只剩一行十几个字，太挤；改成最多 2 行、超出省略。
 *   同时该行的 max-width 仍受 `.video-info-items{max-width:60%}`（4219）限制，
 *   两行也放不下几个字，放宽到 100%。
 * 其余行距（.video-info-items 的 line-height:1.7）保持模板原样，不动。
 * ============================================================ */
#s-results .module-search-item .video-info-items:nth-child(3) {
  max-width: 100%;
}

#s-results .module-search-item .video-info-items:nth-child(3) .video-info-item {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  flex: 1;
  min-width: 0;
  line-height: 1.6;
}

/* ============================================================
 * 搜索结果标题的命中区（P2-2）
 * ------------------------------------------------------------
 * 标题 <a> 是 inline，只有文字本身那么大（实测 35×17），而它所在的 H3 有 214×22，
 * 标题右边那一大片空白点了没反应 —— 而标题正是搜索结果最主要的点击目标之一。
 * 把 <a> 改成块级撑满 H3，同时把主题挂在 H3 上的单行省略（style.css:629
 * text-overflow/nowrap/overflow 三件套）搬到 <a> 自己身上，长标题仍然单行省略。
 * ============================================================ */
#s-results .module-search-item .video-info-header h3 > a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
 * P1-4  移动端筛选条：分组内改成横向滑动（wrap → nowrap + 横滑）
 * ------------------------------------------------------------
 * 上面 P1-3 让选项换行，桌面端没问题（1440 下「类型」20 项正好一行 35px），
 * 但 ≤899px 一换行就失控：390 下「类型」20 项铺成 156px、「年份」8 项 118px，
 * 整条筛选栏 408px —— 一个 844px 高的手机首屏，光筛选就吃掉半屏，得先滑过
 * 四个分组才看到第一张海报。
 * 移动端改回单行横滑：每组一行，整条 408px → 约 180px。首页的地区筛选
 * （app.home.css 的 .mx-group-regions）本来就是这么做的，两处行为也统一了。
 * 组名 .library-label 是 .scroll-content 的兄弟、不参与横滑，始终留在左边。
 * ============================================================ */
@media (max-width: 899px) {
  #l-filter .library-box .scroll-content {
    flex-wrap: nowrap;
  }

  #l-filter .library-box .library-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    min-width: 0;
    padding-right: 10px;
  }

  #l-filter .library-box .library-list::-webkit-scrollbar {
    display: none;
  }

  /* 横滑行里选项不能再被压缩，否则「用户上传」这种长名字会被挤成竖排 */
  #l-filter .library-item {
    flex: 0 0 auto;
  }
}

/* ============================================================
 * P1-5  移动端分页：把「当前页」放回来
 * ------------------------------------------------------------
 * 主题在 ≤559px 有一条 `.display { display: none }`（style.css:5602，与 .phone /
 * .shortcuts-fixed 那组显隐工具类放在一起），本意是隐藏某些装饰元素。
 * 可 MacCMS 自己的分页模板（paging.html）恰恰给每个页码挂了 class="display" ——
 * 在那个语境里它是「这是页码」的语义标记，撞上这条工具类就整排消失：
 * 手机上翻到第几页完全看不出来，只剩「首页 / 上一页 / 下一页 / 尾页」。
 *
 * 全部页码放回来会挤成两行（7 个页码 × min-width 35px + 四个按钮 > 360px 可用宽），
 * 主题当初把它们藏掉多半就是为了避免这个；所以只放「当前页」这一个，
 * 一行放得下，翻页时至少知道自己在第几页。
 * 用 ID + 三个类限定，特异性 (1,3,0) 高于主题的 .display (0,1,0)，不需要 !important。
 * ============================================================ */
@media (max-width: 559px) {
  #page .page-number.page-current.display {
    display: inline-block;
  }
}