/* ==========================================================================
   mobile-multimodal.css — 多式联运页移动端专属样式
   --------------------------------------------------------------------------
   仅包含该页特有的组件；公共组件一律复用 css/mobile-template.css。
   所有规则位于 @media (max-width: 789px) 内，桌面端（≥790px）不受影响。

   本页专属内容：
   1) .m-icon 系列 —— 服务行业图标，直接复用桌面端雪碧图
      ../assets/multimodal/91f41.png（画布 960×2277），裁切参数与桌面端
      css/multimodal-logistics.css 中的 .industry-icon 完全一致。
   2) .m-hero__bg —— 本页 Hero 图（1932×1082）的取景位置。
   ========================================================================== */
@media (max-width: 789px) {
  /* ---------------------------------------------------------- 服务行业图标
     桌面端五个行业图标是从雪碧图 91f41.png 上裁切出来的（不是独立图片文件），
     这里复用同一组裁切参数：单元格 110×93，底图 960×2277，y 偏移 -1736。 */
  .m-icon {
    display: block;
    width: 110px;
    height: 93px;
    max-width: none;
    background-image: url("../assets/multimodal/91f41.png");
    background-repeat: no-repeat;
    background-size: 960px 2277px;
  }

  .m-icon--chemical { background-position: -53px -1736px; }
  .m-icon--consumer { background-position: -226px -1736px; }
  .m-icon--energy { background-position: -406px -1736px; }
  .m-icon--grain { background-position: -605px -1736px; }
  .m-icon--mining { background-position: -779px -1736px; }

  /* 本页 Hero 大图（1932×1082）在窄屏下整体居中取景，避免车辆被裁在画面边缘 */
  .mobile-view .m-hero__bg {
    object-position: center;
  }

  /* 极窄屏（320px 起）：两列网格放不下 110px 图标，整组缩小到 0.8 倍
     （图标 88×74，底图 768×1822，偏移同比缩放） */
  @media (max-width: 359px) {
    .m-icon {
      width: 88px;
      height: 74px;
      background-size: 768px 1822px;
    }

    .m-icon--chemical { background-position: -42px -1389px; }
    .m-icon--consumer { background-position: -181px -1389px; }
    .m-icon--energy { background-position: -325px -1389px; }
    .m-icon--grain { background-position: -484px -1389px; }
    .m-icon--mining { background-position: -623px -1389px; }
  }
}