/* contact.mobile.css
 * 差异覆写：仅手机端通过 <link media="(max-width:768px)"> 生效
 * 通过 mkl_enqueue_styles('contact') 自动挂载
 * ⚠️ 铁律 #24：PC 文件 contact.css 一字不动
 * ⚠️ 本文件不写 @media 查询
 */

/* ─── CSS 变量覆写 ─── */
:root {
  /* hero 上浮固定位置：手机 navbar 隐藏，120px 足够 */
  --ct-pin-top: 120px;
}

/* ─── Hero UI 角标 ─── */
.mkl-hero-ui-tl {
  top: 18px;
  left: 16px;
  font-size: 9px;
}
.mkl-hero-ui-tr {
  top: 18px;
  right: 16px;
  font-size: 9px;
}
.mkl-hero-ui-dots {
  right: 16px;
}

/* ─── Hero 文字 ─── */
/* 56px → 36px，手机居中显示舒适 */
.mkl-hero-title-cn {
  font-size: 36px;
}
.mkl-hero-text-cn.pinned .mkl-hero-title-cn {
  font-size: 26px;
}
.mkl-hero-subtitle {
  font-size: 13px;
  margin-top: 12px;
  padding: 0 24px;
}
.mkl-hero-text-cn.pinned .mkl-hero-subtitle {
  font-size: 12px;
  margin-top: 8px;
}

/* ─── Functional 区：核心修复 ─── */
/* PC 380px 留白是为了 pinned hero 文字 + 视觉呼吸感，手机压缩 */
#mkl-functional {
  padding-top: 220px;
}

/* ─── 区块容器 ─── */
.mkl-ct-section {
  padding: 0 20px;
}

/* ─── 区块标题 ─── */
.mkl-ct-title {
  font-size: 22px;
}
.mkl-ct-header {
  margin-bottom: 32px;
}

/* ─── §01 Portal 卡片：横排 → 竖排 ─── */
.mkl-portal-grid {
  flex-direction: column;
  gap: 16px;
}
.mkl-portal-card {
  height: auto;
  /* PC 56px 内边距 → 手机 28px */
  padding: 28px;
}
.mkl-portal-card-title {
  font-size: 20px;
}
.mkl-portal-card-desc {
  margin-top: 16px;
}
.mkl-portal-card-item {
  font-size: 14px;
}
.mkl-portal-card-arrow {
  position: relative;
  right: auto;
  bottom: auto;
  margin-top: 20px;
}
/* hover 位移手机无意义 */
.mkl-portal-card.in-view:hover {
  transform: none;
}

/* ─── §02 联系方式 ─── */
.mkl-ct-section--02 {
  margin-top: 64px;
}
/* 2列 → 1列 */
.mkl-contact-grid {
  grid-template-columns: 1fr;
  gap: 16px;
}
.mkl-contact-card {
  padding: 24px;
  border-radius: 16px;
}
.mkl-contact-card.in-view:hover {
  transform: none;
}
.mkl-contact-card-email {
  font-size: 15px;
}
/* 邮箱+复制按钮在手机上竖排，防止溢出 */
.mkl-contact-card-value {
  flex-wrap: wrap;
  gap: 10px;
}

/* ─── §02 联系方式卡片内部：QR 图缩小 ─── */
.mkl-shop-card-qr img {
  width: 72px;
  height: 72px;
}
.mkl-shop-card-qr {
  margin-left: 16px;
}
.mkl-shop-card-name {
  font-size: 18px;
}

/* ─── §03 店铺直达 ─── */
.mkl-ct-section--03 {
  margin-top: 48px;
}

/* ─── 分隔线 ─── */
.mkl-ct-divider-wrap {
  margin-top: 64px;
}

/* ─── Closing ─── */
.mkl-ct-section--closing {
  margin-top: 64px;
}
.mkl-closing-text {
  font-size: 18px;
  line-height: 1.6;
}
.mkl-closing-sub {
  font-size: 13px;
}
.mkl-closing-cta {
  margin-top: 28px;
  padding: 12px 32px;
  font-size: 14px;
}

/* ─── Footer ─── */
.mkl-ct-section--footer {
  margin-top: 64px;
  padding-bottom: 60px;
}