/* ========================================
   Dual Style for MacCMS MXPRO Template
   Style 1: Vertical Poster Horizontal Scroll
   Style 2: Landscape Poster Card Grid (横版海报卡片网格)
   
   响应式断点：
   - 电视机/大屏PC: ≥1920px → 6~8列
   - 笔记本/桌面: 1200px~1919px → 4~5列
   - iPad横屏: 992px~1199px → 4列
   - iPad竖屏/大手机: 768px~991px → 3列
   - 手机横屏: 576px~767px → 3列
   - 手机竖屏: ≤575px → 2列
   
   海报比例：横版 16:9 (padding-top: 56.25%)
   ======================================== */

/* ============================================
   Style 1: Vertical Poster Horizontal Scroll
   ============================================ */
.module.dual-style-scroll { position: relative; }
.module.dual-style-scroll .module-main { position: relative; overflow: hidden; }
.module.dual-style-scroll .scroll-content {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 10px;
}
.module.dual-style-scroll .scroll-content::-webkit-scrollbar { display: none; }

/* Force uniform poster size in scroll mode */
.module.dual-style-scroll .scroll-content .module-poster-item {
    flex: 0 0 auto !important;
    width: 200px !important;
    display: inline-block !important;
    vertical-align: top;
}
.module.dual-style-scroll .scroll-content .module-item-cover {
    width: 100% !important;
    height: 0 !important;
    padding-top: 150% !important;
    position: relative !important;
    overflow: hidden;
    border-radius: 8px;
}
.module.dual-style-scroll .scroll-content .module-item-pic,
.module.dual-style-scroll .scroll-content .module-item-pic img {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
}
.module.dual-style-scroll .scroll-content .module-poster-item-info {
    margin-top: 8px !important; width: 100%;
}
.module.dual-style-scroll .scroll-content .module-poster-item-title {
    font-size: 13px !important; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Arrow buttons */
.scroll-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 80px; background: rgba(0,0,0,0.6); color: #fff;
    border: none; cursor: pointer; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; transition: background .3s, opacity .3s;
    opacity: 1; border-radius: 4px;
}
.module.dual-style-scroll:hover .scroll-arrow { opacity: 1; }
.scroll-arrow:hover { background: rgba(0,0,0,0.85); }
.scroll-arrow-left { left: 0; border-radius: 0 4px 4px 0; }
.scroll-arrow-right { right: 0; border-radius: 4px 0 0 4px; }
.scroll-arrow svg { width: 20px; height: 20px; fill: currentColor; }


/* ============================================
   Style 2: Landscape Poster Card Grid (横版海报卡片)
   横版海报在上 + 标题/主演/简介在下
   固定16:9宽高比，object-fit:cover统一裁剪为横版
   ============================================ */

/* --- Grid container: 强制生效，覆盖所有父模板样式 --- */
.module.dual-style-card { position: relative; }
.module.dual-style-card .module-main {
    position: relative;
    width: 100%;
    /* 确保不受父模板flex影响 */
    display: block !important;
}
.module.dual-style-card .card-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--card-cols, 4), 1fr) !important;
    gap: var(--card-gap, 14px);
    padding: 0;
    margin: 0;
    width: 100%;
    /* 覆盖父模板的 inline-block / flex 等布局 */
}

