/* ============================================================
   LUTONG STUDIO · Responsive
   断点：移动端 < 768px ｜ 平板 768–1199px ｜ 桌面 ≥ 1200px
   导航在 ≤ 960px 切换为汉堡菜单（保证链接可点、不拥挤）
   ============================================================ */

/* =========================================================
   平板 / 中等屏幕
   ========================================================= */
@media (max-width: 1199px) {
  :root {
    --text-4xl: 3.1rem;
    --text-3xl: 2.5rem;
    --text-2xl: 2rem;
  }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: repeat(3, 1fr); }
  .step:not(:last-child)::after { display: none; }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer__grid > :last-child { grid-column: 1 / -1; }

  /* Hero 在 768-1199px 改为单列；Canvas 不再隐藏，而是垫到 hero__grid 底层（z-index 在下）作为背景装饰，文案浮在上层 */
  .hero { padding-top: 110px; min-height: auto; position: relative; overflow: hidden; }
  .hero__grid { grid-template-columns: 1fr; grid-template-rows: auto; gap: var(--space-6); position: relative; z-index: 2; }
  .hero__copy { grid-column: auto; grid-row: auto; }
  .hero__copy > div:nth-child(2) { word-break: keep-all; }
  .hero__cta { grid-column: auto; width: 100%; }
  .hero__visual {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    min-height: 0;
  }
  .hero__scene,
  .hero-canvas-wrap {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
  }
}

/* 导航切换为汉堡（≤ 960px） */
@media (max-width: 960px) {
  .nav__links,
  .nav__actions .btn { display: none; }
  .nav__toggle { display: block; }
  .nav__inner { padding: 10px 12px 10px 18px; }
}

/* =========================================================
   移动端（< 768px）
   ========================================================= */
@media (max-width: 767px) {
  :root {
    --text-4xl: 2.4rem;
    --text-3xl: 2rem;
    --text-2xl: 1.7rem;
    --text-xl: 1.45rem;
    --text-lg: 1.25rem;
    --container-pad: 20px;
    --space-9: 72px;
    --space-8: 56px;
    --space-7: 40px;
  }

  /* 区块标题居中友好 */
  .section-head { margin-bottom: var(--space-6); }

  /* 网格降为单列/双列 */
  .grid-4,
  .grid-3,
  .grid-2 { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }

  /* 联系卡片：H5 端改为列向 + 整体居中（图标/标题/二维码均居中） */
  .contact-item { flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); }
  .contact-qrs { justify-content: center; }
  /* 移动端：表单大卡（card border-glow）换到联系信息上方，左右布局颠倒为上下（表单在上） */
  .contact-form-card { order: 1; }
  .contact-info { order: 2; }

  /* Hero 在手机端：沿用上面 1199px 的单列 + Canvas 背景层方案（已在 1199px 块定义 position:absolute/z-index:0），这里只微调间距，不再隐藏 Canvas */
  .hero { padding-top: 110px; min-height: auto; }
  .hero__grid { gap: var(--space-7); }

  /* 项目大卡纵向堆叠 */
  .project-card { grid-template-columns: 1fr; }
  .project-card__media { border-right: none; border-bottom: 1px solid var(--color-border); min-height: 240px; }

  /* 案例双列 */
  .grid-4.cases-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }

  /* 合作流程改为纵向时间线 */
  .process { grid-template-columns: 1fr; gap: 0; }
  .step {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-2);
    border-left: 2px solid var(--color-border);
    border-radius: 0;
  }
  .step:not(:last-child)::after { display: none; }
  .step__num { font-size: var(--text-lg); min-width: 42px; }
  .step__body { display: flex; flex-direction: column; gap: var(--space-2); }

  /* 表单行单列 */
  .form__row { grid-template-columns: 1fr; }

  /* 页脚单列 */
  .footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }
  .footer__grid > :first-child { grid-column: 1 / -1; }
  .footer__grid > :last-child { grid-column: auto; }
  .footer__grid > * { min-width: 0; }
  .footer__col-title {
    margin-bottom: var(--space-3);
    font-size: 0.78rem;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .footer__links { gap: var(--space-2); }
  .footer__link {
    max-width: 100%;
    font-size: 0.72rem;
    overflow-wrap: anywhere;
  }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-3); }

  /* 按钮触屏友好 */
  .hero__actions .btn,
  .cta__actions .btn { flex: 1 1 auto; }

  /* 减小设备视觉尺寸避免溢出 */
  .device--laptop { width: 84%; left: 0; }
  .device--phone { width: 26%; right: 0; }
  .data-card { font-size: 0.68rem; padding: 9px 12px; }

  /* CTA 内边距收紧 */
  .cta { padding: var(--space-7) var(--space-5); }

  /* 页头标题字号 */
  .page-hero__title { font-size: var(--text-3xl); }

  /* 浮栏触屏安全边距 */
  .nav { padding-inline: 16px; }

  /* 详情页特征区块单列 */
  .feature-block { grid-template-columns: 1fr; gap: var(--space-6); }
  .feature-block:nth-child(even) .feature-block__media { order: 0; }

  /* FAQ 网格单列 */
  .faq-grid { grid-template-columns: 1fr; }

  /* 详情页上下导航允许换行 */
  .detail-nav { flex-wrap: wrap; }
}

/* 超小屏（< 420px）案例也单列 */
@media (max-width: 419px) {
  .grid-4.cases-grid { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1023px) {
  .case-gallery--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .case-gallery,
  .case-gallery--three { grid-template-columns: 1fr; }
  .case-gallery__caption { min-height: 48px; }
}

/* 不出现横向滚动条兜底 */
html, body { max-width: 100%; }