/* 布局档案：短剧·追更。仅覆盖布局（卡片比例/网格）+ 首页 .dj-* 组件样式。
 * 配色全走 var(--tpl-*)，与 skin 正交（建议该站 skin=orange）。
 * 本文件只在 domain.php 配 layout=duanju 的站加载，天然按站生效。 */

/* —— 列表页/全站竖卡改 3:4（短剧竖屏）—— */
:root{
  --tpl-poster-v-ratio: 3/4;
  --tpl-poster-v-pad: 133.333%;
}

/* ============ 短剧首页 ============ */
.dj-home{max-width:1180px;margin:0 auto;padding:0 16px}
/* PC 端头部是 fixed(80px)、其包裹层塌成 0 高 → 内容需自行留出头高，否则 hero 被盖住。
 * 影视首页靠整幅 banner 垫在透明头下天然占位，短剧是卡片式没这层，故显式让位。
 * 仅 ≥821px(显示 PC 固定头)生效；≤820px 走移动头在流内，无需让位。 */
@media (min-width:821px){.dj-home{padding-top:80px}}
.dj-home .dj-sec-h{display:flex;align-items:center;justify-content:space-between;margin:26px 0 14px}
.dj-home .dj-sec-h h3{font-size:19px;font-weight:800;color:var(--tpl-text-strong);position:relative;padding-left:13px;margin:0}
.dj-home .dj-sec-h h3::before{content:'';position:absolute;left:0;top:3px;bottom:3px;width:4px;border-radius:2px;background:linear-gradient(var(--tpl-accent),var(--tpl-accent-hover))}
.dj-home .dj-sec-h .dj-more{font-size:13px;color:var(--tpl-text-muted)}

/* 分类 tab 横滑 */
.dj-tabs{display:flex;gap:10px;overflow-x:auto;padding:16px 0 4px;scrollbar-width:none}
.dj-tabs::-webkit-scrollbar{display:none}
.dj-tabs .dj-tab{flex:0 0 auto;padding:7px 16px;border-radius:16px;font-size:13.5px;color:var(--tpl-text-muted);background:var(--tpl-bg-elevated);border:1px solid var(--tpl-border);text-decoration:none;transition:.15s}
.dj-tabs .dj-tab.on{color:#fff;background:var(--tpl-accent);border-color:var(--tpl-accent);box-shadow:0 4px 16px var(--tpl-accent-muted)}

/* TOP1 大卡 hero */
.dj-hero{display:flex;align-items:center;gap:26px;margin-top:18px;padding:26px 30px;border-radius:20px;background:linear-gradient(120deg,var(--tpl-bg-elevated),var(--tpl-bg-muted));border:1px solid var(--tpl-border);position:relative;overflow:hidden}
/* 无封面时右侧大片留白 → 品牌化装饰填充（辉光 + 巨型水印），让空间看起来是设计而非缺图 */
.dj-hero::before{content:'';position:absolute;right:-80px;top:50%;transform:translateY(-50%);width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,var(--tpl-accent-muted),transparent 68%);opacity:.55;pointer-events:none;z-index:0}
.dj-hero::after{content:'🔥';position:absolute;right:44px;top:50%;transform:translateY(-50%);font-size:172px;line-height:1;opacity:.09;pointer-events:none;z-index:0}
.dj-hero>*{position:relative;z-index:1}
.dj-hero .dj-hero-cover{width:190px;flex:0 0 auto;border-radius:14px;position:relative;overflow:hidden;aspect-ratio:3/4;box-shadow:0 10px 30px rgba(0,0,0,.45);background:linear-gradient(150deg,var(--tpl-accent),var(--tpl-accent-muted))}
.dj-hero .dj-hero-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:2}
.dj-hero .dj-hero-cover img[src=""],.dj-hero .dj-hero-cover img:not([src]){opacity:0}
.dj-hero .dj-hero-cover .dj-tag{position:absolute;top:10px;left:10px;background:var(--tpl-accent);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;z-index:2}
.dj-hero .dj-hero-info{display:flex;flex-direction:column;justify-content:center;min-width:0;max-width:640px}
.dj-hero .dj-rank{color:var(--tpl-accent);font-weight:800;font-size:13px}
.dj-hero .dj-hero-info h2{font-size:28px;font-weight:900;color:var(--tpl-text-strong);margin:8px 0}
.dj-hero .dj-meta{color:var(--tpl-text-muted);font-size:13px}
.dj-hero .dj-desc{color:var(--tpl-text);font-size:13.5px;line-height:1.7;margin:12px 0 18px;max-width:560px;opacity:.9;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dj-hero .dj-btns{display:flex;gap:12px}
.dj-hero .dj-play{background:linear-gradient(135deg,var(--tpl-accent),var(--tpl-accent-hover));color:#fff;font-weight:700;padding:11px 26px;border-radius:24px;font-size:15px;text-decoration:none;box-shadow:0 6px 20px var(--tpl-accent-muted)}
.dj-hero .dj-fav{border:1px solid var(--tpl-border);color:var(--tpl-text-strong);padding:11px 22px;border-radius:24px;font-size:15px;text-decoration:none}

/* 通用竖卡（榜单/瀑布共用） */
.dj-card{position:relative;display:block;text-decoration:none}
.dj-card .dj-cover{position:relative;width:100%;aspect-ratio:3/4;border-radius:var(--tpl-radius-cover);overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.35);background:linear-gradient(150deg,var(--tpl-accent-muted),var(--tpl-bg-elevated));transition:transform .18s,box-shadow .18s}
.dj-card:hover .dj-cover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(0,0,0,.5)}
.dj-card .dj-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:2}

