/* 手机端精修 v1
 *
 * 只在窄屏生效，桌面端一行都不改动——这一版解决的是「在手机上不好看」，
 * 不是重新设计。
 *
 * 三个根因：
 *
 * 1. 展示字号是按桌面定的，直接缩到手机仍然过大。首屏标题 48.8px、
 *    区块标题 48px，而 375px 屏减去两侧留白只剩 327px：七个汉字就占满
 *    一整行，末字几乎贴住屏幕边缘。
 *
 * 2. 中文标题带着负字距（-2.68px / -0.055em）。负字距是拉丁字母的排版
 *    惯例——收紧字母之间的空隙让词更紧凑。汉字是等宽方块字，本来就没有
 *    那种空隙，负字距只会把字挤到一起。
 *
 * 3. 竖向留白按桌面的比例走。区块上下各 80–112px，指标区块 266px 的内容
 *    套着 150px 的留白，整页在 375px 屏上高达 13109px——十六个屏幕高。
 *
 * 所以这里做三件事：把展示字号降到窄屏该有的尺度、去掉中文上的负字距、
 * 收紧竖向节奏。另外补上触控目标的最小高度。
 */

@media (max-width: 760px) {
  /* ---------- 展示字号与字距 ---------- */

  /* 中文标题一律不用负字距。行高也要比拉丁标题松：方块字之间没有
     升部降部形成的视觉呼吸，行距压到 1.1 会让上下两行糊在一起。 */
  .hero h1,
  .about-copy h2,
  .vision-content h2,
  .story-title h2,
  .closing-cta h2,
  .editorial-core h2,
  .editorial-method h2,
  .editorial-cases h2,
  .partner-wall h2,
  .news-heading h2,
  .page-hero h1 {
    letter-spacing: 0;
    line-height: 1.28;
  }

  /* editorial-depth-v2.css 用 !important 锁死了首屏标题的字距
     （-.055em），只能同样用 !important 才盖得住。这是全站唯一一处需要
     这么做的地方——其余 91 条 !important 都作用在卡片配色上，与排版无关。 */
  .hero h1 { font-size: 34px; letter-spacing: 0 !important; }

  .about-copy h2,
  .vision-content h2,
  .story-title h2,
  .editorial-core h2,
  .editorial-method h2,
  .editorial-cases h2,
  .partner-wall h2,
  .news-heading h2 { font-size: 30px; }

  .closing-cta h2 { font-size: 29px; }
  .page-hero h1 { font-size: 32px; }

  .capability-card h3 { font-size: 23px; letter-spacing: 0; line-height: 1.32; }
  .editorial-case h3 { font-size: 22px; letter-spacing: 0; line-height: 1.32; }

  /* 眉题的字距在窄屏要收一点，否则「05 / ORGANIZATION INTELLIGENCE」
     这类长眉题会折成两行，把它旁边的装饰短横线甩得很远。 */
  .eyebrow { letter-spacing: .18em; font-size: 10px; }

  /* 正文行长控制在每行 18–22 个汉字左右，读起来最省力。 */
  .hero-intro { font-size: 15px; line-height: 1.8; margin: 24px 0 30px; }

  /* ---------- 竖向节奏 ---------- */

  .section { padding: 58px 22px; }
  .about-section { gap: 32px; padding: 58px 22px; }
  .capabilities { padding: 58px 22px; }
  .editorial-cases { padding: 64px 22px; }
  .partner-wall { padding: 56px 0; }
  .closing-cta { padding: 60px 22px; min-height: 0; gap: 26px; }
  .footer-main { padding: 48px 22px; gap: 40px; }

  .editorial-method { min-height: 0; }
  .editorial-core { min-height: 0; }
  .vision-section { min-height: 520px; }

  /* 首屏底部原本留了 150px 给右下角的状态角标。角标在窄屏移到左下，
     不再需要那么大的避让空间。 */
  .hero-content { padding: 88px 22px 124px; }

  /* ---------- 指标区块 ---------- */

  /* 266px 的内容套着 150px 的上下留白，四个格子各自撑到 133px 高，
     一个数字加一行说明浮在一大片空白中间。收紧到内容该有的密度。 */
  .metrics-section { padding: 52px 22px; }
  .metric { padding: 18px 14px; }
  .metric b, .metric strong { font-size: 34px; }
  .metric span { font-size: 11px; letter-spacing: .1em; }

  /* ---------- 卡片 ---------- */

  /* 定高卡片在窄屏偏高，但也不能一味压：文字块是绝对定位压在图上的，
     卡片越矮，露出来的照片越少。430px 让照片还有约 130px 的存在感，
     再低就只剩一条边了。 */
  .capability-card,
  .capability-card.tall { height: 430px; }

  /* 首页最新内容卡片：245px 的配图加 249px 的文字块，一张卡就要占掉
     三分之二屏，三张连着划过去很累。配图收到 180px 仍能看清主体，
     文字块的内边距按窄屏的节奏收一档。 */
  .news-card figure { height: 180px; }
  .news-card > div { padding: 22px 22px 24px; }

  /* ---------- 触控目标 ---------- */

  /* 页脚与导航里有十几个链接高度只有 14–19px。手指的接触面约 44px，
     低于这个数就要瞄准，点错是常态。加内边距而不是加字号——
     版面看起来不变，可点区域变大。 */
  .footer-columns a,
  .footer-columns span,
  .footer-digital a,
  .footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .footer-digital { display: flex; flex-wrap: wrap; gap: 0 20px; }

  .text-link, .arrow-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* 汉堡按钮原本只有 29px 高。 */
  .nav-toggle { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }

  /* ---------- 文章页 ---------- */

  .article-heading h1 { font-size: 28px; letter-spacing: 0; line-height: 1.35; }
  .article-header { padding: 56px 22px 0; }
  .article-layout { padding: 48px 22px; }
  .prose { font-size: 16.5px; line-height: 1.9; }
  /* 正文里的图片在窄屏铺满内容宽度，不要留下左右不对称的白边。 */
  .prose img { width: 100%; height: auto; }
  .article-end { margin: 0 22px 56px; padding: 28px; }

  /* ---------- 列表页 ---------- */

  .news-row-body h2 { font-size: 21px; letter-spacing: 0; line-height: 1.4; }
  .news-row figure { height: 190px; }
  .news-card h3 { font-size: 20px; line-height: 1.45; }

  /* ---------- 关于页 ---------- */

  .page-hero { min-height: 440px; padding: 60px 22px; }
  .contact-panel { padding: 56px 22px; }
  .contact-image { height: 260px; }
  .belief-grid { gap: 0; }
}

