/* ==========================================================================
   mobile-international.css — 国际物流页移动端专属样式
   --------------------------------------------------------------------------
   边界说明（修改本文件前请先阅读）：
   1) 本文件只服务于 ≤789px 的移动端视图，桌面端（≥790px）不受任何影响；
   2) 全部规则都位于 @media (max-width: 789px) 内；
   3) 公共组件（头部 / 首屏 / 锚点条 / 版块 / 列表 / 仓库 / 页脚）一律复用
      css/mobile-template.css，本文件只写本页特有结构：
        - .m-hero__bg        首屏国际集装箱大图的取景位置
        - .m-list--icon      列表项左侧的物流图标（公路 / 铁路 / 仓储 / 卡航 / 班列）
        - .m-icon            列表项图标尺寸
        - .m-intl-rule       版块标题下的金色短横线（沿用桌面端 .section-rule）
        - .m-warehouse       海外仓：桌面端 1728px 横向拼图逐张裁切显示
        - .m-warehouse--strip2  第二组海外仓拼图（89778.png）的裁切参数
   ========================================================================== */
@media (max-width: 789px) {
  /* ------------------------------------------------------------------ 首屏 */
  /* 桌面端首屏 object-position: center 49%，移动端保持一致，避免裁切偏位 */
  .m-hero__bg {
    object-position: 50% 49%;
  }

  /* ---------------------------------------------------- 版块标题下的金线 */
  .m-intl-rule .m-section__title {
    position: relative;
    padding-bottom: 12px;
  }

  .m-intl-rule .m-section__title::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 64px;
    height: 3px;
    content: "";
    transform: translateX(-50%);
    background: var(--m-gold);
  }

  /* -------------------------------------------------------- 列表项带图标 */
  .m-list--icon .m-list__key {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--m-ink);
    font-size: 14px;
    font-weight: 700;
  }

  .m-list--icon .m-list__key img {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    max-width: none;
    object-fit: contain;
  }

  /* -------------------------------------------------------------- 海外仓 */
  /* 桌面端 4c744.png（1728×358）与 89778.png（1728×364）是横向四联拼图，
     这里按单张照片裁切显示；百分比取自桌面端同一裁切窗口，任意列宽都一致。 */
  .m-warehouse figure {
    position: relative;
    overflow: hidden;
    aspect-ratio: 320 / 344;
  }

  .m-warehouse img {
    position: absolute;
    top: var(--wy, -4.07%);
    left: var(--wx, 0%);
    width: 540%;
    height: var(--wh, 104.07%);
    max-width: none;
    object-fit: fill;
  }

  /* 第二组拼图：原图 364px 高，裁切窗口 320×343 */
  .m-warehouse--strip2 figure {
    aspect-ratio: 320 / 343;
  }

  .m-warehouse--strip2 img {
    --wy: -5.54%;
    --wh: 106.12%;
  }
}