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

/* ---------- type subnav ---------- */
.type-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 12px 0 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}
.tsn-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    color: var(--text-2);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    transition: all 0.2s;
}
.tsn-item:hover { color: #fff; border-color: var(--accent); background: var(--accent); }
.tsn-item.is-active,
.tsn-item--lib { color: var(--accent); border-color: var(--accent); background: var(--accent-light); }

/* ---------- list layout ---------- */
.list-main { flex: 1; }
/* 兩側留白改用 clamp() 隨視窗寬度連續縮放，與 index/index.html 的 .content-block
   做法一致（見 main.css §21.37）：min-width 斷點在筆電螢幕實測會完全不觸發，
   留白斷層式變回 0，改用 clamp() 保證任何寬度都連續縮放、不會有斷層。 */
.list-container { width: 100%; max-width: 1760px; margin: 0 auto; padding: 20px clamp(24px, 6vw, 140px) 40px; }
.list-block { margin-bottom: 32px; }

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

/* ---------- pagination (shared) ---------- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 24px 0 8px;
}
.pg-btn,
.pg-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-2);
    font-size: 13px;
    transition: all 0.2s;
}
.pg-btn:hover, .pg-num:hover { color: var(--text-1); border-color: var(--border-2); }
.pg-num.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.pg-info { font-size: 12px; color: var(--text-3); margin-left: 8px; }

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

    /* 手機版 .type-subnav（子分類導覽／type_class_pills 類型快覽共用此 class）
       改為可拖曳左右滑動的單行輪動，取代桌機版的自動換行 */
    .type-subnav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scroll-behavior: smooth;
    }
    .type-subnav::-webkit-scrollbar { display: none; }
    .tsn-item {
        flex: 0 0 auto;
        white-space: nowrap;
        scroll-snap-align: start;
    }
}