/**
 * Threads Sticker 官网响应式适配与媒体查询 (Responsive Layout)
 * 深度优化移动端 H5 体验：触摸区域、手势滚动、多语言选择器与安全区域适配
 */

@media (max-width: 992px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .steps-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .hero-section {
    padding: 28px 0 20px;
  }

  .section-head {
    margin-bottom: 24px;
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .footer-grid {
    flex-direction: column;
    gap: 24px;
  }

  .footer-nav {
    flex-wrap: wrap;
    gap: 28px;
  }

  .simulator-card {
    padding: 18px 16px;
  }

  .sticker-actions-row {
    flex-direction: column;
    width: 100%;
  }

  .sticker-actions-row .btn {
    width: 100%;
  }
}

/* 核心移动端 (手机屏幕 <= 640px) 视觉与布局重构 */
@media (max-width: 640px) {
  /* 1. 顶部 Header 空间管理与防挤压 */
  .site-header {
    padding: 10px 0;
  }

  .nav-container {
    gap: 8px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .brand-link {
    gap: 8px;
  }

  .brand-logo-img {
    width: 30px;
    height: 30px;
    border-radius: 7px;
  }

  .brand-title {
    font-size: 1.05rem;
    font-weight: 900;
  }

  /* 移动端隐藏 PRO 徽章以释放宝贵的水平宽度 */
  .header-pro-badge {
    display: none !important;
  }

  .nav-links {
    display: none;
  }

  .nav-actions {
    gap: 6px;
  }

  /* 语言切换器：移动端紧凑化为 34px 圆形触觉图标按钮，隐藏竖排长文字 */
  .lang-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
  }

  .lang-btn .lang-text,
  .lang-btn .lang-arrow {
    display: none !important;
  }

  .lang-btn .lang-globe {
    font-size: 1rem;
    line-height: 1;
  }

  .lang-menu {
    right: -4px;
    top: calc(100% + 6px);
    min-width: 120px;
  }

  /* 主题切换按钮：固定 34px 宽高，严禁被挤压成椭圆 */
  #theme-toggle-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    box-shadow: var(--shadow-sm);
  }

  #theme-toggle-icon {
    font-size: 0.95rem;
    line-height: 1;
  }

  /* 顶部下载按钮：移动端紧凑胶囊 */
  .header-download-btn {
    padding: 0 10px !important;
    height: 34px !important;
    min-height: 34px !important;
    font-size: 0.78rem !important;
    box-shadow: var(--shadow-sm);
  }

  /* 2. 首屏 Hero 区域移动端体验 */
  .hero-title {
    font-size: 1.85rem;
    line-height: 1.2;
  }

  .hero-subtitle {
    font-size: 0.98rem;
  }

  .hero-cta-group {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .hero-cta-group .btn {
    width: 100%;
    padding: 13px 20px;
  }

  /* 3. 模拟器移动端排版 */
  .simulator-input-wrap {
    flex-direction: column;
    gap: 8px;
  }

  .simulator-input-wrap .btn {
    width: 100%;
    padding: 12px;
  }

  .quick-links {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .quick-links .sample-link-btn {
    text-align: center;
    padding: 6px;
  }

  /* 4. 移动端横向滚动触摸优化 */
  .recent-stash-scroll {
    -webkit-overflow-scrolling: touch;
  }

  /* 5. 全局 Toast 提示防溢出与居中 */
  #web-global-toast {
    width: 90%;
    max-width: 320px;
    justify-content: center;
    text-align: center;
    bottom: 24px;
    font-size: 0.85rem;
    padding: 8px 16px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}