/**
 * Grid Card Section - 通用卡片區塊樣式（合併版）
 *
 * 版本：v3（合併 v1 + v2）
 * 日期：2024-12-11
 *
 * 核心概念：
 * 1. Card 單位系統（來自 v2）
 *    - 容器使用 240px 為基礎單位的 Grid
 *    - 卡片自己決定要佔幾個單位（S=1×1, M=1×2, L=2×2）
 *
 * 2. 佈局變體（來自 v1 實際使用的部分）
 *    - --vertical：垂直佈局（側邊欄）
 *    - data-columns：控制 Grid 列數
 *
 * BEM 命名：
 * - Block: grid-card-section（v1 相容）、grid-card-section-v2
 * - Elements: __title, __items, __header, __more, __nav
 * - Modifiers: --vertical, --columns-{n}
 *
 * 使用方式：
 * - Grid 佈局：<div class="grid-card-section">
 * - 垂直佈局：<div class="grid-card-section grid-card-section--vertical">
 * - v2 語法：<div class="grid-card-section-v2">
 */

/* ==========================================
   1. 基礎容器
   ========================================== */

/* v1 相容命名 */
.grid-card-section {
  width: 100%;
  margin-bottom: 40px;
}

/* v2 命名 */
.grid-card-section-v2 {
  width: 100%;
  max-width: 1440px; /* 6 × 240px */
  margin: 0 auto 40px;
  padding: 0;
  box-sizing: border-box;
}

/* ==========================================
   2. 標題區域
   ========================================== */

/* v1 標題 */
.grid-card-section__title {
  font-family: Tahoma, sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.0714em; /* 30px / 28px */
  color: #FFFFFF;
  margin: 40px 0 20px 10px;
  padding: 0;
}

/* v2 標題 */
.grid-card-section-v2__title {
  margin: 40px 0 20px 10px;
  font-family: "Microsoft YaHei", "PingFang SC", Tahoma, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  color: #FFFFFF;
}

/* v2 標題連結 */
.grid-card-section-v2__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.grid-card-section-v2__title a:hover {
  color: #e63f35;
}

/* 有 rank 時，header 寬度對齊普通卡片區域（5/6 - 2×margin） */
.grid-card-section-v2--with-rank > .grid-card-section-v2__header {
  width: calc(5 / 6 * 100% - 20px);
}

/* ==========================================
   3. 「更多」連結
   ========================================== */

/* v1 更多（在 vertical 內使用）*/
.grid-card-section__more {
  font-family: Tahoma, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 2.14em;
  color: #999999;
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.grid-card-section__more::after {
  content: '\203A'; /* › */
  margin-left: 2px;
  font-size: 16px;
  line-height: 1;
}

.grid-card-section__more:hover {
  color: #E42112;
}

/* v2 更多 */
.grid-card-section-v2__more {
  font-family: Tahoma, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 2.14em;
  color: #999999;
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.grid-card-section-v2__more::after {
  content: '\203A';
  margin-left: 2px;
  font-size: 16px;
  line-height: 1;
}

.grid-card-section-v2__more:hover {
  color: #E42112;
}

/* ==========================================
   4. Header 容器（標題 + 導航/更多）
   ========================================== */

/* v1 header */
.grid-card-section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 20px 0;
  padding: 0;
}

.grid-card-section__header .grid-card-section__title {
  margin: 0;
}

/* v2 header - 統一容器（title + more + nav 共存） */
.grid-card-section-v2__header {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin: 40px 10px 20px;
}

.grid-card-section-v2__header .grid-card-section-v2__title {
  margin: 0;
}

/* more 靠右（在 nav 之前） */
.grid-card-section-v2__header .grid-card-section-v2__more {
  margin-left: auto;
}

/* ==========================================
   5. 導航標籤
   ========================================== */

.grid-card-section-v2__nav {
  display: flex;
  gap: 12px;
  white-space: nowrap;
}

.grid-card-section-v2__nav-item {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 8px;
  font-family: Tahoma, sans-serif;
  font-size: 14px;
  color: #999999;
  text-decoration: none;
  transition: color 0.2s ease;
}

.grid-card-section-v2__nav-item:hover {
  color: #FFFFFF;
}

/* ==========================================
   6. 卡片容器 - Grid 系統
   ========================================== */

/* v1 基礎 Grid */
.grid-card-section__items {
  display: grid;
  grid-template-columns: repeat(4, 220px);
  gap: 0;
}

/* v1 列數變體 */
.grid-card-section__items--columns-3 {
  grid-template-columns: repeat(3, 220px);
}

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

.grid-card-section__items[data-columns="3"] {
  grid-template-columns: repeat(3, 220px);
}

.grid-card-section__items[data-columns="4"] {
  grid-template-columns: repeat(4, 220px);
}

.grid-card-section__items[data-columns="5"] {
  grid-template-columns: repeat(5, 220px);
}

/* v2 Grid */
.grid-card-section-v2__items {
  display: grid;
  grid-template-columns: repeat(6, auto);
  grid-auto-rows: auto;
  gap: 0;
  align-items: start;
}

/* ==========================================
   7. Card 單位定義（v2）
   ========================================== */

/* 小卡 S：1×1 */
.grid-card-section-v2__items .vod-card--s {
  grid-column: span 1;
  grid-row: span 1;
  padding-bottom: 0;
}

/* 中卡 M：1×2 */
.grid-card-section-v2__items .vod-card--m {
  grid-column: span 1;
  grid-row: span 2;
  padding-bottom: 0;
}

/* 大卡 L：2×2 */
.grid-card-section-v2__items .vod-card--l {
  grid-column: span 2;
  grid-row: span 2;
  padding-bottom: 0;
}

/* 排行榜：1×2 */
.grid-card-section-v2__items .rank {
  grid-column: span 1;
  grid-row: span 2;
  gap: 22px;
}

.grid-card-section-v2__items .rank__title {
  margin-top: -50px;
}

/* ==========================================
   8. 垂直佈局變體（--vertical）
   ========================================== */

.grid-card-section--vertical {
  width: 300px;
  margin-bottom: 0;
  margin-left: auto;
}

.grid-card-section--vertical .grid-card-section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 20px 0;
  padding: 0;
}

