/* 分类频道页（vod/type）专属。
   「类型」一行参考分类页样式：不画面板，一排 pill（40 高、#0c1220、圆角 24、16px .85 白，
   「全部」左侧带筛选图示），hover 青字。本页不做筛选（那是 vod/show 的职责），按钮都连到对应子分类的筛选页。 */

.list-crumb {
    max-width: calc(var(--content-max) + var(--page-pad) * 2);
    margin: 0 auto;
    padding: 15px var(--page-pad) 15px;
}
.list-crumb .art-breadcrumb { margin-bottom: 0; }

/* 后面紧接 Hero 时，面包屑叠在 banner 左上角（使用者 2026-10-15 定案）：原本面包屑自成一条 50px，
   把整块轮播（banner、海报、文字）往下推，跟首页紧贴顶栏的 Hero 对不齐。
   面包屑在 DOM 里的位置不变（SEO／语意不受影响），只是视觉上浮到 banner 上；
   整条设 pointer-events:none，只有连结本身可点，Hero 的拖曳换片不会被它挡住。
   没有 Hero（该分类没有 level=1 影片）时 :has 不成立，面包屑照旧占一条 */
.page-content { position: relative; }
.page-content > .list-crumb:has(+ .hero-container) {
    position: absolute;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    z-index: 5;
    max-width: none;
    padding: 18px var(--page-pad) 0;
    pointer-events: none;
}
.page-content > .list-crumb:has(+ .hero-container) .art-breadcrumb {
    display: inline-block;
    pointer-events: auto;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

/* 手机／平板：扇形海报在上方，会撞到面包屑——海报区往下让 40，banner 跟着加高 40，底图仍从顶栏开始 */
@media (max-width: 1023px) {
    .list-crumb:has(+ .hero-container) + .hero-container .hero-fan { margin-top: 40px; }
    .list-crumb:has(+ .hero-container) + .hero-container .hero-backdrop { height: 480px; }
}
@media (max-width: 767px) {
    .list-crumb:has(+ .hero-container) + .hero-container .hero-backdrop { height: 400px; }
}

.type-subnav { display: none; }

/* ---------- 类型 pill 列 ---------- */
.hero-genre-panel.hero-genre-panel--single {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-left: max(var(--page-pad), calc((100% - var(--content-max)) / 2));
    margin-right: max(var(--page-pad), calc((100% - var(--content-max)) / 2));
    margin-bottom: var(--section-gap);
    position: relative;
    z-index: 20;
}
.hero-genre-panel--single .hgp-head,
.hero-genre-panel--single .hgp-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    height: 40px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--bg-card);
    font-size: 16px;
    color: var(--text-1);
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s;
}
.hero-genre-panel--single .hgp-head .mac-icon { font-size: 18px; color: var(--accent); }
.hero-genre-panel--single .hgp-head:hover,
.hero-genre-panel--single .hgp-tag:hover { color: var(--accent); }

/* 手机：改成单行横向滑动（参考站手机也是横滑） */
@media (max-width: 767px) {
    .hero-genre-panel.hero-genre-panel--single {
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .hero-genre-panel.hero-genre-panel--single::-webkit-scrollbar { display: none; }
    .hero-genre-panel--single .hgp-head,
    .hero-genre-panel--single .hgp-tag { height: 32px; padding: 0 14px; font-size: 14px; }
}

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