/* ==========================================================================
   杰克英语绘本 · 手机端专属样式 Mobile Enhancements
   在 style.css 基础上叠加，仅对窄屏 / 触屏设备生效
   ========================================================================== */

/* ---------- 全局：防横向滚动 / 触屏体验 ---------- */
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  * { -webkit-tap-highlight-color: rgba(255, 169, 60, .18); }

  /* 触控目标最小 44px，符合移动端无障碍标准 */
  .btn, .nav-cta, .play-btn, .back-top,
  .audio-btn, .fs-btn, input, textarea, select {
    min-height: 44px;
  }

  /* iOS 视频不自动全屏 */
  video { object-fit: contain; background: #000; }

  /* 首屏大标题在窄屏上更从容 */
  .hero h1 { line-height: 1.35; letter-spacing: .5px; }

  /* 分区标题更紧凑 */
  .section-title { font-size: 1.5rem; }
  .section-desc { font-size: .95rem; }

  /* 底部留白，避免被快捷导航栏遮挡 */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .footer-bottom { padding-bottom: 20px; }
}

/* ---------- 手机底部快捷导航栏 ---------- */
.mobile-tabbar {
  display: none;
}

@media (max-width: 900px) {
  .mobile-tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1200;
    display: flex;
    align-items: stretch;
    background: rgba(255, 252, 245, .96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 30px rgba(43, 42, 51, .10);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mobile-tabbar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 56px;
    padding: 6px 2px;
    text-decoration: none;
    color: var(--ink-mute);
    font-size: .68rem;
    line-height: 1.2;
    transition: color .2s;
  }
  .mobile-tabbar a .tab-icon { font-size: 1.3rem; line-height: 1.2; }
  .mobile-tabbar a.active { color: var(--orange-deep); }
  .mobile-tabbar a.active .tab-icon { transform: scale(1.08); }
}

/* 进入全屏浏览模式时隐藏底部导航 */
body.fs-lock .mobile-tabbar { display: none; }

/* ---------- 超窄屏（≤380px，如 iPhone SE）微调 ---------- */
@media (max-width: 380px) {
  .container { padding: 0 14px; }
  .hero h1 { font-size: 1.65rem; }
  .section-title { font-size: 1.32rem; }
  .badge { font-size: .74rem; }
  .btn { padding: 12px 18px; font-size: .92rem; }
  .mobile-tabbar a { font-size: .62rem; }
  .mobile-tabbar a .tab-icon { font-size: 1.15rem; }
}

/* ---------- 横屏短高度（手机横放） ---------- */
@media (max-width: 900px) and (orientation: landscape) {
  .mobile-tabbar { display: none; }
  body { padding-bottom: 0; }
  html { scroll-padding-top: 72px; }
}