/* 小屏手机：iPhone SE/13 mini 一档（375px 及以下）。
   上面那一档是按 390–430px 调的，到 375px 还要再收一点。 */
@media (max-width: 380px) {
  .hero h1 { font-size: 31px; }

  .about-copy h2,
  .vision-content h2,
  .story-title h2,
  .editorial-core h2,
  .editorial-method h2,
  .editorial-cases h2,
  .partner-wall h2,
  .news-heading h2 { font-size: 27px; }

  .closing-cta h2 { font-size: 26px; }
  .page-hero h1 { font-size: 29px; }
  .article-heading h1 { font-size: 26px; }

  .section, .about-section, .capabilities, .metrics-section { padding-left: 20px; padding-right: 20px; }
  .hero-content { padding-left: 20px; padding-right: 20px; }

  .metric b, .metric strong { font-size: 30px; }
  .capability-card, .capability-card.tall { height: 410px; }
}

/* 平板竖屏（761–1024px）此前落在桌面那一套里：三列业务卡片挤在
   768px 宽度里，每列只剩 230px。降成两列，让卡片回到可读的宽度。 */
@media (min-width: 761px) and (max-width: 1024px) {
  .capability-grid { grid-template-columns: repeat(2, 1fr); }
  .capability-card:last-child { grid-column: span 2; }
  .capability-card, .capability-card.tall { height: 440px; }
  .metrics { grid-template-columns: repeat(4, 1fr); }
  .footer-columns { gap: 32px; }
}