/* 分类频道页（vod/type）专属。
   参考站分类页：Hero → 一块快速筛选面板（灰色维度名＋金字连结）→ 各区块。本页不做筛选（那是 vod/show 的职责），
   「类型」面板里的连结都连到对应子分类的筛选页。 */

.list-crumb {
    max-width: calc(var(--content-max) + var(--page-pad) * 2);
    margin: 0 auto;
    padding: 14px var(--page-pad) 0;
}
.list-crumb .art-breadcrumb { margin-bottom: 0; }
/* 面包屑后面紧接 Hero：面包屑压进轮播左上角，不再自成一条（使用者 2026-11-09 要求，做法沿用 tp49 2026-11-04 定案）。
   要守的条件（tp43／tp49 来回改过几轮才定下）：
   ①轮播位置跟首页完全相同（面包屑容器高 0，不把轮播往下挤）；
   ②面包屑在轮播左上角、跟内容左缘对齐，字的对比靠轮播顶端那道黑色 alpha 渐层（main.css .hero::before，分类页拉长）；
   ③渐层整片 pointer-events:none，只有面包屑连结吃点击（底下是整张卡的详情连结与拖曳换片，§17.36）；
   ④宽度跟 .hero-container 同一个盒子（2026-11-09 轮播改满视窗宽后＝整页宽，字用 --hero-gutter 对齐版心），不用 100vw（有捲轴时会溢出，tp49 手机实测 8px）；
   ⑤渐层只有一道（轮播自己的），直版 Coverflow 也一样；中间海报卡在渐层之上，不会被盖暗。
   轮播从页顶开始、垫在透明顶栏底下（main.css --hero-top），面包屑 top＝顶栏高；两边要一起改。
   没有 Hero（该分类没有 level=1 影片）时 :has(+ .hero-container) 不成立，面包屑照旧自成一条 */
.page-content > .list-crumb:has(+ .hero-container) {
    max-width: none;
    position: relative;
    z-index: 5;
    height: 0;
    padding: 0;
    pointer-events: none;
}
.page-content > .list-crumb:has(+ .hero-container) .art-breadcrumb {
    position: absolute;
    top: var(--topbar-h);   /* 轮播垫到透明顶栏底下（main.css --hero-top），面包屑放在顶栏下缘 */
    left: 0;
    right: 0;
    padding: 12px var(--hero-gutter) 28px;
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.page-content > .list-crumb:has(+ .hero-container) .art-breadcrumb a { color: rgba(255, 255, 255, 0.82); pointer-events: auto; }
.page-content > .list-crumb:has(+ .hero-container) .art-breadcrumb a:hover { color: var(--active); }
.page-content > .list-crumb:has(+ .hero-container) .bc-sep { color: rgba(255, 255, 255, 0.45); }
.page-content > .list-crumb:has(+ .hero-container) .bc-current { color: var(--accent); }
/* 2026-11-09 顶栏改透明叠在轮播上：轮播顶端本来就有一道渐层（main.css .hero::before），面包屑再垫一道会在顶栏下缘断出一条接缝。
   改成面包屑不垫底，由轮播那道渐层拉长到盖过面包屑 */
.page-content > .list-crumb + .hero-container .hero::before { height: calc(var(--hero-top) + 96px); }
@media (max-width: 767px) {
    .page-content > .list-crumb:has(+ .hero-container) .art-breadcrumb { padding: 8px var(--hero-gutter) 22px; font-size: 12px; }
}

.type-subnav { display: none; }

/* ---------- 类型面板（参考站「分类」一栏：#333 面板、左侧灰色维度名、金字连结 14px、选中橙字） ---------- */
.hero-genre-panel.hero-genre-panel--single {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 20px;
    max-width: var(--content-max);
    margin: 0 auto var(--section-gap);
    width: calc(100% - var(--page-pad) * 2);
    padding: var(--panel-pad);
    border-radius: var(--radius);
    background: var(--bg-panel);
    position: relative;
    z-index: 20;
}
.hero-genre-panel--single .hgp-label {
    flex: 0 0 auto;
    font-size: 14px;
    color: var(--text-dim);
}
.hero-genre-panel--single .hgp-head,
.hero-genre-panel--single .hgp-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 24px;
    color: var(--text-1);
    white-space: nowrap;
    transition: color 0.2s;
}
.hero-genre-panel--single .hgp-head .mac-icon { display: none; }
.hero-genre-panel--single .hgp-head.is-active,
.hero-genre-panel--single .hgp-head:hover,
.hero-genre-panel--single .hgp-tag:hover { color: var(--active); }

/* 手机：改成单行横向滑动（参考站手机子分类也是一排） */
@media (max-width: 767px) {
    .hero-genre-panel.hero-genre-panel--single {
        flex-wrap: nowrap;
        gap: 16px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .hero-genre-panel.hero-genre-panel--single::-webkit-scrollbar { display: none; }
}

/* 容器与留白交给 .section（main.css 单一来源）；栅格沿用基底 6/4/3 */
.list-container { width: 100%; padding: 0; }