/* vod/type.html — list & type_has_sub / type_no_sub */

/* ---------- type subnav（仿分類頁面包屑 pill） ---------- */
.type-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.tsn-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 16px;
    font-size: 13px;
    color: var(--text-2);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    transition: all 0.2s;
}
.tsn-item:hover { color: var(--accent); border-color: var(--accent); }
.tsn-item.is-active,
.tsn-item--lib { color: #fff; border-color: var(--accent); background: var(--accent); }

/* === 暫時隱藏分類頁的子分類導覽列 ===
   依需求先隱藏，不移除 HTML（widget/type_subnav 由 module/type_has_sub.html 與
   module/type_no_sub.html 引用，而這兩個只有 vod/type.html 用，所以這條規則的
   影響範圍就只有分類頁）。
   保留上面的樣式定義不動，恢復顯示時只要刪掉這一段即可，不必重寫樣式。
   註：Hero 底部的分類面板（hero-genre-panel）已經提供同分類的類型快速篩選，
   兩者位置相近、功能重疊，這是暫時隱藏的原因。 */
.type-subnav { display: none; }

/* === 分類頁的分類快速篩選列（widget/hero_genre_panel 的單一分類模式）===
   由 vod/type.html 在 hero banner 之後 include，接替上面被隱藏的 .type-subnav 的
   位置與角色：開頭一顆「全部」（連到不帶類型條件的篩選頁、標為選中），後面接該分類
   底下的類型，點下去帶著類型進篩選頁。
   佈局對齊參考站 vodtype 頁的 type-subnav——單列膠囊、可換行、底部一條分隔線；
   視覺沿用本主題既有的 .tsn-item 語言（尺寸、圓角、hover 行為），不另外發明一套。

   widget 的 HTML 是為「首頁四欄」設計的巢狀結構（col > item > tags），
   單列模式用 display:contents 把中間那幾層攤平，讓「全部」與各個類型直接成為
   同一個 flex 列的項目，就不必為了換版面去改 HTML、也不影響首頁那個模式。 */
.hero-genre-panel--single {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 14px var(--gutter) 16px;
    margin-bottom: 20px;
    /* 分隔線用 ::after 伪元素实现，从第一个胶囊开始，长度自动适配内容宽度 */
    position: relative;
    z-index: 10;
}

.hero-genre-panel--single::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: var(--gutter);
    right: var(--gutter);
    height: 1px;
    background: var(--border);
}
.hero-genre-panel--single .hgp-col,
.hero-genre-panel--single .hgp-item,
.hero-genre-panel--single .hgp-tags { display: contents; }

.hero-genre-panel--single .hgp-head,
.hero-genre-panel--single .hgp-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: auto;
    line-height: normal;
    padding: 5px 16px;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-2);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: all 0.2s;
}
.hero-genre-panel--single .hgp-head:hover,
.hero-genre-panel--single .hgp-tag:hover {
    color: var(--accent);
    background: var(--bg-elevated);
    border-color: var(--accent);
}
/* 分類頁本身沒有套用任何類型條件，「全部」就是當前狀態——沿用 .tsn-item--lib 的實心樣式 */
.hero-genre-panel--single .hgp-head.is-active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}
.hero-genre-panel--single .hgp-head iconify-icon { font-size: 15px; }

/* main.css 在 max-width:767px 把 .hero-genre-panel 整個隱藏（那是首頁那個四欄面板在
   窄螢幕會擠爆的處理）。但單列模式是分類頁的主要篩選入口，手機上更需要留著——
   參考站的 type-subnav 在手機也是顯示的，所以這裡針對單列模式覆寫回來。 */
@media (max-width: 767px) {
    .hero-genre-panel--single {
        display: flex;
        padding: 12px 16px;
        gap: 6px;
    }
    .hero-genre-panel--single .hgp-head,
    .hero-genre-panel--single .hgp-tag { padding: 4px 12px; font-size: 12px; }
}

/* ---------- list layout ----------
   .list-main / .list-block 已隨改版移除：
   分類頁的區塊改用全站共用的 .section（跟首頁同一套橫向捲動列呈現），
   外層的 <main class="page-content list-main"> 也拿掉了（那層是巢狀在
   vod/type.html 自己的 .page-content 裡面，會讓「讓開透明 header」的
   padding-top 套用兩次，hero 底下憑空多出一段空白）。
   左右留白由 .section 的 --gutter 負責，這裡不要再重複給 padding。 */
.list-container { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 0 40px; }

/* ---------- vod-grid (no-sub page) ---------- */
.vod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

/* ⚠️ 這裡刻意不再給 .list-container 左右 padding：
   左右留白現在統一由內層 .section 的 --gutter 提供（桌機 64px／窄螢幕 16px）。
   若這裡再補一次，兩層會疊加（平板會變成 16+16=32px），
   分類頁的內容就會比首頁多縮排一截、兩頁對不齊。 */
@media (max-width: 768px) {
    .list-container { padding-bottom: 60px; }
    .vod-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; }
}