/* ==========================================================================
   hongguo.css — 红果短剧风格布局层(第一阶段:首页 + 全局头部/底部)
   设计规格参考 hongguoduanju.com(仅复刻设计体系:颜色/布局/组件形态,不复制素材)
   颜色令牌见 public-head-main.css(:root/.bstem 已统一为暗色 #131414 + 橙渐变)
   ========================================================================== */

/* ---------- 品牌 logo:图片 + 文字(香蕉短剧) ---------- */
.mac-logo a.logo{align-items:center;display:flex;gap:10px;text-decoration:none}
.mac-logo a.logo>img{height:36px;width:auto;max-width:none}
.mac-logo .mac-logo__name{color:#fff;font-size:21px;font-weight:600;letter-spacing:1px;line-height:1;white-space:nowrap}
.mac-logo.mac-logo--foot a.logo>img{height:48px;width:auto}
.mac-logo.mac-logo--foot .mac-logo__name{font-size:24px}
/* 不等待 lottie JS,logo 直接可见 */
.mac-logo.mac-logo--head-pending>a>*,.mac-logo.mac-logo--foot-pending>a>*{visibility:visible!important}

/* ---------- 通用容器:1240px,宽屏 1720px ---------- */
.hg-page{margin:0 auto;max-width:1240px;padding:0 20px}
@media (min-width:1880px){.hg-page{max-width:1720px}}

/* ---------- 首页:去掉旧主题背景图,统一 #131414 ---------- */
.home-index-body,.home-index-body.bstem{background-image:none}

/* ---------- 品牌 hero 区 ---------- */
.hg-hero{padding:120px 0 10px;text-align:center}
.hg-hero__bg{background:radial-gradient(58% 88% at 50% 0%,rgba(255,126,13,.14),rgba(255,126,13,0) 70%)}
.hg-hero__title{color:#fff;font-size:40px;font-weight:600;letter-spacing:2px;line-height:1.3;margin:0}
.hg-hero__sub{color:hsla(0,0%,100%,.4);font-size:16px;line-height:24px;margin:16px 0 0}
.hg-hero__cta{
  background:linear-gradient(99.86deg,#ff7e0d .27%,#ff9233);
  border:none;border-radius:12px;cursor:pointer;
  color:hsla(0,0%,100%,.95);display:inline-block;
  font-size:16px;font-weight:500;height:44px;line-height:44px;
  margin-top:28px;min-width:190px;padding:0 34px;text-align:center;
  transition:filter .2s ease}
.hg-hero__cta:hover{filter:brightness(1.06);text-decoration:none}
.hg-hero__hint{color:hsla(0,0%,100%,.4);font-size:13px;margin-top:26px}

/* ---------- 海报轨道 ---------- */
.hg-rail-wrap{position:relative}
.hg-rail{
  display:flex;gap:12px;list-style:none;margin:0;overflow-x:auto;
  padding:6px 2px 10px;scroll-behavior:smooth}
.hg-rail::-webkit-scrollbar{display:none}
.hg-rail{scrollbar-width:none;-ms-overflow-style:none}
/* 两端渐隐遮罩(红果 rail edge fade) */
.hg-rail-wrap:before,.hg-rail-wrap:after{
  bottom:4px;content:"";pointer-events:none;position:absolute;top:0;width:48px;z-index:2}
.hg-rail-wrap:before{background:linear-gradient(90deg,#131414,rgba(19,20,20,0));left:0}
.hg-rail-wrap:after{background:linear-gradient(270deg,#131414,rgba(19,20,20,0));right:0}
/* hover 出现的滚动箭头 */
.hg-rail-arrow{
  -webkit-appearance:none;appearance:none;
  align-items:center;background:rgba(38,39,41,.95);border:none;border-radius:8px;
  cursor:pointer;display:none;height:72px;justify-content:center;
  opacity:.85;position:absolute;top:50%;transform:translateY(-50%);
  width:40px;z-index:3}
.hg-rail-arrow .iconfont{color:hsla(0,0%,100%,.8);font-size:20px}
.hg-rail-arrow:hover{opacity:1}
.hg-rail-arrow--prev{left:-12px}
.hg-rail-arrow--next{right:-12px}
.hg-rail-wrap:hover .hg-rail-arrow{display:flex}

/* ---------- 红果卡片 ---------- */
.hg-card{flex:0 0 186px;width:186px}
.hg-card__link{display:block;text-decoration:none}
.hg-card__cover{
  border-radius:12px;height:255px;overflow:hidden;position:relative;width:186px}
.hg-card__pic{
  background-color:#1f1f1f;display:block;height:100%;object-fit:cover;
  transform:scale(1);transition:transform .25s ease-out;width:100%}
.hg-card__link:hover .hg-card__pic{transform:scale(1.06)}
/* 海报底部渐隐 + 角标 */
.hg-card__shade{background:linear-gradient(180deg,transparent,rgba(0,0,0,.45));bottom:0;left:0;position:absolute;right:0;top:0}
.hg-card__remarks{
  bottom:10px;color:#fff;font-size:13px;font-weight:600;line-height:18px;
  position:absolute;right:10px;text-shadow:0 1px 2px rgba(0,0,0,.36)}
/* 播放悬浮按钮(中央) */
.hg-card__play{
  align-items:center;background:rgba(0,0,0,.45);border:1px solid hsla(0,0%,100%,.6);
  border-radius:50%;color:#fff;display:none;height:44px;justify-content:center;
  left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:44px}
.hg-card__play .iconfont{font-size:18px;margin-left:2px}
.hg-card__link:hover .hg-card__play{display:flex}
.hg-card__name{
  color:hsla(0,0%,100%,.9);font-size:18px;font-weight:400;line-height:25px;
  margin:12px 0 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hg-card__tags{gap:6px;margin-top:8px;min-height:25px}
.hg-card__tags{display:flex;overflow:hidden}
.hg-tag{
  background:hsla(0,0%,88%,.06);border-radius:4px;color:hsla(0,0%,100%,.5);
  display:inline-block;font-size:12px;line-height:25px;max-width:72px;
  overflow:hidden;padding:0 8px;text-overflow:ellipsis;white-space:nowrap}
.hg-card__link:hover .hg-card__name{color:#fff}

/* ---------- 区块(标题 + 查看全部 + 轨道) ---------- */
.hg-section{margin-bottom:68px}
.hg-section__head{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px}
.hg-section__title{color:#fff;font-size:24px;font-weight:600;line-height:34px;margin:0}
.hg-section__more{color:hsla(0,0%,100%,.5);font-size:14px;line-height:22px;text-decoration:none}
.hg-section__more:hover{color:hsla(0,0%,100%,.9);text-decoration:none}
.hg-section__more .iconfont{font-size:12px;margin-left:4px}

/* ==========================================================================
   头部导航红果化(仅 PC;移动端头部不动)
   ========================================================================== */
@media (min-width:821px){
  /* 导航 tab:16px/500,默认 opacity .4,hover/active .9(红果规格) */
  .head_box .top_nav li a,
  .head_box.nav_top .head_menu_a a{
    color:#fff!important;font-size:16px!important;font-weight:500!important;
    opacity:.4!important;transition:opacity .2s ease}
  .head_box .top_nav li a:hover,
  .head_box.nav_top .head_menu_a a:hover,
  .head_box .top_nav li.active a,
  .head_box.nav_top .head_menu_a li.active a{opacity:.9!important}
  /* 去掉旧主题的下划线/背景型 active 效果,只留透明度 */
  .head_box .top_nav li.active:after,
  .head_box.nav_top .top_nav li.active:after,
  .head_box .top_nav li.active a:after,
  .head_box.nav_top .top_nav li.active a:after{display:none!important}
  /* 更多下拉浮层:深色玻璃(红果 dropdown 规格) */
  .top_nav_overlay{
    background:rgba(38,39,41,.95)!important;
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)!important;
    border-radius:12px!important;box-shadow:0 12px 32px rgba(0,0,0,.28)!important}
  .top_nav_overlay:before{border-bottom-color:rgba(38,39,41,.95)!important}
  .top_nav_overlay_item{color:hsla(0,0%,100%,.9)!important;font-size:16px!important;font-weight:500}
  .top_nav_overlay_item:hover{background:hsla(0,0%,100%,.06)!important;color:#fff!important}
  .top_nav_more_btn{background:hsla(0,0%,100%,.06)!important;color:hsla(0,0%,100%,.9)!important}
  .top_nav_more_btn:hover{background:hsla(0,0%,100%,.1)!important;color:#fff!important}
  /* 头部背景改为页面同色,与 hero 融为一体(红果 PC 头部透明视效) */
  .head_box{background:#131414!important;box-shadow:none!important}
}

/* ==========================================================================
   底部红果化:顶部细分隔线 + #747474 居中文本
   ========================================================================== */
.foot{background:#131414;border-top:1px solid hsla(0,0%,100%,.1)}
.foot-list{color:#747474}
.foot-list a,.foot-list .color{color:#747474!important}
.foot-list a:hover{color:hsla(0,0%,100%,.9);text-decoration:none}
/* 旧主题 foot 背景图(亮色系)在暗色下不使用 */

/* ==========================================================================
   响应式(窄屏:卡片稍窄,hero 收敛)
   ========================================================================== */
@media (max-width:820px){
  .hg-page{padding:0 12px}
  .hg-hero{padding:72px 0 6px}
  .hg-hero__title{font-size:26px}
  .hg-hero__sub{font-size:14px}
  .hg-card{flex-basis:132px;width:132px}
  .hg-card__cover{height:181px;width:132px}
  .hg-card__name{font-size:15px;line-height:21px;margin-top:8px}
  .hg-card__tags{min-height:22px}
  .hg-tag{font-size:11px;line-height:22px;padding:0 6px}
  .hg-card__remarks{font-size:11px;right:8px;bottom:8px}
  .hg-section{margin-bottom:44px}
  .hg-section__head{margin-bottom:14px}
  .hg-section__title{font-size:18px;line-height:26px}
  .hg-rail{gap:8px}
}