/* ==========================================
   Card 卡片系統 (vod_card)

   基於 Figma 設計規範
   統一的卡片元件樣式

   卡片尺寸：
   - vod_card_l   : 920×696（垂直大卡）
   - vod_card_m   : 440×586（垂直中卡）
   - vod_card_s   : 440×244（垂直小卡）
   - vod_card_xs  : 220×154（垂直超小卡，圖片 200×112）
   - vod_card_xxs : 110×62（水平超小卡）
   ========================================== */

/* ==========================================
   【基礎卡片】通用樣式
   ========================================== */

.vod-card {
    position: relative;
    display: block;
    border-radius: 9.6px;
    overflow: hidden;
    user-select: none; /* 防止文字被選擇，確保點擊觸發連結 */
    -webkit-user-select: none; /* Safari */
    /* transition 和 hover 效果由 vod-card-effects.css 統一管理 */
}

.vod-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer; /* 確保顯示手指游標 */
}

/* L 卡片的 link 需要包裹整個 container */
.vod-card--l .vod-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* 輪播卡片的 link 需要相對定位來容納多張 absolute 圖片 */
.vod-card--l[data-carousel="true"] .vod-card__link {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;  /* 關鍵：隱藏滑出視窗外的圖片 */
}

/* ==========================================
   【超小卡片 XXS】110×62（水平佈局，圖左文右）

   用途：
   - 播放頁側邊欄推薦
   - 熱播榜
   - 選集下方相關推薦
   ========================================== */

.vod-card--xxs {
    display: flex;
    align-items: center; /* 垂直置中 */
    gap: 10px;
    width: 300px; /* 固定寬度 300px */
    height: 82px; /* 固定高度 82px */
    border-radius: 0; /* 超小卡不需要外層圓角 */
}

/* 超小卡不需要容器懸浮效果，只保留圖片放大（由 vod-card-effects.css 提供 --no-lift modifier） */

/* XS 圖片容器 */
.vod-card--xxs .vod-card__image {
    position: relative;
    width: 110px;
    height: 62px;
    flex-shrink: 0;
    border-radius: 9.6px;
    overflow: hidden;
}

/* XS 卡片的 link 需要相對定位，讓 rank 正確定位 */
.vod-card--xxs .vod-card__link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.vod-card--xxs .vod-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* transition 和 hover 效果由 vod-card-effects.css 統一管理 */
}

/* XS 內容區域（文字） */
.vod-card--xxs .vod-card__content {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0; /* 允許文字溢出省略 */
}

.vod-card--xxs .vod-card__info {
    width: 100%;
}

.vod-card--xxs .vod-card__title-link {
    position: relative;
    display: inline; /* 改為 inline，讓標題和標籤在同一行 */
    text-decoration: none;
}

.vod-card--xxs .vod-card__title {
    color: #CCCCCC;
    font-family: Tahoma, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.43em; /* 20px */
    text-align: left; /* 文字置左 */
    /* 允許文字自然換行，不使用省略號 */
}

.vod-card--xxs .vod-card__title:hover {
    color: #FFFFFF;
}

/* XS 徽章（推薦、排名等） */
.vod-card--xxs .vod-card__badge {
    display: inline-block;
    margin-left: 4px; /* 與文字間距 */
    width: 14px;
    height: 14px;
    background: #E42112; /* 紅色背景 */
    border-radius: 2px; /* 正方形（小圓角） */
    text-align: center;
    line-height: 14px;
    font-family: Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #FFFFFF;
    vertical-align: middle; /* 與文字垂直對齊 */
}

/* XS 排名數字（左上角，在圖片上） */
.vod-card--xxs .vod-card__rank {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px !important; /* 強制 w=h，以高度為標準 */
    height: 20px !important;
    min-width: unset !important; /* 清除可能的 min-width 繼承 */
    max-width: unset !important; /* 清除可能的 max-width 繼承 */
    box-sizing: border-box !important; /* 確保 padding 不會增加尺寸 */
    display: block !important; /* 改用 block + text-align 更穩定 */
    padding: 0 !important; /* 移除所有 padding */
    margin: 0 !important; /* 移除所有 margin */
    font-family: Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px !important; /* 行高 = 容器高度，文字垂直置中 */
    text-align: center !important; /* 文字水平置中 */
    color: #FFFFFF;
    background: #999999; /* 4+ 名灰色背景 */
    border-radius: 0; /* 完全無圓角，符合 Figma 正方形設計 */
    overflow: hidden; /* 如果數字太寬，裁切掉 */
    z-index: 2;
}

