/* =====================================================
   qing-news-page  —  新闻列表页（筛选 + 重点新闻 + 列表 + 分页）
   前缀: qnp-
   对应源码 .news-page-list 整段。

   筛选条原为独立小部件 qing-news-filter，现已并入 qing-news-page。
   类名 .qnp-filter / .qnp-tab 保持不变，所以这份样式表无需改选择器；
   旧小部件的类文件仍在，但已不再注册。

   悬停效果：重点新闻与列表卡片用同一套 —— 上浮 + 描边变色 +
   图片轻微放大 + 标题/按钮变色。阴影已按要求移除。
   源码里重点新闻原本是「遮罩叠加」式，改成与下方卡片一致，
   所以两者 hover 规则写在一起，不再有任何 overlay/渐变层。
   ===================================================== */

.qnp-wrap {
  --qnp-accent: #1f6feb;
  --qnp-text: #111;
  --qnp-muted: #666;
  --qnp-border: #e2e2e2;
  --qnp-card-bg: #fff;
  --qnp-radius: 0px;

  /* 区块小标题下方的蓝色短线 */
  --qnp-title-rule-w: 48px;
  --qnp-title-rule-h: 3px;
  --qnp-title-rule-gap: 14px;
  --qnp-title-rule-bg: var(--qnp-accent);

  /* 卡片内边距：图片与文字都不贴边框。
     .qnp-body 只保留上下内边距，左右由这里统一提供，不会叠加两层。 */
  --qnp-card-pad: 16px;
  --qnp-body-pad: 20px 0 4px;

  /* 分类徽标：描边式（透明底 + 主题色描边），非填充底色 */
  --qnp-badge-bg: transparent;
  --qnp-badge-border: var(--qnp-accent);
  --qnp-badge-radius: 2px;

  font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

/* 源码 .news-page-list 的浅灰底 + 上下内边距。
   合并后整块只输出一个 .qnp-wrap，不再有两段灰块接缝的问题。
   底色仍由控件控制、默认透明，需要时加 .qnp-wrap--shell。 */
.qnp-wrap--shell {
  background: #ececec;
  padding: 64px 0 84px;
}

/* 限宽 1140 + 左右 50 内边距，与源码 .news-list-inner 一致。
   border-box 让 50px 算在 1140 之内，所以内容实际可用宽 1040。 */
.qnp-inner {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 50px;
  box-sizing: border-box;
}

/* =====================================================
   分类筛选
   ===================================================== */
/* 对应源码 .news-filter：居中、gap 14、下间距 44 */
.qnp-filter {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 44px;
}

/* 对应源码 .news-tab：白底 + 2px 灰描边 + 直角，不是圆角胶囊。
   之前写成了 #f5f6f8 灰底 + border-radius:999px 的胶囊，与源码不符。

   ---------------------------------------------------------------
   为什么下面每条都要显式写 background

   这个类既可能落在 <a>（跳转模式）也可能落在 <button>（AJAX / 前端筛选
   模式）上。而主题的 style.css 里有一组全局按钮样式：

       button        { background: #2f6f4f; color: #fff; border: 0; }
       button:hover  { background: #245840; color: #fff; }

   特异性是逐个属性比较的。本规则的 :hover 若不声明 background，
   悬停时该属性就要在这两条之间决胜：

       button:hover  → #245840   特异性 (0,1,1)
       .qnp-tab      → #fff      特异性 (0,1,0)

   前者带一个元素选择器（c=1），因此深绿胜出 —— 悬停时按钮会变成
   深绿底配蓝字。所以 :hover 和 .qnp-is-active:hover 都必须把
   background 写出来，把这条路堵死。

   另外 <button> 不继承页面字体、且自带浏览器默认的 line-height 与
   margin，不复位的话两种形态会有肉眼可见的差异。 */
.qnp-tab {
  display: inline-flex;
  align-items: center;
  padding: 10px 26px;
  font-size: 15px;
  font-weight: 600;
  color: #555;
  background: #fff;
  border: 2px solid #d8d8d8;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;

  /* <button> 复位。font-size / font-weight 上面已显式给出，所以这里
     不用 font: inherit —— 那会把那两项一起覆盖掉。 */
  font-family: inherit;
  line-height: 1.4;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

.qnp-tab:hover {
  color: var(--qnp-accent);
  background: #fff;
  border-color: var(--qnp-accent);
}

.qnp-tab.qnp-is-active {
  color: #fff;
  background: var(--qnp-accent);
  border-color: var(--qnp-accent);
}

/* 选中项悬停时保持选中态外观，不要退回未选中的白底。
   同样必须显式写 background，理由见上。 */
.qnp-tab.qnp-is-active:hover {
  color: #fff;
  background: var(--qnp-accent);
  border-color: var(--qnp-accent);
}

/* 键盘焦点可见。<button> 的默认焦点环被上面的 appearance: none 削弱了，
   补一个明确的，否则键盘用户看不出焦点在哪。 */
.qnp-tab:focus-visible {
  outline: 2px solid var(--qnp-accent);
  outline-offset: 2px;
}

/* =====================================================
   角标（重点新闻与卡片共用）
   ===================================================== */
.qnp-badge {
  display: inline-block;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--qnp-accent);
  background: var(--qnp-badge-bg);
  border: 1px solid var(--qnp-badge-border);
  border-radius: var(--qnp-badge-radius);
}

/* =====================================================
   重点新闻
   悬停效果与下方卡片完全一致，无遮罩叠加。
   ===================================================== */
.qnp-feature {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  background: var(--qnp-card-bg);
  border: 1px solid var(--qnp-border);
  border-radius: var(--qnp-radius);
  overflow: hidden;
  margin-bottom: 44px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.28s ease, border-color 0.28s ease;
}

/* 悬停与下方 .qnp-card 一致：上浮 + 描边变色 + 图片轻微放大。
   阴影已按要求移除（原为 0 18px 40px rgba(31,111,235,.16)）。 */
.qnp-feature:hover {
  transform: translateY(-6px);
  border-color: var(--qnp-accent);
}

.qnp-feature-media {
  aspect-ratio: 16 / 10;
  background: #eef0f3;
  overflow: hidden;
}

.qnp-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.qnp-feature:hover .qnp-feature-media img {
  transform: scale(1.05);
}

.qnp-feature-body {
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 必须显式写 flex-start：纵向 flex 的交叉轴是水平方向，默认 stretch
     会把 .qnp-badge 这个 inline-block 撑满整行宽度（徽标变成一条长条）。
     下方卡片的 .qnp-body 已经有这一条，这里漏了。 */
  align-items: flex-start;
}

.qnp-feature-date {
  font-size: 13px;
  color: var(--qnp-muted);
  margin: 16px 0 12px;
}

.qnp-feature-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--qnp-text);
  line-height: 1.45;
  margin: 0 0 16px;
  transition: color 0.2s ease;
}

