/* 分类频道页（vod/type）专属。
   「类型」一行参考筛选膠囊：不画面板，一排 pill（34 高、#1e2126、圆角 50、14px .9 白，
   「全部」左侧带筛选图示），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 时：面包屑卡进轮播区、不再自成一条（使用者 2026-11-04 要求）。两个前提都要守：
   ①位置维持左上角（跟内容左缘对齐）；②不压在当前卡片上、卡片也不往下挤（跟首页同位置）。
   ≥1200：主卡两侧有留白——面包屑容器高 0 不占位，面包屑绝对定位在左侧留白的顶端（背景氛围光里），
          宽度限在「主卡左缘 − 12」之内，项目多就在留白里折行，不会碰到主卡；
          主卡宽 --hc-w 与 main.css 的 .hero 同一组算式（两边要一起改）。
   ≤1199：主卡两侧只剩几十 px，放不下——面包屑改压在主卡左上角（使用者 2026-11-04 要求跟底图合在一起），
          底下垫一道黑色 alpha 渐层撑住字的对比；渐层宽＝主卡宽、贴主卡上缘与圆角，卡片位置跟首页相同。
          渐层整片 pointer-events:none，只有面包屑连结吃点击（手机整张卡是详情连结，§17.36，不能被挡）。
          主卡宽 80vw／100vw、上距 16／0 与 main.css 的 .hero 同一组值（两边要一起改）。
   没有 Hero（该分类没有 level=1 影片）时 :has / + 选择器不成立，一切照旧 */
@media (min-width: 1200px) {
    .page-content > .list-crumb:has(+ .hero-container) {
        --hc-w: min(75vw, 1080px);
        position: relative;
        z-index: 3;
        height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    .page-content > .list-crumb:has(+ .hero-container) .art-breadcrumb {
        position: absolute;
        top: 12px;
        left: var(--page-pad);
        /* 容器宽＝版心＋两侧页边；主卡左缘相对容器 ＝ (视窗宽 − 主卡宽)/2 − (视窗宽 − 容器宽)/2 */
        max-width: calc((100vw - var(--hc-w)) / 2 - (100vw - 100%) / 2 - var(--page-pad) - 12px);
    }
}
@media (max-width: 1199px) {
    .page-content > .list-crumb:has(+ .hero-container) {
        --hc-w: 80vw;
        --hero-top: 16px;
        position: relative;
        z-index: 3;
        max-width: none;
        height: 0;
        padding: 0;
        pointer-events: none;
    }
    .page-content > .list-crumb:has(+ .hero-container) .art-breadcrumb {
        position: absolute;
        top: var(--hero-top);
        left: calc((100% - var(--hc-w)) / 2);
        width: var(--hc-w);
        padding: 10px 16px 30px;
        border-radius: var(--radius) var(--radius) 0 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0, rgba(0, 0, 0, 0.34) 55%, rgba(0, 0, 0, 0) 100%);
        color: rgba(255, 255, 255, 0.7);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }
    .page-content > .list-crumb:has(+ .hero-container) .art-breadcrumb a { color: rgba(255, 255, 255, 0.78); pointer-events: auto; }
    .page-content > .list-crumb:has(+ .hero-container) .art-breadcrumb a:hover { color: var(--accent); }
    .page-content > .list-crumb:has(+ .hero-container) .art-breadcrumb .bc-sep { color: rgba(255, 255, 255, 0.45); }
    .page-content > .list-crumb:has(+ .hero-container) .art-breadcrumb .bc-current { color: #fff; }
}
@media (max-width: 767px) {
    /* 满宽卡：直接贴容器 0～100%。不用 100vw——有捲轴的视窗 100vw 比内容宽，面包屑会撑出横向溢出（卡片本身被 .hero 的 overflow 裁掉所以没事） */
    .page-content > .list-crumb:has(+ .hero-container) { --hero-top: 0px; }
    .page-content > .list-crumb:has(+ .hero-container) .art-breadcrumb { left: 0; width: 100%; padding-left: var(--page-pad); padding-right: var(--page-pad); border-radius: 0; }
}

.type-subnav { display: none; }

/* ---------- 类型 pill 列 ---------- */
.hero-genre-panel.hero-genre-panel--single {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    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: 34px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--bg-card);
    font-size: 14px;
    color: var(--text-1);
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s;
}
.hero-genre-panel--single .hgp-head .mac-icon { font-size: 15px; 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; }