/* 前三名特殊背景色（符合 Figma 設計） */
.vod-card--xxs .vod-card__rank[data-rank="1"] {
    background: #E42112; /* 紅色 */
}

.vod-card--xxs .vod-card__rank[data-rank="2"] {
    background: #F47B21; /* 橙色 */
}

.vod-card--xxs .vod-card__rank[data-rank="3"] {
    background: #F5BA08; /* 黃色 */
}

/* ==========================================
   【大卡片 L】480×388（垂直佈局）

   用途：
   - 首頁大卡片
   - 特別推薦區塊

   結構（遵循 Figma vod_card_l_container 設計）：
   - 外層容器：480px × 388px
   - Padding: 0 10px 20px（上0，左右10px，下20px）
   - 圖片區域：460px × 348px
   - 標題：絕對定位 x:10, y:300
   - 標題字體：16px Bold
   - 副標題：14px Regular, #CCC
   - 標題與副標題間距：4px
   ========================================== */

.vod-card--l {
    width: 480px; /* Figma: vod_card_l_container 外框寬度 */
    padding: 0 10px 20px; /* Figma: padding 上0，左右10px，下20px */
    box-sizing: border-box; /* 確保 padding 包含在寬度內 */
}

/* Hover 效果由 vod-card-effects.css 統一管理 */

.vod-card--l .vod-card__container {
    position: relative;
    width: 460px; /* Figma: Component 4 寬度（480 - 20 = 460） */
    height: 348px; /* Figma: Component 4 高度 */
    border-radius: 9.6px;
    overflow: hidden;
}

.vod-card--l .vod-card__image {
    position: relative;  /* 讓 absolute 圖片相對於此容器定位 */
    width: 100%;
    height: 100%;
    overflow: hidden;  /* 隱藏滑出視窗外的圖片 */
}

.vod-card--l .vod-card__image img {
    position: absolute;  /* 支援輪播多張圖片疊加 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* transition 和 hover 效果由 vod-card-effects.css 統一管理 */
}

