/* 首页（村庄地图）· 手机端竖屏版式
 *
 * 只在 @media (max-width: 760px) 内生效，桌面端零影响。本文件是新增文件，
 * 不修改 style.css 里任何一条桌面规则；需要覆盖的桌面样式一律在这里重写，
 * 引用顺序放在 style.css 之后。
 *
 * 做法：
 * - 隐藏创始人插画层（founders-demo.js 注入的 .founders-layer）、数据条
 *   （.stats-bar，入村村民等）与地图热区层（.hotspot-layer）。热区按地图百分比
 *   定位、又是为桌面悬停设计的，图片改成顶部横幅后位置会全部错位，且触屏难点，
 *   改由下方按钮承担导航。
 * - 背景图从 cover 裁切改为 100% 宽整张显示、贴顶。英雄图 4096x2307，高度正好是
 *   宽度的 56.32%。偏移量不能加在 .home-page 上——顶栏（.site-header）是它的第一个
 *   子元素，给它加 padding-top 会把顶栏一起推到图片下方；改为给 .map-intro 设
 *   margin-top: calc(56.32% - 70px)（百分比外边距按容器宽度解析，70px 为手机端顶栏
 *   高度），正文与按钮正好落在图片下沿，顶栏仍压在图片顶部，与桌面观感一致。
 * - 正文与按钮排在图片下方，按钮做成两列网格，主按钮通栏。
 *
 * 注意：本文件内任何位置都不要写注释。声明块内、@media 块内规则之间的注释都会
 * 让其后的声明或规则被静默丢弃（在 mobile.css 与 mobile-tap.css 上都踩过）。
 * 所有说明写在这段文件头里。
 */

@media (max-width: 760px) {
  .founders-layer,
  .stats-bar,
  .hotspot-layer {
    display: none !important;
  }

  .home-page {
    padding-bottom: 28px;
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
  }

  .home-page::before {
    display: none;
  }

  .map-intro {
    width: auto;
    margin: calc(56.32% - 70px) 16px 0;
  }

  .map-intro h1 {
    font-size: 30px;
  }

  .map-kicker {
    font-size: 16px;
  }

  .map-copy {
    font-size: 14px;
    line-height: 1.75;
  }

  .map-copy br {
    display: none;
  }

  .map-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    margin-top: 18px;
  }

  .map-button.is-primary {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  .map-link {
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding: 0 12px;
    font-size: 15px;
    letter-spacing: .02em;
  }

  .map-button.is-primary {
    min-height: 58px;
    font-size: 17px;
  }

  .map-link--phone-only {
    display: inline-flex;
  }
}