/* ============================================================
   店宝易点官网 —— 全局多设备自适应补丁 (adaptive.css)
   覆盖：电脑 / 平板 / 手机 / 双折叠手机 / 三折叠手机 / 翻盖手机
   策略：统一 safe-area 安全区 + 视口单位标准化 + 折叠屏特殊断点
   注意：本文件必须放在所有页面 CSS 之后加载（最后引入）
   ============================================================ */

/* ---------- 1. 安全区 CSS 变量（刘海屏 / 灵动岛 / 折叠屏） ---------- */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  /* 标准导航高度（与 style.css .header 高度保持一致） */
  --nav-h: 68px;
}

/* ---------- 2. 全局基础兜底：防止横向溢出 ---------- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 图片/视频/表格等不撑破容器 */
img, video, canvas, svg, iframe, table {
  max-width: 100%;
}

/* 长单词/长链接在窄屏自动换行，避免撑破布局 */
body, .container, article, p, h1, h2, h3, h4, h5, li, a {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ---------- 3. 固定导航栏 safe-area 顶部补偿 ---------- */
/* 覆盖所有页面的固定顶栏（.header / .top-bar 等） */
.header,
.top-bar,
.sol-nav {
  top: 0;
  padding-top: var(--safe-top);
}

/* body 顶部 padding 动态补偿安全区（替代硬编码 68px） */
body {
  padding-top: calc(var(--nav-h) + var(--safe-top));
}

/* 刘海屏/折叠屏设备（有 safe-area-top 时）进一步补偿 */
@supports (padding: max(0px)) {
  .header,
  .top-bar,
  .sol-nav {
    top: 0;
    padding-top: max(0px, env(safe-area-inset-top));
  }
  body {
    padding-top: max(68px, calc(68px + env(safe-area-inset-top)));
  }
}

/* ---------- 4. 底部浮动元素 safe-area 底部补偿 ---------- */
.sol-top,
.float-actions,
.toast,
.edge-hint,
.app-modal,
.search-modal {
  bottom: max(24px, calc(24px + env(safe-area-inset-bottom)));
}

/* ---------- 5. 首屏视口单位标准化（修复平板/折叠屏闪烁与溢出） ---------- */
/* 用 svh（稳定小视口高度）兜底，避免 dvh 随地址栏伸缩抖动 */
/* 注意：.mp-hero 内部是绝对定位的弧形轮播，必须保持固定 height，
   不能用 min-height:auto 覆盖，否则第1屏塌缩不显示（已排除在外） */
.hero,
.feat-hero,
.pb-hero,
#screen-hero {
  min-height: 100vh;
  min-height: 100svh;
}

/* 全屏屏（cashier 多屏）同样用 svh 兜底 */
@media (max-width: 1024px) {
  .hero, .feat-hero, .pb-hero, #screen-hero {
    min-height: 100vh;
    min-height: 100svh;
  }
}

/* ============================================================
   6. 折叠屏 / 翻盖手机 特殊断点
   折叠手机内屏展开后通常是超窄长屏（宽 280~420px，高很长）
   翻盖手机外屏通常是极窄（~280px）
   ============================================================ */

