/* ==========================================
   【Movie 佈局】電影專用 6 列 × 2 行佈局
   結構：Grid 6×2，排行榜在第 6 列第 1 行（卡 11 正上方）
   ========================================== */

/* Movie 主容器 */
.grid-card-section--movie {
  width: 100%;
  max-width: var(--tpl-container-1440);
  margin: 0 auto 40px;
  padding: 0; /* 移除左右 padding，讓卡片貼邊 */
  box-sizing: border-box;
}

/* 標題：繼承基礎樣式（margin: 40px 0 20px 10px） */

/* 預設（1920px）：第一排 5M + Rank，第二排 6M */
.grid-card-section--movie .grid-card-section__items {
  display: grid;
  grid-template-columns: repeat(6, auto); /* 6 列，自動適應卡片寬度 */
  grid-template-rows: auto auto; /* 2 行 */
  gap: 0; /* 卡片緊密貼合，無間距 */
  padding: 0 0 20px 0; /* 底部 20px padding */
}

/* 第一排：卡片 1-5（5 張中卡）*/
.grid-card-section--movie .vod-card--m:nth-child(1) { grid-column: 1; grid-row: 1; }
.grid-card-section--movie .vod-card--m:nth-child(2) { grid-column: 2; grid-row: 1; }
.grid-card-section--movie .vod-card--m:nth-child(3) { grid-column: 3; grid-row: 1; }
.grid-card-section--movie .vod-card--m:nth-child(4) { grid-column: 4; grid-row: 1; }
.grid-card-section--movie .vod-card--m:nth-child(5) { grid-column: 5; grid-row: 1; }

/* 第二排：卡片 6-11（6 張中卡）*/
.grid-card-section--movie .vod-card--m:nth-child(6) { grid-column: 1; grid-row: 2; }
.grid-card-section--movie .vod-card--m:nth-child(7) { grid-column: 2; grid-row: 2; }
.grid-card-section--movie .vod-card--m:nth-child(8) { grid-column: 3; grid-row: 2; }
.grid-card-section--movie .vod-card--m:nth-child(9) { grid-column: 4; grid-row: 2; }
.grid-card-section--movie .vod-card--m:nth-child(10) { grid-column: 5; grid-row: 2; }
.grid-card-section--movie .vod-card--m:nth-child(11) { grid-column: 6; grid-row: 2; }

/* 排行榜：固定在第 6 列第 1 行 */
.grid-card-section--movie .rank {
  grid-column: 6;
  grid-row: 1;
  /* width 和 max-width 使用 rank.css 預設的 240px */
  margin-top: -50px; /* 標題與左側對齊 */
  margin-bottom: 30px; /* 調整為 30px，與 gap 配合 */
  /* gap: 22px 已在 components/rank.css 中定義 */
}

/* 中卡樣式：移除 margin，讓 Grid gap 控制間距 */
/* 移除 width 設定，讓卡片保持原本的 220px + padding 20px = 240px */

/* 1440px：第一排 4M + Rank，第二排 5M（右邊各少一個）*/
@media (max-width: 1440px) {
  /* 隱藏第一排第 5 張 */
  .grid-card-section--movie .vod-card--m:nth-child(5) {
    display: none;
  }

  /* 隱藏第二排第 6 張 */
  .grid-card-section--movie .vod-card--m:nth-child(11) {
    display: none;
  }

  /* 排行榜移到第 5 列（原本第 6 列）*/
  .grid-card-section--movie .rank {
    grid-column: 5;
  }
}

/* 1200px：第一排 3M + Rank，第二排 4M（左邊各少一個）*/
@media (max-width: 1200px) {
  /* 隱藏第一排第 4、5 張 */
  .grid-card-section--movie .vod-card--m:nth-child(4),
  .grid-card-section--movie .vod-card--m:nth-child(5) {
    display: none;
  }

  /* 隱藏第二排第 5、6 張 */
  .grid-card-section--movie .vod-card--m:nth-child(10),
  .grid-card-section--movie .vod-card--m:nth-child(11) {
    display: none;
  }

  /* 排行榜移到第 4 列（原本第 5 列）*/
  .grid-card-section--movie .rank {
    grid-column: 4;
  }
}

/* 1024px：維持穩定（與 1200px 相同）*/
@media (max-width: 1024px) {
  /* 與 1200px 斷點相同，維持第一排 3M + Rank，第二排 4M */
}