/* ═══════════════════════════════════════════════════════════════
   TRXFlow — responsive.css
   Shared responsive breakpoints for all pages.
   Nav hamburger menu is handled entirely in nav.js (dynamic CSS
   injection keeps it self-contained with the nav component).
   ───────────────────────────────────────────────────────────────
   Breakpoints
     768px  main mobile / tablet
     680px  nav hamburger threshold (aligned with nav.js)
     480px  small mobile
   ═══════════════════════════════════════════════════════════════ */


/* ═══ INDEX — TICKER ════════════════════════════════════════════ */
@media (max-width: 768px) {
  #ticker-bar { display: none; }
}


/* ═══ INDEX — HERO ══════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 168px → 116px: ticker hidden (−36px) + tighten breathing room */
  /* min-height: 0 覆寫 100vh — 行動版 hero 以內容高度驅動（MD3 / Apple HIG 標準）
     同時解除 iOS Safari 100vh 計算含地址欄導致的底部裁切問題 */
  #hero         { padding: 116px 0 80px; min-height: 0; }
  /* 行動版：flow card 移至文字下方，垂直堆疊 */
  .hero-inner   { gap: 0; flex-direction: column; align-items: center; }
  .hero-left    { max-width: 100%; padding-top: 16px; text-align: center; }
  /* decorative watermark causes overflow on narrow screens */
  .hero-watermark { display: none; }
  /* hero-sub 行距：1.95 → 1.7（WCAG 1.4.12 AA 合規，符合 Apple HIG 行動版範疇）*/
  .hero-sub     { line-height: 1.7; max-width: 100%; }
  /* CTA 堆疊：按鈕自動寬度居中（2026 mobile — auto-width > full-width stretch）*/
  .hero-ctas    { flex-direction: column; align-items: center; gap: 14px; margin-top: 28px; }
  .btn-hero-primary { padding: 16px 40px; }
  .btn-text-link    { width: auto; justify-content: center; }
  /* Flow card：顯示並置中，比例縮小（73%）保留完整浮雕光影 */
  .hero-right   { display: flex; justify-content: center; width: 100%; margin-top: 44px; }
  .flow-card    { padding: 28px 36px; border-radius: 26px; overflow: hidden; }
  .flow-wrap    { width: 180px; }
  .f-node       { width: 88px; height: 88px; }
  .f-line       { height: 32px; }
}


/* ═══ INDEX — S2 ENERGY ═════════════════════════════════════════ */
@media (max-width: 768px) {
  #energy { padding: 72px 0; }
  .science-grid   { gap: 36px; }
  .saving-callout { gap: 12px; }
  .sc-num { font-size: 52px; }
  .sc-pct { font-size: 30px; }
  /* prose 行距：2.0 → 1.75（Apple HIG 行動版範疇，WCAG 1.4.12 合規）*/
  .prose  { line-height: 1.75; }
  /* allow comparison table to scroll horizontally */
  .table-card { overflow-x: auto; }
  .d-table    { min-width: 420px; }
}


/* ═══ INDEX — S3 MARKET ═════════════════════════════════════════ */
@media (max-width: 768px) {
  #market    { padding: 72px 0; }
  .stat-card { padding: 32px 24px 24px; }
}


/* ═══ INDEX — S4 ROLE ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  #role          { padding: 72px 0; }
  .role-grid     { gap: 36px; }
  .flow-connector { width: 48px; }
}


/* ═══ INDEX — S5 CTA ════════════════════════════════════════════ */
@media (max-width: 768px) {
  #cta      { padding: 72px 0; }
  .cta-grid { grid-template-columns: 1fr; }
  .cta-card { padding: 32px 24px; }
  .cta-head { margin-bottom: 36px; }
}


/* ═══ ARTICLE PAGES (a1–e2, shared structure) ═══════════════════ */
@media (max-width: 768px) {
  /* hero: 116px → 96px top padding on mobile */
  #article-hero  { padding: 96px 0 32px; }
  .article-inner { padding: 0 16px; }
  #article-body  { padding: 40px 0 52px; }
  /* 內文行距：2.05 / 2.0 → 1.8（Apple Safari Reader 手機版範疇，節省垂直空間）*/
  .article-body p { line-height: 1.8; }
  .article-body ul li,
  .article-body ol li { line-height: 1.8; }
  /* article-nav stacking (duplicates 600px inline rule; extends to 768px) */
  .article-nav   { flex-direction: column; align-items: flex-start; }
  .next-article  { text-align: left; }
  .next-title    { max-width: 100%; }
}


/* ═══ INFO PAGE ═════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* hero 頂部：128px → 100px（68px nav + 32px 呼吸空間）*/
  #page-hero       { padding-top: 100px; padding-bottom: 36px; }
  .page-hero-inner { gap: 36px; }
  /* page-hero-sub 行距：1.95 → 1.7（與 hero-sub 同規範）*/
  .page-hero-sub   { line-height: 1.7; }
  /* guide bar：縱向排列 + 隱藏分隔線，避免 flex-wrap 造成孤立 separator */
  .guide-bar-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .guide-bar-sep   { display: none; }
}


/* ═══ CONTACT PAGE ══════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* iOS Safari auto-zoom 防止：input font-size < 16px 會在點擊時觸發頁面縮放 */
  .form-input,
  .form-textarea { font-size: 16px; }
  /* page-desc 行距：1.85 → 1.7（同前各頁 line-height 規範）*/
  .page-desc { line-height: 1.7; }
}


/* ═══ SMALL MOBILE ≤ 480px ══════════════════════════════════════ */
@media (max-width: 480px) {
  .wrap          { padding: 0 16px; }
  .article-inner { padding: 0 14px; }
  /* saving-callout：≤480px 改縱向排列，避免 sc-num + 文字在窄螢幕橫向擠壓（320px 會溢出）*/
  .saving-callout { flex-direction: column; align-items: flex-start; gap: 6px; }
}