/* L 底部漸層遮罩（Figma: Gradient, 460px × 100px, y:248） */
.vod-card--l .vod-card__gradient {
    position: absolute;
    left: 0;
    bottom: 0; /* 從底部開始 */
    width: 100%;
    height: 100px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

/* L 文字容器（Figma: text_col, 絕對定位 x:10, y:300 → bottom: 48px） */
.vod-card--l .vod-card__text-container {
    position: absolute;
    left: 10px;
    bottom: 30px; /* 從底部往上 30px（圖片 348px - y:300 = 48px，調整為 30px 讓文字有足夠空間） */
    width: 314px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px; /* Figma: gap 4px */
}

.vod-card--l .vod-card__title {
    margin: 0;
    padding: 0;
    color: #FFFFFF;
    font-family: Tahoma, sans-serif;
    font-size: 16px;
    font-weight: 700; /* Bold */
    line-height: 18px; /* Figma: 1.125em = 18px */
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vod-card--l .vod-card__link:hover .vod-card__title {
    color: #FFD700;
}

.vod-card--l .vod-card__subtitle {
    margin: 0; /* gap 由父容器的 flex gap 控制 */
    padding: 0;
    color: #CCCCCC; /* Figma: Silver */
    font-family: Tahoma, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px; /* Figma: 1.143em = 16px */
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================
   【小卡片 S】200×154（垂直佈局）

   用途：
   - 高能劇透社（熱播劇集）
   - 猜你喜歡（推薦）

   結構（遵循 Figma card_s 設計）：
   - 圖片區域：200×112
   - 標題區域：padding-top 6px
   - 副標題區域：padding-top 4px
   ========================================== */

.vod-card--s {
    width: 240px; /* Figma: vod_card_s_Container 寬度 */
    height: 184px; /* 固定高度：圖片122 + title區24 + subtitle區18 + padding-bottom 20 */
    padding: 0 0 20px 0; /* Figma: padding 只有下方 20px */
    box-sizing: border-box; /* 確保 padding 包含在寬度/高度內 */
}

.vod-card--s:hover {
    transform: none; /* 小卡不需要懸浮移動效果 */
    box-shadow: none;
}

.vod-card--s .vod-card__container {
    position: relative;
    width: 220px; /* Figma: Component 3 實際內容寬度 220px */
    height: 122px; /* Figma: Details/Image 高度 */
    margin: 0 10px; /* 左右各 10px margin，讓內容居中 */
    border-radius: 9.6px;
    overflow: hidden;
}

.vod-card--s .vod-card__image {
    width: 100%;
    height: 100%;
}

.vod-card--s .vod-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* transition 和 hover 效果由 vod-card-effects.css 統一管理 */
}

.vod-card--s .vod-card__title {
    margin: 8px 10px 0 10px; /* 上 8px（與圖片間距），左右 10px */
    padding: 0;
    height: 16px; /* 實際文字高度 line-height */
    color: #FFFFFF;
    font-family: Tahoma, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.143em; /* 約 16px */
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vod-card--s .vod-card__title a {
    color: #FFFFFF;
    text-decoration: none;
    transition: color 0.2s ease;
}

.vod-card--s .vod-card__title a:hover {
    color: #FFD700;
}

.vod-card--s .vod-card__subtitle {
    margin: 4px 10px 0 10px; /* 上 4px（與 title 間距），左右 10px */
    padding: 0;
    height: 14px; /* 實際文字高度 line-height */
    color: #999999;
    font-family: Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.167em; /* 約 14px */
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 注意：標籤樣式（會員、熱門等）已定義在 vod_tag.css */

/* ==========================================
   【超小卡片 XS】220×154（垂直佈局）

   用途：
   - 待定

   結構：
   - 圖片區域：200×112
   - 容器尺寸：220×154
   - 標題區域：padding-top 6px
   - 副標題區域：padding-top 4px
   ========================================== */

.vod-card--xs {
    width: 220px; /* 外層容器（200px 內容 + 左右各 10px margin）*/
    padding: 0 0 20px 0;
    box-sizing: border-box;
}

.vod-card--xs:hover {
    transform: none;
    box-shadow: none;
}

.vod-card--xs .vod-card__container {
    position: relative;
    width: 200px; /* 圖片內容寬度 200px */
    height: 112px; /* 圖片高度 112px（16:9 比例）*/
    margin: 0 10px; /* 左右各 10px，總寬 220px */
    border-radius: 9.6px;
    overflow: hidden;
}

.vod-card--xs .vod-card__image {
    width: 100%;
    height: 100%;
}

.vod-card--xs .vod-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* transition 和 hover 效果由 vod-card-effects.css 統一管理 */
}

.vod-card--xs .vod-card__title {
    margin: 8px 10px 0 10px;
    padding: 0;
    height: 16px;
    color: #FFFFFF;
    font-family: Tahoma, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.143em;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vod-card--xs .vod-card__title a {
    color: #FFFFFF;
    text-decoration: none;
    transition: color 0.2s ease;
}

.vod-card--xs .vod-card__title a:hover {
    color: #FFD700;
}

.vod-card--xs .vod-card__subtitle {
    margin: 4px 10px 0 10px;
    padding: 0;
    height: 14px;
    color: #999999;
    font-family: Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.167em;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 注意：
   - XS 卡片大小固定不變（220px）
   - 響應式由 grid-card-section.css 控制列數變化
   - 標籤樣式（會員、熱門等）已定義在 vod_tag.css
*/

/* ==========================================
   【中卡片 M】220×293（垂直佈局）

   用途：
   - 首頁樓層卡片
   - 列表頁卡片

   注意：詳細樣式定義在 vod_card_m.css，此處僅保留基礎定義
   ========================================== */

/* 基礎樣式由 vod_card_m.css 控制，此處不重複定義 */

/* 注意：.vod-card--l 的定義在上方（line 197-299），此處為重複定義已刪除 */

/* ==========================================
   【響應式調整】
   ========================================== */

/* 1200px 斷點：大卡片縮小至 400px，維持高度確保與小卡對齊 */
@media (max-width: 1200px) {
  .vod-card--l {
    width: 400px; /* 從 480px 縮小至 400px */
  }

  .vod-card--l .vod-card__container {
    width: 380px; /* 從 460px 縮小至 380px（400 - 20 = 380） */
    height: 348px; /* 維持原高度（不變），確保 grid-row: span 2 與小卡高度對齊 */
  }

  /* 圖片會透過 object-fit: cover 自動裁切適應新比例 */

  .vod-card--l .vod-card__text-container {
    width: 320px; /* 從 314px 調整，讓文字區域適應新寬度 */
    bottom: 30px; /* 維持原間距 */
  }

  /* 文字大小保持不變，維持可讀性 */
}

/* ==========================================
   【MacCMS 整合說明】

   所有卡片元件都遵循相同的 HTML 結構：

   <div class="vod-card vod-card--{size}">
     <a href="{url}" class="vod-card__link">
       <div class="vod-card__container">
         <div class="vod-card__image">
           <img src="{pic}" alt="{name}" />
         </div>
         <!-- 標籤、排名等覆蓋層元素 -->
       </div>
       <div class="vod-card__title">{name}</div>
       <div class="vod-card__subtitle">{actor/year/area}</div>
     </a>
   </div>

   ========================================== */