/* ============================================================================
   NexaPay — 2026-10-24 SEO Round 2 视觉修复（标题断行 / 留白）
   ----------------------------------------------------------------------------
   背景：
   1. 站点内 h1/h2 使用 `overflow-wrap:anywhere`（styles.css 移动端断点、
      final-fixes.css 覆盖），浏览器会在任意字符处断行，导致中文词语
      （如「巴西」「结算」「提供」）和英文单词被拆成两行。
   2. 部分标题所在栅格列过窄，超大字号下更易出现拆词。

   修复原则（Wei 指定）：
   - 不缩小整个页面，不整体降低字号。
   - 通过调整列宽 / 断行策略解决，保留原有设计语言与视觉层级。
   - 只作用于展示型标题（h1/h2/h3），正文与说明文字不受影响。

   断行策略说明：
   - `word-break:keep-all`：CJK 文本按“词”换行，不再逐字断开。
   - `line-break:strict`：避免行首/行尾出现标点。
   - `overflow-wrap:normal` + `hyphens:none`：英文单词不拆、不加连字符。
   - `text-wrap:balance`（渐进增强）：让多行标题行宽更均匀，
      不改变字号，只让断行位置更自然。
   ========================================================================== */

/* ---------- 1. 展示型标题：禁止拆词 ---------- */
/* 说明（重要，勿轻易改动）：
   - `overflow-wrap:anywhere` 会让浏览器在任意字符处断行 → 英文单词被拆
     （"buyer|s"、"familiar|Brazilian"）。改回 `normal` 即可解决。
   - 不可使用 `word-break:keep-all`：中文没有空格，keep-all 会把整句
     中文当成一个不可断行单元，导致标题撑破栅格列
     （实测首页 document.scrollWidth 1518~1573 > 1440，出现横向溢出）。
   - 中文逐字换行是浏览器的正常行为；本站中文标题的断行点由作者用
     <br> / 栅格列宽显式控制，不依赖 keep-all。

   最终策略：中文 word-break:normal（逐字换行，但列宽足够时断点自然），
   英文/葡文 word-break:normal + overflow-wrap:normal（整词换行）。 */
h1, h2, h3 {
  word-break: normal;
  line-break: strict;
  /* `break-word`（而非 `normal`）：只在单词本身比容器还宽、否则会溢出时
     才在词内断开。正常情况下仍然按单词边界换行。
     ⚠ 2026-10-25 修正：先前用 `normal` 导致 pt-br 首页
     「responsabilidades」（16 字符 × 41px = 383px）超出 342px 容器，
     document.scrollWidth 407 > 390，出现横向溢出。
     `break-word` 既不拆普通单词，又能兜住超长单词。 */
  overflow-wrap: break-word;
  hyphens: none;
}
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3,
html[lang="pt-BR"] h1, html[lang="pt-BR"] h2, html[lang="pt-BR"] h3 {
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}
/* 兜底：显式覆盖 styles.css 中给标题设置的 overflow-wrap:anywhere
   （.section-head h2 / .faq h2 / .final-cta h2 / .hero h1 等）。
   ⚠ 之前用 :where() 的写法特异性为 0，会被这些类选择器（0,1,0）覆盖，
   实测 pt-br/brazil-payment-finance.html 的 H2 computed style 仍是
   overflow-wrap:anywhere，导致葡语词被拆成音节
   （"Escolh|a o"、"adequ|ado"、"model|o"）。 */
