/* topic_index.css — 專題列表頁 */

/* auto-fit + minmax（不是 auto-fill 固定 px）：容器寬度通常不會剛好是
   (260px+16px gap) 的整數倍，auto-fill 塞完整欄後，右邊剩下不夠放一張卡片的
   畸零空間會直接留白（使用者截圖回報過，一行 5 張卡右側還空出接近一張卡的寬度）。
   改用 auto-fit + minmax(260px,1fr) 讓最後一列的每張卡分掉那段畸零空間、
   平均撐寬一點，右側不再留白——跟 vod/type.html／vod/show.html 的
   .video-film-list--fill 是同一個修法（見 main.css 該 class 旁的說明）。
   <1024px 起的斷點本來就是 repeat(N,1fr) 固定欄數＋1fr，本來就不會留白，不用改。 */
.topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    padding: 4px 0 12px;
}

/* 卡片本身不用背景/邊框——縮圖上方的「資料夾標籤」裝飾（.topic-thumb-tab）才是
   視覺邊界，比照參考網站的專題卡片，不是傳統「圖+下方資訊條」的卡片盒子。 */
.topic-card { display: block; transition: transform .2s; }
.topic-card:hover { transform: translateY(-3px); }

.topic-card-link { display: block; text-decoration: none; }

.topic-thumb { position: relative; overflow: visible; margin-top: 6px; }
.topic-thumb img {
    width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
    border-radius: var(--radius); transition: transform .3s;
}
.topic-card:hover .topic-thumb img { transform: scale(1.02); }

/* 縮圖正上方一小截深色梯形/矩形裝飾，比照參考網站的「資料夾標籤」造型。
   跟下面的 img（top:6px 起）不重疊（這個 tab 佔的是 .topic-thumb 往上 6px 的區域，
   剛好落在 .topic-grid 卡片間距內），不需要疊 z-index。 */
.topic-thumb-tab {
    position: absolute; top: -6px; left: 10%; right: 10%; height: 10px;
    background: var(--bg-elevated); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

/* 常駐播放圖示（不是 hover 才出現），縮圖左上角 */
.topic-thumb-play {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(0,0,0,.55); color: #fff; font-size: 10px;
    display: flex; align-items: center; justify-content: center;
}

.topic-thumb-overlay {
    position: absolute; inset: 0; border-radius: var(--radius); overflow: hidden;
    background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 55%);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 10px 12px;
}
.topic-thumb-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }

.topic-vod-count {
    display: flex; align-items: center; gap: 4px;
    font-size: 12px; color: rgba(255,255,255,.75); font-weight: 500;
}
.topic-hot-badge {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    display: flex; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 700;
    background: var(--accent); color: #fff;
    padding: 2px 7px; border-radius: 3px;
}

/* 標題在縮圖下方獨立一行，不是疊在封面圖片裡的白字（使用者截圖回報過），
   所以用一般卡片文字色，不用白色+text-shadow 那套疊圖片專用的配色 */
.topic-name {
    margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--text-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color .15s;
}
.topic-card:hover .topic-name { color: var(--accent); }
/* 卡片縮圖裡的迷你演員頭像堆疊，比照 topic/detail.html 的 .td-cast-avatar 縮小版 */
.td-cast-avatar--sm { width: 20px; height: 20px; font-size: 11px; border-width: 1.5px; }

@media (max-width: 1024px) { .topic-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .topic-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
@media (max-width: 380px)  { .topic-grid { grid-template-columns: 1fr; } }