/* 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; }

/* ---------- list layout ---------- */
.list-main { flex: 1; }
.list-container { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 16px 0 40px; }
.list-block { margin-bottom: 28px; }

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

/* 平板：定寬容器加回左右留白，避免貼邊 */
@media (max-width: 1199px) {
    .list-container { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 768px) {
    .list-container { padding: 10px 12px 60px; }
    .vod-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; }
}