/* 好风景 7S 增长系统 - 移动端显示优化补丁
 * 用途：修复手机窄屏下标题过大、文字不换行、按钮/卡片拥挤等"显示乱码"问题。
 * 加载位置：在 index.html 的 </head> 前最后引入，覆盖主样式与热修复样式。
 * 版本：2026-08-11-fix1
 */

@media (max-width: 40rem) {
  /* 强制标题在窄屏换行，防止 white-space:nowrap 撑破容器 */
  .hero-copy h1,
  .section-intro h2,
  .feature-copy h2,
  .advanced-body h2,
  .usage-note h2,
  .brand-cooperation-entry h3 {
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Hero 区域整体收紧 */
  .hub-hero {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
  }

  .hero-copy h1 {
    font-size: clamp(1.45rem, 6vw, 1.8rem) !important;
    line-height: 1.18;
    letter-spacing: -0.03em;
  }

  .hero-layout > .hero-copy > p {
    font-size: 1rem;
    line-height: 1.7;
  }

  .hero-actions {
    gap: 0.75rem;
  }

  .hero-actions .primary-action,
  .hero-actions .secondary-action {
    min-height: 2.75rem;
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
    white-space: normal !important;
  }

  /* 使用提示区 */
  .usage-note h2 {
    font-size: clamp(1.35rem, 5.6vw, 1.65rem) !important;
  }

  .usage-note p {
    font-size: 0.95rem;
    line-height: 1.75;
  }

  .usage-note a {
    font-size: 0.82rem;
  }

  /* 招商产品包 */
  .brand-cooperation-entry {
    gap: 1.25rem;
    padding-block: 2rem;
  }

  .brand-cooperation-entry h3 {
    font-size: clamp(1.3rem, 5.2vw, 1.65rem) !important;
  }

  .brand-cooperation-entry p {
    font-size: 0.95rem;
  }

  .brand-cooperation-entry .resource-actions {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .brand-cooperation-entry .resource-actions .preview-link,
  .brand-cooperation-entry .resource-actions .download-link {
    min-height: 2.75rem;
    font-size: 0.9rem;
    white-space: normal !important;
  }

  /* 卡片与表单区避免拥挤 */
  .rb-spotlight-card h3,
  .column-title h3,
  .file-row > strong,
  .file-list strong {
    font-size: 1rem;
  }

  /* 兜底：禁止横向滚动 */
  html,
  body {
    overflow-x: hidden;
  }
}

/* 超小屏（如 320px-360px）进一步收紧 */
@media (max-width: 22rem) {
  .hero-copy h1 {
    font-size: 1.38rem !important;
  }

  .usage-note h2,
  .brand-cooperation-entry h3 {
    font-size: 1.22rem !important;
  }

  .header-actions .header-action {
    padding-inline: 0.45rem;
    font-size: 0.6rem;
  }
}