/**
 * ==========================================
 * Rank Component (統一排行榜組件)
 * ==========================================
 *
 * 整合了兩套排行榜系統，提供統一的 BEM 命名規範
 * 日期：2025-10-24 | Issue: SBU-195
 *
 * ==========================================
 * 使用場景
 * ==========================================
 *
 * 1. 首頁排行榜（純文字版，240px 固定寬度）
 *    - 電視劇區塊、動漫區塊、電影區塊
 *    - 使用 .rank--fixed
 *
 * 2. 詳情頁側邊欄（純文字版，300px 固定寬度）
 *    - 熱播榜
 *    - 使用 .rank--detail
 *
 * 3. 播放頁側邊欄（帶縮圖版，110×62 縮圖）
 *    - 熱播榜（注意：目前使用 vod-card--xxs，非 rank 組件）
 *
 * ==========================================
 * HTML 結構範例
 * ==========================================
 *
 * 【純文字版】- 預設樣式
 * <div class="rank rank--fixed">
 *   <div class="rank__header">
 *     <h2 class="rank__title">電視劇</h2>
 *     <a href="#" class="rank__more">更多</a>
 *   </div>
 *   <div class="rank__list">
 *     <div class="rank__item">
 *       <div class="rank__number rank__number--1">1</div>
 *       <div class="rank__text">
 *         <a href="#">慶餘年 第二季</a>
 *       </div>
 *       <div class="rank__arrow rank__arrow--flat">
 *         <!-- SVG 箭頭 -->
 *       </div>
 *     </div>
 *     <!-- 更多 rank__item... -->
 *   </div>
 *   <a href="#" class="rank__more-btn">更多</a>
 * </div>
 *
 * 【帶縮圖版】- 使用 modifier
 * <div class="rank rank--with-thumb">
 *   <div class="rank__header">
 *     <h2 class="rank__title">熱播榜</h2>
 *   </div>
 *   <div class="rank__list">
 *     <div class="rank__item">
 *       <div class="rank__thumb">
 *         <img src="poster.jpg" alt="影片名稱">
 *         <span class="rank__badge rank__badge--1">1</span>
 *       </div>
 *       <div class="rank__text">
 *         <a href="#">影片名稱</a>
 *       </div>
 *     </div>
 *     <!-- 更多 rank__item... -->
 *   </div>
 * </div>
 *
 * ==========================================
 * Modifier 說明
 * ==========================================
 *
 * .rank--fixed       - 240px 固定寬度（首頁排行榜）
 * .rank--detail      - 300px 固定寬度（詳情頁側邊欄）
 * .rank--with-thumb  - 帶縮圖版本（110×62 圖片 + 排名徽章）
 * .rank--fluid       - 彈性寬度（無最大寬度限制）
 *
 * .rank__number--1/2/3  - 前三名徽章顏色（紅/橙/黃）
 * .rank__badge--1/2/3   - 前三名縮圖徽章顏色（紅/橙/黃）
 * .rank__arrow--up/down/flat  - 趨勢箭頭方向
 *
 * ==========================================
 * MacCMS 整合範例
 * ==========================================
 *
 * {maccms:vod num="9" order="vod_hits desc"}
 * <div class="rank rank--fixed">
 *   <div class="rank__header">
 *     <h2 class="rank__title">熱播榜</h2>
 *     <a href="#" class="rank__more">更多</a>
 *   </div>
 *   <div class="rank__list">
 *     {volist name="list" id="vo"}
 *     <div class="rank__item">
 *       <div class="rank__number rank__number--{$i}">{$i}</div>
 *       <div class="rank__text">
 *         <a href="{$vo.vod_play_url}">{$vo.vod_name}</a>
 *       </div>
 *       <div class="rank__arrow rank__arrow--flat">
 *         <svg>...</svg>
 *       </div>
 *     </div>
 *     {/volist}
 *   </div>
 *   <a href="#" class="rank__more-btn">更多</a>
 * </div>
 * {/maccms:vod}
 *
 * ==========================================
 * 常見組合
 * ==========================================
 *
 * 首頁電影區塊：
 * .grid-card-section--movie .rank {
 *   margin-top: -50px;  // 標題與左側對齊
 *   gap: 22px;          // 標題下方 20px + 2px 微調
 * }
 *
 * 首頁電視劇/動漫區塊：
 * .grid-card-section--featured-with-rank .rank {
 *   margin-top: 40px;   // 標題與左側對齊
 *   gap: 22px;          // 標題下方 20px + 2px 微調
 * }
 *
 * ==========================================
 */

/* ===================================== */
/* 基礎結構（純文字版）*/
/* ===================================== */

/* 排行榜容器 */
.rank {
  width: 240px;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px; /* 預設間距 */
  flex-shrink: 0;
  padding: 0 10px; /* 左右各 10px 內距 */
  box-sizing: border-box; /* 包含 padding 在 240px 內 */
  position: relative;
}

/* 電影區塊和電視劇區塊的特殊間距 */
.grid-card-section--movie .rank,
.grid-card-section--featured-with-rank .rank {
  gap: 22px; /* 標題下方 20px + 2px 微調 */
}

