/* ==========================================================================
   mobile-fixes.css — 移动端修复补丁（挂载在全部样式之后，优先级最高）
   修复原站改版后 360-420px 窄屏下的三个问题：
   1. hero 大标题超宽被裁
   2. cookie 横幅宽度/文字溢出右边缘
   3. cookie 横幅按钮不换行被切
   ========================================================================== */

@media (max-width: 600px) {
  /* 1. hero 标题：收窄字号保证 360px 下完整显示 */
  .hero h1 {
    font-size: clamp(2.5rem, 12vw, 5.4rem);
    overflow-wrap: break-word;
  }

  /* 1b. hero 按钮移动端堆叠（避免贴边裁切） */
  .hero .button {
    display: block;
    margin: 12px 0 !important;
    text-align: center;
  }

  /* 2. cookie 横幅：宽度锁定视口内 */
  .nura-consent {
    width: calc(100vw - 28px);
    left: 14px;
    right: 14px;
    box-sizing: border-box;
  }

  /* 3. 横幅按钮：允许换行、可收缩 */
  .nura-consent div {
    flex-wrap: wrap;
  }
  .nura-consent button {
    flex: 1 1 110px;
    min-width: 0;
    white-space: normal;
  }
}