/* ==========================================================================
   css/responsive.css —— 断点与移动端适配
   说明：统一放在最后引入，只写“随屏幕变化”的规则，
        默认样式（移动优先的单列）都在各自文件里。
   ========================================================================== */

/* ------------------------------------------------------------ ≥ 620px */
@media (min-width: 620px) {
  .d-list { grid-template-columns: repeat(2, 1fr); }
  .d-shots { grid-template-columns: repeat(2, 1fr); }
  .panel-list { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------ ≥ 700px */
@media (min-width: 700px) {
  body { font-size: 16.5px; }

  /* 卡片墙：两列 */
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .card { height: 444px; }
  .card-photo { height: 196px; }

  /* 传承人墙：两列 */
  .ih-grid { grid-template-columns: repeat(2, 1fr); }

  .sound-chips { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

  /* 守护人：表单与预览并排 */
  .keeper-shell { grid-template-columns: 1fr 1.05fr; align-items: start; }

  /* 剪纸：控制区与图样并排 */
  .pc-shell { grid-template-columns: 300px 1fr; align-items: start; }

  /* 抽签：签筒与签面并排 */
  .draw-shell { grid-template-columns: 260px 1fr; align-items: center; }
}

/* ----------------------------------------------------------- ≥ 1000px */
@media (min-width: 1000px) {
  body { font-size: 17px; }

  /* 卡片墙：三列 */
  .card-grid { grid-template-columns: repeat(3, 1fr); }

  /* 传承人墙：三列 */
  .ih-grid { grid-template-columns: repeat(3, 1fr); }

  .pc-shell { grid-template-columns: 340px 1fr; }

  /* 地图：图与信息板左右分栏，长卷更从容 */
  .map-side { display: grid; grid-template-columns: 1fr; }

  .draw-shell { grid-template-columns: 300px 1fr; gap: 40px; }

  .sec-head { margin-bottom: 54px; }
}

/* ------------------------------------------------------------ ≥ 1200px */
@media (min-width: 1200px) {
  .card { height: 448px; }
}

/* ------------------------------------------------- 小屏（≤ 600px）细节 */
@media (max-width: 600px) {
  :root {
    --gap: 20px;
    --sec-pad: clamp(46px, 12vw, 62px);
  }

  .wrap { padding: 0 16px; }

  /* 木轴与轴头缩小，不占地方 */
  .scroll-rod { height: 16px; }
  .rod-knob { width: 32px; height: 32px; }
  .rod-knob.knob-l { left: -6px; }
  .rod-knob.knob-r { right: -6px; }
  .page { padding-top: 16px; padding-bottom: 16px; }

  /* 左右毛边收窄 */
  .page::before,
  .page::after { width: 12px; opacity: .4; }

  /* 分隔纹缩短 */
  .sep { height: 44px; max-width: 88%; }

  /* 卡片压缩一点，避免一张卡占满一屏 */
  .card { height: 404px; }
  .card-icon { width: 78px; height: 78px; margin-bottom: 8px; }
  .card-photo { height: 160px; }
  .card-name { font-size: 1.14rem; }
  .card-tagline { font-size: .86rem; }

  /* 等级标签：小屏缩小字号，确保长名称一行放下 */
  .chip-level { font-size: .7rem; padding: .25em .7em; letter-spacing: .02em; }

  /* 面板内边距收紧 */
  .sound-wall,
  .map-shell,
  .th-shell,
  .pc-shell,
  .keeper-shell,
  .lamp-shell,
  .draw-shell { padding: 22px 16px; }

  /* 弹层：小屏铺满，去掉圆角更像一张大纸 */
  .modal { padding: 0; align-items: flex-end; }
  .modal-panel {
    width: 100%;
    max-height: 94vh;
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .modal-body { padding: 26px 18px 32px; }
  .modal-close { top: 10px; right: 10px; width: 36px; height: 36px; }

  .d-head { gap: 14px; padding-right: 42px; }
  .d-icon { width: 72px; height: 72px; }
  .d-inheritor { flex-direction: row; gap: 14px; }
  .d-face { width: 62px; height: 62px; }
  .d-actions .btn { flex: 1 1 auto; }

  /* 长卷容器留一点边距感 */
  .map-scroll,
  .tl-scroll { margin: 0 -6px; border-radius: var(--radius-sm); }

  .lamp-stage { min-height: 270px; }
  .lamp { width: 128px; height: 190px; }

  .th-stage { height: 300px; }
  .th-tip { font-size: .74rem; letter-spacing: .1em; }

  /* 时间轴卡片在手机上窄一点，横向更好拖 */
  .tl-card { left: -92px; width: 184px; padding: 12px 13px; }
  .tl-title { font-size: .94rem; }
  .tl-text { font-size: .8rem; }

  .hero-btns .btn { flex: 1 1 auto; }

  .scroll-hint { bottom: 30px; font-size: .72rem; }
}

/* ----------------------------------------- 特别矮的屏（横屏手机等） */
@media (max-height: 560px) and (orientation: landscape) {
  #hero { min-height: auto; padding: 84px 20px 110px; }
  .mt { height: 74%; }
  .scroll-hint { display: none; }
}

/* ---------------------------------------------- 触摸设备：去掉悬停位移 */
@media (hover: none) {
  .card:hover,
  .ih-card:hover,
  .btn:hover,
  .chip:hover,
  .pact:hover { transform: none; }
  .card-sound:hover { transform: none; }
}

/* ------------------------------------------------------ 打印：只用素纸 */
@media print {
  .scroll-rod,
  .scroll-hint,
  .scroll-hint-x,
  .th-stage,
  .sound-wall { display: none !important; }
  body { background: #fff; }
  .card { height: auto; }
  .face { position: static; }
  .card-inner { transform: none !important; }
}