/* ==========================================================
   全站响应式补丁 — responsive.css
   ----------------------------------------------------------
   背景：站点共 135 个页面，其中 103 页含 1069 个表格；文档页大多
   只有 1 个 768px 断点且仅 3 条规则，表格在窄屏必然撑破视口。

   策略（CSS-only，不改动任何 HTML 结构）：
   1. 表格在 ≤768px 转为可横向滚动的块级容器，内部保持表格排版
   2. 通用栅格 / flex 在窄屏降列
   3. 卡片、徽标、代码块统一收敛
   4. 长串英文 / 路径强制断行，避免单行撑破
   5. 主站（index/about/works/resume/project/article）专属组件适配

   断点：1100 / 900 / 768 / 560 / 400
   ========================================================== */

/* ==========================================================
   1. 表格：最高频溢出源
   ========================================================== */
@media (max-width: 768px) {
  /* 表格转为可横向滚动容器：单元格仍按表格排版，超宽时可左右滑动 */
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
  }

  /* 表格内元素不允许再撑宽 */
  table th,
  table td {
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* 表头在小屏收紧字号与内边距 */
  table th,
  table td {
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.5;
  }
}

/* ==========================================================
   2. 通用栅格与flex 降列
   ========================================================== */
@media (max-width: 900px) {
  /* 文档页常见的多列栅格统一降为两列 */
  .grid-2,
  .grid-3,
  .grid-4,
  .cols-2,
  .cols-3,
  .cols-4,
  .modules-grid,
  .func-grid,
  .stat-grid,
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  /* 更窄时全部降为单列 */
  .grid-2,
  .grid-3,
  .grid-4,
  .cols-2,
  .cols-3,
  .cols-4,
  .modules-grid,
  .func-grid,
  .stat-grid,
  .card-grid,
  .state-grid,
  .wf-stat-grid,
  .skills-grid,
  .methodology-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* 横向排列的功能条目改为纵向堆叠 */
  .module-func-item,
  .func-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
  }
}

/* ==========================================================
   3. 卡片 / 徽标 / 状态标签
   ========================================================== */
@media (max-width: 560px) {
  .card,
  .stat-card,
  .module-card,
  .case-card {
    padding: 0.875rem 1rem;
  }

  /* 洞察条目：年份列与正文列改为上下堆叠，正文不再被挤压 */
  .insight-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    padding: 1.25rem 0;
  }

  /* 徽标组允许换行，避免一行挤爆 */
  .tags,
  .badges,
  .pills,
  .insight-tags,
  .filter-group,
  .toolbar,
  .toolbar-actions {
    flex-wrap: wrap;
    row-gap: 0.375rem;
  }

  /* 筛选按钮组：换行排列，不再横向溢出 */
  .filter-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* ==========================================================
   3.5 固定宽度组件（原型框 / 甘特图 / 对比表）
   ----------------------------------------------------------
   静态扫描全站 135 页后确认的固定宽度元素仅 4 类，
   叠加运行时实测到的 .browser-frame，逐一在窄屏放开。
   ========================================================== */
