/* ══════════════════════════════════════════════════════════════════════
   红果短剧 H5 · responsive.css · PC / 宽屏响应式 + 横屏 + 减弱动效
   ────────────────────────────────────────────────────────────────────────
   断点 640 / 768 / 1024 / 1440，首页 440px 舞台 + 信息侧栏双栏、剧场网格 2→6 列且 .hg-theater__grid margin:auto 居中、我的页头图横幅化、底部 Tab 转顶部导航；含横屏密度压缩与 prefers-reduced-motion。严禁把 440px 手机布局直接拉宽居中。
   本文件内容与定稿预览稿逐字相同（仅拆文件、不改任何视觉数值）。
   <link> 加载顺序：tokens → base → components → pages → responsive（勿调整，
   顺序即原 <style> 内的层叠顺序，调整会改变覆盖关系并破坏像素一致性）。
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   分节 9 · PC / 宽屏响应式（§9 + 体验规范 §4.2：真正重排，不拉宽 440px）
   断点 640 / 768 / 1024 / 1440，移动优先 min-width 增强
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width:768px){
  .hg-app{ max-width:none; }
  body{ background:#F2F2F2; }
  .hg-page{ background:var(--bg-page); }
  .hg-page--home{ background:transparent; }
  .hg-tabbar{ max-width:var(--app-max-w-theater); box-shadow:var(--shadow-card); }
}
/* 剧场：列数随宽度增长（2→3→4→5→6） */
@media (min-width:640px){
  .hg-theater__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hg-theater__search{ max-width:560px; margin-left:auto; margin-right:auto; }
}
@media (min-width:768px){
  .hg-theater__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .hg-theater__cats{ justify-content:center; flex-wrap:wrap; overflow:visible; }
  .hg-theater__funcs{ max-width:720px; margin-left:auto; margin-right:auto; }
  .hg-theater__search{ max-width:640px; }
  .hg-theater__top{ height:120px; }
}
@media (min-width:1024px){
  .hg-theater__grid{ grid-template-columns:repeat(5,minmax(0,1fr)); }
  .hg-theater__search{ max-width:720px; }
  .hg-theater__grid,.hg-theater__cats,.hg-theater__funcs,.hg-theater__search,.hg-theater__search-feedback{
    /* 内容限宽 1200px，左右 40px 留白 */
    max-width:calc(var(--app-max-w-theater) - var(--pc-page-pad) * 2);
  }
  /* 只给剧场网格补居中；cats/funcs/search 下一行已有 auto 居中。
     .hg-app / .hg-page / 首页 / 我的页一律不加，避免把已居中的页面改坏。 */
  .hg-theater__grid{ max-width:var(--app-max-w-theater); padding-left:var(--pc-page-pad); padding-right:var(--pc-page-pad); margin-left:auto; margin-right:auto; }
  .hg-theater__cats,.hg-theater__funcs,.hg-theater__search,.hg-theater__search-feedback{ margin-left:auto; margin-right:auto; }
}
@media (min-width:1440px){
  .hg-theater__grid{ grid-template-columns:repeat(6,minmax(0,1fr)); }
}
/* 直播页：分类居中 + 频道网格随宽增长（2→3→4→6），内容限宽 1200（与剧场同口径） */
@media (min-width:768px){
  .hg-live__cats{ justify-content:center; flex-wrap:wrap; overflow:visible; }
  .hg-live__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:1024px){
  .hg-live__header{ max-width:var(--app-max-w-theater); margin-left:auto; margin-right:auto; padding-top:24px; }
  .hg-live__cats{ margin-left:auto; margin-right:auto; flex-wrap:wrap; }
  .hg-live__grid{
    max-width:var(--app-max-w-theater); padding-left:var(--pc-page-pad); padding-right:var(--pc-page-pad);
    margin-left:auto; margin-right:auto; grid-template-columns:repeat(4,minmax(0,1fr));
  }
}
@media (min-width:1440px){
  .hg-live__grid{ grid-template-columns:repeat(6,minmax(0,1fr)); }
}
/* 首页：视频舞台 440px + 信息侧栏双栏；底部 Tab 转顶部导航 */
@media (min-width:1024px){
  .hg-home-layout{
    display:flex; align-items:flex-start; justify-content:center; gap:var(--pc-gap);
    max-width:var(--app-max-w-theater); margin:0 auto; padding:24px var(--pc-page-pad);
  }
  .hg-feed{ flex:0 0 440px; width:440px; }
  .hg-feed__item{ height:auto; }
  .hg-feed-card{
    width:440px; aspect-ratio:9/16; height:auto;
    max-height:calc(100vh - 96px); max-height:calc(100dvh - 96px);
    border-radius:var(--radius-panel); box-shadow:var(--shadow-card);
  }
  .hg-feed-card__meta{ display:none; }   /* 左下信息移入侧栏（同一份 DATA 双渲染） */
  .hg-home-side{
    display:block; flex:1; min-width:360px; max-width:560px;
    background:var(--bg-card); border-radius:var(--radius-panel);
    padding:28px; box-shadow:var(--shadow-card);
  }
  .hg-home-side__title{ font-size:24px; font-weight:700; line-height:32px; }
  .hg-home-side__chips{ display:flex; gap:8px; margin-top:12px; }
  .hg-home-side__desc{ margin-top:14px; font-size:14px; line-height:22px; color:var(--text-secondary); }
  .hg-home-side__label{ margin-top:24px; font-size:13px; font-weight:600; color:var(--text-primary); }
  .hg-home-side__episodes{
    display:grid; grid-template-columns:repeat(12,1fr); gap:8px; margin-top:12px;
  }
  .hg-home-side__episodes button{
    aspect-ratio:1; border-radius:8px; background:var(--bg-page);
    font-size:12px; color:var(--text-primary);
    transition:transform .18s ease,opacity .18s ease;
  }
  .hg-home-side__episodes button:active{ transform:scale(.94); opacity:.8; }
  .hg-home-side__cta{
    display:block; width:100%; min-height:44px; margin-top:24px;
    border-radius:var(--radius-pill); background:var(--brand-gradient);
    box-shadow:var(--shadow-btn); color:var(--bg-card);
    font-size:15px; font-weight:500; line-height:22px;
    transition:transform .18s ease,opacity .18s ease;
  }
  .hg-home-side__cta:active{ transform:scale(.98); opacity:.9; }
  .hg-home-side__recs{
    display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:24px;
  }
  .hg-home-side__rec{
    display:flex; flex-direction:column; gap:6px;
    transition:transform .18s ease,opacity .18s ease;
  }
  .hg-home-side__rec:active{ transform:scale(.96); opacity:.85; }
  .hg-home-side__rec div{ aspect-ratio:3/4; border-radius:8px; overflow:hidden; background:var(--bg-page); }
  .hg-home-side__rec img{ width:100%; height:100%; object-fit:cover; }
  .hg-home-side__rec span{ font-size:11px; color:var(--text-secondary); }
  /* Tab 转顶部 sticky 横向导航（状态机 key 不变） */
  .hg-tabbar{
    position:sticky; top:0; bottom:auto; height:64px; padding-bottom:0;
    grid-template-columns:repeat(4,minmax(0,1fr)); max-width:var(--app-max-w-theater);
    border-radius:0 0 var(--radius-card) var(--radius-card);
  }
  .hg-app[data-hg-page="home"]    #home-tabbar,
  .hg-app[data-hg-page="theater"] #theater-tabbar,
  .hg-app[data-hg-page="mine"]    #mine-tabbar,
  .hg-app[data-hg-page="live"]    #live-tabbar{ display:grid; }
  .hg-tabbar__item{ flex-direction:row; gap:8px; min-height:64px; }
  .hg-tabbar__item::after{
    content:""; position:absolute; left:20%; right:20%; bottom:0; height:3px;
    border-radius:2px; background:transparent;
  }
  .hg-tabbar__item.is-active::after{ background:var(--tab-active); }
  .hg-home-indicator{ display:none; }
  .hg-page{ padding-bottom:0; }
  .hg-page--home{ padding-bottom:0; }
}
@media (min-width:1440px){
  .hg-home-layout{ max-width:1440px; }
  .hg-home-side{ max-width:560px; }
  .hg-home-side__recs{ grid-template-columns:repeat(4,1fr); }
}
/* 我的页：头图横幅化 + 功能卡 5 等分 + 网格重排 */
@media (min-width:768px){
  .hg-mine__header{ height:min(280px,24vw); }
  .hg-mine__profile{ max-width:var(--app-max-w-mine); margin-left:auto; margin-right:auto; margin-top:-150px; padding:0 var(--pc-page-pad); }
  .hg-mine__avatar{ width:80px; height:80px; }
  .hg-mine__name{ font-size:24px; }
  .hg-mine__stats-left{ gap:48px; }
  .hg-mine__funcs{
    display:grid; grid-template-columns:repeat(5,1fr); gap:14px; overflow:visible;
    max-width:var(--app-max-w-mine); margin-left:auto; margin-right:auto;
    padding:0 var(--pc-page-pad);
  }
  .hg-mine__func{ flex:none; width:auto; }
  .hg-mine__panel{
    max-width:var(--app-max-w-mine); margin-left:auto; margin-right:auto;
    padding-left:var(--pc-page-pad); padding-right:var(--pc-page-pad);
    border-radius:var(--radius-panel);
  }
  .hg-mine__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (min-width:1024px){ .hg-mine__grid{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (min-width:1440px){ .hg-mine__grid{ grid-template-columns:repeat(6,minmax(0,1fr)); } }

/* ══════════════════════════════════════════════════════════════════════
   分节 10 · 横屏密度压缩 / 减弱动效（§4.3 / §5.5）
   ══════════════════════════════════════════════════════════════════════ */
@media (orientation:landscape) and (max-height:500px){
  .hg-feed-card__overlay-top{ height:100px; }
  .hg-feed-card__overlay-bottom{ height:200px; }
  .hg-feed-card__actions{ gap:8px; bottom:110px; }
  .hg-feed-card__meta{ bottom:calc(var(--cta-h) + 8px); }
  .hg-mine__header{ height:200px; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:0s !important; animation-duration:0s !important; scroll-behavior:auto !important; }
}