/* ==========================================================================
   MLZ Banner 自适应系统 v1 · 2026-11-04
   解决的问题：
     1. 内页 hero 背景图被 0.86–0.92 不透明度的渐变完全盖住 → 移动端看不到图
     2. 全部 `center/cover` 无焦点概念 → 竖屏裁切时主体被切掉
     3. 桌面/平板/手机三档共用同一裁切规则 → 小屏必然丢主体
   做法：
     · 背景图提取为 `--hero-img` 变量，渐变遮罩与焦点分级由 CSS 控制
     · `--hero-focus` 承载裁切焦点（水平% 垂直%），逐图定位
     · 桌面沿用原有 center/cover，零视觉变化
     ========================================================================== */

/* ---------- 内页 hero：还原原桌面表现 ---------- */
.hero--inner {
  background-image:
    linear-gradient(135deg, rgba(10, 42, 69, .92) 0%, rgba(14, 58, 93, .86) 55%, rgba(17, 85, 127, .82) 100%),
    var(--hero-img) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat;
}

/* ---------- 首页轮播 hero：桌面沿用 center ---------- */
.hero .hero-bg { background-position: center; }

/* ==========================================================================
   移动端：图片优先，遮罩减弱，焦点分级
   ========================================================================== */
@media (max-width: 860px) {

  /* 内页 hero：图片层在上、文字层在下，与首页保持同一语言。
     用 ::before 承载图片，避免改动 HTML 结构。
     图片层高度按原图比例自适应（--hero-ar），配合 contain 完整呈现主体，
     彻底避免 cover 裁切切掉产品挂牌 / 地台文字。 */
  .hero--inner {
    padding: 0 0 34px !important;
    background-image:
      linear-gradient(180deg, rgba(7, 26, 44, .88) 0%, rgba(10, 42, 69, .72) 100%) !important;
    background-color: var(--navy-deep, #0a2a45) !important;
    background-size: auto !important;
    background-position: center !important;
  }
  .hero--inner::before {
    content: "";
    display: block !important;
    width: 100%;
    aspect-ratio: var(--hero-ar, 16 / 9);
    max-height: 46vh;
    margin-bottom: 26px;
    background-color: #eef3f7;
    background-image: var(--hero-img) !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat;
  }
  .hero--inner > .container {
    position: relative;
    z-index: 2;
  }

  /* 首页轮播：焦点分级生效 */
  .hero .hero-bg {
    background-position: var(--hero-focus, 50% 45%) !important;
  }
}

/* ---------- 超窄屏：进一步收紧裁切，优先保住主体 ---------- */
@media (max-width: 420px) {
  .hero--inner::before {
    display: block !important;
    max-height: 40vh;
  }
  .hero--inner {
    background-image:
      linear-gradient(180deg, rgba(7, 26, 44, .90) 0%, rgba(10, 42, 69, .76) 100%) !important;
  }
}

/* ==========================================================================
   逐图定义
   ─────────────────────────────────────────────────────────────────────────
   --hero-focus  裁切焦点（水平% / 垂直%），仅在需要裁切时生效
   --hero-ar     图片原始宽高比，移动端图片层按此比例自适应高度，
                 contain 完整呈现主体，绝不切掉挂牌 / 地台文字

   ego-showroom-retail-space  1024×768  展厅全景，割草机展台在左中
   devon-display-wall         1600×1040 立式展架居中偏左，顶端有品牌牌
   devon-island-display       1600×902  孤岛展台居中偏左，底部有品牌地台
   jetech-tool-display-1      800×800   工具挂板居中，顶端招牌
   jetech-service-cart        1200×606  红色工具车居中偏右
   ========================================================================== */
.hero--bg-ego    { --hero-focus: 40% 48%; --hero-ar: 1024 / 768; }
.hero--bg-wall   { --hero-focus: 50% 34%; --hero-ar: 1600 / 1040; }
.hero--bg-island { --hero-focus: 46% 56%; --hero-ar: 1600 / 902; }
.hero--bg-tool   { --hero-focus: 50% 26%; --hero-ar: 800 / 800; }
.hero--bg-cart   { --hero-focus: 52% 46%; --hero-ar: 1200 / 606; }