/* 无封面兜底：品牌化渐变占位 + 剧名水印（采集图源缺失时优雅降级） */
.dj-ph{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;font-size:13px;font-weight:800;line-height:1.4;color:rgba(255,255,255,.9);text-shadow:0 2px 8px rgba(0,0,0,.4);background:linear-gradient(150deg,var(--tpl-accent),var(--tpl-accent-muted))}
.dj-cover img[src=""],.dj-cover img:not([src]){opacity:0}
.dj-card:nth-child(3n) .dj-ph{background:linear-gradient(150deg,var(--tpl-accent-hover),var(--tpl-bg-muted))}
.dj-card:nth-child(3n+1) .dj-ph{background:linear-gradient(150deg,#e0663a,var(--tpl-bg-elevated))}
.dj-card .dj-ep{position:absolute;top:8px;right:8px;z-index:3;font-size:10.5px;font-weight:700;color:#fff;background:rgba(10,12,18,.72);padding:2px 7px;border-radius:6px;backdrop-filter:blur(2px)}
.dj-card .dj-ep.ac{background:var(--tpl-accent)}
.dj-card .dj-tt{margin-top:7px;color:var(--tpl-text-strong);font-size:13px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.dj-card .dj-sub{color:var(--tpl-text-muted);font-size:11.5px;margin-top:2px}

/* 爆款榜横滑 + 排名号 */
.dj-rail{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.dj-rail::-webkit-scrollbar{display:none}
.dj-rail .dj-rankcard{flex:0 0 132px;width:132px;position:relative}
.dj-rankcard .dj-rno{position:absolute;z-index:4;top:-6px;left:-6px;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:900;font-style:italic;font-size:16px;color:#fff;background:var(--tpl-bg-elevated);border:1px solid var(--tpl-border)}
.dj-rankcard .dj-rno.top{background:linear-gradient(135deg,var(--tpl-accent-hover),var(--tpl-accent));border:none}

/* 精选竖卡瀑布 */
.dj-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media (max-width:1080px){.dj-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:820px){.dj-grid{grid-template-columns:repeat(3,1fr)}
  .dj-hero{flex-direction:column}.dj-hero .dj-hero-cover{width:140px}}
@media (max-width:560px){.dj-grid{grid-template-columns:repeat(2,1fr)}
  .dj-home .dj-sec-h h3{font-size:17px}.dj-hero .dj-hero-info h2{font-size:22px}}

/* --- 顶栏可读性修复 ---
   本布局首页内容整体下垫 80px，透明头(近白文字 --tpl-text-strong)会落在白页上不可见。
   本档无整幅深色 banner 垫底，故让顶栏从顶部即呈"实心"可读态；
   滚动后 .is-header-solid 由 JS 接管，:not(.is-header-solid) 自动让位。全部走 token，自适应皮肤/暗色。 */
body.home-index-body #topnav .head_box:not(.is-header-solid){background-color:var(--tpl-bg-base)!important;box-shadow:0 2px 12px rgba(0,0,0,.12)!important}
body.home-index-body #topnav .head_box.show-pc:not(.is-header-solid) .head_menu_a a{color:var(--tpl-text)!important}
body.home-index-body #topnav .head_box.show-pc:not(.is-header-solid) .head_menu_a li.active a{color:var(--tpl-accent)!important;opacity:1}
body.home-index-body #topnav .head_box:not(.is-header-solid) .head_menu_b .menu_ico,
body.home-index-body #topnav .head_box:not(.is-header-solid) .head_menu_b a.menu,
body.home-index-body #topnav .head_box:not(.is-header-solid) .top_link,
body.home-index-body #topnav .head_box:not(.is-header-solid) .top_link i.iconfont{color:var(--tpl-text)!important}