/* container-queries.css · 万事无忧·衡元智库 · 容器查询
 * 2026-09-06 W3 D7 · 优优在手
 * ----------------------------------------------------------------
 * 浏览器支持：Chrome 105+ / Safari 16+ / Firefox 128+ (2024)
 * 降级：浏览器忽略 @container，自动用普通 viewport media query
 *
 * 适用场景：
 * · 同一组件在不同容器尺寸下表现不同（vs 视口尺寸）
 * · 例：嵌入侧边栏的卡片 vs 主区域的卡片用不同布局
 */

/* ============ 导航栏容器查询（窄屏折叠） ============ */
.site-nav-inner {
  container-type: inline-size;
  container-name: nav;
}

@container nav (max-width: 720px) {
  .site-nav-inner {
    flex-wrap: wrap;
    padding: 8px 12px !important;
  }
  .site-nav-brand {
    flex: 1;
    font-size: 0.95rem !important;
  }
  .site-nav-links {
    width: 100%;
    margin-top: 8px;
    gap: 4px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .site-nav-links a {
    padding: 6px 10px !important;
    font-size: 0.8rem !important;
    white-space: nowrap;
  }
}

/* ============ 卡片网格容器查询 ============ */
.card-responsive {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 500px) {
  .card-responsive .card-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
  .card-responsive .card-icon {
    font-size: 2.5rem !important;
  }
}

@container card (max-width: 499px) {
  .card-responsive .card-grid {
    display: flex !important;
    flex-direction: column;
  }
  .card-responsive .card-icon {
    font-size: 1.8rem !important;
  }
}

/* ============ 八字命盘容器查询（核心功能页） ============ */
.bazi-chart {
  container-type: inline-size;
  container-name: bazi;
}

@container bazi (min-width: 600px) {
  .bazi-chart .pillar-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .bazi-chart .pillar-cell {
    padding: 12px !important;
  }
}

@container bazi (max-width: 599px) {
  .bazi-chart .pillar-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .bazi-chart .pillar-cell {
    padding: 8px !important;
  }
}

/* ============ 信息卡片容器查询 ============ */
.info-card-container {
  container-type: inline-size;
  container-name: info;
}

@container info (max-width: 280px) {
  .info-card-container .info-card {
    padding: 8px 12px !important;
  }
  .info-card-container .info-card .card-value {
    font-size: 0.9rem !important;
  }
}

/* ============ 减弱动画兼容 ============ */
@media (prefers-reduced-motion: reduce) {
  /* 容器查询触发的 transition 应被 a11y.css 中的全局规则覆盖 */
}