/* ============================================
   responsive.css - 响应式适配样式
   桌面端（>1024px）：双栏布局（预览 + 编辑并排）
   平板端（768-1024px）：单栏布局
   移动端（<768px）：紧凑单栏布局
   ============================================ */

/* ---------- 桌面端：双栏布局 ---------- */
@media (min-width: 1025px) {
  /* 主内容区使用 CSS Grid 实现双栏 */
  .app-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: var(--spacing-lg);
    align-items: start;
  }

  /* 文件导入区：跨两列 */
  .import-section {
    grid-column: 1 / -1;
  }

  /* 功能选择区：跨两列，全宽 */
  .mode-selector-fullscreen {
    grid-column: 1 / -1;
  }

  /* 视频预览区：左列，默认 sticky 固定 */
  .preview-section {
    grid-column: 1;
    position: sticky;
    top: var(--spacing-lg);
  }

  /* 预览区取消固定时恢复正常文档流 */
  .preview-section.no-sticky {
    position: static;
  }

  /* 编辑操作面板：右列 */
  .editor-section {
    grid-column: 2;
  }

  /* 快捷操作面板：跨两列 */
  .quick-actions-section {
    grid-column: 1 / -1;
  }

  /* 视频合并和图片合成：跨两列（独立区域） */
  .merge-section,
  .slideshow-section {
    grid-column: 1 / -1;
  }

  /* 导出下载区：跨两列 */
  .export-section {
    grid-column: 1 / -1;
  }

  /* 快捷操作网格：桌面端 4 列 */
  .quick-actions-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* 编辑面板 Tab 导航：桌面端可以多行展示 */
  .editor-tabs {
    gap: var(--spacing-xs);
  }
}

/* ---------- 平板端：单栏布局 ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
  .app-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    max-width: 800px;
  }

  /* 快捷操作网格：平板端 3 列 */
  .quick-actions-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 编辑面板 Tab 导航：允许横向滚动 */
  .editor-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox 隐藏滚动条 */
  }

  .editor-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari 隐藏滚动条 */
  }

  /* 表单行在平板端保持并排 */
  .form-row {
    flex-wrap: nowrap;
  }
}

/* ---------- 移动端：紧凑单栏布局 ---------- */
@media (max-width: 767px) {
  .app-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
  }

  /* 标题栏紧凑 */
  .app-header {
    padding: var(--spacing-md);
  }

  .app-title {
    font-size: 1.25rem;
  }

  .app-subtitle {
    font-size: 0.75rem;
  }

  /* 区块内边距缩小 */
  .section {
    padding: var(--spacing-md);
  }

  .section-title {
    font-size: 1.1rem;
  }

  /* 拖拽区域紧凑 */
  .import-section .drop-zone {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .drop-zone-icon {
    font-size: 2rem;
  }

  /* 信息网格：移动端单列 */
  .info-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* 编辑面板 Tab 导航：横向滚动 */
  .editor-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--spacing-xs);
  }

  .editor-tabs::-webkit-scrollbar {
    display: none;
  }

  .tab-btn {
    font-size: 0.75rem;
    padding: 5px 10px;
  }

  /* 表单行在移动端堆叠 */
  .form-row {
    flex-direction: column;
    gap: 0;
  }

  /* 快捷操作网格：移动端 2 列 */
  .quick-actions-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
  }

  .quick-action-card {
    padding: var(--spacing-md) var(--spacing-sm);
  }

  .qa-icon {
    font-size: 1.5rem;
  }

  .qa-label {
    font-size: 0.8125rem;
  }

  .qa-desc {
    font-size: 0.6875rem;
  }

  /* 按钮组在移动端换行 */
  .btn-group {
    flex-wrap: wrap;
  }

  /* 进度遮罩内容缩小 */
  .processing-content {
    min-width: auto;
    margin: 0 var(--spacing-md);
    padding: var(--spacing-lg);
  }

  /* 导出区域 */
  .export-info {
    grid-template-columns: 1fr;
  }
}

/* ---------- 超宽屏适配 ---------- */
@media (min-width: 1600px) {
  .app-main {
    max-width: 1600px;
  }

  /* 快捷操作网格：超宽屏可以展示更多列 */
  .quick-actions-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

/* ---------- 打印样式（隐藏不必要元素） ---------- */
@media print {
  .app-header,
  .ffmpeg-loading,
  .ffmpeg-error,
  .processing-overlay,
  .player-controls,
  .btn,
  .editor-tabs {
    display: none !important;
  }
}