.qnp-feature:hover .qnp-feature-title {
  color: var(--qnp-accent);
}

.qnp-feature-desc {
  font-size: 15px;
  line-height: 1.9;
  color: var(--qnp-muted);
  margin: 0 0 24px;
  /* 摘要控制在两行内，保持版面整齐 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 与下方卡片的「阅读全文」同款：描边小按钮，悬停整块填充主题色。
   之前这里是纯文字 + 箭头右移，与下方不统一。 */
.qnp-feature-link {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--qnp-accent);
  border: 1px solid var(--qnp-accent);
  border-radius: 4px;
  padding: 8px 16px;
  transition: background 0.2s ease, color 0.2s ease;
}

.qnp-feature:hover .qnp-feature-link {
  background: var(--qnp-accent);
  color: #fff;
}

.qnp-feature-arrow {
  font-weight: 400;
}

/* =====================================================
   区块小标题（「更多动态」）
   ===================================================== */
.qnp-section-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--qnp-text);
  text-align: left;
  margin: 0 0 32px;
  /* 蓝色短下划线。用 ::after 而不是 border-bottom —— 后者会横贯整行宽度，
     而设计稿里是标题下方一小段。宽度/粗细/间距走变量，控件可调。 */
  position: relative;
  padding-bottom: var(--qnp-title-rule-gap);
}

.qnp-section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--qnp-title-rule-w);
  height: var(--qnp-title-rule-h);
  border-radius: calc(var(--qnp-title-rule-h) / 2);
  background: var(--qnp-title-rule-bg);
}

/* =====================================================
   新闻列表
   ===================================================== */
