/* ================================================================
   摄状元®AI创影 - 全站移动端适配修复 v3.0
   日期：2026-07-18
   职责：修复所有移动端(max-width:1023px)显示问题
   约束：不修改PC端(min-width:1024px)样式，所有规则在@media内
   加载：在 tokens/base/components/pages 之后加载
   ================================================================ */

/* ── 全局：禁止横向溢出 ── */
html, body { overflow-x: hidden; }

/* ── 全局：确保动画元素在移动端始终可见 ── */
.fade-in-up, .fade-in-up.visible,
.animate-in, .animate-in.visible {
  opacity: 1 !important;
  transform: none !important;
  -webkit-transform: none !important;
  visibility: visible !important;
}

/* ================================================================
   1. 平板+手机 (max-width: 1023px)
   ================================================================ */
@media (max-width: 1023px) {

  /* ── 1.1 Container 缩减内边距 ── */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ── 1.2 Section 缩减上下间距 ── */
  .section, .section-alt, .section-dark {
    padding: 36px 0 !important;
  }
  .section-header {
    margin-bottom: 24px !important;
  }
  .section-header h2 {
    font-size: 1.25rem !important;
  }
  .section-header .subtitle {
    font-size: 0.875rem !important;
    max-width: 100% !important;
  }

  /* ── 1.3 Hero 区域 ── */
  .hero {
    padding: 64px 16px 24px !important;
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
  }
  .hero-content {
    padding: 0 !important;
  }
  .hero-content h1 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
  }
  .hero-content .slogan {
    font-size: 0.95rem !important;
    margin-bottom: 10px !important;
  }
  .hero-content .description {
    font-size: 0.85rem !important;
    margin-bottom: 16px !important;
    max-width: 100% !important;
  }
  .hero-buttons {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .hero-buttons .btn,
  .hero-buttons .btn-lg {
    width: 100% !important;
    max-width: 280px !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* ── 1.4 Page Banner (子页面顶部) ── */
  .page-banner {
    padding: 64px 16px 24px !important;
  }
  .page-banner h1 {
    font-size: 1.3rem !important;
  }
  .page-banner p {
    font-size: 0.875rem !important;
  }

  /* ── 1.5 关键修复：覆盖内联 grid-template-columns ── */
  /* index.php 中 features-grid 带有 style="grid-template-columns:repeat(3,1fr)" */
  .features-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── 1.6 Feature Card 移动端样式 ── */
  .feature-card {
    padding: 20px 16px !important;
    text-align: center !important;
  }
  .feature-icon {
    font-size: 2em !important;
    margin-bottom: 8px !important;
  }
  .feature-card h3 {
    font-size: 1rem !important;
    margin-bottom: 6px !important;
  }
  .feature-card p {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
  }

  /* ── 1.7 Workflow 创作流程：竖排 ── */
  .workflow-steps {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
  }
  .workflow-step {
    padding: 8px 0 !important;
    width: 100% !important;
    max-width: 280px !important;
  }
  .workflow-step-icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 22px !important;
  }
  .workflow-step-title {
    font-size: 14px !important;
  }
  .workflow-step-desc {
    font-size: 12px !important;
  }
  .workflow-arrow {
    transform: rotate(90deg) !important;
    padding: 4px 0 !important;
    font-size: 18px !important;
    align-self: center !important;
  }

  /* ── 1.8 Advantage Cards 优势卡片 ── */
  .advantages-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .advantage-card {
    padding: 18px 16px !important;
  }
  .adv-icon {
    font-size: 28px !important;
  }
  .adv-title {
    font-size: 0.95rem !important;
  }
  .adv-subtitle {
    font-size: 0.8rem !important;
  }

  /* ── 1.9 Creation Cards 创作类型卡片 ── */
  .creation-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .creation-card {
    padding: 16px 12px !important;
  }
  .creation-icon {
    font-size: 28px !important;
  }
  .creation-title {
    font-size: 0.9rem !important;
  }
  .creation-desc {
    font-size: 0.78rem !important;
  }

  /* ── 1.10 Task Cards 任务卡片 ── */
  .task-hall-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .task-card {
    padding: 16px !important;
  }

  /* ── 1.11 Register Banner 注册福利 ── */
  .register-banner {
    padding: 18px !important;
  }
  .register-banner-content {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .register-banner-left h3 {
    font-size: 1rem !important;
  }
  .register-banner-left p {
    font-size: 0.85rem !important;
  }
  .register-banner-actions {
    width: 100% !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .register-banner-actions .btn-register,
  .register-banner-actions .btn-login {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
  .register-benefits {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .benefit-item {
    font-size: 0.8rem !important;
  }
  .benefit-icon {
    font-size: 1rem !important;
  }

  /* ── 1.12 Asset Showcase 资产展示 ── */
  .asset-showcase {
    flex-direction: column !important;
    gap: 24px !important;
  }
  .asset-showcase-visual {
    flex: 1 1 auto !important;
  }
  .asset-avatar {
    max-width: 200px !important;
    font-size: 48px !important;
    margin: 0 auto !important;
  }
  .asset-entry-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .asset-entry-item {
    padding: 12px !important;
  }
  .asset-entry-item .asset-icon {
    font-size: 22px !important;
  }

  /* ── 1.13 Stats Grid 统计 ── */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .stat-number {
    font-size: 1.75rem !important;
  }
  .stat-label {
    font-size: 0.8rem !important;
  }

  /* ── 1.14 CTA Banner ── */
  .cta-banner {
    padding: 28px 16px !important;
    border-radius: 12px !important;
  }
  .cta-banner h2 {
    font-size: 1.3rem !important;
  }
  .cta-banner p {
    font-size: 0.85rem !important;
  }

  /* ── 1.15 Partner Grid ── */
  .partner-grid {
    grid-template-columns: 1fr !important;
  }
  .partner-card {
    padding: 20px !important;
  }

  /* ── 1.16 Footer 移动端适配 ── */
  .site-footer {
    padding: 32px 0 20px !important;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .footer-brand .footer-slogan {
    font-size: 0.8rem !important;
  }
  .footer-brand .footer-tech {
    font-size: 0.7rem !important;
    word-break: break-all !important;
  }
  .footer-links h4 {
    font-size: 0.9rem !important;
    margin-bottom: 8px !important;
  }
  .footer-links a {
    font-size: 0.8rem !important;
  }
  .footer-links li {
    margin-bottom: 4px !important;
  }
  .footer-qr-item img {
    width: 64px !important;
    height: 64px !important;
  }
  .footer-qr-item span {
    font-size: 10px !important;
  }
  .footer-bottom {
    margin-top: 12px !important;
    padding-top: 10px !important;
  }
  .footer-bottom p {
    font-size: 11px !important;
    line-height: 1.5 !important;
  }
  .footer-disclaimer {
    font-size: 10px !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
    line-height: 1.5 !important;
  }

  /* ── 1.17 按钮通用：增加点击区域 ── */
  .btn {
    padding: 10px 18px !important;
    font-size: 0.85rem !important;
    min-height: 44px !important;
  }
  .btn-lg {
    padding: 12px 24px !important;
    font-size: 0.9rem !important;
  }
  .btn-sm {
    min-height: 36px !important;
  }
  .btn-register, .btn-login {
    padding: 10px 18px !important;
    font-size: 0.85rem !important;
    min-height: 44px !important;
  }

  /* ── 1.18 表单：form-row 竖排 ── */
  .form-row {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px !important; /* 防止iOS自动缩放 */
  }

  /* ── 1.19 News Item 新闻 ── */
  .news-item {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .news-item .news-date {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    align-items: center !important;
    min-width: auto !important;
    padding: 6px 10px !important;
  }
  .news-item .news-date .day {
    font-size: 1.2rem !important;
    line-height: 1 !important;
  }
  .news-item .news-date .month {
    font-size: 0.75rem !important;
  }

  /* ── 1.20 Course Cards 课程卡片 ── */
  .course-card .course-body {
    padding: 12px !important;
  }
  .course-card .course-body h3 {
    font-size: 0.9rem !important;
  }

  /* ── 1.21 Modal 弹窗 ── */
  .modal-box {
    padding: 20px !important;
    width: 94% !important;
    max-height: 88vh !important;
  }

  /* ── 1.22 返回顶部按钮位置 ── */
  .back-to-top {
    bottom: 60px !important;
    right: 16px !important;
    width: 36px !important;
    height: 36px !important;
  }

  /* ── 1.23 About 内容 ── */
  .about-content p {
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
  }

  /* ── 1.24 覆盖index.php内联大字号 ── */
  /* h2 style="font-size:2.2em" 在东方追梦人/AI微课板块 */
  .section-header h2[style*="2.2em"],
  .section h2[style*="font-size:2.2em"] {
    font-size: 1.25rem !important;
  }
  /* emoji div style="font-size:2.5em" */
  .feature-card div[style*="font-size:2.5em"],
  .features-grid div[style*="font-size:2.5em"] {
    font-size: 2em !important;
  }
  /* h3 style="font-size:1.1em" or "font-size:1.05em" - these are fine */
  /* p style="font-size:1.1em" or "font-size:1.05em" */
  .feature-card p[style*="font-size:0.9em"] {
    font-size: 0.8rem !important;
  }

  /* ── 1.25 东方追梦人暗色板块特殊处理 ── */
  /* index.php L389 整个section有 inline background gradient */
  .section[style*="linear-gradient"] {
    padding: 36px 0 !important;
  }
  .section[style*="linear-gradient"] .features-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .section[style*="linear-gradient"] .feature-card {
    padding: 20px 16px !important;
  }
  /* 暗色板块中 h2 字号 */
  .section[style*="linear-gradient"] h2 {
    font-size: 1.25rem !important;
  }
  /* 暗色板块中 p 大字号 */
  .section[style*="linear-gradient"] p[style*="font-size:1.1em"],
  .section[style*="linear-gradient"] p[style*="font-size:1.05em"] {
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
  }

  /* ── 1.26 ECO/Partners 生态页 ── */
  .eco-hero {
    padding: 36px 0 !important;
  }
  .eco-hero h1 {
    font-size: 1.3rem !important;
  }
  .eco-hero p {
    font-size: 0.875rem !important;
  }
  .eco-step {
    padding: 16px !important;
  }

  /* ── 1.27 邀请创作者板块 ── */
  /* index.php L544 section with inline background */
  .section[style*="FFF5F5"] {
    padding: 36px 0 !important;
  }
  /* 邀请创作者板块的统计数字 */
  .section[style*="FFF5F5"] div[style*="font-size:2em"] {
    font-size: 1.5em !important;
  }
  .section[style*="FFF5F5"] div[style*="font-size:0.85em"] {
    font-size: 0.75rem !important;
  }

  /* ── 1.28 CTA Banner 内的 audience-tags ── */
  .audience-tags {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  .audience-tag {
    font-size: 0.75rem !important;
    padding: 4px 10px !important;
  }

  /* ── 1.29 音乐播放器 ── */
  .music-player-section {
    padding: 24px 16px !important;
  }
  .music-player-section h2 {
    font-size: 1.2rem !important;
  }
  .music-player-section p {
    font-size: 0.8rem !important;
  }
  .music-player-section audio {
    max-width: 100% !important;
  }

  /* ── 1.30 Cases Grid 课程案例 ── */
  .cases-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ── 1.31 Advantage card left border 移动端不显示 ── */
  .advantage-card::before {
    display: none !important;
  }

  /* ── 1.32 Header 汉堡菜单确保可用 ── */
  /* 这些规则补充 components.css 中已有的移动端header规则 */
  .mobile-menu-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  /* 汉堡菜单打开时禁止body滚动 */
  body.nav-open {
    overflow: hidden !important;
  }

  /* ── 1.33 User Dropdown 移动端适配 ── */
  .header-user-menu {
    position: relative !important;
  }
  .user-dropdown {
    right: -60px !important;
    min-width: 140px !important;
  }

} /* END @media (max-width: 1023px) */


/* ================================================================
   2. 平板 (768px - 1023px) 特殊规则
   ================================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .advantages-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .creation-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .task-hall-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .partner-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .footer-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .stats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  /* 平板端保持workflow横排但缩小 */
  .workflow-step-icon {
    width: 52px !important;
    height: 52px !important;
    font-size: 24px !important;
  }
}


/* ================================================================
   3. 小屏手机 (max-width: 480px)
   ================================================================ */
@media (max-width: 480px) {
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .section, .section-alt, .section-dark {
    padding: 28px 0 !important;
  }

  .hero-content h1 {
    font-size: 1.3rem !important;
  }

  .hero {
    padding: 60px 12px 20px !important;
  }

  .page-banner h1 {
    font-size: 1.15rem !important;
  }

  .section-header h2 {
    font-size: 1.1rem !important;
  }

  /* creation-grid 在很小屏幕上改为1列 */
  .creation-grid {
    grid-template-columns: 1fr !important;
  }

  /* stats 在很小屏幕上也改为2列(保持) */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .stat-card {
    padding: 14px !important;
  }
  .stat-number {
    font-size: 1.5rem !important;
  }

  /* header 按钮更小 */
  .header-btn {
    font-size: 11px !important;
    padding: 5px 8px !important;
  }
  .logo-text {
    font-size: 14px !important;
  }

  /* Feature card 缩减padding */
  .feature-card {
    padding: 16px 12px !important;
  }

  /* CTA banner 更紧凑 */
  .cta-banner {
    padding: 24px 12px !important;
  }
  .cta-banner h2 {
    font-size: 1.15rem !important;
  }

  /* 按钮宽度确保可点击 */
  .btn {
    min-height: 44px !important;
  }
}


/* ================================================================
   4. 超小屏 (max-width: 360px) 极端兜底
   ================================================================ */
@media (max-width: 360px) {
  .hero-content h1 {
    font-size: 1.15rem !important;
  }
  .section-header h2 {
    font-size: 1rem !important;
  }
  .header-btn {
    font-size: 10px !important;
    padding: 4px 6px !important;
  }
  .creation-grid {
    grid-template-columns: 1fr !important;
  }
}