/* 排行榜標題區 */
.rank__header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0; /* 移除間距，讓排名數字和左側卡片頂部對齊 */
}

/* 排行榜容器（包裹 list 和 more）*/
.rank__container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 排行榜標題 */
.rank__title {
  width: 100%; /* 填滿父容器的內容區域（220px）*/
  margin: 0;
  font-family: Tahoma, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
  color: #FFFFFF;
  text-align: left;
  padding: 0;
  flex-shrink: 0;
}

/* 更多連結 */
.rank__more {
  width: 100%; /* 填滿父容器的內容區域（220px）*/
  margin: 0;
  font-family: Tahoma, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 2.14;
  color: #999999;
  text-decoration: none;
  transition: color 0.2s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center; /* 水平置中 */
  gap: 5px; /* 文字和箭頭之間的間距 */
}

.rank__more:hover {
  color: #E42112;
}

/* 隱藏內嵌的 SVG，使用 Unicode 箭頭 */
.rank__more svg {
  display: none;
}

.rank__more-text::after {
  content: '\203A'; /* › Unicode 右箭頭 */
  margin-left: 5px;
  font-size: 16px;
  line-height: 1;
}

/* 列表容器 */
.rank__list {
  width: 100%; /* 填滿父容器的內容區域（220px 首頁 / 280px detail）*/
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 0;
  margin: 0;
}

/* ===================================== */
/* 排行項目 - 純文字版（預設）*/
/* ===================================== */

.rank__item {
  width: 100%; /* 填滿父容器的內容區域（220px）*/
  height: 24px;
  min-height: 24px;
  max-height: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.rank__item:hover {
  opacity: 0.8;
}

/* 排名數字徽章 */
.rank__number {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  background: #999999;
  color: #FFFFFF;
  font-family: Tahoma, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.714;
  text-align: center;
  flex-shrink: 0;
}

/* 前三名徽章顏色 */
.rank__number--1 { background: #E42112; }
.rank__number--2 { background: #F47B21; }
.rank__number--3 { background: #F5BA08; }

/* 排名文字 */
.rank__text {
  flex: 1;
  font-family: Tahoma, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  margin-right: 24px; /* 為趨勢箭頭留空間 */
}

/* 排名文字連結 */
.rank__text a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.rank__text a:hover {
  color: #FFD700; /* hover 時變金黃色 */
}

/* 趨勢箭頭（可選） */
.rank__arrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}

.rank__arrow--up::before {
  content: '\2191'; /* ↑ Unicode 向上箭頭 */
  color: #71CE3A; /* 綠色 */
}

.rank__arrow--down::before {
  content: '\2193'; /* ↓ Unicode 向下箭頭 */
  color: #E42112; /* 紅色 */
}

.rank__arrow--flat::before {
  content: '\2014'; /* — Unicode 長破折號 */
  color: #BBBBBB; /* 灰色 */
}

/* ===================================== */
/* 帶縮圖版 Modifier */
/* ===================================== */

/* 使用 .rank--with-thumb 啟用帶縮圖版 */
.rank--with-thumb .rank__item {
  height: 62px;
  min-height: 62px;
  max-height: 62px;
  gap: 10px;
  padding: 10px 0;
}

.rank--with-thumb .rank__item:first-child {
  padding-top: 0;
}

.rank--with-thumb .rank__list {
  gap: 0; /* 帶縮圖版不需要額外 gap，因為 item 本身有 padding */
}

/* 縮圖容器 */
.rank__thumb {
  position: relative;
  width: 110px;
  height: 62px;
  border-radius: 9.6px;
  overflow: hidden;
  flex-shrink: 0;
  background: #1a1a1a;
}

.rank__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 排名數字標籤（在縮圖上）*/
.rank__badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: Tahoma, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: #FFFFFF;
  background: #999999;
  text-align: center;
  z-index: 1;
}

/* 前三名標籤顏色 */
.rank__badge--1 { background: #E42112; }
.rank__badge--2 { background: #F47B21; }
.rank__badge--3 { background: #F5BA08; }

/* 帶縮圖版的文字樣式 */
.rank--with-thumb .rank__text {
  flex: 1;
  display: flex;
  align-items: center;
  height: 62px;
  font-size: 14px;
  line-height: 1.21;
  margin-right: 0; /* 不需要為箭頭留空間 */
}

/* 帶縮圖版隱藏排名數字 */
.rank--with-thumb .rank__number {
  display: none;
}

/* ===================================== */
/* 更多按鈕 */
/* ===================================== */

.rank__more-btn {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.04);
  font-family: Tahoma, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 30px;
  color: #999999;
  text-align: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.rank__more-btn:hover {
  opacity: 0.8;
}

/* ===================================== */
/* 響應式調整（可選） */
/* ===================================== */

/* 如果需要固定寬度版本 */
.rank--fixed {
  width: 240px;
  max-width: 240px;
}

/* 如果需要完全彈性版本 */
.rank--fluid {
  max-width: none;
}