/* ============================================================
 * 安徽品青官网 · 手机端皮肤（mobile.css）
 * ------------------------------------------------------------
 * 作用域：全部规则以 body.m-page 为前缀，只影响 /m/ 下手机页，
 *        绝不触碰电脑版页面。加载顺序在 /css/style.css 之后，
 *        同特异性下按源序覆盖，实现「手机端完全自有排版」。
 *
 * 设计目标（晗玉）：
 *   1. 人机交互友好 —— 大触区（≥44px）、清晰反馈、易关闭；
 *   2. 排版紧凑 —— 压缩 hero / 区块留白 / 卡片，双列网格，
 *      长区块由 mobile.js 手风琴化，缩短滚动长度；
 *   3. 完全适应手机屏 —— 语言级排版微调，禁止横向溢出。
 *
 * 品牌变量沿用 style.css 的 :root 定义（--color-primary 等）。
 * ============================================================ */

/* ===== 0. 全局：禁止横向溢出 + 紧凑基调 ===== */
html:has(body.m-page),
body.m-page {
  overflow-x: clip; /* clip 不产生滚动容器，sticky 头部不受影响 */
}

body.m-page {
  font-size: 15px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/* 长单词/长 URL 兜底：任何元素都不允许撑破视口 */
body.m-page h1,
body.m-page h2,
body.m-page h3,
body.m-page p,
body.m-page li,
body.m-page td,
body.m-page th,
body.m-page a,
body.m-page summary {
  overflow-wrap: break-word;
  min-width: 0;
}

body.m-page img,
body.m-page video,
body.m-page iframe {
  max-width: 100%;
}

/* ===== 1. 头部与汉堡导航（大触区 + 抽屉友好关闭） ===== */
/* 注意：header 的 backdrop-filter 会为 fixed 后代创建包含块，
   把抽屉（position:fixed）锁进头部盒子。手机端改用实色背景。 */
body.m-page .site-header {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #ffffff;
}

body.m-page .site-header .container {
  height: 54px;
}

body.m-page .site-logo img {
  height: 30px;
  width: 30px;
}

body.m-page .site-logo-text {
  font-size: 0.82rem;
}

/* 汉堡按钮 ≥44×44 */
body.m-page .menu-toggle {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: background-color 0.2s ease;
}

body.m-page .menu-toggle:active {
  background: var(--color-primary-light);
}

body.m-page .menu-toggle span {
  width: 22px;
}

/* 抽屉：左侧滑入面板 + 遮罩，点遮罩 / Esc / 选中即关（site-ui.js 已处理逻辑） */
@media (max-width: 767.98px) {
  body.m-page .site-nav {
    position: fixed;
    top: 54px;
    bottom: 0;
    left: 0;
    width: min(84vw, 340px);
    max-height: none;
    display: flex;
    flex-direction: column;
    padding: 10px 14px calc(20px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    background: #fff;
    box-shadow: 12px 0 32px rgba(15, 23, 42, 0.18);
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform 0.26s ease, visibility 0.26s;
    z-index: 101;
  }

  body.m-page .site-nav.open {
    transform: translateX(0);
    visibility: visible;
  }

  /* 抽屉打开：整页滚动锁定 + 半透明遮罩（z 低于 header/nav） */
  body.m-page.m-nav-open {
    overflow: hidden;
  }

  body.m-page.m-nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 99;
  }

  /* 抽屉内主链接：52px 触区，统一左对齐 */
  body.m-page .site-nav > a,
  body.m-page .site-nav .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 52px;
    padding: 12px 10px;
    font-size: 1.02rem;
  }

  body.m-page .site-nav a.active {
    padding-left: 12px;
  }

  /* 抽屉内产品下拉：整行可点、子项 48px */
  body.m-page .dropdown-menu {
    padding: 0 0 0 12px;
  }

  body.m-page .dropdown-section a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 8px 4px;
    font-size: 0.95rem;
  }

  body.m-page .dropdown-toggle::after {
    right: 4px;
  }
}

