/* ========================================
   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: smooth;
    -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: 150px !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: 140% !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: 0; 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: 130px !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: 110px !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: 100px !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:#FF4444; --card-bg:#2e1618; --card-title-color:#ffe0e0; --card-actor-color:#e09090; --card-desc-color:#c07070; }
.module.dual-style-card.color-yellow { --card-accent:#FFBB00; --card-bg:#2a2414; --card-title-color:#fff0d0; --card-actor-color:#d4b060; --card-desc-color:#b09040; }
.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:#FF6600; --card-bg:#261a14; --card-title-color:#ffe8d8; --card-actor-color:#d49a6a; --card-desc-color:#b07848; }


/* ============================================
   列数快捷覆盖类（后台传参，强制 !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; }