/* KBG AI VIDEO ENGINE — 响应式层。断点覆盖任务书要求的
   375 / 390 / 430 / 768 / 1024 / 1440+。桌面样式写在 kbg-components.css里，
   这里只写"变小屏幕之后要变成什么样"，不重复定义颜色/字体。 */

/* ≤1024px：结果面板从左右两栏变成上下堆叠（播放器在上，信息在下） */
@media (max-width: 1024px) {
  .kbg-result-card { grid-template-columns: 1fr; }
  .kbg-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ≤768px：导航折叠、图集两列、统计/能力卡片自适应挤压 */
@media (max-width: 768px) {
  .kbg-nav-links { display: none; }
  .kbg-nav-links.open {
    display: flex; flex-direction: column; position: absolute; top: 58px; left: 0; right: 0;
    background: rgba(5, 5, 5, 0.97); border-bottom: 1px solid var(--kbg-border-gold);
    padding: 10px 20px 16px; gap: 14px; backdrop-filter: blur(14px);
  }
  .kbg-nav-toggle { display: block; }

  .kbg-hero { padding: 30px 0 24px; }
  .kbg-hero-title { letter-spacing: 0; }

  .kbg-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .kbg-info-grid { grid-template-columns: 1fr 1fr; }
}

/* ≤430px（含390/375）：解析框上下堆叠、按钮100%宽、画质芯片横向可滚动、
   结果卡片单列、下载按钮清晰可点不挤在一起 */
@media (max-width: 430px) {
  .kbg-shell { padding: 0 14px; }

  .kbg-parsebox { flex-direction: column; }
  .kbg-parsebox-input { font-size: 16px; } /* ≥16px防止iOS聚焦时自动缩放页面 */
  .kbg-parse-btn { width: 100%; padding: 14px; }

  .kbg-platform-row { gap: 8px; }
  .kbg-platform-card { min-width: 0; flex: 1 1 calc(50% - 8px); }

  .kbg-result-panel { padding: 0 12px; }
  .kbg-result-card { padding: 16px; gap: 18px; }
  .kbg-result-title { font-size: 15px; }

  .kbg-quality-row {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px; margin-left: -2px;
  }
  .kbg-quality-chip { flex-shrink: 0; }

  .kbg-download-area { flex-direction: column; }
  .kbg-btn-primary, .kbg-btn-ghost { width: 100%; }

  .kbg-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  .kbg-stat-grid, .kbg-capability-grid { grid-template-columns: 1fr; }
  .kbg-tool-list-v2 { grid-template-columns: 1fr; }

  .kbg-info-grid { grid-template-columns: 1fr 1fr; gap: 6px 10px; }
}

/* ≥1440px：内容区适度放宽，避免超宽屏两侧空太多显得单薄。Hero本身默认
   已经是1600px（kbg-components.css里），这里统一下面的内容区，跟Hero
   视觉宽度呼应，不是Hero宽、下面section突然变窄。 */
@media (min-width: 1440px) {
  .kbg-shell { max-width: 1400px; }
  .kbg-result-panel { max-width: 1100px; }
}