/* ===== 2. 面包屑 / 语言菜单：加大触区 ===== */
body.m-page .breadcrumb {
  padding: 10px 0 4px;
  font-size: 0.82rem;
}

body.m-page .lang-menu > summary {
  min-height: 40px;
  padding: 6px 14px;
  font-size: 0.85rem;
}

body.m-page .lang-menu-list a {
  padding: 12px 14px; /* 44px 级触区 */
  font-size: 0.9rem;
}

/* ===== 3. 紧凑排版：hero / 区块 / 卡片 ===== */
body.m-page .hero img {
  max-height: 190px;
  object-fit: cover;
}

body.m-page .hero-slogan {
  padding: 20px 0 24px;
}

body.m-page .hero-slogan h1 {
  font-size: 1.3rem;
  line-height: 1.3;
  margin-bottom: 8px;
}

body.m-page .hero-slogan p {
  font-size: 0.88rem;
  margin-bottom: 14px;
  line-height: 1.65;
}

/* 3 个 CTA：2 列网格，第 3 个横跨整行，压缩纵向高度 */
body.m-page .hero-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

body.m-page .hero-actions .btn {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  font-size: 0.9rem;
}

body.m-page .hero-actions .btn:nth-child(3):last-child {
  grid-column: 1 / -1;
}

body.m-page .section {
  padding: 24px 0;
}

body.m-page .section h2 {
  font-size: 1.2rem;
  margin-bottom: 8px;
}

body.m-page .section h3 {
  font-size: 1.02rem;
}

body.m-page .lead {
  font-size: 0.88rem;
  margin-bottom: 12px;
  line-height: 1.6;
}

body.m-page .grid {
  gap: 10px;
}

/* 卡片网格双列化（产品卡片等宽内容场景由下方单独回落单列） */
body.m-page .grid-3,
body.m-page .grid-4 {
  grid-template-columns: repeat(2, 1fr);
}

body.m-page .card {
  padding: 14px 12px;
  border-radius: 12px;
}

body.m-page .card p {
  font-size: 0.78rem;
  line-height: 1.55;
}

body.m-page .card h3 {
  font-size: 0.9rem;
  margin-bottom: 6px;
  line-height: 1.35;
}

body.m-page .card-icon {
  width: 36px;
  height: 36px;
  font-size: 1rem;
  border-radius: 10px;
  margin-bottom: 10px;
}

/* 合作伙伴 / 应用领域：双列 + 缩图 */
body.m-page .partner-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 16px;
}

body.m-page .partner-card {
  padding: 12px 10px;
}

body.m-page .partner-media {
  height: 84px;
  margin-bottom: 8px;
}

body.m-page .partner-media img {
  max-height: 72px;
}

body.m-page .partner-card h3 {
  font-size: 0.9rem;
}

body.m-page .partner-card p {
  font-size: 0.78rem;
  line-height: 1.5;
}

/* 产品卡片：保持单列（图片+长摘要），压缩内边距 */
body.m-page .series-grid {
  grid-template-columns: 1fr;
}

body.m-page .product-card > span.product-tag,
body.m-page .product-card > h2,
body.m-page .product-card > p,
body.m-page .product-card > h3,
body.m-page .product-card > ul,
body.m-page .product-card > .card-more {
  margin-left: 14px;
  margin-right: 14px;
}

body.m-page .product-card-media img {
  aspect-ratio: 16 / 10; /* 压低产品图高度 */
}

body.m-page .product-card-title {
  font-size: 1.05rem;
}

body.m-page .product-card p {
  font-size: 0.85rem;
}

