/* ============================================================
 * mobile.css — 移动端导航+整体优化
 * Fable-5 设计方案：白色面板式下拉 + 触控优化
 * ============================================================ */

/* ============ 移动端导航：白色面板式下拉 ============ */
@media (max-width: 767.98px) {

  /* ---- 旧移动端导航样式已移除（2026-08-09 全站统一）----
     原 .navbar .navbar-collapse 整段（含深蓝 #16233a 文字/底色、
     冷灰下拉底 #f6f8fb、navbar-dark toggler 白边）属旧结构死代码：
     全站 navbar-collapse 使用数为 0，顶栏已换成 <header class="app-topbar">，
     其移动端降级由 app.css 的 @media 段负责。 */

  /* ---- Hero收紧 ---- */
  .hero-section {
    padding: 2.25rem 1.25rem;
    text-align: center;
  }
  .hero-section .hero-title {
    font-size: 1.5rem;
    line-height: 1.3;
  }
  .hero-section .hero-subtitle {
    font-size: 0.9rem;
  }
  .hero-section .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .hero-section .hero-actions .btn-hero-primary,
  .hero-section .hero-actions .btn-hero-secondary {
    width: 100%;
    min-width: 0;
  }

  /* ---- 页面骨架紧凑 ---- */
  .page-body { padding-top: 1rem; }
  .page-header { padding: 0.75rem 0; }
  .page-title { font-size: 1.15rem !important; }
  .container-xl { padding-left: 1rem; padding-right: 1rem; }

  .card { border-radius: 10px; }
  .card-body { padding: 1rem; }
  .row-cards > [class*="col"] { margin-bottom: 0.75rem; }

  /* ---- 表格横滑 ---- */
  .table-responsive { border-radius: 8px; }
  .table th, .table td {
    white-space: nowrap;
    font-size: 0.85rem;
  }
  /* Fable-5 自审补充：表格内 badge 字号不小于 td 字号 */
  .table .badge { font-size: 0.8rem !important; }

  /* ---- 视频预览16:9 ---- */
  .feature-video-preview video,
  .detail-video-player {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px;
    /* 视频未加载时的占位底色：客厅之光深墨，替代旧深蓝 #16233a */
    background: var(--tblr-dark, #2B2620);
  }

  /* ---- 触控优化 ---- */
  .form-control, .form-select { min-height: 44px; }
  .btn { min-height: 42px; }
  /* Fable-5 自审补充：btn-group-sm 内的按钮也要满足触控最低高度 */
  .btn-group-sm > .btn,
  .btn-sm { min-height: 36px; font-size: 0.8rem; padding: 0.25rem 0.55rem; }

  /* ---- 模态框 ---- */
  .modal-dialog { margin: 0.5rem; }
  /* Fable-5 自审补充：modal-dialog-centered 在窄屏改为顶部对齐，避免内容超出视口 */
  .modal-dialog-centered { align-items: flex-start; margin-top: 1rem; }

  /* ---- 顶栏 LOGO 移动端 ----
     旧的 span[style*="font-weight:600"] / span[style*="width:28px"] 选择器
     依赖内联样式属性匹配，新 LOGO 结构（brand-name + brand-mark + brand-sep
     + brand-product）不含任何内联 style，选择器已失效，故移除。
     移动端降级现由 app.css 的 .app-topbar @media 段负责：
     隐藏 brand-sep/brand-product，brand-mark 降到 22px，brand-name 降到 15px。 */
  .app-topbar .btn-sm {
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
  }
}

/* ---- 超小屏 ---- */
@media (max-width: 576px) {
  .hero-section .hero-title {
    font-size: 1.25rem;
  }
  .hero-section .hero-subtitle {
    font-size: 0.8rem;
  }
  .market-stats {
    flex-direction: column;
    gap: 0.25rem;
  }
  .market-stat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    text-align: left;
  }
  .market-stat-value {
    font-size: 0.85rem;
  }
  .market-stat-label {
    font-size: 0.65rem;
  }
}