/**
 * 網格卡片列表容器（無標題版本）
 *
 * 用途：純網格容器，不含標題
 * 適用場景：
 * - 劇集列表（detail 頁面）
 * - 搜尋結果列表
 * - 任何不需要標題的網格佈局
 *
 * BEM 命名：
 * - Block: grid-card-list
 * - Element: __items
 * - Modifiers: --columns-{n}（自訂列數）
 */

/* ==================== 網格卡片容器（無標題） ==================== */
.grid-card-list__items {
  display: grid;
  grid-template-columns: repeat(4, 220px); /* 預設 4 列 × 220px（XS卡外層寬度）*/
  gap: 0; /* 卡片本身已有容器間距（XS: 左右各10px），不需要額外 gap */
}

/* ==================== 列數變體（可選） ==================== */
/* 如果需要不同列數，可以使用 modifier 類別 */

.grid-card-list__items--columns-3 {
  grid-template-columns: repeat(3, 220px);
}

.grid-card-list__items--columns-5 {
  grid-template-columns: repeat(5, 220px);
}

/* 或使用 data 屬性動態控制 */
.grid-card-list__items[data-columns="3"] {
  grid-template-columns: repeat(3, 220px);
}

.grid-card-list__items[data-columns="4"] {
  grid-template-columns: repeat(4, 220px); /* XS 卡外層寬度 220px */
}

.grid-card-list__items[data-columns="5"] {
  grid-template-columns: repeat(5, 240px); /* M 卡外層寬度 240px */
}

.grid-card-list__items[data-columns="6"] {
  grid-template-columns: repeat(6, 240px); /* M 卡外層寬度 240px，最大容器 6 列 */
}

/* ==================== 劇集網格專用（200px 卡片） ==================== */
/* 用於 detail 頁面的劇集列表 */
.grid-card-list__items--episode {
  grid-template-columns: repeat(5, 200px); /* 5 列 × 200px（劇集卡片寬度） */
  column-gap: 20px; /* 列間距 20px */
  row-gap: 20px; /* 行間距 20px */
}

/* ==================== 響應式調整 ==================== */
/* 注意：卡片大小固定 220px，只改變列數和顯示數量 */

/* 1440px：6 列 → 5 列，5 列 → 4 列 */
@media (max-width: 1440px) {
  /* 6 列容器：6 列 → 5 列 */
  .grid-card-list__items[data-columns="6"] {
    grid-template-columns: repeat(5, 240px);
  }

  /* 5 列容器：5 列 → 4 列 */
  .grid-card-list__items,
  .grid-card-list__items--columns-5,
  .grid-card-list__items[data-columns="5"] {
    grid-template-columns: repeat(4, 240px); /* 5列 → 4列（M卡固定 240px）*/
  }

  /* 隱藏第 9、10 張卡片（5列容器：10張 → 8張）*/
  .grid-card-list__items[data-columns="5"] .vod-card:nth-child(n+9) {
    display: none;
  }

  /* 維持 4 列的不變 */
  .grid-card-list__items--columns-4,
  .grid-card-list__items[data-columns="4"] {
    grid-template-columns: repeat(4, 220px);
  }

  /* 劇集網格：5 列 → 4 列 */
  .grid-card-list__items--episode {
    grid-template-columns: repeat(4, 200px);
  }
}

/* 1200px：5/4 列 → 3 列 */
@media (max-width: 1200px) {
  /* 6 列容器：5 列 → 4 列（在 1440px 已變 5 列） */
  .grid-card-list__items[data-columns="6"] {
    grid-template-columns: repeat(4, 240px);
  }

  /* 5/4 列容器：→ 3 列 */
  .grid-card-list__items,
  .grid-card-list__items--columns-5,
  .grid-card-list__items--columns-4,
  .grid-card-list__items[data-columns="5"],
  .grid-card-list__items[data-columns="4"] {
    grid-template-columns: repeat(3, 240px); /* 4列 → 3列（M卡固定 240px）*/
  }

  /* 隱藏第 7-10 張卡片（5列容器：10張 → 6張）*/
  .grid-card-list__items[data-columns="5"] .vod-card:nth-child(n+7) {
    display: none;
  }

  /* 劇集網格：4 列 → 3 列 */
  .grid-card-list__items--episode {
    grid-template-columns: repeat(3, 200px);
  }
}

/* 1024px：全部 3 列 */
@media (max-width: 1024px) {
  /* 6 列容器：4 列 → 3 列 */
  .grid-card-list__items[data-columns="6"] {
    grid-template-columns: repeat(3, 240px);
  }

  /* 其他容器：維持 3 列 */
  .grid-card-list__items,
  .grid-card-list__items--columns-5,
  .grid-card-list__items--columns-4,
  .grid-card-list__items[data-columns="5"],
  .grid-card-list__items[data-columns="4"] {
    grid-template-columns: repeat(3, 240px); /* 維持 3列（M卡固定 240px）*/
  }

  /* 維持隱藏第 7-10 張（5列容器：維持 6張）*/
  .grid-card-list__items[data-columns="5"] .vod-card:nth-child(n+7) {
    display: none;
  }

  /* 劇集網格：維持 3 列 */
  .grid-card-list__items--episode {
    grid-template-columns: repeat(3, 200px);
  }
}

/* 不支援移動端（PC 專用模板，最小支援到 1024px） */