/* 片单列表页 v2 · 横版封面卡片 + 真实数据 */
/* 横版 16:9 封面卡 */
.collection-card.collection-card-wide {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: #0b1322;
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  text-decoration: none;
}
.collection-card.collection-card-wide:hover {
  transform: translateY(-3px);
  border-color: rgba(122,60,255,.45);
  box-shadow: 0 12px 32px rgba(4,10,19,.55);
}
.collection-card.collection-card-wide .collection-visual {
  position: relative;
  height: auto !important;
  aspect-ratio: 16/9 !important;
  overflow: hidden;
  background: linear-gradient(135deg,#121a2e,#040a13);
  border-radius: 14px 14px 0 0;
}
.collection-card.collection-card-wide .collection-visual:before,
.collection-card.collection-card-wide .collection-visual:after {
  display: none !important;
}
.collection-visual-wide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
}
.collection-card.collection-card-wide .collection-watermark,
.collection-card.collection-card-wide .collection-visual-label {
  display: none !important;
}
.collection-visual-wide.no-cover::after {
  content: '🎬';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px;
  opacity: .5;
}
.collection-wide-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 14px 10px;
  background: linear-gradient(180deg, transparent, rgba(4,10,19,.88));
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.collection-wide-label {
  font-size: 12px;
  font-weight: 600;
  color: #cfe0ff;
  background: rgba(4,10,19,.6);
  border: 1px solid rgba(255,255,255,.18);
  padding: 3px 10px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.collection-wide-count {
  font-size: 13px;
  font-weight: 700;
  color: #ffd94d;
  background: rgba(4,10,19,.6);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,217,77,.25);
}
.collection-card-wide .collection-info {
  padding: 12px 14px 14px;
}
.collection-card-wide .collection-title {
  font-size: 16px;
  font-weight: 700;
  color: #f2f6ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}
.collection-card-wide .collection-desc {
  font-size: 13px;
  color: #8ba0c8;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 40px;
  margin-bottom: 10px;
}
.collection-card-wide .collection-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.collection-card-wide .collection-count-text {
  font-size: 12px;
  color: #7186ad;
}
.collection-card-wide .collection-link {
  font-size: 13px;
  font-weight: 600;
  color: #7a9fff;
  transition: color .15s ease;
}
.collection-card-wide:hover .collection-link { color: #ff2d55; }

/* 网格列数适配横版卡片 */
.collection-grid.collection-grid-wide {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
}
@media (max-width: 1400px) { .collection-grid.collection-grid-wide { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 992px) { .collection-grid.collection-grid-wide { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { .collection-grid.collection-grid-wide { grid-template-columns: 1fr !important; } }

/* hero 真实数据横幅 */
.collections-hero-banner { position: relative; }
#collectionsHeroBg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #121a2e, #040a13);
  z-index: 0;
}

/* 片单列表/详情封面：统一滤镜遮罩 */
.collection-card:hover 
/* 列表/详情封面：干净海报 + 轻微去白边 */
.collection-visual {
  background: #040a13 !important;
}
.collection-visual img {
  transform: scale(1.03) !important;
  filter: none !important;
}
.collection-card:hover .collection-visual img {
  transform: scale(1.05) !important;
}
body.collections-page #collectionsHeroSection[hidden],
body.collections-page #collectionsHeroSection[data-runtime-hidden="true"] {
  display: none !important;
}
/* Keep the real collection controls reachable through older global hero rules. */
body.collections-page #collectionsHeroSection .hero-controls {
  display:flex!important;position:absolute;right:24px!important;bottom:24px!important;gap:10px;z-index:6;
}
body.collections-page #collectionsHeroSection .hero-arrow {
  display:grid!important;place-items:center;min-width:44px;min-height:44px;color:var(--text,#fff);background:var(--panel,#101522);
}
body.collections-page #collectionsHeroSection .hero-dots {
  display:flex!important;visibility:visible!important;opacity:1!important;position:absolute;left:50%!important;bottom:20px!important;transform:translateX(-50%)!important;z-index:6;gap:4px;
}
body.collections-page #collectionsHeroSection .hero-dot-btn {
  display:grid!important;place-items:center;width:44px!important;height:44px!important;min-width:44px;min-height:44px;padding:0!important;background:transparent!important;color:var(--muted,#ccc);
}
body.collections-page #collectionsHeroSection .hero-dot-btn::after {
  content:'';width:8px;height:8px;border-radius:50%;background:currentColor;
}
body.collections-page #collectionsHeroSection .hero-dot-btn.active {color:var(--accent,#fff);}
body.collections-page #collectionsHeroSection .hero-arrow:focus-visible,
body.collections-page #collectionsHeroSection .hero-dot-btn:focus-visible {outline:2px solid var(--accent,#fff);outline-offset:3px;}
body.collections-page #collectionsHeroSection.hero-single .hero-controls,
body.collections-page #collectionsHeroSection.hero-single .hero-dots {display:none!important;}
body.collections-page #collectionsHeroSection .hero-inner {
  width:min(1320px,calc(100% - 48px))!important;max-width:1320px!important;margin-inline:auto!important;padding-inline:0!important;
}
body.collections-page #collectionsHeroSection .hero-copy {width:min(640px,100%)!important;max-width:640px!important;}
body.collections-page #collectionsHeroSection .hero-title {overflow-wrap:anywhere;}
@media(max-width:560px){
  body.collections-page #collectionsHeroSection .hero-inner {width:calc(100% - 28px)!important;}
  body.collections-page #collectionsHeroSection .hero-controls {right:14px!important;gap:4px;}
}