/* 全站手机端 UI 基础与卡片版式（只在 @media (max-width: 760px) 内生效，桌面端零影响）
 *
 * 与 mobile-tap.css 的分工：那个文件只管「点得中」（44px 触控下限、表单 16px 防
 * iOS 聚焦放大）；本文件管「看着像手机应用」——与具体页面无关的基础项，以及各页
 * 卡片版式的统一。
 *
 * 一、基础项
 * - text-size-adjust: 100%
 *   移动端 WebView 会对被判定为「正文块」的文字自动放大（Android Chrome 的字体
 *   放大算法），导致同一页里字号忽大忽小、与设计稿不符。关掉后由我们自己控制。
 * - -webkit-tap-highlight-color
 *   iOS/Android 默认点击高亮是半透明蓝灰方块，压在木质与暖金配色上很脏。改成
 *   与站点色系一致的暖金微光。
 * - 安全区内边距
 *   全面屏底部手势条与刘海会盖住内容。给页面底部补 env(safe-area-inset-bottom)，
 *   顶栏补左右安全区。env() 在不支持的浏览器上整条声明失效、不会有副作用。
 * - 断字与换行
 *   中文长串（链接、无空格英文标题）在窄屏上会撑破容器，统一允许换行。
 *
 * 二、卡片版式（依据 390px 实测）
 * - 卡片圆角在各页之间从 10 到 13 不等，统一到 14px，手机上更接近原生卡片观感。
 * - 多处列表/卡片容器的间距只有 4~7px，卡片之间几乎贴在一起：
 *   .category-list 7px（芯火广场分区）、.segmented 4px（村民档案）、
 *   .works-row 4px（关于芯火村）、.works-type-filter 4.9px（游客作品）、
 *   .edit-rail 6px（档案编辑）。统一放宽到 8~10px。
 * - .edit-rail（档案编辑页的分节导航）在手机上是 3 列 × 105px，标签挤成一行难认，
 *   改为 2 列，每项约 170px。
 * - 各页左右留白从 14 到 32px 不等，统一到 16px。其中共创项目最浪费：它没有重置
 *   body 的 8px 浏览器默认外边距，再叠加 main 的 24px，每侧共 32px，375px 屏上只剩
 *   311px 内容。这里补 body margin 归零（其余页面本就已归零，不受影响），并把
 *   .projects-page main、.camp-main、.log-stage > section 统一到 16px。
 *
 * 注意：本文件内任何位置都不要写注释——声明块内、@media 块内规则之间的注释都会
 * 让其后的声明或规则被静默丢弃。所有说明写在这段文件头里。
 */

@media (max-width: 760px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    -webkit-tap-highlight-color: rgba(255, 190, 90, .18);
  }

  .site-header {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .home-page,
  .workshop-room,
  .detail-room {
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }

  h1,
  h2,
  h3 {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  a,
  p {
    overflow-wrap: anywhere;
  }

  .card {
    border-radius: 14px;
  }

  .category-list,
  .works-row {
    gap: 10px;
  }

  .segmented,
  .works-type-filter,
  .works-level-filter {
    gap: 8px;
  }

  .edit-rail {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  body {
    margin: 0;
  }

  .projects-page main,
  .log-stage > section {
    width: auto;
    margin-left: 16px;
    margin-right: 16px;
  }

  .camp-main {
    padding-left: 16px;
    padding-right: 16px;
  }
}