/*
 * 排行榜頁面樣式 (tag: 1920w all)
 * 文件: rank.css
 * 基於 Figma 設計：1920w all - 使用空容器作間隔
 *
 * 滾動邏輯:
 * - HEADER: 固定頂部
 * - TYPES: 固定左側（榜單選擇器）
 * - CONTENT + FOOTER: 可滾動
 */

/* ========================================
   頁面基礎
   ======================================== */
.page-rank {
    background-color: var(--color-bg-primary, #141414);
    min-height: 100vh;
}

/* ========================================
   HEADER: 固定頂部
   - position: fixed (0, 0)
   - width: 100%
   - height: 64px
   ======================================== */
.rank-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
    z-index: 1000;
    background-color: var(--color-bg-primary, #141414);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}

/* ========================================
   TYPES: 固定左側
   - position: fixed (250px, 100px)
   - width: 180px, height: 240px
   ======================================== */
.rank-types {
    position: fixed;
    left: max(20px, calc((100vw - 1920px) / 2 + 250px));  /* 最小 20px，視窗越小越靠左 */
    top: 100px;
    width: 180px;
    height: 240px;
    flex-shrink: 0;
    background-color: var(--color-bg-secondary, #222222);
    z-index: 100;
}

.rank-types__list {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.rank-types__item {
    position: relative;
    width: 180px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.rank-types__item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.rank-types__item--active {
    background-color: rgba(255, 255, 255, 0.1);
}

.rank-types__marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 100%;
    background-color: transparent;
    transition: background-color 0.3s ease;
}

.rank-types__item--active .rank-types__marker {
    background-color: var(--color-accent, #E42112);
}

.rank-types__text {
    color: var(--color-text-primary, #ffffff);
    font-size: 16px;
    font-weight: 400;
}

/* ========================================
   可滾動容器: RANKS + FOOTER
   ======================================== */
.rank-container {
    width: 1920px;
    max-width: 100%;
    margin: 0 auto;
    padding-top: 64px;
    min-height: 100vh;
}

.rank-scroll-wrapper {
    margin-left: max(230px, calc((100vw - 1920px) / 2 + 460px));
    /* 最小 230px (20 + 180 + 30)，視窗越小越靠左 */
}

/* ========================================
   空容器: HEADER 到 RANKS (36px)
   ======================================== */
.rank-spacer--header {
    width: 100%;
    height: 36px;
    flex-shrink: 0;
}

/* ========================================
   CONTENT: 主內容容器（可切換）
   - max-width: 1200px
   - gap: 20px
   - 使用 Grid 自動換行佈局（每列 380px，不夠時自動換行）
   ======================================== */
.rank-content {
    max-width: 1200px;
    width: 100%;
    height: auto;
    min-height: 948px;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, 380px);
    gap: 20px;
    justify-content: center;  /* 居中對齊 */
    position: relative;
}

/* 完整榜單頁面（電影/電視劇/動漫）移除寬度限制，讓內容自然填滿 */
.rank-content--movie,
.rank-content--tv,
.rank-content--anime {
    max-width: none;
    display: block;  /* 改用 block 佈局，不使用 grid */
}

/* ========================================
   排行榜區塊
   - Grid 子元素，自動填充 380px 寬度
   - 標題高: 57px
   - 列表高: 868px
   ======================================== */
.rank-section {
    width: 380px;
    display: flex;
    flex-direction: column;
}

/* 標題區 */
.rank-section__title {
    height: 57px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}

.rank-section__title h2 {
    margin: 0;
    padding-left: 0;
    font-size: 26px;
    font-weight: 400;
    line-height: 0.96em;
    color: var(--color-text-primary, #ffffff);
}

/* 分頁指示器 */
.rank-section__tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 0;
}

.rank-section__tab {
    font-size: 14px;
    line-height: 0.86em;
    color: var(--color-text-secondary, #999999);
    cursor: pointer;
    transition: color 0.3s ease;
}

.rank-section__tab--active {
    color: var(--color-accent, #E42112);
    cursor: default;  /* 已選中不顯示手指 */
    pointer-events: none;  /* 已選中不可點擊 */
}

.rank-section__tab:hover {
    color: var(--color-accent, #E42112);
}

.rank-section__separator {
    font-size: 13px;
    line-height: 1.54em;
    color: rgba(255, 255, 255, 0.5);
}

/* 列表區 */
.rank-section__list {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    padding: 20px 0 0 0;
    transition: opacity 0.3s ease;  /* AJAX 切換時的淡入淡出效果 */
    /* 不設置固定高度，讓內容自然撐開（固定 10 個項目高度約 868px）*/
    /* 不設置 overflow-y，滾動由外層 rank-scroll-wrapper 控制 */
}

/* Loading 狀態 */
.rank-section__list--loading {
    opacity: 0.5;
    pointer-events: none;
}

/* ========================================
   空容器: RANKS 到 FOOTER (40px)
   ======================================== */
.rank-spacer--footer {
    width: 100%;
    height: 40px;
    flex-shrink: 0;
}

/* ========================================
   FOOTER: 頁尾
   - width: 100%
   - min-height: 221px
   ======================================== */
.rank-footer {
    width: 100%;
    min-height: 221px;
    background-color: var(--color-bg-primary, #141414);
    position: relative;
    margin-left: min(-230px, calc(-1 * (100vw - 1920px) / 2 - 460px));
    /* 抵消 scroll-wrapper 的 margin-left */
    padding-left: max(230px, calc((100vw - 1920px) / 2 + 460px));
}

/* ========================================
   排行榜項目
   ======================================== */
/* TOP 1-3 特殊樣式（高度 101px）*/
.rank-item--top {
    display: flex;
    align-items: center;
    width: 380px;
    height: 101px;
    gap: 0;
    padding: 0;
    margin-bottom: 40px;
    cursor: pointer;
    text-decoration: none;  /* 移除 <a> 標籤的下劃線 */
}

/* 左側：圖片 + 排名徽章 */
.rank-item--top .rank-item__details {
    position: relative;
    width: 180px;
    height: 101px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 0 8px 8px 0;  /* 配合圖片圓角 */
}

.rank-item--top .rank-item__pic {
    width: 100%;
    height: 100%;
    border-radius: 0 8px 8px 0;  /* 左上 右上 右下 左下 - 只有右側有圓角 */
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.rank-item--top:hover .rank-item__pic {
    transform: scale(1.1);
}

.rank-item--top .rank-item__badge {
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 2em;
    color: #ffffff;
}

.rank-item--top .rank-item__badge--1 {
    background-color: #E42112; /* 紅色 */
}

.rank-item--top .rank-item__badge--2 {
    background-color: #F47B21; /* 橙色 */
}

.rank-item--top .rank-item__badge--3 {
    background-color: #F5BA08; /* 黃色 */
}

/* 右側：標題區 */
.rank-item--top .rank-item__term {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-left: 10px;
    min-width: 0;
    max-width: 100%;  /* 防止溢出 */
}

/* TOP 1-3 的 title - 正常流式佈局 */
.rank-item--top .rank-item__title {
    display: block;  /* 確保是塊級元素 */
    min-width: 0;    /* Flex 子元素必須設置，才能正確截斷 */
    color: var(--color-text-primary, #ffffff);
    font-family: Tahoma, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.43em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.3s ease;  /* 添加顏色過渡效果 */
}

.rank-item--top:hover .rank-item__title {
    color: var(--color-accent, #E42112);
}

/* TOP 1-3 的 subtitle - 正常流式佈局 */
.rank-item--top .rank-item__subtitle {
    display: block;  /* 確保是塊級元素 */
    min-width: 0;    /* Flex 子元素必須設置，才能正確截斷 */
    color: var(--color-text-secondary, #999999);
    font-family: Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.17em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;  /* 不阻擋點擊事件 */
}

/* 普通項目（第 4-10 名，高度 35px）*/
.rank-item {
    position: relative;
    display: flex;
    align-items: center;  /* 垂直置中 */
    width: 380px;
    height: 35px;
    gap: 0;
    padding: 0;
    margin-bottom: 20px;
    cursor: pointer;
    text-decoration: none;  /* 移除 <a> 標籤的下劃線 */
}

/* 4-10 名的排名數字 - Flex 佈局 */
.rank-item .rank-item__num {
    flex-shrink: 0;
    width: 8.02px;
    font-family: Tahoma, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1em;
    color: #CCCCCC;
}

/* 4-10 名的 title - Flex 佈局 */
.rank-item .rank-item__title {
    flex: 1;
    margin-left: 17px;  /* 25px - 8.02px = 16.98px */
    max-width: 260px;
    font-family: Tahoma, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1em;
    color: #CCCCCC;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.3s ease;  /* 添加顏色過渡效果 */
}

.rank-item:hover .rank-item__title {
    color: var(--color-accent, #E42112);
}

/* 4-10 名的趨勢箭頭 - 使用 ::before 偽元素（參考 card_rank）*/
.rank-item .rank-item__icon {
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    font-size: 14px;
    line-height: 1;
}

.rank-item .rank-item__icon::before {
    content: '\2191'; /* ↑ Unicode 向上箭頭（預設顯示向上趨勢）*/
    color: #71CE3A; /* 綠色 */
}

/* 如需支援不同趨勢，可添加 modifier */
.rank-item__icon--up::before {
    content: '\2191'; /* ↑ 向上趨勢 */
    color: #71CE3A; /* 綠色 */
}

.rank-item__icon--down::before {
    content: '\2193'; /* ↓ 向下趨勢 */
    color: #E42112; /* 紅色 */
}

.rank-item__icon--flat::before {
    content: '\2014'; /* — 持平 */
    color: #BBBBBB; /* 灰色 */
}

/* 完整榜單連結 */
.rank-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 380px;
    height: auto;
    padding: 21.5px 0;
    cursor: pointer;
}

.rank-more__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    height: 17px;
    font-family: Tahoma, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.43em;
    color: var(--color-text-secondary, #999999);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color 0.3s ease;
}

.rank-more__link:hover {
    color: var(--color-accent, #E42112);
}

.rank-more__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 22px;
    line-height: 1;
}

.rank-more__arrow::before {
    content: '\203A'; /* › Unicode 右單尖括號 */
    color: #444444; /* 深灰色（來自 Figma）*/
}

/* ========================================
   舊的響應式斷點已移除，改用平滑的 calc() 計算
   - 不再使用固定斷點 (1440px, 1024px)
   - 使用 max() + calc() 實現平滑縮放
   ======================================== */

/* ========================================
   type內容區塊 - 完整排行榜頁面（100筆）
   ======================================== */
.rank-type-section {
    width: 100%;
    margin: 0 auto;
    padding: 20px 0;
}

/* 標題區 */
.rank-type-section__title {
    font-family: Tahoma, sans-serif;
    font-size: 26px;
    font-weight: 400;
    line-height: 0.96em;
    color: var(--color-text-primary, #ffffff);
    margin: 0 0 17px 0;
    padding: 0;
}

/* 篩選標籤區 */
.rank-type-section__filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    height: 29.73px;
    margin-bottom: 30px;
}

.filter-tag {
    font-family: Tahoma, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3125em;
    color: var(--color-text-primary, #ffffff);
    text-decoration: none;
    padding: 0;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-tag:hover {
    color: var(--color-accent, #E42112);
}

/* 選中狀態 - 紅色文字 + 紅色底線 */
.filter-tag--active {
    color: var(--color-accent, #E42112);
    border-bottom: 2px solid var(--color-accent, #E42112);
    padding-bottom: 0;
}

.filter-separator {
    font-family: Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.75em;
    color: var(--color-text-secondary, #999999);
    margin: 0 10px;
}

/* 排行榜列表 */
.rank-type-section__list {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1180px;
    margin: 0;
    transition: opacity 0.3s ease; /* AJAX 加載過渡效果 */
}

/* 排行榜項目（複用現有樣式，擴展顯示資訊）*/
.rank-type-section__list .rank-item {
    display: flex;
    align-items: center;
    width: 100%;
    height: 60px;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.rank-type-section__list .rank-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.rank-type-section__list .rank-item__num {
    flex-shrink: 0;
    width: 24px;
    font-family: Tahoma, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1em;
    color: var(--color-accent, #E42112);
    text-align: center;
}

.rank-type-section__list .rank-item__link {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    min-width: 0;
}

.rank-type-section__list .rank-item__pic {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
}

.rank-type-section__list .rank-item__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.rank-type-section__list .rank-item__name {
    font-family: Tahoma, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2em;
    color: var(--color-text-primary, #ffffff);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.rank-type-section__list .rank-item:hover .rank-item__name {
    color: var(--color-accent, #E42112);
}

.rank-type-section__list .rank-item__meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rank-type-section__list .rank-item__score {
    font-family: Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--color-accent, #E42112);
}

.rank-type-section__list .rank-item__remarks {
    font-family: Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-secondary, #999999);
}

/* ========================================
   CSS 變數（備用）
   ======================================== */
:root {
    --rank-bg-primary: #141414;
    --rank-bg-secondary: #222222;
    --rank-accent: #E42112;
    --rank-text-primary: #ffffff;
    --rank-text-secondary: #999999;
    --rank-white-10: rgba(255, 255, 255, 0.1);
}

/* ========================================
   rank_order_item - 排行榜項目組件（100筆版）
   ======================================== */
.rank-order-item {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 1180px;
    min-width: 790px;  /* 最小寬度限制，不再縮小 */
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    cursor: pointer; /* 可點擊游標 */
    transition: background-color 0.3s ease;
}

.rank-order-item:hover {
    background-color: rgba(255, 255, 255, 0.03); /* 微微的 hover 效果 */
}

/* 序號區塊（預設：深灰色）*/
.rank-order-item__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 101px;
    background-color: #222222; /* 第 4+ 名預設顏色 */
    border-radius: 9.6px 0 0 9.6px;
    flex-shrink: 0;
    position: relative;
}

/* 第 1 名：紅色 */
.rank-order-item__number--1 {
    background-color: #E42112;
}

/* 第 2 名：橘色 */
.rank-order-item__number--2 {
    background-color: #F47B21;
}

/* 第 3 名：黃色 */
.rank-order-item__number--3 {
    background-color: #F5BA08;
}

.rank-order-item__number-text {
    font-family: Tahoma, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 1;
}

/* 封面圖 */
.rank-order-item__poster {
    width: 180px;
    height: 101px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 0 9.6px 9.6px 0;
    position: relative;
}

.rank-order-item__poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.rank-order-item__poster:hover .rank-order-item__poster-img {
    transform: scale(1.05);
}

/* 影片資訊 */
.rank-order-item__info {
    display: flex;
    flex-direction: column;
    justify-content: center; /* 上下置中 */
    align-items: flex-start; /* 內容置左 */
    gap: 0;
    width: 370px;
    padding: 0 33px 0 10px; /* padding 在容器上 */
    flex-shrink: 2; /* 2:1 比例壓縮（相對於 META 的 1）*/
    min-width: 0; /* 允許 flex 子項縮小到內容以下 */
    position: relative;
}

/* 標題 */
.rank-order-item__title {
    margin-bottom: 0;
    width: 100%; /* 跟隨父容器寬度 */
    min-width: 0; /* 允許縮小 */
}

.rank-order-item__title-link {
    font-family: Tahoma, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2857em;
    color: var(--color-text-primary, #ffffff);
    text-decoration: none;
    transition: color 0.3s ease;
    /* 單行截斷 */
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rank-order-item__title-link:hover {
    color: var(--color-accent, #E42112);
}

/* 主演 */
.rank-order-item__actors {
    display: flex;
    align-items: center;
    gap: 3.8px;
    margin-top: -0.25px;
    width: 100%; /* 跟隨父容器寬度 */
    min-width: 0; /* 允許 flex 子項縮小 */
}

.rank-order-item__label {
    font-family: Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--color-text-secondary, #999999);
    flex-shrink: 0; /* 標籤不縮小 */
}

.rank-order-item__actor {
    font-family: Tahoma, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2857em;
    color: var(--color-text-secondary, #999999);
    text-decoration: none;
    padding-right: 2.95px;
    transition: color 0.3s ease;
    /* 單行截斷 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0; /* 允許縮小 */
}

.rank-order-item__actor:hover {
    color: var(--color-text-primary, #ffffff);
}

.rank-order-item__separator {
    font-family: Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--color-text-secondary, #999999);
}

/* 類型 */
.rank-order-item__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 268px;
    flex-shrink: 1; /* 1:2 比例壓縮（相對於 INFO 的 2）*/
    min-width: 0; /* 允許縮小 */
    position: relative;
}

.rank-order-item__meta-link {
    font-family: Tahoma, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2857em;
    color: var(--color-text-primary, #ffffff);
    text-decoration: none;
    padding-right: 4.38px;
    transition: color 0.3s ease;
    /* 文字溢出處理 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%; /* 不超過父容器 */
}

.rank-order-item__meta-link:hover {
    color: var(--color-accent, #E42112);
}

/* 地區 */
.rank-order-item__area {
    display: flex;
    align-items: center;
    width: 190px;
    flex-shrink: 0;
    position: relative;
}

.rank-order-item__area-link {
    font-family: Tahoma, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2857em;
    color: var(--color-text-primary, #ffffff);
    text-decoration: none;
    transition: color 0.3s ease;
}

.rank-order-item__area-link:hover {
    color: var(--color-accent, #E42112);
}

/* 上升位數 */
.rank-order-item__trend {
    width: 89px;
    height: 101px;
    flex-shrink: 0;
    position: relative; /* 絕對定位容器 */
}

/* 箭頭位置（垂直居中偏上）*/
.rank-order-item__trend .rank__arrow {
    position: absolute;
    left: 0;
    top: 45.22px;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    width: 13px;
    height: 13px;
}

/* 確保 ::before 偽元素正常顯示 */
.rank-order-item__trend .rank__arrow::before {
    display: block;
}

/* 文字容器（右對齊）*/
.rank-order-item__trend-text {
    position: absolute;
    right: 0;
    top: 0;
    width: 64px;
    height: 101px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-family: Tahoma, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    white-space: nowrap;
}