/* ============================================================
   移动端补丁
   ------------------------------------------------------------
   单独一个文件、排在 main.css 后面，而不是并进去：这个仓库常有两处同时在改，
   分开放冲突面最小，要回滚也只是从 nuxt.config 的 css 数组里摘掉一行。

   这里只写 main.css 里确实没有的那几条。栅格、断点、宫格列数、
   scroll-padding、text-size-adjust 主样式里都已经有了，不重复一遍。
   ============================================================ */

/* ------------------------------------------------------------
   刘海屏的安全区

   app.vue 的 viewport 写了 viewport-fit=cover，页面因此会一直铺到刘海和
   屏幕圆角底下——这是有意的（首屏的深色背景要顶满），但正文得自己让回来。
   全站原本一处 env(safe-area-inset-*) 都没有，结果是：横屏拿 iPhone 看，
   左边一列字会被刘海啃掉；全屏看图层底部那排按钮压在小白条下面点不准。

   用 max() 而不是直接加：没有刘海的设备上 inset 是 0，得保住原来的间距。
   ------------------------------------------------------------ */
.container {
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}

/* 全屏看图层是 fixed 铺满整块屏的，四边都得自己躲 */
.peek__bar {
  padding-top: max(14px, env(safe-area-inset-top));
  padding-left: max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
}

.peek__stage {
  padding-left: max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
}

.peek__ops {
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  padding-left: max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
}

.lightbox__head {
  padding-top: max(16px, env(safe-area-inset-top));
  padding-left: max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
}

.lightbox__stage {
  padding-left: max(76px, env(safe-area-inset-left));
  padding-right: max(76px, env(safe-area-inset-right));
}

.lightbox__foot {
  padding-bottom: max(22px, env(safe-area-inset-bottom));
}

.peek__nav--prev {
  left: max(10px, env(safe-area-inset-left));
}

.peek__nav--next {
  right: max(10px, env(safe-area-inset-right));
}

/* ------------------------------------------------------------
   触屏上别把 hover 态粘住

   这几类卡片 hover 时会上浮 4px。触屏没有 hover，浏览器是在手指按下那一刻
   模拟一次，然后一直留着，直到点到别处——用户看到的是「我刚点过的那张卡
   歪在那儿不动」，像是卡住了。
   ------------------------------------------------------------ */
@media (hover: none) {
  .platform-card:hover,
  .card:hover,
  .steps li:hover,
  .post-card:hover {
    transform: none;
  }

  /* hover 反馈没了，补一个按下去的反馈，不然点了跟没点一样 */
  .platform-card:active,
  .post-card:active {
    transform: scale(0.985);
  }
}

/* ------------------------------------------------------------
   长串地址别把卡片撑破

   解析结果里的标题、文件名、直链都是用户内容。中文到边界自然会折，
   一条两百字符不带空格的 URL 不会——它会一路顶出卡片。
   这几处用 anywhere 而不是 break-word：它们在 flex / grid 里，
   break-word 管不住由内容撑出来的最小宽度。
   ------------------------------------------------------------ */
.result__title,
.studio__name,
.audio__lines span,
.audio__plain,
.audio__partial {
  overflow-wrap: anywhere;
}

.prose p,
.prose li,
.faq p {
  overflow-wrap: break-word;
}

/* ------------------------------------------------------------
   手机上的视口高度

   移动端浏览器的 vh 取的是「地址栏收起后」那个大视口，所以按 vh 算出来的
   高度在地址栏展开时会顶出屏幕。dvh 跟着实际可视高度走。
   包一层 @supports：老浏览器读不懂 dvh，得留住上面那条 vh。
   ------------------------------------------------------------ */
@supports (height: 100dvh) {
  .studio__stage video {
    max-height: 62dvh;
  }
}

/* ------------------------------------------------------------
   窄屏收束
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .post-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .site-header__inner {
    height: 58px;
  }

  .site-header.is-scrolled .site-header__inner {
    height: 54px;
  }

  .site-header .nav {
    top: 58px;
  }

  .site-header.is-scrolled .nav {
    top: 54px;
  }

  .hero {
    padding: 40px 0 12px;
  }

  .hero h1 {
    font-size: clamp(1.85rem, 7.6vw, 2.1rem);
  }

  .hero__pill {
    margin-bottom: 16px;
  }

  .tool__card {
    padding: 16px 14px;
  }

  .section {
    padding-block: 52px;
  }

  .section--tight {
    padding-block: 38px;
  }

  .page-hero {
    padding: 36px 0 40px;
  }

  .page-hero--studio {
    padding-bottom: 40px;
  }

  .prose--card {
    padding: 22px 16px;
  }

  .post-card {
    min-height: 0;
    padding: 22px 18px;
  }

  .result {
    padding: 14px;
  }

  .lightbox__stage {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
}

@media (max-width: 380px) {
  .hero h1 {
    font-size: 1.7rem;
  }

  .hero__pill {
    gap: 6px;
    padding: 5px 9px 5px 8px;
    font-size: 0.68rem;
  }
}