/**
 * Grid RWD 通用工具類
 *
 * 用途：統一管理 vod_card_xs (220px) 網格佈局的響應式行為
 *
 * 核心原理：
 * - 使用 repeat(auto-fit, 220px) 讓網格根據父容器寬度自動計算列數
 * - 當父容器放不下時才換行，不會提早換行產生空白
 * - data-columns 僅用於控制最大列數
 *
 * 兩種模式：
 * 1. .grid-rwd-wrap：卡片自動往下排（劇集列表、搜尋結果）
 * 2. .grid-rwd-hide：隱藏超出的卡片（高能劇透社、推薦區）
 *
 * 使用方式：
 * <div class="grid-rwd-wrap" data-columns="5">
 *   <!-- 卡片會自動換行，不隱藏 -->
 * </div>
 *
 * <div class="grid-rwd-hide" data-columns="5">
 *   <!-- 超出的卡片會被隱藏 -->
 * </div>
 */

/* ==========================================
   基礎設定：預設列數（1920px 視窗）
   ========================================== */

/* 通用 Grid 容器 */
.grid-rwd-wrap,
.grid-rwd-hide {
  display: grid;
  gap: 0; /* vod_card_xs 已內建間距（左右各10px，底部20px），不需要額外 gap */
  width: 100%; /* 佔滿父容器 */
}

/* data-columns="5": 預設 5 列 */
.grid-rwd-wrap[data-columns="5"],
.grid-rwd-hide[data-columns="5"] {
  grid-template-columns: repeat(5, 220px);
  max-width: 1100px; /* 220 × 5 */
}

/* data-columns="4": 預設 4 列 */
.grid-rwd-wrap[data-columns="4"],
.grid-rwd-hide[data-columns="4"] {
  grid-template-columns: repeat(4, 220px);
  max-width: 880px; /* 220 × 4 */
}

/* data-columns="3": 預設 3 列 */
.grid-rwd-wrap[data-columns="3"],
.grid-rwd-hide[data-columns="3"] {
  grid-template-columns: repeat(3, 220px);
  max-width: 660px; /* 220 × 3 */
}

/* data-columns="2": 預設 2 列 */
.grid-rwd-wrap[data-columns="2"],
.grid-rwd-hide[data-columns="2"] {
  grid-template-columns: repeat(2, 220px);
  max-width: 440px; /* 220 × 2 */
}

/* ==========================================
   響應式斷點：根據視窗寬度調整列數

   計算邏輯（detail 頁面）：
   - 視窗寬度 = 左側欄寬度 + 330px (右側欄)
   - 5 列需要 1100px → 視窗 ≥ 1430px
   - 4 列需要 880px  → 視窗 ≥ 1210px (880 + 330)
   - 3 列需要 660px  → 視窗 ≥ 990px  (660 + 330)
   - 2 列需要 440px  → 視窗 < 990px
   ========================================== */

/* 視窗 < 1430px：左側欄 < 1100px → 5列 → 4列 */
@media (max-width: 1429px) {
  .grid-rwd-wrap[data-columns="5"],
  .grid-rwd-hide[data-columns="5"] {
    grid-template-columns: repeat(4, 220px);
    max-width: 880px;
  }

  /* 模式2：隱藏第 9-10 張卡片 */
  .grid-rwd-hide[data-columns="5"] .vod-card:nth-child(n+9) {
    display: none;
  }
}

/* 視窗 < 1210px：左側欄 < 880px → 4列 → 3列 */
@media (max-width: 1209px) {
  .grid-rwd-wrap[data-columns="5"],
  .grid-rwd-hide[data-columns="5"],
  .grid-rwd-wrap[data-columns="4"],
  .grid-rwd-hide[data-columns="4"] {
    grid-template-columns: repeat(3, 220px);
    max-width: 660px;
  }

  /* 模式2：隱藏超出卡片 */
  .grid-rwd-hide[data-columns="5"] .vod-card:nth-child(n+7),
  .grid-rwd-hide[data-columns="4"] .vod-card:nth-child(n+7) {
    display: none; /* 只顯示前 6 張（2 行 × 3 列）*/
  }
}

/* 視窗 < 990px：左側欄 < 660px → 3列 → 2列 */
@media (max-width: 989px) {
  .grid-rwd-wrap[data-columns="5"],
  .grid-rwd-hide[data-columns="5"],
  .grid-rwd-wrap[data-columns="4"],
  .grid-rwd-hide[data-columns="4"],
  .grid-rwd-wrap[data-columns="3"],
  .grid-rwd-hide[data-columns="3"] {
    grid-template-columns: repeat(2, 220px);
    max-width: 440px;
  }

  /* 模式2：隱藏超出卡片 */
  .grid-rwd-hide[data-columns="5"] .vod-card:nth-child(n+5),
  .grid-rwd-hide[data-columns="4"] .vod-card:nth-child(n+5),
  .grid-rwd-hide[data-columns="3"] .vod-card:nth-child(n+5) {
    display: none; /* 只顯示前 4 張（2 行 × 2 列）*/
  }
}

/* ==========================================
   模式2 預設隱藏規則（5 列時）
   ========================================== */
@media (min-width: 1430px) {
  .grid-rwd-hide[data-columns="5"] .vod-card:nth-child(n+11) {
    display: none; /* 只顯示前 10 張（2 行 × 5 列）*/
  }
}