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

/* ---------- type subnav ---------- */
.type-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 0 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}
.tsn-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    border-radius: 20px;
    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(--text-1); border-color: var(--border-2); }
.tsn-item.is-active,
.tsn-item--lib { color: var(--accent); border-color: var(--accent); background: var(--accent-light); }

/* ---------- list layout ---------- */
.list-main { flex: 1; }
.list-container { max-width: 1760px; margin: 0 auto; padding: 20px 20px 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 12px 60px; }
    .vod-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
}