.qnp-grid {
  display: grid;
  /* 轨道下限写 0：1fr 展开是 minmax(auto, 1fr)，那个 auto 下限＝轨道内
     最小内容宽度，卡片里不能断行的长串（英文标题等）会把下限顶到超过
     「容器宽 ÷ 列数」，grid 于是让整个网格溢出容器。 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

/* 对应源码 .news-card.news-card--list：直角 + 浅灰描边。
   描边色原为硬编码 #ededed，「卡片描边色」控件输出的是 --qnp-border，
   两者对不上导致那个控件对列表卡片无效（只影响重点新闻），已改为走变量。 */
.qnp-card {
  display: block;
  background: var(--qnp-card-bg);
  border: 1px solid var(--qnp-border);
  /* 卡片内边距：让图片和文字都不贴边框，对应设计稿的内缩留白。
     原先图片直接顶到描边上（靠 overflow:hidden 裁切），与稿子不符。 */
  padding: var(--qnp-card-pad);
  border-radius: var(--qnp-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.28s ease, border-color 0.28s ease;
}

.qnp-card:hover {
  transform: translateY(-6px);
  border-color: var(--qnp-accent);
}

.qnp-media {
  aspect-ratio: 16 / 9;
  background: #eef0f3;
  overflow: hidden;
}

.qnp-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.qnp-card:hover .qnp-media img {
  transform: scale(1.05);
}

/* 对应源码 .news-card--list .news-body */
.qnp-body {
  /* 左右留白已由 .qnp-card 的内边距提供，这里只管上下，避免双层叠加 */
  padding: var(--qnp-body-pad);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.qnp-date {
  font-size: 14px;
  color: var(--qnp-muted);
  margin: 14px 0 8px;
}

.qnp-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--qnp-text);
  line-height: 1.5;
  margin: 0 0 20px;
  min-height: 0;
  transition: color 0.2s ease;
}

.qnp-card:hover .qnp-name {
  color: var(--qnp-accent);
}

/* 对应源码 .news-more-btn：描边小按钮（不是纯文字链接），
   悬停时整块填充主题色。之前写成了纯文字变色，与源码不符。 */
.qnp-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--qnp-accent);
  border: 1px solid var(--qnp-accent);
  border-radius: 4px;
  padding: 8px 16px;
  transition: background 0.2s ease, color 0.2s ease;
}

.qnp-card:hover .qnp-more-btn {
  background: var(--qnp-accent);
  color: #fff;
}

.qnp-more-arrow {
  font-weight: 400;
}

/* =====================================================
   AJAX 切换 / 翻页：骨架占位
   =====================================================

   切换分类时不能直接清空结果区 —— 那样版块高度会瞬间塌到 0、
   页面往上一跳，请求回来又弹回去，观感很差。
   所以先按原来的卡片数铺同样数量的骨架块，高度保持稳定。

   骨架块的形状刻意与真卡片一致（同样的内边距、16:9 图片位、
   三行文字），这样替换成真内容时不会有明显的跳变。 */

.qnp-results {
  position: relative;
}