/* ---------- 超窄屏（折叠外屏 / 翻盖手机）≤360px ---------- */
@media (max-width: 360px) {
  :root { --nav-h: 56px; }

  /* 导航文字进一步缩小，避免换行/溢出 */
  .header-inner, .nav-list a {
    font-size: 0.8rem;
  }
  .logo img { height: 28px; }

  /* Hero 标题缩小，保证首屏完整显示 */
  .hero h1, .feat-hero h1, .pb-hero h1, .mp-hero h1 {
    font-size: 1.25rem !important;
    line-height: 1.35 !important;
  }
  .hero .sub, .feat-hero .hero-sub, .pb-hero .sub {
    font-size: 0.72rem !important;
  }

  /* 通用容器内边距收紧 */
  .container { padding-left: 10px; padding-right: 10px; }

  /* 网格降为单列，避免挤爆 */
  .grid-3, .grid-4, .feature-grid, .card-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- 折叠屏特性查询：按宽高比识别长条屏 ---------- */
/* 折叠屏展开后：宽度窄但高度很高（aspect-ratio 很小） */
@media (max-width: 500px) and (min-aspect-ratio: 2/5) {
  /* 双折叠/三折叠展开后，高度充足，允许内容纵向展开而非横向压缩 */
  .feat-hero, .hero, .pb-hero {
    min-height: auto;
    height: auto;
    overflow: visible;
  }
  .feat-hive {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ---------- 折叠屏展开态 / 小平板（901px - 1200px 宽度区间） ---------- */
/* 覆盖：鸿蒙双折叠/三折叠展开态、三星 Fold、小平板横屏等
   关键：不依赖 aspect-ratio（各厂商折叠屏宽高比不一，判断不可靠），
   直接用宽度区间当作"平板"来处理，确保第1屏模块正确自适应，不挤在左侧 */
@media (min-width: 901px) and (max-width: 1200px) {
  /* ---- 功能介绍页第1屏 ---- */
  .feat-hero {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    padding: 70px 20px 60px !important;
  }
  .feat-hero h1 { font-size: 2rem !important; }
  .feat-hero .hero-head { margin-bottom: 32px !important; }
  /* 蜂窝网格：3 列布局，明确 grid-area，避免 4 列挤在一起导致"挤在左侧" */
  .feat-hive {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-areas:
      "c1 c2 c3"
      "c4 c5 c6"
      "c7 c8 c9"
      "c10 c10 ai"
      "ai ai ai" !important;
    gap: 14px !important;
  }
  .feat-hive-card:nth-child(10) { grid-area: c10 !important; }
  .feat-hive-card.ai-card { grid-area: ai !important; }
  .feat-hive-card { padding: 16px 14px !important; }
  .feat-hive-card .hc-title { font-size: .8rem !important; }
  .feat-hive-card .hc-desc { font-size: .72rem !important; }

  /* ---- 首页（page-builder）第1屏 ---- */
  .pb-hero {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    padding: 48px 0 56px !important;
  }
  /* 亮点卡片：固定 3 列居中，避免 auto-fit 在折叠屏算出畸形列数 */
  .pb-hero-highlights {
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 960px !important;
    gap: 16px !important;
  }
  .pb-hero-hl-card { padding: 20px 16px !important; }
  .pb-hero-title { font-size: clamp(30px, 4vw, 44px) !important; }
  .pb-hero-mockup img { max-height: 300px !important; }
}

/* ---------- 手机端首页（page-builder）第1屏重叠修复 ---------- */
/* 根因：.pb-hero 是 min-height:100svh + overflow:hidden + flex居中，
   内容（标题+高亮卡+按钮+mockup大图）总高度远超视口，被居中裁切，
   mockup 图溢出到底部，视觉上与第2/3屏"重叠"
   修复：压缩 hero 内容高度，确保第1屏内容完整放入视口，不与后续屏重叠 */
@media (max-width: 768px) {
  /* 彻底修复：第1屏不再使用 flex 居中 + 固定高度 + overflow:hidden，
     改为普通文档流，让内容自然撑开，绝不与第2/3屏重叠 */
  .pb-hero {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
    padding: 40px 0 20px !important;
  }
  /* 隐藏所有绝对定位装饰元素，避免溢出到后续屏 */
  .pb-hero-orb,
  .pb-hero-canvas,
  .pb-hero-bg-img,
  .pb-hero-gradient-bg,
  .pb-hero-overlay,
  .pb-hero-scroll-hint,
  .pb-hero-arrow,
  .pb-hero-dots {
    display: none !important;
  }
  /* 轮播幻灯片：改为文档流，去掉绝对定位和居中/缩放/透明度动画 */
  .pb-hero-slide {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  /* 非 active 的幻灯片隐藏（保留轮播切换） */
  .pb-hero-slide:not(.active) {
    display: none !important;
  }
  /* 内容自然文档流，去掉绝对/居中定位 */
  .pb-hero-content {
    padding: 24px 16px 0 !important;
    text-align: center;
  }
  .pb-hero-top { margin-bottom: 22px !important; }
  /* 手机 mockup 图缩小，避免超高 */
  .pb-hero-mockup { margin-top: 24px !important; margin-bottom: 8px !important; }
  .pb-hero-mockup img {
    max-height: 220px !important;
    max-width: 88% !important;
  }
}

/* ---------- 平板横屏（768~1024px）优化 ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
  /* 平板横屏：网格保持 3 列但间距收紧 */
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
  .container { padding-left: 24px; padding-right: 24px; }
}

/* ---------- 大屏（电脑 >1440px）优化 ---------- */
@media (min-width: 1440px) {
  .container {
    max-width: 1280px;
  }
}

/* ---------- 手机端功能介绍页第1屏排版修复 ---------- */
/* 根因：adaptive.css 前面 @media(max-width:1024px) 强制 .feat-hero{min-height:100svh}，
   与 features.css 的 min-height:auto 冲突，且第1屏内容（标题+标签云+2列蜂窝）
   总高度与视口不匹配，导致内容被拉伸/留白/裁切、排版错乱。
   修复：第1屏改为普通文档流，内容自然撑开，绝不裁切/重叠。 */
@media (max-width: 768px) {
  .feat-hero {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
  }
  .feat-hero .hero-head { margin-bottom: 28px !important; }
  .feat-hero h1 { font-size: 1.45rem !important; line-height: 1.4 !important; }
  .feat-hero .hero-sub { font-size: .8rem !important; line-height: 1.6 !important; }
  .feat-hero .hero-tags { margin-top: 16px !important; gap: 6px !important; }
  .feat-hero .hero-tags span { padding: 5px 10px !important; font-size: .66rem !important; }
  /* 蜂窝：2 列，卡片图标+标题横排，描述隐藏（与 features.css 保持一致并加强） */
  .feat-hive {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-areas:
      "c1 c2" "c3 c4" "c5 c6" "c7 c8" "c9 c10" "ai ai" !important;
    gap: 10px !important;
    max-width: 520px !important;
  }
  .feat-hive-card { flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; gap: 10px !important; padding: 16px 12px !important; }
  .feat-hive-card .hc-desc, .feat-hive-card .hc-line { display: none !important; }
  .feat-hive-card .hc-title { font-size: .82rem !important; }
  .feat-hive-card.ai-card { grid-area: ai !important; }
  .feat-hive-card.ai-card .hc-desc { display: block !important; font-size: .72rem !important; }
}

/* ---------- 折叠屏 / 翻盖手机 超窄屏 (≤360px) ---------- */
@media (max-width: 360px) {
  .feat-hero { padding: 78px 10px 28px !important; }
  .feat-hero h1 { font-size: 1.2rem !important; }
  .feat-hero .hero-sub { font-size: .72rem !important; }
  .feat-hive { gap: 6px !important; }
  .feat-hive-card { padding: 11px 8px !important; gap: 7px !important; }
  .feat-hive-card .hc-icon { width: 30px !important; height: 30px !important; font-size: .85rem !important; }
  .feat-hive-card .hc-title { font-size: .7rem !important; }
  .feat-hive-card.ai-card .hc-desc { font-size: .62rem !important; }
}

/* ---------- 7. 折叠屏/刘海屏安全区：左右 inset ---------- */
@supports (padding: max(0px)) {
  .container,
  .header-inner {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* ---------- 8. 减少动画（折叠屏低性能/省电模式） ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 9. 横屏折叠屏（展开后的平板形态） ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  /* 折叠屏横放但高度矮时，固定顶栏收起高度 */
  :root { --nav-h: 52px; }
  .header { height: 52px; }
  .logo img { height: 24px; }
}