/* --- Card item: block layout, reset any parent interference --- */
.vod-card-item {
    display: block !important;
    background: var(--card-bg, #1a1a2e);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,.08);
    transition: transform .25s ease, outline .2s ease;
    outline: 2px solid transparent;
    outline-offset: 2px;
    text-decoration: none;
    color: inherit;
    /* 重置父模板可能施加的inline-block/margin等 */
    width: 100% !important;
    margin: 0 !important;
    font-size: initial !important;
}

.vod-card-item:hover,
.vod-card-item:focus-visible {
    transform: scale(1.05);
    outline-color: var(--card-accent, #ff6600) !important;
    z-index: 5;
    position: relative;
}

/* TV remote focus support */
.vod-card-item:focus {
    transform: scale(1.05);
    outline: 3px solid var(--card-accent, #ff6600) !important;
    z-index: 5;
    position: relative;
}

/* --- Poster: 横版 16:9 比例, object-fit cover 强制裁剪为横版 --- */
.vod-card-poster {
    position: relative;
    width: 100%;
    /* 横版 16:9 = padding-top: 56.25% */
    height: 0;
    padding-top: 56.25%;
    overflow: hidden;
    background: #111;
}

.vod-card-poster img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;  /* 强制裁剪填充为横版，统一尺寸 */
    display: block;
    transition: transform .35s ease;
}

.vod-card-item:hover .vod-card-poster img {
    transform: scale(1.06);
}

/* Type tag (电视剧/电影) - top left */
.vod-card-type {
    position: absolute;
    top: 6px; left: 6px;
    background: rgba(0,0,0,0.6);
    color: #ddd;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 3px;
    z-index: 3;
    line-height: 1.4;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    letter-spacing: .5px;
}

/* Status/score badge - top right */
.vod-card-note {
    position: absolute;
    top: 6px; right: 6px;
    background: var(--card-accent, #ff6600);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 3px;
    z-index: 3;
    line-height: 1.3;
    word-break: break-all;
}

/* --- Info body below poster --- */
.vod-card-body {
    padding: 10px 10px 12px;
}

.vod-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--card-title-color, #eee);
    line-height: 1.35;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
}

/* Actor/starring row */
.vod-card-actor {
    font-size: 12px;
    color: var(--card-actor-color, #aaa);
    line-height: 1.4;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.actor-label {
    color: var(--card-accent, #ff6600);
    font-weight: 500;
    margin-right: 3px;
    font-size: 11px;
}

/* Brief description */
.vod-card-desc {
    font-size: 12px;
    color: var(--card-desc-color, #888);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ============================================
   Responsive: 全设备自适应
   ============================================ */

/* --- 电视机/大屏PC: ≥1920px --- 6~8列 */
@media (min-width: 1920px) {
    .module.dual-style-card .card-grid {
        grid-template-columns: repeat(var(--card-cols-tv, 6), 1fr) !important;
        gap: 18px !important;
    }
    .vod-card-body { padding: 12px 12px 14px; }
    .vod-card-title { font-size: 15px; }
    .vod-card-actor { font-size: 13px; }
    .vod-card-desc { font-size: 13px; -webkit-line-clamp: 3; }
    .vod-card-type,
    .vod-card-note { font-size: 12px; }
    .vod-card-item:focus { transform: scale(1.08); }
}

/* --- 笔记本/桌面: 1200px~1919px --- 由 --card-cols 控制（默认4~5） */

/* --- iPad横屏: 992px~1199px --- 4列 */
@media (max-width: 1199px) and (min-width: 992px) {
    .module.dual-style-card .card-grid {
        grid-template-columns: repeat(var(--card-cols-tablet, 4), 1fr) !important;
        gap: 14px !important;
    }
    .vod-card-title { font-size: 14px; }
    .module.dual-style-scroll .scroll-content .module-poster-item { width: 168px !important; }
}

/* --- iPad竖屏/大手机: 768px~991px --- 3列 */
@media (max-width: 991px) and (min-width: 768px) {
    .module.dual-style-card .card-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }
    .vod-card-title { font-size: 13px; margin-bottom: 4px; }
    .vod-card-body { padding: 8px 8px 10px; }
}

/* --- 手机横屏: 576px~767px --- 3列 */
@media (max-width: 767px) and (min-width: 576px) {
    .module.dual-style-card .card-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }
    .vod-card-title { font-size: 12px; margin-bottom: 3px; }
    .vod-card-desc { font-size: 11px; -webkit-line-clamp: 1; }
    .vod-card-body { padding: 6px 6px 8px; }
    .module.dual-style-scroll .scroll-content .module-poster-item { width: 142px !important; }
    .scroll-arrow { opacity: 1 !important; }
}

/* --- 手机竖屏: ≤575px --- 2列 */
@media (max-width: 575px) {
    .module.dual-style-card .card-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .vod-card-title { font-size: 12px; margin-bottom: 2px; }
    .vod-card-desc { font-size: 10px; -webkit-line-clamp: 1; }
    .vod-card-body { padding: 6px 5px 7px; }
    .module.dual-style-scroll .scroll-content .module-poster-item { width: 128px !important; }
    .scroll-arrow { opacity: 1 !important; }
}


/* ============================================
   Color Schemes (6种配色方案)
   ============================================ */
.module.dual-style-card.color-blue   { --card-accent:#0099FF; --card-bg:#141e30; --card-title-color:#e0f0ff; --card-actor-color:#8bb8e0; --card-desc-color:#6a9bc0; }
.module.dual-style-card.color-green  { --card-accent:#00CC66; --card-bg:#142620; --card-title-color:#e0ffe8; --card-actor-color:#80d8a8; --card-desc-color:#5aa87c; }
.module.dual-style-card.color-red    { --card-accent:#00e5ff; --card-bg:#0a1a22; --card-title-color:#d0f4ff; --card-actor-color:#68c8e8; --card-desc-color:#48a8c8; }
.module.dual-style-card.color-yellow { --card-accent:#00d4ff; --card-bg:#101820; --card-title-color:#c8eeff; --card-actor-color:#58b8d8; --card-desc-color:#3898b8; }
.module.dual-style-card.color-purple { --card-accent:#AA55FF; --card-bg:#20162e; --card-title-color:#f0e0ff; --card-actor-color:#b890d8; --card-desc-color:#9670b8; }
.module.dual-style-card.color-orange { --card-accent:#00c8ff; --card-bg:#08141c; --card-title-color:#bce8ff; --card-actor-color:#48a8d0; --card-desc-color:#2890b8; }


/* ============================================
   列数快捷覆盖类（后台传参，强制 !important）
   ============================================ */
.module.dual-style-card.cols-4 .card-grid { grid-template-columns: repeat(4, 1fr) !important; }
.module.dual-style-card.cols-5 .card-grid { grid-template-columns: repeat(5, 1fr) !important; }
.module.dual-style-card.cols-6 .card-grid { grid-template-columns: repeat(6, 1fr) !important; }
.module.dual-style-card.cols-7 .card-grid { grid-template-columns: repeat(7, 1fr) !important; }
.module.dual-style-card.cols-8 .card-grid { grid-template-columns: repeat(8, 1fr) !important; }

/* ===== 3QYYDS 赛博微调 · 与 mac111开发 3qyyds_assets 同源配色 ===== */
::selection{ background:rgba(0,229,255,.32); color:#fff; }
*{ scrollbar-width:thin; scrollbar-color:#00e5ff #0f1626; }
*::-webkit-scrollbar{ width:9px;height:9px; }
*::-webkit-scrollbar-track{ background:#0f1626; }
*::-webkit-scrollbar-thumb{ background:linear-gradient(#00e5ff,#b14cff); border-radius:999px; }
*::-webkit-scrollbar-thumb:hover{ background:#00e5ff; }
a:hover{ text-shadow:0 0 8px rgba(0,229,255,.35); }
.btn:hover,.on,.active,.cur,.current,
.play-btn:hover,.search-btn:hover,.submit:hover{
  box-shadow:0 0 28px rgba(0,229,255,.55),0 0 56px rgba(177,76,255,.40),0 0 84px rgba(177,76,255,.20);
}
.qy-divider,hr.divider{ height:1px;border:0;
  background:linear-gradient(120deg, rgba(0,229,255,.16) 0%, rgba(177,76,255,.16) 100%);
  margin:26px 0; }


/* CYBER FIX v4 — class spacing + font */
.module-class-item { padding: 10px 0 !important; }
.module-item-box a {
  padding: 10px 18px !important;
  margin: 6px !important;
  font-family: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  letter-spacing: 0.5px !important;
  transition: all .2s ease !important;
}
.module-item-title {
  line-height: 46px !important;
  font-family: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}


/* === CYBER FIX v8: Layout & Grid === */

/* 主内容区最大宽度 + 居中 */
.main {
    max-width: 1800px !important;
}

/* 导航栏 130px */
.logo { width: 168px !important; }

/* 海报卡片：桌面端强制6列 + 等比放大 */
.module-poster-item {
    width: calc(16.666667% - 18px) !important;
}

/* 笔记本/平板(<1440px)：仍保持6列但缩小间距 */
@media (max-width: 1439px) and (min-width: 1025px) {
    .module-poster-item {
        width: calc(16.666667% - 14px) !important;
    }
}

/* 平板竖屏/小笔记本(<1024px)：4列 */
@media (max-width: 1024px) and (min-width: 769px) {
    .module-poster-item {
        width: calc(25% - 12px) !important;
    }
}

/* 手机横屏(<768px)：3列 */
@media (max-width: 768px) {
    .module-poster-item {
        width: calc(33.33% - 10px) !important;
    }
}

/* === CYBER GLOW v2: 全站海报/卡片 hover 赛博灯框 === */
.module-poster-item .module-item-cover,
.module-card-item,
.module-paper-item,
.module-info-item,
.module-play-list-link,
.module-class-item {
  transition: box-shadow .25s ease, transform .25s ease;
}
.module-poster-item .module-item-cover:hover,
.module-card-item:hover,
.module-paper-item:hover,
.module-info-item:hover,
.module-play-list-link:hover,
.module-class-item:hover {
  box-shadow: 0 0 32px rgba(0,229,255,.50), 0 0 64px rgba(177,76,255,.35), 0 0 96px rgba(177,76,255,.18);
}

/* === CYBER GLOW v3: 首页其它区块卡片/海报也加赛博灯框 === */
/* 修复：黑底(slide.html)与横幅渐变会压住灯框光晕，这里抬升层级并加 !important 锁定，
   确保 hover 灯框不被遮挡；黑底/幻灯片功能保持不变，不改动 slide.html */
.homepage .vod-card-item,
.homepage .swiper-poster .swiper-slide .pic,
.homepage .module-tab-item,
.homepage .module-heading-more,
.homepage .module-title a {
  position: relative;
  z-index: 1;
  transition: box-shadow .25s ease, transform .25s ease, text-shadow .25s ease;
}
.homepage .vod-card-item:hover,
.homepage .swiper-poster .swiper-slide .pic:hover,
.homepage .module-tab-item:hover,
.homepage .module-heading-more:hover {
  z-index: 5 !important;
  box-shadow: 0 0 36px rgba(0,229,255,.55), 0 0 72px rgba(177,76,255,.40), 0 0 108px rgba(177,76,255,.22) !important;
}
/* 海报行在 overflow:hidden 容器内，光晕易被裁切；在 slide 层补一层并抬升层级，
   让悬停光晕至少与相邻海报间、横幅区域可见（不动 slide.html 的 overflow 设置） */
.homepage .swiper-poster .swiper-slide {
  position: relative;
}
.homepage .swiper-poster .swiper-slide:hover {
  z-index: 6 !important;
}
.homepage .swiper-poster .swiper-slide:hover .pic {
  transform: scale(1.06);
}
.homepage .module-title a:hover {
  text-shadow: 0 0 12px rgba(0,229,255,.45), 0 0 24px rgba(177,76,255,.30);
}

/* === CYBER GLOW v4: 首页内容区块(幻灯片下方)海报赛博灯框加大 === */
/* 针对下方区块的 .module-poster-item 海报卡（此前从未加过灯框）；
   静态细霓虹边框(inset，避免布局位移) + 悬停大光晕 + 抬升层级。
   作用域排除 [data-mxmod="slide"]，绝不触碰 slide.html 的黑底/幻灯片。 */
.homepage .mx-mod-wrap:not([data-mxmod="slide"]) .module-poster-item {
  position: relative;
  z-index: 1;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0,229,255,.22);
  transition: box-shadow .28s ease, transform .28s ease;
}
.homepage .mx-mod-wrap:not([data-mxmod="slide"]) .module-poster-item .module-item-cover {
  border-radius: 8px;
  transition: box-shadow .28s ease;
}
.homepage .mx-mod-wrap:not([data-mxmod="slide"]) .module-poster-item:hover {
  z-index: 6 !important;
  transform: translateY(-4px);
  box-shadow:
    0 0 40px rgba(0,229,255,.62),
    0 0 80px rgba(177,76,255,.44),
    0 0 120px rgba(177,76,255,.26) !important;
}
/* 封面图内发光，强化“灯框”观感 */
.homepage .mx-mod-wrap:not([data-mxmod="slide"]) .module-poster-item:hover .module-item-cover {
  box-shadow: inset 0 0 18px rgba(0,229,255,.38), inset 0 0 30px rgba(177,76,255,.24);
}
/* 双栏卡片(.vod-card-item)在内容区块同样用加大光晕，与海报卡保持一致 */
.homepage .mx-mod-wrap:not([data-mxmod="slide"]) .vod-card-item {
  transition: box-shadow .28s ease, transform .28s ease;
}
.homepage .mx-mod-wrap:not([data-mxmod="slide"]) .vod-card-item:hover {
  z-index: 6 !important;
  transform: translateY(-4px);
  box-shadow:
    0 0 40px rgba(0,229,255,.62),
    0 0 80px rgba(177,76,255,.44),
    0 0 120px rgba(177,76,255,.26) !important;
}