/* 蓝果首页（首页组 A）。前缀 lh-。令牌/卡片/广告占位复用 languo.css + languo-ui.css。
   规格：docs/frontend-spec/layout-pc.md §2、layout-h5.md §3；设计稿 figma-ref/{web,h5}/首页-*.png。
   断点与全站一致：PC ≥1024，H5 ≤1023。 */

.lh-main{min-height:0}
.lh-page{padding-top:24px}
/* Figma 首页-02（1920）：hero 底边 y≈650 渐隐到页面底，广告图标行 y≈727（hero 下 77），「男同短剧精选」标题 y≈848 */
/* 2026-10-23 Figma 158:41367 渲染图复量（页面坐标 = 渲染图 y - 79 浏览器栏）：hero 底 650 → 广告图标行 732-819（padding 82）→
   楼层标题字形顶 848（图标行底→标题框顶 24）→ 首排封面顶 892；标题 20px Semibold（6 字字形宽 117、高 19）；「查看更多 →」16px、总宽 84、#5C8DFF；
   竖版卡 5 列 289×385、列距 19；GV 横版卡 4 列 361×203、列距 25；横幅底→下一楼层标题字形 32 */
@media (min-width:1024px){
  .lh-page{padding-top:82px}
  .lh-adrow{margin-bottom:24px!important}
  .lh-floor .ll-section__head{margin-bottom:20px}
  .lh-floor .ll-section__head h2{font-size:max(20px,var(--ll-fmin,0px));font-weight:600;line-height:max(28px,calc(var(--ll-fmin,0px)*1.4))}
  .lh-floor .ll-more{font-size:max(16px,var(--ll-fmin,0px));font-weight:400}
  .lh-floor .ll-grid{column-gap:19px}
  .lh-floor .ll-grid--wide{column-gap:25px}
  /* 首页卡片沿用短剧列表的封面圆角、角标、评分和集数规格。 */
  .lh-floor .ll-card__art{border-radius:var(--r-card)}
  .lh-floor .ll-card__badges{top:4.15cqw;left:3.46cqw;gap:0}
  .lh-floor .ll-badge{height:9cqw;padding:0 4.84cqw;font-size:4.5cqw;font-weight:500}
  .lh-floor .ll-card__score{top:4.15cqw;right:3.8cqw;gap:.35cqw;height:9cqw;padding:0 3.1cqw 0 3.46cqw;background:rgba(0,0,0,.69);font-size:4.5cqw;font-weight:700}
  .lh-floor .ll-card__score::before{width:5.2cqw;height:5.2cqw}
  .lh-floor .ll-card__ep{left:3.46cqw;bottom:4.15cqw;height:9cqw;padding:0 4.84cqw 0 4.15cqw;border-radius:2.08cqw;font-size:max(4.84cqw,var(--ll-fmin,0px));font-weight:700;line-height:9cqw}
  .lh-floor .ll-card h3{margin-top:10px;font-weight:600;line-height:max(20px,calc(var(--ll-fmin,0px)*1.25));color:#fff}
  .lh-floor .ll-card__tags span,.lh-floor .ll-card__tags a{background:#1c212e;color:#8d96a5}
  .lh-adbanners{margin:28px 0}
}
.lh-m-ads{display:none}
@media (max-width:1023px){.lh-m-ads{display:block}}

/* ================= Hero 轮播 ================= */
.lh-hero{position:relative;width:100%;aspect-ratio:1920/650;max-height:calc(calc(100*var(--ll-vh,1vh)) - 40px);min-height:460px;overflow:hidden;background:#10111d;container-type:inline-size;isolation:isolate}
.lh-hero__track{position:absolute;inset:0}
.lh-slide{position:absolute;inset:0;transform:translateX(100%);visibility:hidden;transition:transform .32s cubic-bezier(.22,.61,.36,1),visibility 0s .32s}
.lh-slide.is-active{z-index:2;transform:translateX(0);visibility:visible;transition:transform .32s cubic-bezier(.22,.61,.36,1)}
.lh-slide.is-leaving{z-index:1;visibility:visible;transition:transform .32s cubic-bezier(.22,.61,.36,1)}
.lh-slide.is-left{transform:translateX(-100%)}
.lh-slide__bg{position:absolute;inset:0;display:block}
.lh-slide__bg::before{content:"";position:absolute;inset:-12px;background-image:var(--lh-hero-backdrop);background-position:center;background-size:cover;filter:blur(3px) brightness(.6)}
/* PC 保留完整原图并靠右呈现，最多按源图 1.5 倍展示，避免低分辨率图片被放大到 1920px。 */
.lh-slide__img{position:absolute;top:50%;right:0;z-index:1;width:auto;height:min(100%,var(--lh-hero-maxh,100%));max-width:min(100%,var(--lh-hero-maxw,100%));object-fit:contain;object-position:right center;transform:translateY(-50%);-webkit-mask-image:radial-gradient(ellipse 75% 85% at 75% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 75% 85% at 75% 50%,#000 30%,transparent 100%)}
.lh-slide__shade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(0deg,var(--bg-home) 0%,rgba(21,21,34,.8) 10%,transparent 38%),
  linear-gradient(90deg,rgba(6,7,17,.7) 0%,rgba(6,7,17,.4) 34%,rgba(6,7,17,.04) 76%)}
@media (min-width:1024px){
  /* 图片自身有 z-index:1；渐变必须盖在图片之上，文字再盖在渐变之上。 */
  .lh-slide__shade{z-index:2}
}
/* 首页新版：标题、信息、简介直接排版，移除重复的标签胶囊。 */
.lh-hero__content{position:absolute;left:max(var(--gutter),calc((100% - var(--maxw))/2));bottom:4cqw;z-index:3;width:min(920px,calc(100% - var(--gutter)*2));color:#f5f8ff;pointer-events:none}
.lh-hero__content>*{pointer-events:auto}
/* Figma 标题单行：长标题 PC 也只占 1 行、末尾省略号（完整标题在详情页），避免内容块被顶高、压到缩略图条 */
.lh-hero__title{margin:0 0 16px;font-size:max(clamp(32px,2.09cqw,40px),var(--ll-fmin,0px));font-weight:700;line-height:1.2;letter-spacing:0;text-shadow:0 3px 18px rgba(0,0,0,.4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lh-meta{display:flex;align-items:center;flex-wrap:wrap;font-size:max(18px,var(--ll-fmin,0px));font-weight:500;color:#f7f7fb;line-height:max(24px,calc(var(--ll-fmin,0px)*1.25))}
.lh-meta span+span::before{content:"";display:inline-block;width:1px;height:1em;margin:0 16px;vertical-align:-.12em;background:rgba(255,255,255,.4)}
/* Figma「★ 8.8　全 18 集 | 都市 · 轻喜」：评分与集数之间只有空白、没有竖线 */
.lh-meta .lh-meta__score+span::before{width:0;margin:0 0 0 16px;background:none}
.lh-meta__score{font-size:max(20px,var(--ll-fmin,0px));color:#ffb73e}
.lh-meta__score.is-empty{color:#c7d1dc}
.lh-desc{max-width:min(720px,calc((100cqw - max(var(--gutter)*2,100cqw - var(--maxw)))*.37));min-width:320px;margin:8px 0 0;color:#eceaf0;font-size:max(16px,var(--ll-fmin,0px));line-height:max(22px,calc(var(--ll-fmin,0px)*1.25));display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.lh-actions{display:flex;gap:10px;margin-top:30px}
.lh-play{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:182px;height:45px;border-radius:999px;background:#5c8dff;color:#fff;font-size:max(18px,var(--ll-fmin,0px));font-weight:500;box-shadow:none;transition:filter .15s,transform .15s}
.lh-play:hover{filter:brightness(1.1);transform:translateY(-1px)}
.lh-play svg{width:26px;height:26px;margin-left:-4px}
.lh-fav{align-items:center;justify-content:center;gap:5px;min-width:80px;height:44px;padding:0 14px;border:1px solid rgba(255,255,255,.19);border-radius:999px;background:rgba(255,255,255,.07);color:#fff;font-size:max(13px,var(--ll-fmin,0px));font-weight:600;cursor:pointer}
.lh-fav svg{width:16px;height:16px}
.lh-fav[aria-pressed=true]{color:var(--accent)}
.lh-fav[aria-pressed=true] svg path{fill:currentColor}

/* 广告屏（hero_home）：预留占位 */
.lh-slide--ad{display:grid;place-items:center;background:radial-gradient(at 78% 28%,#0c7fb6,transparent 55%),linear-gradient(120deg,#081827,#103449 63%,#125877)}
.lh-slide--ad .hg-ssp-slot{position:absolute;inset:0}
.lh-adhero{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;text-align:center;padding:0 24px}
.lh-adhero__tag.ll-ad__tag{top:calc(var(--header-h) + 16px);right:max(var(--gutter),calc((100% - var(--maxw))/2))}
.lh-adhero img{width:clamp(180px,18cqw,340px);height:auto}
.lh-slide--ad:has(>.lh-adhero){background:radial-gradient(at 50% 45%,rgba(20,157,234,.14),transparent 60%),var(--surface)}
.lh-adhero strong{font-size:max(clamp(28px,3cqw,48px),var(--ll-fmin,0px));font-weight:800;letter-spacing:.04em}
/* Figma 切片「精彩短剧，每日精选」：全角逗号、白色加粗（A-10） */
.lh-adhero p{margin:0;font-size:max(clamp(14px,1.2cqw,20px),var(--ll-fmin,0px));font-weight:600;color:#fff}

/* PC 缩略图切换条 */
/* 右边线与内容区一致；宽度按内容区宽 ×0.58（设计稿 1920：缩略图条 ≈887/1520），左侧给文字区留位 */
.lh-thumbs{position:absolute;right:max(var(--gutter),calc((100% - var(--maxw))/2));bottom:0;z-index:6;max-width:calc((100% - max(var(--gutter)*2,100% - var(--maxw)))*.6)}
.lh-thumbs__rail{display:flex;align-items:flex-end;gap:12px;padding:12px 5px 2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-behavior:smooth}
.lh-thumbs__rail::-webkit-scrollbar{display:none}
/* 缩略图按 UI 稿 88×118、间距 12；条宽（内容宽 58%）放不下全部时等比缩小，保证最后一张完整落在内容右边线内，不露半张 */
.lh-thumbs__rail{width:calc((var(--lh-n,8) + 1)*100px - 2px);max-width:100%}
.lh-thumb{position:relative;flex:1 1 0;width:auto;min-width:0;max-width:88px;height:auto;aspect-ratio:88/118;padding:0;border:2px solid transparent;border-radius:11px;background:#1a2534;overflow:hidden;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s;transform-origin:center bottom}
.lh-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lh-thumb::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.56);transition:background .2s}
.lh-thumb[aria-pressed=true]{border-color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.25);transform:scale(1.08)}
.lh-thumb[aria-pressed=true]::after{background:transparent}
.lh-thumb:hover{transform:scale(1.08)}
.lh-thumb:hover::after{background:rgba(0,0,0,.2)}
.lh-thumb--ad{display:grid;place-items:center;background:linear-gradient(150deg,#2a8cbc,#101d33);color:#fff;font-size:max(14px,var(--ll-fmin,0px));font-weight:600}
.lh-thumb--ad::after{z-index:0}

/* H5 箭头/圆点（PC 隐藏，由 .ll-m-only 控制） */
/* H5 箭头 20×20 圆，底 rgba(255,255,255,.15) + 0.5px rgba(255,255,255,.1) 描边，
   白色 1.3px 圆头 chevron；左右位置对齐操作按钮两侧，伪元素扩展点击区。
   圆点：5×5 rgba(255,255,255,.3)，间距 5（圆心距 10），激活为 20×5 #5C8DFF 胶囊，位于文案与按钮之间。 */
.lh-arrow{position:absolute;top:97px;z-index:6;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:.5px solid rgba(255,255,255,.1);border-radius:50%;background:rgba(255,255,255,.15);color:#fff;cursor:pointer}
.lh-arrow svg{display:block;width:100%;height:100%;flex:none;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.lh-arrow::before{content:"";position:absolute;inset:-12px}
.lh-arrow--prev{left:14px}
.lh-arrow--next{right:13px}
.lh-dots{position:absolute;left:0;right:0;bottom:-8px;z-index:6;height:44px;align-items:center;justify-content:center;gap:5px}
.lh-dots button{position:relative;width:5px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;transition:width .2s}
.lh-dots button::after{content:"";position:absolute;left:0;top:50%;width:100%;height:5px;border-radius:2.5px;background:rgba(255,255,255,.3);transform:translateY(-50%);transition:background .2s}
.lh-dots button.is-active{width:20px}
.lh-dots button.is-active::after{background:var(--accent)}

/* 1024–1279：缩略图条让位文字区 */
/* 2026-10-22 PC 等比缩放：窄 PC 专用断点已删除（1024~1919 整页按 1920 布局后等比 zoom，见 languo.css 顶部） */

/* ================= 方形广告横排 / H5 图标广告 ================= */
.lh-adrow{position:relative;margin:0 0 28px;overflow:hidden}
.lh-adrow__track{display:flex;justify-content:space-between;gap:10px}
.lh-adicon{flex:0 0 82px;display:flex;flex-direction:column;align-items:center;min-width:0}
/* 蓝果 logo 占位：UI 稿 1920 画板 15 个 88×88、等距铺满内容宽（间距 ≈14.3 = 0.94%），窄屏按内容宽等比缩小，圆角 10 */
.lh-adrow:not(.lh-adrow--ssp) .lh-adrow__track{gap:.94%}
.lh-adrow:not(.lh-adrow--ssp):not(.is-marquee) .lh-adicon{flex:0 0 calc((100% - 13.16%)/15);max-width:88px}
.lh-adicon__box.ll-adph{width:100%;height:auto;aspect-ratio:1;gap:6%;border-radius:10px}
.lh-adicon__box.ll-adph>img{width:46%;height:auto}
.lh-adicon__box.ll-adph>em{font-size:max(11px,var(--ll-fmin,0px));color:#dfe9f4}
.lh-adicon__box{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:82px;height:82px;border:1px solid #25475e;border-radius:8px;background:radial-gradient(at 70% 20%,rgba(36,181,242,.28),transparent 60%),linear-gradient(150deg,#12304a,#101d33);overflow:hidden}
.lh-adicon__box img{width:36px;height:36px}
.lh-adicon__box em{font-style:normal;font-size:max(11px,var(--ll-fmin,0px));font-weight:600;color:#fff;white-space:nowrap}
.lh-adicon__tag{position:absolute;top:3px;right:3px;padding:1px 4px;border-radius:3px;background:rgba(0,0,0,.55);color:#fff;font-size:max(9px,var(--ll-fmin,0px));line-height:1.3}
/* >15 个：连续横向跑马灯（JS 复制一份轨道并加 .is-marquee），hover/焦点暂停，减少动效时停止 */
.lh-adrow.is-marquee .lh-adrow__track{justify-content:flex-start;width:max-content;animation:lh-marquee var(--lh-mq-dur,40s) linear infinite}
.lh-adrow.is-marquee:hover .lh-adrow__track,.lh-adrow.is-marquee:focus-within .lh-adrow__track{animation-play-state:paused}
@keyframes lh-marquee{to{transform:translateX(calc(-50% - 5px))}}
@media (prefers-reduced-motion:reduce){.lh-adrow.is-marquee{overflow-x:auto}.lh-adrow.is-marquee .lh-adrow__track{animation:none}}
.lh-adrow--ssp{min-height:82px}

.lh-adbanner{margin:24px 0}
.lh-floor .ll-empty{padding:40px 20px}

/* ================= H5 ================= */
@media (max-width:1023px){
  .lh-page{padding-top:18px}
  /* Figma 图片画板 750×254，整个轮播 750×375；下方 121px 留给圆点和按钮。 */
  .lh-hero{aspect-ratio:2/1;height:auto;min-height:0;max-height:none;background:#0a111b}
  .lh-slide__bg{bottom:auto;height:33.8667cqw}
  .lh-slide__bg::before{display:none}
  .lh-slide__img{inset:0;width:100%;height:100%;max-width:none;transform:none;object-fit:cover;object-position:var(--fx,50%) var(--fy,30%);-webkit-mask-image:none;mask-image:none}
  /* 封面未解出时占位图 logo 居中会压到标题：占位态只铺上 58%，logo 落在标题上方 */
  .lh-slide:has(.lh-slide__img.is-ph){background:#272732}
  .lh-slide__img.is-ph{bottom:auto;height:58%;object-position:center}
  .lh-slide__shade{bottom:auto;height:33.8667cqw;z-index:2;background:linear-gradient(to bottom,transparent 45%,rgba(10,17,27,.12) 58%,rgba(10,17,27,.65) 82%,#0a111b 100%)}
  /* 标题、圆点和按钮按整张 2:1 轮播的高度定位。 */
  .lh-hero__content{left:var(--gutter);right:var(--gutter);top:19cqw;bottom:0;width:auto}
  .lh-hero__title{margin:0 0 4px;font-size:18px;font-weight:750;line-height:1.28;letter-spacing:.2px;-webkit-line-clamp:1;display:block;white-space:nowrap}
  .lh-meta{gap:0;font-size:12px;line-height:16px;font-weight:500;color:#e6e9f0}
  .lh-meta span+span::before{margin:0 7px;height:9px;vertical-align:0}
  .lh-meta .lh-meta__score+span::before{margin:0 0 0 8px}
  .lh-meta__score{font-size:14px;font-weight:650;color:#ffb73e}
  .lh-desc{display:none}
  .lh-actions{position:absolute;left:0;right:0;top:auto;bottom:5cqw;justify-content:center;gap:9px;margin-top:0}
  /* H5 操作按钮等宽，缩短 Banner 后仍保留 32px 的可点高度。 */
  .lh-play{width:140px;min-width:0;height:32px;padding:0 14px;font-size:13px;font-weight:600;box-shadow:none}
  .lh-play svg{width:13px;height:13px;margin-left:0}
  .lh-fav{width:140px;min-width:0;height:32px;padding:0 14px;border:0;background:rgba(255,255,255,.18);font-size:13px}
  .lh-fav svg{width:14px;height:14px}
  .lh-adhero__tag.ll-ad__tag{top:10px;right:10px}
  .lh-dots{display:flex;bottom:16cqw;height:5px;pointer-events:none}
  .lh-dots button{height:5px;pointer-events:auto}
  .lh-arrow{display:inline-flex;top:auto;bottom:calc(5cqw + 6px)}

  .lh-adrow{margin:0 calc(var(--gutter)*-1) 24px;padding:0 var(--gutter);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .lh-adrow::-webkit-scrollbar{display:none}
  .lh-adrow__track{justify-content:flex-start;gap:12px;width:max-content}
  .lh-adrow.is-marquee .lh-adrow__track{animation:none}
  .lh-adicon{flex:0 0 56px}
  .lh-adicon__box{width:56px;height:56px;border-color:#28546d;border-radius:10px}
  .lh-adicon__box img{width:30px;height:30px}
  .lh-adicon__tag{font-size:8px;top:2px;right:2px;padding:0 3px}
  /* H5 稿：一行横向滑动，图标 62×62、间距 10、圆角 8，「蓝果短剧」在方块内底部 */
  /* fix4 Figma H5 首页-02-a 复量：图标 ≈59、中心距 ≈70（间距 11）、行高 ≈60 */
  .lh-adrow:not(.lh-adrow--ssp) .lh-adrow__track{gap:11px}
  .lh-adrow:not(.lh-adrow--ssp) .lh-adicon,.lh-adrow:not(.lh-adrow--ssp):not(.is-marquee) .lh-adicon{flex:0 0 59px;max-width:none}
  .lh-adicon__box.ll-adph{width:59px;height:59px;border-radius:8px}
  .lh-adicon__box.ll-adph>em{font-size:10px}
}
/* R2 fix3 G3-03 Figma H5 首页-02-a：广告图标行底→楼层标题顶 ≈19、标题底→卡片顶 ≈18（楼层头含 44 高「查看更多」点击区，标题上下各 ≈11） */
/* Figma H5 首页 @2x：「查看更多 →」字距 24@2x → 12px，总宽 126@2x = 63 */
@media (max-width:1023px){.lh-adrow{margin-bottom:8px}.lh-floor .ll-section__head{margin-bottom:7px}.lh-floor .ll-more{font-size:12px}}
/* 楼层「查看更多」长箭头（模板 lh/section-head）：Figma PC 16px 字时箭头 16×7、距字 6；H5 12px 字时 12×5、距字 5 → 统一 1em × .44em、间距 .4em */
.lh-floor .ll-more{gap:.4em}
.lh-more__arr{display:inline-block;flex:none;width:1em;height:.44em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 7'%3E%3Cpath d='M.6 3.5h14.6M12 .7l3.2 2.8L12 6.3' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 7'%3E%3Cpath d='M.6 3.5h14.6M12 .7l3.2 2.8L12 6.3' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}