/* cards.css – 首页所有卡片、轮播、快捷入口等组件 */

/* ========== Hero 轮播 ========== */
.hero-carousel {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track { scrollbar-width: none; }

.carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
  aspect-ratio: 16 / 5;
  min-height: 280px;
  background: #e0e0e0;
}
.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carousel-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-lg) var(--space-md);
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: white;
}
.carousel-info .carousel-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-xs);
}
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm);
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0,0,0,0.2);
  cursor: pointer;
}
.carousel-dot.active { background: var(--color-accent); width: 24px; border-radius: 4px; }

/* ========== 快捷入口 ========== */
.quick-entries {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.entry-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg) var(--space-md);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}
.entry-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
}
.entry-card .entry-icon {
  width: clamp(40px, 8vw, 56px);
  height: clamp(40px, 8vw, 56px);
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-soft);
  border-radius: 50%;
  color: var(--color-accent);
}
.entry-card .entry-name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
}

/* ========== 正在热播：横向滚动中竖版卡片 ========== */
.hot-playing .vod-card {
  width: clamp(140px, 30vw, 180px);
}

/* ========== 热门推荐（横版卡片） ========== */
.hot-tabs {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-sm);
}
.hot-tab {
  padding: 0.4em 1em;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid transparent;
}
.hot-tab.active {
  background: var(--color-accent);
  color: white;
  border-color: var(--color-accent);
}
.hot-tab:hover:not(.active) {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.hot-recommend .hot-panel {
  display: none;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.hot-recommend .hot-panel.active {
  display: grid;
}
@media (min-width: 768px) {
  .hot-recommend .hot-panel {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 横版卡片本体 */
.vod-card-horizon {
  display: flex;
  gap: var(--space-md);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}
.vod-card-horizon:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(37,99,235,0.3);
}
.h-card-poster {
  width: clamp(100px, 25vw, 160px);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: #eee;
}
.h-card-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.h-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-xs);
}
.h-card-info .card-title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  line-clamp: 1;
}
.h-card-info .card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.h-card-info .card-blurb {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-clamp: 2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ========== 竖版卡片核心样式（让元数据显式可见） ========== */
.vod-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
  /* 确保文字颜色默认可见 */
  color: var(--color-text);
}
.vod-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(37,99,235,0.3);
}
/* 海报区域 */
.vod-card .card-poster {
  position: relative;
  aspect-ratio: 2/3;
  overflow: hidden;
 background: #e0e0e0;   
}
.vod-card .card-poster img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.vod-card:hover .card-poster img {
  transform: scale(1.03);
}
/* 播放图标（悬停时显现） */
.vod-card .card-play-icon {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.vod-card:hover .card-play-icon {
  opacity: 1;
}
/* 信息区（确保正常显示） */
.vod-card .card-info {
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* 标题 */
.vod-card .card-title {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 元数据行（评分、年份） */
.vod-card .card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.vod-card .card-meta .rating {
  color: #e67e22;
  font-weight: 600;
}
.vod-card .card-meta .year {
  color: var(--color-text-muted);
}
/* 标签容器 */
.vod-card .card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.vod-card .card-tags .tag {
  font-size: var(--text-xs);
  padding: 2px 6px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  border-radius: 4px;
  white-space: nowrap;
}

/* ========== 分类视频网格（沿用 .grid-ps + .vod-card） ========== */
.vod-grid .vod-card {
  /* 网格已由 .grid-ps 控制 */
}

/* ========== 专题卡片 ========== */
.topic-card {
  display: flex;
  flex-direction: column;
  width: clamp(200px, 40vw, 280px);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}
.topic-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(37,99,235,0.2);
}
.topic-poster {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e0e0e0;
}
.topic-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.topic-card:hover .topic-poster img {
  transform: scale(1.04);
}
.topic-info {
  padding: var(--space-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topic-title {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topic-count {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.grid-fluid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(clamp(160px, 28vw, 200px), 1fr));
}
.grid-fluid .vod-card {
  width: auto;  
}
/* 主演折叠 */
.actor-links-wrapper {
  position: relative;
}
.actor-links-inner {
  max-height: 3em;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.actor-links-inner.expanded {
  max-height: none;
}
.actor-more {
  background: none;
  border: 0;
  color: var(--color-accent);
  font-size: var(--text-xs);
  cursor: pointer;
  margin-top: 4px;
  padding: 0;
}