/* ==========================================================================
   mobile-heavy.css — 大件运输页移动端专属样式
   --------------------------------------------------------------------------
   仅包含该页特有的结构；公共组件一律复用 css/mobile-template.css。
   所有规则均位于 @media (max-width: 789px) 内，
   因此桌面端（≥790px）的 Figma 画布保持原样，零影响。
   ========================================================================== */
@media (max-width: 789px) {
  /* ---------------------------------------------------------------- 首屏
     桌面端首屏为 1920×666 的宽幅城市公路图，窄屏裁切时需要保留左侧车头，
     并补一层暗色蒙版，保证白色标题与金色 eyebrow 的可读性。 */
  .m-heavy-hero .m-hero__bg {
    object-position: 24% center;
  }

  .m-heavy-hero::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(
      100deg,
      rgba(0, 0, 0, 0.62) 0%,
      rgba(0, 0, 0, 0.3) 55%,
      rgba(0, 0, 0, 0.12) 100%
    );
  }

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

  /* ------------------------------------------------------------ 能力标签
     对应桌面端 .heavy-capabilities：橙色描边 + 橙色文字。 */
  .m-heavy-capabilities {
    margin-top: 18px;
  }

  .m-heavy-capabilities .m-tag {
    color: var(--m-orange);
    font-weight: 600;
    background: #fff;
    border: 1px solid var(--m-orange);
  }

  /* ------------------------------------------------------------ 展示轮播
     对应桌面端 .heavy-showcase：陆风叶片配图改为可横向滑动的轮播。
     本页仅有一张可用配图（另一张在 js/heavy-logistics.js 中只切换同一张
     <img> 的 alt），因此单张占满整宽，避免出现大片空白。 */
  .m-heavy-showcase .m-scroll__item {
    margin: 0;
    flex: 0 0 100%;
  }

  .m-heavy-showcase .m-scroll__item img {
    width: 100%;
    height: auto;
    aspect-ratio: 800 / 411;
    object-fit: cover;
    background: #f2f2f2;
  }

  .m-heavy-showcase .m-scroll__hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--m-grey);
  }

  /* ------------------------------------------------------------ 自有装备
     对应桌面端 .equipment-grid：标签在左、数值在右的一行式清单。 */
  .m-heavy-equipment .m-list__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
  }

  .m-heavy-equipment .m-list__key {
    flex: 0 0 auto;
    color: #555;
    font-size: 13px;
    letter-spacing: 0;
  }

  .m-heavy-equipment .m-list__value {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
    text-align: right;
  }

  .m-heavy-equipment .m-list__value b {
    margin-right: 2px;
    font-size: 20px;
  }

  /* 极窄屏：让“桅杆吊”这类长取值换行显示而不挤压左侧标签 */
  @media (max-width: 359px) {
    .m-heavy-equipment .m-list__item {
      gap: 10px;
    }

    .m-heavy-equipment .m-list__key {
      font-size: 12px;
    }

    .m-heavy-equipment .m-list__value {
      font-size: 13px;
    }
  }
}