@media (max-width: 768px) {
  /* 原型 / 浏览器外框：等比缩到容器宽度并允许内部滚动 */
  .wireframe-col,
  .wireframe-label,
  .browser-frame,
  .phone-frame,
  .pc {
    max-width: 100% !important;
    width: auto !important;
    min-width: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 甘特图横向可滚，不压缩列宽导致文字重叠 */
  .gantt,
  .gantt-chart,
  .timeline-chart {
    max-width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 对比表 / 痛点表：与表格同策略 */
  .comparison,
  .pain-table {
    display: block;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 泳道图：横向滚动查看完整流程 */
  .lane,
  .lanes,
  .branch-col {
    max-width: 100% !important;
    overflow-x: auto;
  }
}

/* ==========================================================
   4. 长串内容防溢出（英文路径、接口地址、需求ID）
   ========================================================== */
@media (max-width: 768px) {
  code,
  pre,
  .string,
  .req-id,
  .loc,
  .path,
  .api-path {
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }

  pre {
    max-width: 100%;
    overflow-x: auto;
    padding: 0.75rem;
    font-size: 0.75rem;
    line-height: 1.55;
    border-radius: 6px;
  }
}

/* ==========================================================
   5. 主站专属组件
   ========================================================== */

/* 首屏：单列堆叠 */
@media (max-width: 1100px) {
  .hero-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }
}

@media (max-width: 768px) {
  /* 容器内边距收窄，避免内容贴边 */
  .hero-content,
  .section,
  .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* ------------------------------------------------------------
     关键修复：styles.css 在 ≤768px 把 .marquee-strip 改为
     position:static，使其成为 .hero(display:flex) 的流内子项。
     跑马灯轨道宽约 2200px，会把 .hero-content 从 390px 挤到 89px，
     导致首屏标题与正文被压成竖排单字（线上已存在的严重缺陷）。
     改为纵向排列并拉伸，彻底隔离两者的宽度关系。
     ------------------------------------------------------------ */
  .hero {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
  }

  .hero-content,
  .marquee-strip {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  /* 首屏按钮允许换行，三按钮不再挤成一行 */
  .hero-actions {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .hero-actions .btn {
    flex: 1 1 auto;
    min-width: 140px;
    justify-content: center;
  }

  /* 求职信息条：窄屏单列 */
  .hero-facts {
    gap: 0.5rem;
  }

  .hero-fact {
    flex: 1 1 100%;
  }

  /* 统计数字两列 */
  .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 0.75rem;
  }

  .hero-stat-value {
    font-size: 1.25rem;
  }

  /* 头像本身缩小（作用于真正的图片元素，不是它的容器） */
  .hero-portrait-img {
    width: 84px;
    height: 84px;
  }
}

@media (max-width: 400px) {
  /* 超窄屏（iPhone SE 等）进一步收敛 */
  .hero-actions .btn {
    flex: 1 1 100%;
  }

  .hero-stat-value {
    font-size: 1.125rem;
  }

  .section-title {
    font-size: 1.375rem;
  }
}

/* 关于页：侧栏转为主栏 */
@media (max-width: 900px) {
  .about-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .about-sidebar {
    position: static;
    text-align: center;
  }

  .about-avatar {
    margin: 0 auto 1.25rem;
  }

  .about-links {
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* 经历条目：公司名与时间在窄屏换行 */
@media (max-width: 560px) {
  .exp-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .exp-desc--rich {
    font-size: 0.8125rem;
  }
}

/* 联系弹窗：小屏贴边且可滚动 */
@media (max-width: 560px) {
  .contact-modal-card {
    width: calc(100% - 2rem);
    max-width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 1.5rem 1.25rem;
  }

  .contact-row {
    flex-wrap: wrap;
  }
}

/* 页脚：小屏纵向排列 */
@media (max-width: 560px) {
  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }

  .footer-links {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* ==========================================================
   6. 导航：小屏汉堡菜单
   ========================================================== */
@media (max-width: 768px) {
  /* 导航项在小屏由汉堡菜单承载，主导航隐藏 */
  .nav {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .nav-links {
    /* 汉堡菜单展开时为全屏浮层，此处确保默认不撑宽页面 */
    max-width: 100vw;
  }
}

/* ==========================================================
   7. 通用兜底 + 可点击区域
   ----------------------------------------------------------
   兜底作用：即使某个页面出现未预料的固定宽度元素，
   也不允许它把整页撑出横向滚动条。
   ========================================================== */
@media (max-width: 768px) {
  /* flex / grid 子项默认 min-width:auto，是撑破容器的主因 */
  .hero-text,
  .hero-visual,
  .hero-fact,
  .hero-copy,
  .exp-item > *,
  .card > *,
  .module-func-item > * {
    min-width: 0;
  }

  /* 长英文单词 / 路径强制断行 */
  body {
    overflow-wrap: break-word;
  }

  /* 图片、svg、iframe、视频永不超出容器 */
  img,
  svg,
  video,
  iframe,
  canvas {
    max-width: 100% !important;
    height: auto;
  }
}

/* 移动端可点击区域不小于 44px */
@media (pointer: coarse) {
  .nav-link,
  .btn,
  .footer-link,
  .xh-back-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ==========================================================
   8. 打印：响应式补丁不应影响打印
   ========================================================== */
@media print {
  table {
    display: table !important;
    overflow-x: visible !important;
  }
}