/* ==========================================================================
   mobile-automotive.css — 汽车零部件行业解决方案页移动端专属样式
   --------------------------------------------------------------------------
   仅包含该页特有的结构；公共组件（头部 / 首屏 / 锚点条 / 版块 / 卡片 /
   合作伙伴 / 页脚）一律复用 css/mobile-template.css。

   所有规则均位于 @media (max-width: 789px) 内，
   因此桌面端（≥790px）的 Figma 画布保持原样，零影响。

   本页专属内容：
   1) .m-auto-hero        —— 首屏大图（e038e.png）的取景位置与压暗蒙版
   2) .m-auto-demands     —— 行业需求/痛点：金色左边线 + 金色编号（对应桌面端 .demand-item）
   3) .m-auto-solutions   —— 解决方案：背景图 565c7.png + 深色遮罩（对应桌面端 .solutions-photo）
   4) .m-auto-cases       —— 服务案例：背景图 777c9.png + 深色遮罩（对应桌面端 .cases-photo）
   ========================================================================== */
@media (max-width: 789px) {
  /* ------------------------------------------------------------------ 首屏
     桌面端首屏为 1929×666 的集装箱仰拍图，窄屏裁切时保留中部橙色集装箱，
     并补一层斜向暗色蒙版，保证白色标题与金色 eyebrow 的可读性。 */
  .m-auto-hero .m-hero__bg {
    object-position: 50% 42%;
  }

  .m-auto-hero::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(
      100deg,
      rgba(0, 0, 0, 0.68) 0%,
      rgba(0, 0, 0, 0.34) 62%,
      rgba(0, 0, 0, 0.16) 100%
    );
  }

  .m-auto-hero .m-hero__inner {
    z-index: 1;
  }

  /* ------------------------------------------------------- 行业需求 / 痛点
     对应桌面端 .demand-grid：卡片左侧使用 3px 金色竖线，编号单独以金色强调。 */
  .m-auto-demand-cards .m-card {
    background: #fff;
    border-left: 3px solid var(--m-gold);
  }

  .m-auto-demand-cards .m-card__body {
    padding: 16px;
    align-items: flex-start;
    text-align: left;
  }

  .m-auto-demand-cards .m-card__title {
    color: var(--m-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.55;
    text-align: left;
  }

  .m-auto-demand-number {
    display: inline-block;
    margin-right: 8px;
    color: var(--m-gold);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.5px;
  }

  .m-auto-demand-cards .m-card__desc {
    color: #666;
    font-size: 13px;
  }

  /* --------------------------------------------------------------- 解决方案
     对应桌面端 .auto-solutions：整版背景图 565c7.png（发动机零部件），
     叠加深色遮罩后使用 .m-section--dark 的白字，保证对比度可读。 */
  .m-auto-solutions {
    background-color: #1b1b1b;
    background-image: linear-gradient(rgba(12, 12, 12, 0.8), rgba(12, 12, 12, 0.8)),
      url("../assets/auto-parts/565c7.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .m-auto-solutions .m-section__en {
    color: var(--m-gold);
  }

  /* 卡片沿用模板的 .m-card，仅把左侧换成金色竖线并改为左对齐排版 */
  .m-auto-solution-cards .m-card {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    border-left: 3px solid var(--m-gold);
    border-radius: 10px;
  }

  .m-auto-solution-cards .m-card__body {
    padding: 14px 16px;
    align-items: flex-start;
    text-align: left;
  }

  .m-auto-solution-cards .m-card__title {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
  }

  .m-auto-solution-cards .m-card__desc {
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
  }

  /* --------------------------------------------------------------- 服务案例
     对应桌面端 .service-cases：背景图 777c9.png（发动机舱），
     同样叠加深色遮罩，合作伙伴 Logo 放在浅色卡片上以保证可读。 */
  .m-auto-cases {
    background-color: #1b1b1b;
    background-image: linear-gradient(rgba(12, 12, 12, 0.82), rgba(12, 12, 12, 0.82)),
      url("../assets/auto-parts/777c9.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .m-auto-cases .m-section__en {
    color: var(--m-gold);
  }

  .m-auto-cases .m-logo {
    min-height: 84px;
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.2);
  }

  .m-auto-cases .m-logo img {
    max-height: 60px;
    object-fit: contain;
  }

  /* 极窄屏：合作伙伴 Logo 两列更窄，限制高度避免变形 */
  @media (max-width: 359px) {
    .m-auto-cases .m-logo {
      min-height: 68px;
      padding: 8px;
    }

    .m-auto-cases .m-logo img {
      max-height: 48px;
    }
  }
}