/* ===========================================================
   responsive.css — 断点适配
   sm < 640 | md 640-1024 | lg 1024-1440 | xl > 1440
   =========================================================== */

/* ---------- 平板 md (640–1024) ---------- */
@media (max-width: 1024px) {
  :root {
    --container-pad: 24px;
    --fs-h1: 36px;
    --fs-h2: 24px;
    --fs-layer-num: 48px;
  }

  .header__inner { gap: var(--space-4); }

  /* 平板空间较小，聚焦扩展幅度也相应缩小 */
  .search { max-width: 240px; }
  .search:focus-within { max-width: 380px; }

  .theme-grid {
    grid-template-columns: 1fr;
  }

  .modal {
    width: 90vw;
  }

  .layer__header {
    padding: var(--space-6) var(--space-6) var(--space-5) var(--space-8);
    min-height: 180px;
  }

  .layer__body-inner {
    padding: 0 var(--space-6) var(--space-6) var(--space-8);
  }

  .layer__icon {
    width: 110px;
    height: 110px;
    right: 20px;
    bottom: 10px;
  }
}

/* ---------- 手机 sm (<640) ---------- */
@media (max-width: 640px) {
  :root {
    --container-pad: 16px;
    --header-h: 56px;
    --sub-header-h: 52px;
    --fs-h1: 28px;
    --fs-h2: 22px;
    --fs-h3: 18px;
    --fs-body-lg: 15px;
    --fs-body: 13px;
    --fs-ticker: 12px;
    --fs-layer-num: 40px;
    --r-layer: 20px;
    --r-card: 14px;
    --r-card-lg: 16px;
    --r-modal: 18px;
  }

  /* Header 精简 */
  .header__inner {
    gap: var(--space-2);
  }

  .header__subtitle { display: none; }

  .header__title {
    font-size: 15px;
  }

  .search {
    position: absolute;
    top: calc(100% + 8px);
    left: var(--container-pad);
    right: var(--container-pad);
    max-width: none;
    z-index: var(--z-dropdown);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }

  /* 手机端搜索框是全宽下拉，覆盖桌面端的"聚焦变宽"行为 */
  .search:focus-within {
    max-width: none;
  }

  .search.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* 桌面端搜索框样式微调：在手机上变成底部下拉 */
  .search__field {
    height: 44px;
  }

  .header__actions .btn--icon {
    width: 36px;
    height: 36px;
  }

  /* Sub-header */
  .sub-header__inner {
    padding: 0 var(--container-pad);
  }
  .sub-header__stats {
    font-size: 11px;
  }

  /* Layer */
  .layer__header {
    padding: var(--space-5) var(--space-4) var(--space-4) var(--space-6);
    gap: var(--space-3);
    min-height: 160px;
  }

  .layer__num {
    min-width: 44px;
    font-size: var(--fs-layer-num);
  }

  .layer__accent-bar {
    top: 20px;
    width: 6px;
    height: 32px;
  }

  .layer__body-inner {
    padding: 0 var(--space-4) var(--space-5) var(--space-6);
  }

  .layer__icon {
    width: 84px;
    height: 84px;
    right: 12px;
    bottom: 8px;
    opacity: 0.38;
  }

  .layer__desc {
    font-size: var(--fs-body);
  }

  /* Sub-theme 单列 */
  .subtheme__header {
    padding: var(--space-4) var(--space-4) var(--space-3);
  }
  .subcategories {
    padding: 0 var(--space-4) var(--space-4);
  }

  /* 公司 chip：手机上保留名称为主，隐藏 ticker 胶囊以节省空间 */
  .chip {
    padding: 5px 10px;
    font-size: 12px;
    max-width: 220px;
  }
  .chip__name { font-size: 12px; }
  .chip__ticker { display: none; }

  /* 主题卡片 */
  .theme-card {
    padding: var(--space-5);
  }
  .theme-card__orb {
    width: 36px;
    height: 36px;
  }

  /* mini layer map 在手机上密集 */
  .mini-layer-map {
    gap: 4px;
    padding: var(--space-3);
  }
  .mini-layer {
    border-radius: 7px;
    font-size: 10px;
  }

  /* 弹窗：几乎全屏 */
  .modal {
    width: 95vw;
    max-height: 92vh;
  }
  .modal__body {
    padding: var(--space-6) var(--space-5) var(--space-5);
  }
  .modal__ticker { font-size: 20px; }
  .modal__name-zh { font-size: 18px; }

  /* 抽屉：占满宽度 */
  .drawer {
    width: 100%;
    max-width: 100%;
  }

  /* 返回顶部按钮放大 */
  .back-to-top {
    width: 48px;
    height: 48px;
    right: 16px;
    bottom: 16px;
  }

  /* 层级导航在手机隐藏 */
  .layer-nav { display: none !important; }
}

/* ---------- 触摸优化 ---------- */
@media (hover: none) and (pointer: coarse) {
  .chip,
  .btn,
  .pill,
  .drawer__chip,
  .drawer__radio,
  .layer__header {
    min-height: 44px;
  }

  .chip {
    padding: 8px 12px;
  }

  .layer__subtheme-chips {
    gap: var(--space-3);
  }
}

/* ---------- 大屏 xl (>1440) 优化 ---------- */
@media (min-width: 1440px) {
  :root {
    --container-max: 1320px;
    --container-pad: 40px;
  }

  .main {
    padding-top: var(--space-10);
  }
}

/* ---------- 窄高度优化（横屏手机） ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .modal {
    max-height: 95vh;
    width: 95vw;
  }
}