/* Mobile Shared — 共享组件的移动端规则（主站与写作子站共用）
   从 shared.css 抽出的断点规则；组件的桌面结构仍在 shared.css。
   断点：≤640px、≤480px、≤360px。 */

/* ---------- ≤640px ---------- */
/* section 标题行：h2 与右侧 meta 在窄屏容易挤在一起，允许换行并收住行距 */
@media (max-width: 640px) {
  .section-header {
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-5);
  }

  .site-header nav {
    gap: var(--sp-5);
  }
}

/* ---------- ≤480px ---------- */
/* 联系方式：标签与值改为上下结构，避免长值（邮箱）被挤断 */
@media (max-width: 480px) {
  .contact-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }

  /* 极窄屏上的长邮箱 / 长网址仍可断行，避免撑破容器 */
  .contact-value {
    overflow-wrap: anywhere;
  }

  /* 压缩 header，避免标题与导航溢出 */
  .site-title {
    font-size: 1.15rem;
  }

  .site-header nav {
    gap: var(--sp-4);
  }

  .site-header nav a {
    font-size: 0.7rem;
  }
}

/* ---------- ≤360px ---------- */
/* 极窄屏：四项导航与长站名（Man on the Moon）同排会挤到导航项内断行，收紧间距与字号 */
@media (max-width: 360px) {
  .site-title {
    font-size: 1rem;
    white-space: nowrap;
  }

  .site-header nav {
    gap: var(--sp-3);
  }

  .site-header nav a {
    font-size: 0.65rem;
    white-space: nowrap;
  }
}

/* ---------- 触屏设备 ---------- */
@media (hover: none) {
  .site-header nav a {
    padding: 6px 0;
  }
}