/* Cinema theme — home page (hero / spotlight / coming-soon / exclusive) */

/* ===== Hero ===== */
.cn-hero { position: relative; width: 100%; height: 560px; overflow: hidden; background: var(--cinema-bg); }
@media (max-width: 1024px) { .cn-hero { height: 460px; } }
@media (max-width: 640px)  { .cn-hero { height: 380px; } }
@media (max-width: 420px)  { .cn-hero { height: 340px; } }

.cn-hero-track { position: absolute; inset: 0; }
.cn-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 800ms ease; }
.cn-hero-slide.is-active { opacity: 1; z-index: 1; }
.cn-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.05); filter: blur(0); }
.cn-hero-bg::after { content: ""; position: absolute; inset: 0; background:
    linear-gradient(to right, rgba(10,14,26,0.95) 0%, rgba(10,14,26,0.6) 40%, rgba(10,14,26,0.1) 70%, transparent 100%),
    linear-gradient(to top, rgba(10,14,26,1) 0%, rgba(10,14,26,0.4) 25%, transparent 50%);
}

.cn-hero-content { position: relative; z-index: 2; max-width: var(--content-max); margin: 0 auto; height: 100%; padding: 60px var(--section-px) 80px; display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: end; }
@media (max-width: 1024px) { .cn-hero-content { grid-template-columns: 1fr; } }

.cn-hero-info { max-width: 580px; }
.cn-hero-title { font-size: 44px; font-weight: 700; margin: 0 0 8px; line-height: 1.1; letter-spacing: -0.01em; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,0.5); }
@media (max-width: 1024px) { .cn-hero-title { font-size: 36px; } }
@media (max-width: 640px)  { .cn-hero-title { font-size: 26px; } }
@media (max-width: 420px)  { .cn-hero-title { font-size: 22px; } }
.cn-hero-meta { font-size: 12px; color: var(--cinema-text-muted); margin: 0 0 14px; letter-spacing: 0.04em; }
.cn-hero-meta span { display: inline-block; padding: 1px 8px; margin-right: 6px; border: 1px solid var(--cinema-border); border-radius: 3px; }
.cn-hero-meta span.is-rating { background: rgba(255,255,255,0.1); border-color: transparent; }
.cn-hero-desc { font-size: 13px; color: var(--cinema-text); margin: 0 0 18px; max-width: 520px; line-height: 1.6; opacity: 0.9; }
.cn-hero-score { display: inline-flex; align-items: center; gap: 6px; color: var(--cinema-imdb); font-weight: 600; font-size: 13px; margin-bottom: 18px; }
.cn-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 540px) {
    .cn-hero-actions .cn-btn { padding: 8px 14px; font-size: 13px; }
    .cn-hero-actions .cn-btn-circle { width: 36px; height: 36px; padding: 0; }
    .cn-hero-meta span { font-size: 11px; padding: 1px 6px; }
    .cn-hero-desc { font-size: 12px; line-height: 1.5; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Hero right side — episode strip */
.cn-hero-side { align-self: end; }
.cn-hero-seasons { display: flex; gap: 8px; margin-bottom: 12px; }
.cn-hero-season-tab { background: rgba(255,255,255,0.06); border: 1px solid var(--cinema-border); color: var(--cinema-text-muted); padding: 6px 14px; border-radius: 999px; font-size: 12px; transition: all 180ms ease; cursor: pointer; }
.cn-hero-season-tab.is-active { background: var(--cinema-accent); color: #fff; border-color: var(--cinema-accent); }
.cn-hero-eps { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.cn-hero-eps::-webkit-scrollbar { display: none; }
.cn-hero-ep { flex: 0 0 180px; cursor: pointer; }
.cn-hero-ep-thumb { aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--cinema-bg-elevated); border: 1px solid var(--cinema-border); position: relative; }
.cn-hero-ep-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cn-hero-ep-thumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--cinema-accent); transform: scaleX(0); transform-origin: left; transition: transform 220ms ease; }
.cn-hero-ep:hover .cn-hero-ep-thumb::after { transform: scaleX(1); }
.cn-hero-ep-title { font-size: 11px; color: var(--cinema-text-muted); margin: 6px 0 0; }
.cn-hero-ep-num { color: var(--cinema-text); font-weight: 600; margin-right: 6px; }

.cn-hero-dots { position: absolute; left: 0; right: 0; bottom: 24px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.cn-hero-dot { width: 24px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.25); border: 0; padding: 0; cursor: pointer; transition: all 220ms ease; }
.cn-hero-dot.is-active { background: var(--cinema-accent); width: 32px; }

@media (max-width: 1024px) {
    .cn-hero-side { display: none; }
    .cn-hero-content { grid-template-columns: 1fr; padding-top: 40px; padding-bottom: 60px; }
}

/* ===== Spotlight ===== */
.cn-spotlight { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; padding: 0 var(--section-px); }
@media (max-width: 960px) { .cn-spotlight { grid-template-columns: 1fr; } }

.cn-spotlight-feature { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--cinema-bg-elevated); box-shadow: var(--cinema-shadow); }
.cn-spotlight-feature img { width: 100%; height: 100%; object-fit: cover; }
.cn-spotlight-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,14,26,0.95) 0%, rgba(10,14,26,0.4) 40%, transparent 70%); }
.cn-spotlight-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; z-index: 2; color: #fff; }
.cn-spotlight-title { font-size: 28px; font-weight: 700; margin: 0 0 6px; line-height: 1.1; }
@media (max-width: 640px) { .cn-spotlight-title { font-size: 22px; } }
.cn-spotlight-meta { font-size: 12px; color: var(--cinema-text-muted); margin: 0 0 14px; }
.cn-spotlight-meta span { display: inline-block; margin-right: 8px; }
.cn-spotlight-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.cn-spotlight-list { display: flex; flex-direction: column; gap: 8px; }

