/* ============================================
   VilHil Mobile Adaptation
   Optimized for iPhone 16 / Pro / Similar
   ============================================ */

/* ========== iPhone 16 / 现代全面屏手机 ========== */
/* iPhone 16: 393x852 CSS pixels, 1179x2556 physical */
@media screen and (max-width: 430px) and (min-height: 800px) {
  :root {
    --page-margin: 20px;
    --grid-gutter: 16px;
    --nav-height: 56px;
  }

  /* 视口限制 - 禁止左右滑动 */
  html, body {
    overflow-x: hidden !important;
    width: 100vw !important;
    max-width: 100vw !important;
    touch-action: pan-y !important; /* 只允许垂直滚动 */
  }

  /* 全局缩放基准 */
  body {
    font-size: 16px;
    line-height: 1.5;
  }

  .container,
  .grid-container {
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    max-width: 100vw;
  }

  /* ========== iPhone 16 字体缩放 ========== */
  /* 主标题：根据屏幕宽度动态缩放 */
  .landing-main {
    font-size: min(56px, 14vw) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
    word-break: break-word;
  }

  /* 次级标题 */
  .heading-00 { font-size: min(48px, 12vw) !important; line-height: 1.1 !important; }
  .heading-0 { font-size: min(42px, 11vw) !important; line-height: 1.12 !important; }
  .heading-1 { font-size: min(36px, 9.5vw) !important; line-height: 1.15 !important; }
  .heading-2 { font-size: min(32px, 8.5vw) !important; line-height: 1.2 !important; }
  .heading-3 { font-size: min(28px, 7.5vw) !important; line-height: 1.25 !important; }
  .heading-4 { font-size: min(24px, 6.5vw) !important; line-height: 1.3 !important; }
  .heading-5 { font-size: min(22px, 6vw) !important; line-height: 1.35 !important; }
  .heading-6 { font-size: min(20px, 5.5vw) !important; line-height: 1.4 !important; }

  /* 正文 */
  .body, p, .text {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  .caption {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .small {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  /* ========== 布局适配 ========== */
  .grid-row {
    gap: 16px;
  }

  /* 单列布局 */
  [class*=col-] {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }

  /* ========== 图片/视频适配 ========== */
  img, video, .video-container {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 12px;
  }

  /* 视频保持 16:9 */
  .aspect-video {
    aspect-ratio: 16/9 !important;
    width: 100% !important;
  }

  /* ========== 卡片适配 ========== */
  .card, .card-elevated {
    padding: 20px !important;
    border-radius: 16px !important;
    width: 100% !important;
  }

  /* ========== 按钮触控优化 ========== */
  button, .btn, [class*=btn], a {
    min-height: 48px !important;
    min-width: 48px !important;
  }

  /* ========== 导航栏适配 ========== */
  nav, header {
    height: 56px !important;
    padding: 0 20px !important;
  }

  /* Logo 大小 */
  nav img, .logo, [class*=logo] {
    height: 36px !important;
    width: auto !important;
  }

  /* ========== 间距优化 ========== */
  section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .space-y-6 > * + * {
    margin-top: 24px !important;
  }

  /* ========== 安全区域适配 ========== */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ========== iPhone 16 Pro Max / Plus ========== */
@media screen and (min-width: 431px) and (max-width: 480px) {
  :root {
    --page-margin: 24px;
  }

  .landing-main {
    font-size: min(64px, 13vw) !important;
  }

  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ========== 其他全面屏手机 ========== */
@media screen and (max-width: 390px) {
  :root {
    --page-margin: 16px;
  }

  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .landing-main {
    font-size: min(48px, 13vw) !important;
  }
}

/* ========== 禁止左右滑动的全局设置 ========== */
@media screen and (max-width: 768px) {
  * {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* 禁用横向滚动 */
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  /* 固定布局防止缩放 */
  meta[name=viewport] {
    content: width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;
  }
}