/* ══════════════════════════════════════════════
   homepage.mobile.css — 首页移动端覆写
   加载条件：<link media="(max-width: 768px)">（由 mkl_enqueue_styles() 自动挂载）
   写法：差异模式，只覆写 PC 需要改变的属性，无 @media
   PC 零影响。
   ══════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   § 1  Hero：Apple 卡片风格（参考 apple.com/cn 手机端）
   ══════════════════════════════════════════════ */

/* 全部 Hero：Apple 风格全幅铺满，无圆角，无侧边距 */
/* 图片出图建议：1170×1560px（竖版构图，主体居中） */
.mkl-hero {
  /* 高度：500px（Apple iPhone 页手机端标准） */
  height: 500px;
  /* 无圆角：完全铺满 */
  border-radius: 0;
  /* 无侧边距：全幅 */
  margin-left: 0;
  margin-right: 0;
}

/* 首屏 Hero：全幅 + padding-top 清开 navbar（48px） */
.mkl-hero--first {
  /* 首屏全高：500px + navbar 48px */
  height: calc(500px + 48px);
  padding-top: 48px;
  margin-top: 0;
}

/* Hero 间距：Apple 标准 8px gap */
.mkl-hero + .mkl-hero {
  margin-top: 8px;
}


/* 标题：ACF 手机端设置（默认 22px） */
.mkl-hero h1 {
  font-size: var(--mkl-mob-hero-title-size, 22px);
}

/* 副标题：ACF 手机端设置（默认 15px） */
.mkl-hero p {
  font-size: var(--mkl-mob-hero-sub-size, 15px);
  margin-bottom: 16px;
}

/* Hero 文字组垂直位置：优先取单卡覆写 --mkl-mob-per-y，fallback 全局 --mkl-mob-hero-content-y */
.mkl-hero-content {
  transform: translateY(var(--mkl-mob-per-y, var(--mkl-mob-hero-content-y, 0px)));
  padding: 0 20px;
}

/* CTA 按钮：ACF 手机端设置 */
.mkl-cta {
  padding: var(--mkl-mob-hero-cta-pad-y, 10px) var(--mkl-mob-hero-cta-pad-x, 20px);
  font-size: var(--mkl-mob-hero-cta-size, 13px);
}

/* 位置变体：移动端统一水平居中，不做左右差异 */
.mkl-hero--pos-bottom-left,
.mkl-hero--pos-bottom-right {
  align-items: center;
}
.mkl-hero--pos-bottom-left .mkl-hero-content,
.mkl-hero--pos-bottom-right .mkl-hero-content {
  text-align: center;
}


/* ══════════════════════════════════════════════
   § 2  Bottom Section（深灰 #1D1D1F）
   ══════════════════════════════════════════════ */

/* 整体内边距收窄（PC 120px/100px → Mobile 64px/72px） */
.mkl-bottom {
  padding: 64px 20px 72px;
}

/* Contact 控制器：右侧定位跟随 padding 调整 */
.mkl-contact-controls {
  top: 24px;
  right: 20px;
}

/* Tagline 底部间距收窄 */
.mkl-tagline-static {
  margin-bottom: 48px;
}

/* Tagline 字号：clamp 下调（PC min 32px → Mobile min 24px） */
.mkl-tagline-static h2 {
  /* 最小 24px，理想 7vw（375px 下 ≈ 26px），最大 36px */
  font-size: clamp(24px, 7vw, 36px);
  letter-spacing: -0.03em;
}


/* ══════════════════════════════════════════════
   § 3  Contact Panel：4 列 → 2×2
   ══════════════════════════════════════════════ */

/* 展开高度：2 行比 1 行高，覆写 PC 的 max-height: 300px */
.mkl-contact-panel--visible {
  max-height: 500px;
}

/* Grid：4 列 → 2 列 */
.mkl-contact-grid {
  grid-template-columns: repeat(2, 1fr);
  /* 行间距 */
  gap: 32px 0;
}

/* 重置 PC 的「所有后续项加左 border」逻辑 */
.mkl-contact-item + .mkl-contact-item {
  border-left: none;
}

/* 2 列布局：右列项（偶数位）恢复竖分隔线 */
.mkl-contact-item:nth-child(2n) {
  border-left: 1px solid #2A2A2C;
}


/* ══════════════════════════════════════════════
   § 4  产品线入口按钮：横排 → 竖排
   ══════════════════════════════════════════════ */

.mkl-entry-btns {
  flex-direction: column;
  gap: 12px;
  margin-bottom: 40px;
}

.mkl-entry-btn {
  /* 内边距收窄（PC 20px 40px） */
  padding: 16px 24px;
  font-size: 16px;
}


/* ══════════════════════════════════════════════
   § 5  服务卡片：横排 → 竖排
   ══════════════════════════════════════════════ */

.mkl-services {
  flex-direction: column;
  gap: 12px;
}

.mkl-service-card {
  /* 内边距收窄（PC 36px 32px） */
  padding: 24px 20px;
}