/* 生产版（由本地 demo 版构建，已去掉 ?look 开关）—— 构建于 2026-10-06 */
/* ============================================================================
 * hero 全站铺开（**本机预览，未上线**）—— 与 qdm-hero-everywhere-20261006.js 配套
 *
 * 口径（2026-10-06 用户最终确认）：
 *   · 每个区域（游戏库 / 联机修复工具 / 平台修复工具 / 游戏工具 / 各专题页）都要有 hero，
 *     而且就是**首页那一块**：同样的尺寸、同样能左右切屏 —— 不允许一处一个尺寸。
 *   · 横向：**收窄到和下面的工具栏 / 卡片区左右外边框对齐**，不拉满屏。
 *   · 竖向：高度拉高，让里面的展示图更大方。
 *   · 每屏可以放图（壁纸或广告），有图的那屏不显示原来的文案；没图的那屏保持渐变。
 *   · hero 右侧那张深色「本地游戏管理工具」卡不要了，右下角也不要按钮。
 *
 * 关键事实：那块 hero **每个页面本来就在 DOM 里**（4 屏 + 左右箭头 + 文案，点击也能切屏），
 *          只是被 qdm-library-framework-fix-20261002-v2.css 的两条规则藏了：
 *            .qdm-category-view   .hero-shell { display: none !important }
 *            .qdm-library-integrated .hero-shell { display: none !important }
 *          → 所以这里不是"再造一块 hero"，而是**解封**那一块。第一条规则的选择器是
 *            (0,2,0)，本层用 :root.类 提到 (0,3,0)，两边都 !important 时本层赢。
 * ========================================================================== */

/* ---------- ① 解封：区域页 / 专题页不再隐藏首页那块 hero ---------- */
/* 例外：游戏库总览页 与 游戏工具页 上方的 hero 不要（2026-10-06 用户要求）——
   JS 认到这两个路由会给 <html> 打 data-qdm-hero-off，下面这条再收回去。 */
:root:is(.qdm-category-view, .qdm-library-integrated) .hero-shell {
  display: block !important;
}
:root[data-qdm-hero-off] .hero-shell {
  display: none !important;
}

/* ---------- ② 横向：跟下面工具栏 / 卡片区左右对齐，不拉满屏 ---------- */
/* hero 就是 .page-shell 的第一个子元素，宽度取 100% —— 于是它的左右外边框
   和下面的分类页工具栏（.toolbar）、卡片区（.content-layout / .articles-grid）完全对齐。 */
:root .page-shell > .hero-shell {
  width: 100%;
  margin-left: 0;
}

/* ---------- ③ 竖向：拉高，把里面的展示图放大 ---------- */
:root .hero { height: 340px; }

/* ---------- ④ 去掉 hero 右侧的深色工具卡 ---------- */
:root .hero .qdm-utility-promo { display: none !important; }

/* ---------- ④ 每屏的图片（JS 探到哪几张、就在 html 上标哪几个序号） ---------- */
/* 有图：图铺满 + 左侧压一层暗角保证文案能读；背景仍带原渐变做兜底 */
:root[data-qdm-hero-img~="1"] .hero.hero-1,
:root[data-qdm-hero-img~="2"] .hero.hero-2,
:root[data-qdm-hero-img~="3"] .hero.hero-3,
:root[data-qdm-hero-img~="4"] .hero.hero-4 {
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
:root[data-qdm-hero-img~="1"] .hero.hero-1 {
  background-image:
    linear-gradient(90deg, rgba(10, 11, 16, .62) 0%, rgba(10, 11, 16, .22) 46%, rgba(10, 11, 16, 0) 74%),
    url("/assets/promo/hero-1.jpg");
}
:root[data-qdm-hero-img~="2"] .hero.hero-2 {
  background-image:
    linear-gradient(90deg, rgba(10, 11, 16, .62) 0%, rgba(10, 11, 16, .22) 46%, rgba(10, 11, 16, 0) 74%),
    url("/assets/promo/hero-2.jpg");
}
:root[data-qdm-hero-img~="3"] .hero.hero-3 {
  background-image:
    linear-gradient(90deg, rgba(10, 11, 16, .62) 0%, rgba(10, 11, 16, .22) 46%, rgba(10, 11, 16, 0) 74%),
    url("/assets/promo/hero-3.jpg");
}
:root[data-qdm-hero-img~="4"] .hero.hero-4 {
  background-image:
    linear-gradient(90deg, rgba(10, 11, 16, .62) 0%, rgba(10, 11, 16, .22) 46%, rgba(10, 11, 16, 0) 74%),
    url("/assets/promo/hero-4.jpg");
}

/* ---------- ⑤ 有图的那几屏：不显示原来的文案（壁纸归壁纸，要标题就做进图里） ---------- */
:root[data-qdm-hero-img~="1"] .hero.hero-1 .hero-copy,
:root[data-qdm-hero-img~="2"] .hero.hero-2 .hero-copy,
:root[data-qdm-hero-img~="3"] .hero.hero-3 .hero-copy,
:root[data-qdm-hero-img~="4"] .hero.hero-4 .hero-copy {
  visibility: hidden;
}

/* ---------- ⑥ hero 左右切换按钮 / 圆点指示器归位（2026-10-06 用户要求） ---------- */
/* 主包 CSS 本来就是对的：左箭头 left:16px、右箭头 right:16px、圆点 left:50% 居中；
   但 qdm-desktop-refresh-20260927.css 把它们改成了
     .hero-arrow.next { right: 36% }  .hero-dots { right: 40%; left: auto; bottom: 17px }
   → 两个箭头都挤在右侧偏中间（实测左箭头 849px、距右 501px），圆点整体偏了 73px。
   这里按"箭头贴两边、圆点居中"归位（选择器权重高于那一层，不需要 !important）。 */
:root .hero .hero-arrow { top: calc(50% - 22px); bottom: auto; }
:root .hero .hero-arrow.prev { left: 16px; right: auto; }
:root .hero .hero-arrow.next { right: 16px; left: auto; }
:root .hero .hero-arrow:hover {
  background: rgba(99, 102, 241, .55);
  color: #fff;
}
:root .hero .hero-dots {
  left: 50%;
  right: auto;
  bottom: 20px;
  transform: translateX(-50%);
  justify-content: center;
}
/* 圆点在图片上要看得清：垫一层很淡的底 */
:root .hero .hero-dots {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(10, 11, 16, .28);
  backdrop-filter: blur(6px);
}

/* 箭头/圆点在图片屏上要压得住背景 */
:root .hero .hero-arrow,
:root .hero .hero-dots { z-index: 4; }