/* ============================================================
   luxd-icefox 全站响应式补丁（需求3：移动端 / 折叠屏 / 21:9 外屏）
   - 原则：不改动既有视觉，只修溢出、换行、窄屏布局
   - 断点：≤640 手机 / 641–1023 折叠屏内屏·平板 / 1024+ 桌面
   ============================================================ */

/* ---------- 0. 全局兜底：杜绝任何路径下的横向滚动 ---------- */
html, body {
  max-width: 100%;
}

/* 返回顶部按钮：原模板只写了 fixed right-4，缺 bottom 锚点，
   导致按钮悬浮在视口右上角，窄屏下盖住站点标题。钉到右下角。 */
#back-to-top {
  top: auto;
  bottom: 1.5rem;
}
/* 长单词 / 长 URL / 邮箱不换行溢出正文 */
.prose, .about-card, aside, footer, header {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
/* 正文图片不得超出容器（原 theme.css 未设 max-width，经典溢出源） */
.prose img,
article img,
main img {
  max-width: 100%;
  height: auto;
}

/* ---------- 1. 正文表格：横向滚动而不撑破页面（内容 td 带固定 width） ---------- */
.prose table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  table-layout: auto;
}
.prose table th,
.prose table td {
  word-break: normal;
  overflow-wrap: normal;
}

/* ---------- 2. 正文内联链接 / 代码：长串可断行 ---------- */
.prose a {
  overflow-wrap: break-word;
  word-break: break-word;
}
.prose p, .prose li {
  overflow-wrap: break-word;
}

/* ---------- 3. 手机 ≤640px ---------- */
@media (max-width: 640px) {
  /* 正文排版收紧 */
  .prose { font-size: 15px; }
  .prose blockquote { padding: 1rem 1.1rem; }

  /* 首页 hero：肖像占位块收窄，装饰光晕不外溢 */
  .hero-portrait {
    width: 12.5rem;
    height: 12.5rem;
  }
  .hero-portrait::after {
    right: -1.5rem;
    width: 8rem;
    height: 8rem;
  }
  .hero-deco {
    width: 3.5rem;
    height: 3.5rem;
  }
  /* hero 大标题在 390 下进一步降档（避免副标题长词挤压） */
  .hero h1 .text-3xl,
  .hero .text-3xl { font-size: 1.65rem; }

  /* 页脚友情链接行：从 nowrap 单行改为自动换行（原 overflow-hidden 会裁切链接） */
  .footer-friend-links {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip;
    line-height: 2;
  }
  .footer-friend-links a {
    display: inline-block;
  }

  /* 关于页水印在窄屏进一步缩小，避免视觉突兀 */
  .about-watermark {
    font-size: clamp(2rem, 11vw, 3rem);
    letter-spacing: 0.1em;
  }

  /* 单篇文章顶部横幅 padding 收紧 */
  .prose h1 { font-size: 1.6rem; }
  .prose h2 { font-size: 1.3rem; }

  /* 404 巨型数字在窄屏略缩 */
  main .text-9xl { font-size: 6rem; }

  /* 上一篇/下一篇卡片内边距收紧，标题不挤压 */
  .prev-next-card, article .grid.md\:grid-cols-2 > a { padding: 1rem; }
}

/* ---------- 4. 折叠屏内屏 / 宽手机 641–1023px ---------- */
@media (min-width: 641px) and (max-width: 1023px) {
  /* 此区间桌面导航隐藏、走抽屉；hero 保持单栏，肖像保持 md 尺寸即可 */
  .hero-portrait {
    width: 18rem;
    height: 18rem;
  }
}

/* ---------- 5. 桌面 1024+：导航与下拉复核 ---------- */
@media (min-width: 1024px) {
  /* 顶部 6 个导航项在 1024–1280 之间允许略缩字距，避免换行 */
  header .nav-link { padding: 8px 12px; font-size: 14px; }
  /* 下拉卡片最小宽度在接近断点时不贴边 */
  .nav-dropdown { min-width: 200px; }
}

/* ---------- 6. 21:9 折叠屏外屏（窄高，如 800×1714 / 1080×2262） ----------
   这类视口高度极大、宽度相对小：
   - 800 宽走移动抽屉，与手机规则一致，无需额外处理；
   - 1080 宽走桌面导航，正文容器 max-width 1024 已居中，无溢出风险。
   仅给极端高宽比下的长页面一个兜底：首屏区块不被压扁。 */
@media (min-aspect-ratio: 9/21) and (min-width: 1024px) {
  /* 21:9 且宽屏时（实际不会命中，预留），保持导航可读 */
  header .nav-link { white-space: nowrap; }
}