/* ---------- 进入视口与 AJAX 更新动画 ---------- */
@keyframes qnp-enter-up {
  from { opacity: 0; transform: translate3d(0, 30px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.qing-motion-js .qnp-wrap:not(.is-motion-visible) .qnp-filter,
.qing-motion-js .qnp-wrap:not(.is-motion-visible) .qnp-section-title,
.qing-motion-js .qnp-wrap:not(.is-motion-visible) .qnp-feature,
.qing-motion-js .qnp-wrap:not(.is-motion-visible) .qnp-card,
.qing-motion-js .qnp-wrap:not(.is-motion-visible) .qnp-pagination {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
}

.qnp-wrap.is-motion-visible .qnp-filter,
.qnp-wrap.is-motion-visible .qnp-section-title,
.qnp-wrap.is-motion-visible .qnp-feature,
.qnp-wrap.is-motion-visible .qnp-card,
.qnp-wrap.is-motion-visible .qnp-pagination,
.qnp-results.qnp-motion-run .qnp-section-title,
.qnp-results.qnp-motion-run .qnp-feature,
.qnp-results.qnp-motion-run .qnp-card,
.qnp-results.qnp-motion-run .qnp-pagination {
  animation: qnp-enter-up 1.1s cubic-bezier(.22,1,.36,1) backwards;
}

.qnp-wrap.is-motion-visible .qnp-filter { animation-delay: 100ms; }
.qnp-wrap.is-motion-visible .qnp-section-title:nth-of-type(1),
.qnp-results.qnp-motion-run .qnp-section-title:nth-of-type(1) { animation-delay: 280ms; }
.qnp-wrap.is-motion-visible .qnp-feature,
.qnp-results.qnp-motion-run .qnp-feature { animation-delay: 470ms; }
.qnp-wrap.is-motion-visible .qnp-section-title:nth-of-type(2),
.qnp-results.qnp-motion-run .qnp-section-title:nth-of-type(2) { animation-delay: 680ms; }
.qnp-wrap.is-motion-visible .qnp-card,
.qnp-results.qnp-motion-run .qnp-card { animation-delay: calc(900ms + var(--motion-i, 0) * 250ms); }
.qnp-wrap.is-motion-visible .qnp-pagination,
.qnp-results.qnp-motion-run .qnp-pagination { animation-delay: 1320ms; }

@media (prefers-reduced-motion: reduce) {
  .qing-motion-js .qnp-wrap .qnp-filter,
  .qing-motion-js .qnp-wrap .qnp-section-title,
  .qing-motion-js .qnp-wrap .qnp-feature,
  .qing-motion-js .qnp-wrap .qnp-card,
  .qing-motion-js .qnp-wrap .qnp-pagination {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* 请求进行中：内容淡出但保留占位，避免高度塌陷 */
.qnp-results--loading {
  min-height: 200px;
}

.qnp-skeleton {
  display: grid;
  /* 轨道下限写 0，理由同 .qnp-grid：1fr 的 auto 下限会被内容顶宽 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.qnp-sk-card {
  background: var(--qnp-card-bg);
  border: 1px solid var(--qnp-border);
  border-radius: var(--qnp-radius);
  padding: var(--qnp-card-pad);
  box-sizing: border-box;
  min-width: 0;
}

.qnp-sk-media {
  aspect-ratio: 16 / 9;
  border-radius: 2px;
}

.qnp-sk-line {
  height: 12px;
  border-radius: 3px;
  margin-top: 14px;
}

/* 三行长度不一，比等长的三条更像真实的标题与日期 */
.qnp-sk-line--sm {
  width: 32%;
  margin-top: 20px;
}

.qnp-sk-line--lg {
  width: 88%;
}

.qnp-sk-line--md {
  width: 64%;
}

.qnp-sk-btn {
  width: 108px;
  height: 34px;
  border-radius: 4px;
  margin-top: 20px;
}

/* 微光扫过效果。
   用 background-position 动画而不是移动一个伪元素：前者只触发合成层的
   重绘，不会引起布局计算，长列表下更省。 */
.qnp-sk-media,
.qnp-sk-line,
.qnp-sk-btn {
  background-color: #e9edf2;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: qnp-shimmer 1.3s ease-in-out infinite;
}

@keyframes qnp-shimmer {
  0% {
    background-position: 150% 0;
  }
  100% {
    background-position: -50% 0;
  }
}

/* 尊重「减少动态效果」的系统设置：前庭功能敏感的用户会被这类循环动画
   影响。关掉动画但保留底色，占位效果不丢。 */
@media (prefers-reduced-motion: reduce) {
  .qnp-sk-media,
  .qnp-sk-line,
  .qnp-sk-btn {
    animation: none;
    background-image: none;
  }
}

/* =====================================================
   分页
   ===================================================== */
.qnp-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 56px;
}

.qnp-page-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--qnp-muted);
  background: #fff;
  border: 1px solid var(--qnp-border);
  border-radius: 8px;
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

/* 显式写 background，理由同 .qnp-tab:hover：不写的话该属性会去和外部
   规则（主题全局的按钮/链接样式）比特异性，而基础规则只有 (0,1,0)，
   很容易被带元素选择器的 (0,1,1) 压过去。分页目前是 <a>，暂未被
   style.css 里的 button 规则命中，但补上这条更稳。 */
.qnp-page-item:hover {
  color: var(--qnp-accent);
  background: #fff;
  border-color: var(--qnp-accent);
}

.qnp-page-item.qnp-is-active {
  color: #fff;
  background: var(--qnp-accent);
  border-color: var(--qnp-accent);
}

/* WordPress 的 paginate_links 会把当前页输出成 <span>，样式要跟 a 对齐 */
span.qnp-page-item {
  cursor: default;
}

.qnp-page-dots {
  color: var(--qnp-muted);
}

/* =====================================================
   空状态
   ===================================================== */
.qnp-empty {
  padding: 60px 0;
  text-align: center;
  font-size: 15px;
  color: var(--qnp-muted);
}

/* =====================================================
   响应式
   ===================================================== */
@media (max-width: 1080px) {
  .qnp-grid,
  .qnp-skeleton {
    /* minmax(0, …) 而不是 1fr：1fr 展开是 minmax(auto, 1fr)，那个 auto
       下限＝轨道内最小内容宽度，英文标题这类不能断行的内容会把下限顶到
       超过「容器宽 ÷ 列数」，grid 于是让整个网格溢出容器。 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qnp-feature-body {
    padding: 32px 32px;
  }

  .qnp-feature-title {
    font-size: 22px;
  }
}

@media (max-width: 900px) {
  .qnp-inner {
    padding: 0 24px;
  }

  /* 重点新闻改上下堆叠 */
  .qnp-feature {
    grid-template-columns: 1fr;
    margin-bottom: 48px;
  }

  .qnp-feature-media {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 620px) {
  .qnp-grid,
  .qnp-skeleton {
    grid-template-columns: 1fr;
  }

  .qnp-filter {
    gap: 10px;
    margin-bottom: 28px;
  }

  .qnp-tab {
    padding: 8px 18px;
    font-size: 14px;
  }

  .qnp-section-title,
  .qnp-feature-title {
    font-size: 20px;
  }

  .qnp-feature-body {
    padding: 24px;
  }
}