/* responsive.css —— 断点覆盖。窄屏规则集中在此，按模块分区。 */

/* ==========================================================================
   响应式
   ========================================================================== */

@media (max-width: 860px) {
  :root { --gut: 18px; }
  .page { padding-top: 26px; padding-bottom: 72px; }

  /* 顶栏改为两行网格：品牌 + 按钮在上，搜索独占一行。
     靠 flex-basis 换行会把按钮挤到单独一行，网格更可靠。 */
  .topbar-in {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 12px;
  }
  .brand { grid-area: 1 / 1; font-size: 1rem; }
  .top-tools { grid-area: 1 / 2; }
  .search { grid-area: 2 / 1 / 3 / 3; }
  .search input { width: 100%; }
  .results { width: 100%; right: 0; }
  .item-head { flex-wrap: wrap; gap: 6px; }
  .item h3 { font-size: 1.04rem; }
  .item-lead h3 { font-size: 1.16rem; }
  .dh-date { font-size: 1.44rem; }
  .moved-item { grid-template-columns: 1fr; }
  .moved-since { padding-top: 0; }

  /* 矩阵在窄屏：缩小间距、隐藏数字与星期（"一"被压扁后看着像破折号），
     把宽度让给条形 —— 这个宽度下条形才是主要信息。 */
  .matrix th, .matrix td { font-size: .68rem; }
  .matrix th:not(.day), .matrix td:not(.day) { padding-left: 5px; }
  .matrix .day { width: 3.4em; font-size: .76rem; }
  .matrix .dow { display: none; }
  .matrix .cell .n { display: none; }
  .cell .bar { height: 5px; }
}

@media (max-width: 520px) {
  .topbar-in { gap: 10px; }
  .top-tools { gap: 8px; }
  .zoom { display: none; }
}

/* ==========================================================================
   宽屏栅格（≥1100px）：阅读区展宽到 ~75vw，板块内 2 列，
   首条通栏（大图锚点），其余并排。层级靠尺度与留白，不加边框阴影。
   ========================================================================== */

@media (min-width: 1100px) {
  /* 容器展宽 */
  .page-read { max-width: min(75vw, 1440px); }
  .page { max-width: min(75vw, 1440px); }

  /* 板块内 2 列栅格（排除焦点与进展追踪——它们保持通栏） */
  section[id]:not(#focus):not(#moved):not(#activeBox) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
    align-items: start;
  }
  section[id]:not(#focus):not(#moved):not(#activeBox) .sec-head,
  section[id]:not(#focus):not(#moved):not(#activeBox) .brief {
    grid-column: 1 / -1;
  }

  /* 每板块第一条通栏 —— 用尺度建立层级 */
  section[id]:not(#focus):not(#moved):not(#activeBox) > article:first-of-type {
    grid-column: 1 / -1;
  }

  /* 栅格内条目：图在上、文在下（覆盖侧排 flex） */
  section[id]:not(#focus):not(#moved):not(#activeBox) .item.has-image {
    display: block;
  }
  section[id]:not(#focus):not(#moved):not(#activeBox) .item.has-image .item-figure {
    width: 100%;
    margin-bottom: 14px;
  }

  /* 栅格内去掉底部边线 —— 间距本身就是分隔 */
  section[id]:not(#focus):not(#moved):not(#activeBox) .item {
    border-bottom: none;
    padding-bottom: 0;
  }

  /* 半宽条目的图比例改 16:9（更扁，省纵向空间） */
  section[id]:not(#focus):not(#moved):not(#activeBox) > article:not(:first-of-type) .item-figure {
    aspect-ratio: 16 / 9;
  }

  /* 首页「正在发生」也走 2 列 */
  #activeBox {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    align-items: start;
  }
  #activeBox .sec-head {
    grid-column: 1 / -1;
  }
}

@media print {
  .topbar, .to-top, .progress, .foot, .back { display: none; }
  body { background: #fff; }
}