/* ===== 4. 表格：容器内横向滚动，绝不撑破视口 ===== */
body.m-page .table-wrap {
  margin-top: 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

body.m-page table.data-table {
  min-width: 540px; /* 小屏滚动查看，宽度由 .table-wrap 约束 */
  font-size: 0.8rem;
}

body.m-page table.data-table th,
body.m-page table.data-table td {
  padding: 8px 10px;
  line-height: 1.55;
}

/* ===== 5. FAQ details：大触区 + 默认收起（由 mobile.js 处理 open） ===== */
body.m-page .faq-item summary {
  min-height: 52px;
  padding: 14px 0;
  font-size: 0.95rem;
  align-items: center;
}

body.m-page .faq-item summary::after {
  font-size: 1.3rem;
  flex: 0 0 32px;
  text-align: center;
}

body.m-page .faq-item p {
  font-size: 0.88rem;
  line-height: 1.65;
}

body.m-page .search-box input,
body.m-page input[type="text"],
body.m-page input[type="tel"],
body.m-page input[type="email"] {
  min-height: 46px;
  font-size: 16px; /* 防 iOS 聚焦自动放大 */
}

/* ===== 6. 手风琴（mobile.js 注入 details.m-acc） ===== */
body.m-page details.m-acc {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  margin-top: 12px;
  background: var(--color-bg);
  overflow: hidden;
}

body.m-page details.m-acc > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 12px 14px;
  cursor: pointer;
  background: linear-gradient(135deg, #f6f9ff 0%, #eef4ff 100%);
  transition: background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

body.m-page details.m-acc > summary::-webkit-details-marker {
  display: none;
}

body.m-page details.m-acc > summary:active {
  background: var(--color-primary-light);
}

body.m-page details.m-acc > summary h2 {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.35;
}

body.m-page details.m-acc > summary::after {
  content: "▾";
  flex: 0 0 28px;
  text-align: center;
  font-size: 1.05rem;
  color: var(--color-primary);
  transition: transform 0.25s ease;
}

body.m-page details.m-acc[open] > summary::after {
  transform: rotate(180deg);
}

body.m-page .m-acc-body {
  padding: 10px 14px 14px;
}

body.m-page .m-acc-body > :first-child {
  margin-top: 0;
}

/* ===== 7. 粘性底部操作条（mobile.js 注入 .m-actionbar） ===== */
body.m-page .m-actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  display: grid;
  grid-template-columns: 1fr 1fr 1.35fr;
  gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
}

body.m-page .m-actionbar a,
body.m-page .m-actionbar button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 8px 6px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.m-page .m-actionbar a:active,
body.m-page .m-actionbar button:active {
  transform: scale(0.97);
}

/* 主 CTA（询盘报价） */
body.m-page .m-actionbar .m-ab-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, #2563eb 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.35);
}