.grid-card-section--vertical .grid-card-section__header .grid-card-section__title {
  font-family: Tahoma, sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 1.25em;
  margin: 0;
  padding: 0;
}

.grid-card-section--vertical > .grid-card-section__title {
  font-family: Tahoma, sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 1.25em;
  margin: 0 0 20px 0;
  padding: 0;
}

.grid-card-section--vertical .grid-card-section__more::after {
  content: '\203A';
  margin-left: 2px;
  font-size: 16px;
  line-height: 1;
}

.grid-card-section--vertical .grid-card-section__more:hover {
  color: #E42112;
}

.grid-card-section--vertical .grid-card-section__items {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.grid-card-section--vertical .grid-card-section__items > * {
  margin: 0;
  padding: 0;
}

/* ==========================================
   9. 年份篩選
   ========================================== */

.grid-card-section-v2 .years {
  margin: 0 0 20px 10px;
}

/* ==========================================
   10. 響應式設計
   ========================================== */

/* --- v1 響應式 --- */

/* 1440px */
@media (max-width: 1440px) {
  .grid-card-section__items,
  .grid-card-section__items--columns-5,
  .grid-card-section__items[data-columns="5"] {
    grid-template-columns: repeat(4, 220px);
  }

  .grid-card-section__items[data-columns="5"] .vod-card:nth-child(n+9) {
    display: none;
  }

  .grid-card-section__items--columns-4,
  .grid-card-section__items[data-columns="4"] {
    grid-template-columns: repeat(4, 220px);
  }
}

/* 1200px */
@media (max-width: 1200px) {
  .grid-card-section__items,
  .grid-card-section__items--columns-5,
  .grid-card-section__items--columns-4,
  .grid-card-section__items[data-columns="5"],
  .grid-card-section__items[data-columns="4"] {
    grid-template-columns: repeat(3, 220px);
  }

  .grid-card-section__items[data-columns="5"] .vod-card:nth-child(n+7) {
    display: none;
  }

  .grid-card-section__title {
    font-size: 20px;
  }
}

/* 1024px */
@media (max-width: 1024px) {
  .grid-card-section__items,
  .grid-card-section__items--columns-5,
  .grid-card-section__items--columns-4,
  .grid-card-section__items[data-columns="5"],
  .grid-card-section__items[data-columns="4"] {
    grid-template-columns: repeat(3, 220px);
  }

  .grid-card-section__items[data-columns="5"] .vod-card:nth-child(n+7) {
    display: none;
  }

  .grid-card-section__title {
    font-size: 20px;
  }
}

/* 768px */
@media (max-width: 768px) {
  .grid-card-section__items {
    grid-template-columns: repeat(2, 200px);
  }

  .grid-card-section__title {
    font-size: 18px;
  }
}

/* --- v2 響應式 --- */

/* 1440px：5 列，有 rank 時普通卡片 4 列 */
@media (max-width: 1440px) {
  .grid-card-section-v2 {
    max-width: 1200px;
  }

  .grid-card-section-v2__items {
    grid-template-columns: repeat(5, auto);
  }

  .grid-card-section-v2__items > *:nth-child(4):not([data-persistent]),
  .grid-card-section-v2__items > *:nth-child(8):not([data-persistent]) {
    display: none;
  }

  /* 有 rank 時，header 寬度對齊 4 列（4/5 - 2×margin） */
  .grid-card-section-v2--with-rank > .grid-card-section-v2__header {
    width: calc(4 / 5 * 100% - 20px);
  }
}

/* 1200px：4 列，有 rank 時普通卡片 3 列 */
@media (max-width: 1200px) {
  .grid-card-section-v2 {
    max-width: 960px;
  }

  .grid-card-section-v2__items {
    grid-template-columns: repeat(4, auto);
  }

  .grid-card-section-v2__items > *:nth-child(3):not([data-persistent]),
  .grid-card-section-v2__items > *:nth-child(4):not([data-persistent]),
  .grid-card-section-v2__items > *:nth-child(7):not([data-persistent]),
  .grid-card-section-v2__items > *:nth-child(8):not([data-persistent]) {
    display: none;
  }

  /* 有 rank 時，header 寬度對齊 3 列（3/4 - 2×margin） */
  .grid-card-section-v2--with-rank > .grid-card-section-v2__header {
    width: calc(3 / 4 * 100% - 20px);
  }
}