.section-head h2, .solution-intro h2, .product-head h2, .story-title h2,
.vision h2, .faq h2, .final-cta h2, .cta-content h2, .contact-dialog h2,
.hero h1 {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* ---------- 2. 多行标题的行宽平衡 ---------- */
/* 说明：`text-wrap:balance` 会重新分配各行字数，可能把中文词语拆在
   不自然的位置（例如「巴西」被拆成「巴」「西」）。本站中文标题的断行
   需求是「不要把词拆开」，balance 反而破坏这一点，因此不启用。
   英文/葡文多行标题可安全使用 balance。 */
:where(html[lang="en"], html[lang="pt-BR"]) :where(h1, h2, h3) {
  text-wrap: balance;
}

/* ---------- 3. 允许在窄容器中安全换行的例外（长 URL / 技术串） ---------- */
:where(.api-console code, .demo-label b, .channel-list strong) {
  word-break: break-all;
  overflow-wrap: anywhere;
  line-break: auto;
  hyphens: none;
}

/* ---------- 4. 像素 API 页：标题列加宽，避免 84px 字号下拆词 ---------- */
/* 原：.88fr 1.12fr  → 标题列约 540px，84px 中文一行仅容 6 字 */
@media (min-width: 1001px) {
  .pa-hero {
    grid-template-columns: 1.06fr .94fr;
  }
  .pa-hero h1,
  .pa-title {
    letter-spacing: -.045em;
  }
  .pa-section,
  .pa-cta {
    grid-template-columns: 1.12fr .88fr;
  }
}

/* ---------- 5. 贸易 / 平台页：CTA 与正文列宽微调 ---------- */
@media (min-width: 1001px) {
  .tc-cta,
  .pc-cta,
  .hiw-cta {
    grid-template-columns: 1.12fr .88fr;
  }
}

/* ---------- 6. 窄屏：标题字号不变，但禁止拆词 ---------- */
@media (max-width: 680px) {
  :where(h1, h2, h3) {
    word-break: normal;
    line-break: strict;
    overflow-wrap: normal;
    hyphens: none;
  }
}


/* ---------- 7. 栅格收缩保护 + 标题列加宽 ---------- */
/* 7.0 栅格轨道的最小尺寸改为 0，防止长词撑破列宽。
   `1fr` 等价于 minmax(auto,1fr)，自动最小尺寸是 min-content：当一列出现
   较长的不可断词（如 “PIX Automático API”），该列被撑宽，整页横向溢出
   （实测 en/pix-api-collection.html document.scrollWidth 1479 > 1440）。
   这里只把「轨道最小尺寸」改为 0，**列数与比例完全保持原样**，
   因此不会把多列栅格压成单列。 */
@media (min-width: 1001px) {
  /* PIX API */
  .pa-hero { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); }
  .pa-section { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
  .pa-cta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mode-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .flow-track { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .region-map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 贸易 / 平台 / 流程页 */
  .tc-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tc-section { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
  .tc-cta,
  .pc-cta,
  .hiw-cta { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
  .pc-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pc-section { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
  .hiw-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hiw-section { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
  /* 合规页 / 指南 / 首页 */
  .compliance-hero { grid-template-columns: minmax(0, .25fr) minmax(0, 1.15fr) minmax(0, .6fr); }
  .guide-body { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
  .build-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .journey-section { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
  .story-closing { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}
/* 7.1 允许栅格/弹性子项收缩到内容最小宽度。
   keep-all 标题若比列宽更长，列必须能收缩，否则整页出现横向溢出。 */
:where(.story-section, .story-hero, .story-closing, .build-grid, .journey-section,
       .pa-section, .pa-hero, .pa-cta, .tc-section, .tc-hero, .tc-cta,
       .pc-section, .pc-hero, .pc-cta, .hiw-section, .hiw-hero, .hiw-cta,
       .compliance-hero, .compliance-grid) > * {
  min-width: 0;
}

/* 7.2 标题在栅格列内换行时，长中文词（如「巴西」「结算」「提供」）保持完整。 */
:where(.story-section, .pa-section, .pa-hero, .pa-cta, .tc-section, .tc-hero,
       .tc-cta, .pc-section, .pc-hero, .pc-cta, .hiw-section, .hiw-hero,
       .hiw-cta, .compliance-hero, .build-grid) h1,
:where(.story-section, .pa-section, .pa-hero, .pa-cta, .tc-section, .tc-hero,
       .tc-cta, .pc-section, .pc-hero, .pc-cta, .hiw-section, .hiw-hero,
       .hiw-cta, .compliance-hero, .build-grid) h2 {
  overflow-wrap: normal;
}

/* 7.3 桌面端：为超大字号标题适度加宽标题列（不缩小页面、不整体降字号） */
@media (min-width: 1001px) {
  /* 首页故事区：标题列适度加宽，避免超大字号标题在窄列里被拆词。
     只调整列宽比例，不缩小字号、不改变配色与间距。 */
  .journey-section { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
  .build-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* mode-grid 为两列栅格，3 张卡片自动换行到第二行 */
  .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}