/* 次级（电话 / 1688） */
body.m-page .m-actionbar .m-ab-secondary {
  background: #fff;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}

/* 预留底部空间：操作条永不遮挡页脚内容 */
body.m-page.has-m-bar {
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

/* 返回顶部按钮抬升到操作条之上，保证可用 */
body.m-page.has-m-bar .back-to-top {
  bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  width: 46px;
  height: 46px;
  right: 14px;
}

/* ===== 8. 返回顶部：加大到 46px ===== */
body.m-page .back-to-top {
  width: 46px;
  height: 46px;
  right: 14px;
  bottom: 14px;
  font-size: 1.2rem;
}

/* ===== 9. Footer 紧凑 ===== */
body.m-page .site-footer {
  padding: 24px 0 16px;
}

body.m-page .site-footer .container {
  gap: 18px;
}

body.m-page .footer-brand p {
  font-size: 0.78rem;
  line-height: 1.55;
}

body.m-page .footer-links a,
body.m-page .footer-links li {
  font-size: 0.8rem;
}

body.m-page .footer-links li {
  margin-bottom: 2px;
}

body.m-page .footer-bottom {
  margin-top: 14px;
  padding-top: 12px;
  font-size: 0.72rem;
}

/* 表单整体压缩 */
body.m-page .card-padded {
  padding: 16px;
}

body.m-page .order-form {
  padding: 16px;
  margin-top: 16px !important;
}

body.m-page .consult-form-box {
  margin-top: 16px;
  padding: 16px;
}

body.m-page .figure-block {
  margin: 14px 0;
}

body.m-page .product-gallery {
  gap: 8px;
}

body.m-page .product-hero-section {
  padding: 12px 0 20px;
}

body.m-page .product-hero-text h1 {
  font-size: 1.3rem;
}

/* 锚点导航（产品详情页）吸顶更贴身 */
body.m-page .anchor-nav {
  top: 54px;
}

body.m-page .anchor-nav a {
  padding: 12px 12px;
  min-height: 44px;
}

/* 产品详情 CTA 组：单列全宽，压缩高度 */
body.m-page .product-hero .hero-actions {
  grid-template-columns: 1fr;
}

body.m-page .product-hero .hero-actions .btn:nth-child(3):last-child {
  grid-column: auto;
}

/* ===== 10. 语言级排版微调（不追求 7 语言完全一致） ===== */
/* 法/西/葡：连字符断词，避免长词撑破；标题略缩 */
html[lang="fr"] body.m-page,
html[lang="es"] body.m-page,
html[lang="pt-BR"] body.m-page {
  -webkit-hyphens: auto;
  hyphens: auto;
}

html[lang="fr"] body.m-page .hero-slogan h1,
html[lang="es"] body.m-page .hero-slogan h1,
html[lang="pt-BR"] body.m-page .hero-slogan h1 {
  font-size: 1.18rem;
}

html[lang="fr"] body.m-page .section h2,
html[lang="es"] body.m-page .section h2,
html[lang="pt-BR"] body.m-page .section h2 {
  font-size: 1.12rem;
  line-height: 1.3;
}

html[lang="fr"] body.m-page .m-acc > summary h2,
html[lang="es"] body.m-page .m-acc > summary h2,
html[lang="pt-BR"] body.m-page .m-acc > summary h2 {
  font-size: 0.95rem;
}

html[lang="fr"] body.m-page .btn,
html[lang="es"] body.m-page .btn,
html[lang="pt-BR"] body.m-page .btn {
  font-size: 0.85rem;
}

html[lang="fr"] body.m-page .m-actionbar a,
html[lang="fr"] body.m-page .m-actionbar button,
html[lang="es"] body.m-page .m-actionbar a,
html[lang="es"] body.m-page .m-actionbar button,
html[lang="pt-BR"] body.m-page .m-actionbar a,
html[lang="pt-BR"] body.m-page .m-actionbar button {
  font-size: 0.8rem;
  line-height: 1.2;
}

/* 越南语：双层变音符号需要更宽松的行距，防止上下标互相裁切 */
html[lang="vi"] body.m-page {
  line-height: 1.7;
}

html[lang="vi"] body.m-page h1,
html[lang="vi"] body.m-page h2,
html[lang="vi"] body.m-page h3 {
  line-height: 1.4;
}

/* 英语 / 印尼语：基础微调 */
html[lang="en"] body.m-page .hero-slogan h1 {
  font-size: 1.24rem;
}

html[lang="id"] body.m-page .hero-slogan h1 {
  font-size: 1.24rem;
}

/* ===== 11. 宽屏兜底（m 页理论上 ≤767px 展示；万一在宽屏打开也不难看） ===== */
@media (min-width: 768px) {
  body.m-page .container {
    max-width: 640px;
  }

  body.m-page .m-actionbar {
    display: none;
  }

  body.m-page.has-m-bar {
    padding-bottom: 0;
  }

  body.m-page .site-nav {
    position: static;
    transform: none;
    visibility: visible;
  }
}

/* ===== 12. 动效偏好与打印 ===== */
@media (prefers-reduced-motion: reduce) {
  body.m-page .site-nav,
  body.m-page .m-acc > summary::after {
    transition: none;
  }
}

@media print {
  body.m-page .m-actionbar,
  body.m-page .back-to-top {
    display: none !important;
  }
}