/* topic_detail.css — 專題詳細頁 */
.td-hot-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; background: var(--fill); color: #fff;
  font-size: 12px; font-weight: 700; border-radius: 3px; margin-bottom: 8px;
}

.td-hero {
  display: flex; gap: 24px; overflow: hidden;
  min-height: 260px; background: none;
}

.td-hero-slides {
  width: 380px; flex-shrink: 0; position: relative; overflow: hidden;
  background: var(--bg-elevated); border-radius: var(--radius);
  aspect-ratio: 16/9;
}
.td-slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease;
}
.td-slide.is-active { opacity: 1; }
.td-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

.td-hero-body {
  flex: 1; min-width: 0; padding: 4px 0;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 12px;
}
.td-hero-title { font-size: 22px; font-weight: 700; color: var(--text-1); line-height: 1.4; }
.td-hero-sub { font-size: 13px; color: var(--text-3); }
/* 演員縮圖堆疊（.td-cast-stack／.td-cast-avatar）共用樣式移到 main.css，
   因為 topic/index.html 的卡片縮圖裡也用到同一組 class，但那個頁面沒有載入
   topic_detail.css，見 main.css 對應區塊。這裡只留 topic/detail.html 專屬的
   按讚/分享/描述等樣式。 */
.td-hero-icons { display: flex; align-items: center; gap: 18px; }
.td-hero-like {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--text-2); transition: color .15s;
}
.td-hero-like:hover, .td-hero-like.is-liked { color: var(--accent); }
.td-hero-share { color: var(--text-3); font-size: 16px; transition: color .15s; }
.td-hero-share:hover { color: var(--accent); }
.td-hero-blurb {
  font-size: 14px; color: var(--text-2); line-height: 1.85;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.td-hero-count { font-size: 13px; color: var(--text-3); }

@media (max-width: 767px) {
  .td-hero { flex-direction: column; min-height: 0; gap: 14px; }
  .td-hero-slides { width: 100%; }
  .td-hero-title { font-size: 17px; }
  .td-hero-blurb { -webkit-line-clamp: 3; font-size: 13px; }
}
