/* ========================================
   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:#ffd200; --card-bg:#0a1a22; --card-title-color:#d0f4ff; --card-actor-color:#68c8e8; --card-desc-color:#48a8c8; }
.module.dual-style-card.color-yellow { --card-accent:#ffc400; --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:#ffd200 #0f1626; }
*::-webkit-scrollbar{ width:9px;height:9px; }
*::-webkit-scrollbar-track{ background:#0f1626; }
*::-webkit-scrollbar-thumb{ background:linear-gradient(#ffd200,#ff7a00); border-radius:999px; }
*::-webkit-scrollbar-thumb:hover{ background:#ffd200; }
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;
    }
}

/* === 正在熱映：強制5列 === */
.homepage .mx-mod-wrap[data-mxmod="indexhot"] .module-poster-item {
    width: calc(20% - 18px) !important;
}
@media (max-width: 1439px) and (min-width: 1025px) {
    .homepage .mx-mod-wrap[data-mxmod="indexhot"] .module-poster-item {
        width: calc(20% - 14px) !important;
    }
}
@media (max-width: 1024px) and (min-width: 769px) {
    .homepage .mx-mod-wrap[data-mxmod="indexhot"] .module-poster-item {
        width: calc(20% - 12px) !important;
    }
}
@media (max-width: 768px) {
    .homepage .mx-mod-wrap[data-mxmod="indexhot"] .module-poster-item {
        width: calc(50% - 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;
}

/* === 自定義幻燈片：大圖文字置於底部 + 賽博漸變 === */
.homepage .swiper-big .swiper-slide.mx-custom-slide {
  position: relative;
  overflow: hidden;
}
.homepage .swiper-big .swiper-slide.mx-custom-slide .banner {
  display: block;
  width: 100%;
  height: 100%;
}
/* 大圖文字整體上移，避免被底部小海報(poster)條遮擋 */
.homepage .swiper-big .swiper-slide.mx-custom-slide .mx-slide-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 150px;
  z-index: 10;
  padding: 28px 36px 24px;
  text-align: left;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 55%, transparent 100%);
}
/* 小海報容器底部加padding，讓 poster-title 不被下方內容截斷 */
.homepage .swiper-poster {
  padding-bottom: 28px !important;
}
.homepage .swiper-poster .swiper-slide .poster-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 1.45;
  padding-top: 6px;
  color: rgba(255,255,255,.92);
}
.homepage .swiper-big .swiper-slide.mx-custom-slide .mx-slide-title {
  display: inline-block;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .04em;
  margin-bottom: 8px;
  background: linear-gradient(90deg, #00f2ff, #ff00e6, #ffe600, #00f2ff);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  text-shadow: none;
  animation: mxCyberTextShift 3.2s linear infinite;
  filter: drop-shadow(0 0 6px rgba(0,229,255,.55)) drop-shadow(0 0 14px rgba(177,76,255,.45));
}
.homepage .swiper-big .swiper-slide.mx-custom-slide .mx-slide-sub {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .03em;
  color: #e6f7ff;
  text-shadow: 0 0 8px rgba(0,229,255,.55), 0 0 16px rgba(0,0,0,.7);
}
@keyframes mxCyberTextShift {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}
/* 響應式：大屏適當再放大，小屏收斂；同時按海報條高度調整 caption 位置 */
@media (min-width: 1440px) {
  .homepage .swiper-big .swiper-slide.mx-custom-slide .mx-slide-caption { bottom: 170px; }
  .homepage .swiper-big .swiper-slide.mx-custom-slide .mx-slide-title { font-size: 38px; }
  .homepage .swiper-big .swiper-slide.mx-custom-slide .mx-slide-sub { font-size: 20px; }
}
@media (max-width: 1024px) {
  .homepage .swiper-big .swiper-slide.mx-custom-slide .mx-slide-caption { bottom: 130px; padding: 20px 28px 18px; }
  .homepage .swiper-big .swiper-slide.mx-custom-slide .mx-slide-title { font-size: 26px; }
  .homepage .swiper-big .swiper-slide.mx-custom-slide .mx-slide-sub { font-size: 15px; }
}
@media (max-width: 768px) {
  .homepage .swiper-big .swiper-slide.mx-custom-slide .mx-slide-caption { bottom: 100px; padding: 16px 18px 14px; }
  .homepage .swiper-big .swiper-slide.mx-custom-slide .mx-slide-title { font-size: 22px; }
  .homepage .swiper-big .swiper-slide.mx-custom-slide .mx-slide-sub { font-size: 14px; }
  .homepage .swiper-poster { padding-bottom: 22px !important; }
}

/* v4: 文章詳情頁正文強制白字（覆蓋採集來源的內聯灰字） */
.article-content,
.article-content *,
.article-content p,
.article-content span,
.article-content div,
.article-content li,
.article-content td,
.article-content th,
.article-content strong,
.article-content em {
	color: #fff !important;
}
.article-content a,
.article-content a * {
	color: #4a9eff !important;
}
.article-content a:hover,
.article-content a:hover * {
	color: #ffd200 !important;
}