/* ============================================================
   responsive.css — 响应式适配(平板 / 手机 / 横屏)
   重点:手机端视频满屏不留黑、取景偏移、安全区、按钮易点按
   ============================================================ */

/* 触屏 / 窄屏:固定背景在移动端表现差,改为正常滚动 */
@media (hover: none), (max-width: 820px) {
  .contact { background-attachment: scroll; }
}

/* ---------- 平板及以下 ---------- */
@media (max-width: 820px) {
  .topbar__name { font-size: 19px; letter-spacing: 2px; }
  .topbar__seal { width: 36px; height: 36px; font-size: 20px; }

  .hero { padding-top: 100px; }
  .hero__title { letter-spacing: 6px; }
  .hero__eyebrow { letter-spacing: 6px; }

  .dl-btn { min-width: 180px; }

  /* —— 关于我们 —— */
  .about { padding: 100px 20px 80px; }
  .about__scope { grid-template-columns: 1fr 1fr; gap: 18px; }

  /* 竖屏裁切更猛,取景略上移,主体更完整 */
  .hero__video { object-position: center 36%; }
}

/* ---------- 手机 ---------- */
@media (max-width: 560px) {
  /* 顶栏精简 */
  .topbar { padding: 12px 16px; }
  .topbar__name { font-size: 18px; }
  .topbar__name i { display: none; }
  .topbar__nav { gap: 18px; font-size: 14px; }

  /* —— 首页:动态视口高度 + 安全区,视频满屏不留黑、不随地址栏跳动 —— */
  .hero {
    min-height: 100svh;
    padding: calc(84px + env(safe-area-inset-top, 0px)) 18px
             calc(40px + env(safe-area-inset-bottom, 0px));
  }
  /* 竖屏取景再上移,优先露出人物 / 主体而非底部 */
  .hero__video { object-position: center 32%; }

  /* 竖屏遮罩:中段通透看清画面,底部近实色托住标题与按钮 */
  .hero__scrim {
    background:
      radial-gradient(135% 70% at 50% 30%, transparent 0%, rgba(13, 11, 8, .5) 72%),
      linear-gradient(180deg,
        rgba(13, 11, 8, .72) 0%,
        rgba(13, 11, 8, .22) 24%,
        rgba(13, 11, 8, .5) 58%,
        rgba(13, 11, 8, .97) 100%);
  }

  .hero__inner { max-width: 430px; }
  .hero__eyebrow { font-size: 12px; letter-spacing: 5px; margin-bottom: 12px; }
  .hero__title { font-size: clamp(44px, 15vw, 66px); letter-spacing: 4px; margin-left: 4px; }
  .hero__version { margin-top: 16px; padding: 6px 16px; font-size: 15px; letter-spacing: 3px; }
  .hero__slogan { margin-top: 16px; font-size: 13.5px; line-height: 1.65; }

  /* 下载按钮:整列铺满,加大点按区域 */
  .download { gap: 11px; margin-top: 26px; width: 100%; max-width: 340px; margin-inline: auto; }
  .dl-btn { width: 100%; min-width: 0; padding: 13px 20px; border-radius: 12px; }
  .dl-btn__icon { width: 34px; height: 34px; }
  .dl-btn__icon svg { width: 26px; height: 26px; }
  .dl-btn__sub { font-size: 11px; }
  .dl-btn__main { font-size: 16px; }
  .download__hint { margin-top: 18px; font-size: 12px; letter-spacing: 1px; }

  .scroll-cue {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    font-size: 11px;
    letter-spacing: 3px;
  }

  /* —— 关于我们 —— */
  .about {
    min-height: 100svh;
    padding: calc(84px + env(safe-area-inset-top, 0px)) 14px
             calc(40px + env(safe-area-inset-bottom, 0px));
  }
  .about__card { padding: 28px 16px; }
  .about__title { letter-spacing: 3px; }
  .about__company { font-size: 16px; margin-bottom: 20px; }
  .about__meta { gap: 8px 18px; font-size: 13px; }
  .about__meta-value { font-size: 12.5px; }
  /* 经营范围手机端上下堆叠 */
  .about__scope { grid-template-columns: 1fr; gap: 14px; }
  .about__scope-box { padding: 18px 14px; }
  .about__scope-list li { font-size: 12.5px; }

  /* —— 联系页 —— */
  .contact {
    min-height: 100svh;
    padding: calc(84px + env(safe-area-inset-top, 0px)) 14px
             calc(40px + env(safe-area-inset-bottom, 0px));
  }
  .contact__card { padding: 30px 18px; }
  .contact__title { letter-spacing: 3px; }

  /* 三个渠道:缩小保证一排不挤 */
  .channels { gap: 10px; margin-top: 30px; }
  .channel { width: 96px; padding: 16px 6px 12px; gap: 6px; }
  .channel__icon { width: 54px; height: 54px; }
  .channel__icon svg,
  .channel__icon img { width: 32px; height: 32px; }
  .channel__label { font-size: 16px; }
  .channel__hint { font-size: 11px; }

  /* 二维码弹层缩小,避免溢出屏幕 */
  .qrpop__card { width: 150px; padding: 12px 12px 10px; }
  .qrpop__imgbox { width: 126px; height: 126px; }
  .qrpop__cap { font-size: 12px; }
}

/* ---------- 超窄屏兜底 ---------- */
@media (max-width: 340px) {
  .hero__title { font-size: 42px; }
  .channel { width: 88px; }
  .qrpop__card { width: 140px; }
  .qrpop__imgbox { width: 116px; height: 116px; }
}

/* ---------- 横屏 / 矮屏:防止首页内容溢出 ---------- */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: 100svh; padding-top: 70px; padding-bottom: 24px; }
  .hero__video { object-position: center center; } /* 横屏不必上移取景 */
  .hero__title { font-size: clamp(38px, 9vh, 60px); }
  .hero__eyebrow { margin-bottom: 8px; }
  .hero__version { margin-top: 10px; }
  .hero__slogan { display: none; }   /* 矮屏隐藏副文案,优先露出按钮 */
  .download { margin-top: 16px; }
  .scroll-cue { display: none; }
}