/* ===== Coming Soon ===== */
.cn-coming-timeline { display: flex; gap: 14px; padding: 0 var(--section-px) 8px; overflow-x: auto; scrollbar-width: none; }
.cn-coming-timeline::-webkit-scrollbar { display: none; }
.cn-coming-timeline > * { flex: 0 0 calc((100% - 14px * 5) / 6); min-width: 0; }
@media (max-width: 1280px) { .cn-coming-timeline > * { flex: 0 0 calc((100% - 14px * 4) / 5); } }
@media (max-width: 1024px) { .cn-coming-timeline > * { flex: 0 0 calc((100% - 14px * 3) / 4); } }
@media (max-width: 768px)  { .cn-coming-timeline > * { flex: 0 0 calc((100% - 14px * 2) / 3); } }
@media (max-width: 540px)  { .cn-coming-timeline > * { flex: 0 0 calc((100% - 14px) / 2); } }

.cn-coming-marker { font-size: 11px; color: var(--cinema-text-muted); margin: 0 0 4px; padding: 2px 0 6px; border-bottom: 1px solid var(--cinema-border); position: relative; letter-spacing: 0.06em; text-transform: uppercase; }
.cn-coming-marker::before { content: ""; position: absolute; bottom: -4px; left: 0; width: 7px; height: 7px; background: var(--cinema-accent); border-radius: 50%; }

/* ===== Generic grid (top_imdb / much_like / year) ===== */
.cn-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; padding: 8px 0; }
@media (max-width: 1280px) { .cn-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .cn-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .cn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 540px)  { .cn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cn-pagination { padding: 24px 0; display: flex; justify-content: center; }
.cn-pagination ul, .cn-pagination .pagination { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.cn-pagination li, .cn-pagination .page-item { display: inline-block; }
.cn-pagination a, .cn-pagination span { display: inline-block; padding: 8px 14px; border-radius: 6px; background: rgba(255,255,255,0.05); border: 1px solid var(--cinema-border); color: var(--cinema-text-muted); font-size: 13px; transition: all 160ms ease; text-decoration: none; }
.cn-pagination a:hover { background: rgba(255,255,255,0.1); color: var(--cinema-text); }
.cn-pagination .active span, .cn-pagination li.active span, .cn-pagination .page-item.active span { background: var(--cinema-accent); color: #fff; border-color: var(--cinema-accent); }
.cn-pagination .disabled span { opacity: 0.4; }

/* ===== Footer ===== */
.cn-footer { padding: 40px var(--section-px); margin-top: 60px; border-top: 1px solid var(--cinema-border); color: var(--cinema-text-muted); font-size: 12px; }
.cn-footer-inner { max-width: var(--content-max); margin: 0 auto; }
.cn-footer a { color: var(--cinema-text); }
.cn-footer-domain { font-weight: 600; color: var(--cinema-text); margin-bottom: 8px; display: block; }

/* Mute legacy notice styles on home */
body.home-cinema .notice { padding-top: 0 !important; }
body.home-cinema p { background: transparent; }