/* =====================================================
   qing-post-related  —  文章详情页「更多动态」相关推荐
   前缀: qnr-
   结构：区块小标题（带蓝色短下划线）+ 卡片网格
   卡片：图片 / 分类徽标 / 日期 / 标题 / 描边小按钮

   视觉与「新闻列表页」(qnp-) 的列表卡片一致，但类名与样式表独立 ——
   主题里 qnws- 与 qnp- 两套新闻卡片同样是各自独立的，沿用该约定，
   免得两个小部件的样式控件互相牵连。

   ---------------------------------------------------------------
   本文件与控件的分工

   底色、内边距、最大宽度、列数、间距、卡片描边与圆角、各文字颜色与
   字号等，都由 Elementor 控件按断点输出内联 CSS。同一属性不在这里
   重复声明 —— 否则控件的桌面档值（不带媒体查询、特异性 0,2,0）会压掉
   本文件 @media 内的规则（0,1,0，媒体查询不提升特异性）。

   所以这里只留两类：
     1. 控件缺省时的兜底值（基础规则，控件一设即被压过）
     2. 结构性样式（grid/flex 骨架、悬停过渡、比例盒），控件不涉及
   ===================================================== */

.qnr-wrap {
  /* 主题色与中性色抽成变量，卡片各处共用；控件改一处即全局生效 */
  --qnr-accent: #1f6feb;
  --qnr-text: #111;
  --qnr-muted: #666;
  --qnr-border: #e2e2e2;
  --qnr-card-bg: #fff;
  --qnr-radius: 0px;

  /* 区块小标题下方的蓝色短线 */
  --qnr-title-rule-w: 48px;
  --qnr-title-rule-h: 3px;
  --qnr-title-rule-gap: 14px;

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

  /* 图片比例，控件可调 */
  --qnr-media-ratio: 16 / 9;
}

/* 版块外壳。底色 / 内边距由控件驱动，这里只给兜底。 */
.qnr-wrap {
  background: transparent;
  padding: 64px 0;
}

/* 限宽 + 左右内边距。border-box 让内边距算在 max-width 之内，
   所以 1140 减去左右各 50，实际内容宽是 1040。 */
.qnr-inner {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 50px;
  box-sizing: border-box;
}

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

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

/* 标题居中/靠右时，短线要跟着走。
   由 PHP 按「标题对齐」控件挂类，::after 的 left/right 无法用
   text-align 继承，只能显式改。 */
.qnr-section-title--center {
  text-align: center;
}

.qnr-section-title--center::after {
  left: 50%;
  transform: translateX(-50%);
}

.qnr-section-title--right {
  text-align: right;
}

.qnr-section-title--right::after {
  left: auto;
  right: 0;
}

/* =====================================================
   卡片网格
   ===================================================== */
.qnr-grid {
  display: grid;
  /* 轨道下限写 0 而不是直接 1fr。
     1fr 展开是 minmax(auto, 1fr)，那个 auto 下限＝轨道内最小内容宽度；
     卡片里只要有不能断行的内容（英文标题、长型号名），下限就可能大于
     「容器宽 ÷ 列数」，grid 于是让整个网格溢出容器 —— 窄屏选 2 列时
     右边会跑出屏幕。「每行列数」控件输出的值同样用 minmax(0, 1fr)。 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

/* =====================================================
   卡片
   ===================================================== */
.qnr-card {
  display: block;
  background: var(--qnr-card-bg);
  border: 1px solid var(--qnr-border);
  border-radius: var(--qnr-radius);
  /* 卡片内边距让图片和文字都不贴描边，对应设计稿的内缩留白 */
  padding: 16px;
  box-sizing: border-box;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  /* grid 子项默认 min-width: auto，内容会把卡片顶宽，
     轨道下限放到 0 也没用。置 0 才让卡片真正服从轨道宽度。 */
  min-width: 0;
  transition: transform 0.28s ease, border-color 0.28s ease;
}

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

/* ---------- 图片 ---------- */
.qnr-media {
  aspect-ratio: var(--qnr-media-ratio);
  background: #eef0f3;
  overflow: hidden;
}

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

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

/* 无图占位：保持比例，不让卡片高度塌下去 */
.qnr-media--empty {
  background: repeating-linear-gradient(
    -45deg,
    #e9edf2,
    #e9edf2 10px,
    #eef2f7 10px,
    #eef2f7 20px
  );
}

/* ---------- 文字区 ---------- */
.qnr-body {
  /* 左右留白已由卡片内边距提供，这里只管上下，避免双层叠加 */
  padding: 20px 0 4px;
  display: flex;
  flex-direction: column;
  /* 必须显式写 flex-start：纵向 flex 的交叉轴是水平方向，默认 stretch
     会把 .qnr-badge 这个 inline-block 撑满整行（徽标变成一条长条）。 */
  align-items: flex-start;
}

.qnr-badge {
  display: inline-block;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--qnr-accent);
  background: var(--qnr-badge-bg);
  border: 1px solid var(--qnr-badge-border);
  border-radius: var(--qnr-badge-radius);
  max-width: 100%;
  overflow-wrap: anywhere;
}

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

.qnr-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--qnr-text);
  line-height: 1.5;
  margin: 0 0 20px;
  transition: color 0.2s ease;
  /* 不含空格的长串在窄屏必须能断开，否则顶宽卡片、右侧溢出 */
  overflow-wrap: anywhere;
  max-width: 100%;
}

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

/* 描边小按钮（不是纯文字链接），悬停时整块填充主题色 */
.qnr-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--qnr-accent);
  border: 1px solid var(--qnr-accent);
  border-radius: 4px;
  padding: 8px 16px;
  max-width: 100%;
  box-sizing: border-box;
  transition: background 0.2s ease, color 0.2s ease;
}

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

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

/* =====================================================
   响应式
   此处仅保留没有控件默认值的属性（字号）。
   断点取 767，与 Elementor 的移动断点对齐 —— 用别的数值会在两套断点
   交叠的区间里出现控件值与本文件规则互相打架的情况。
   列数不在这里改：它由「每行列数」控件按断点输出。
   ===================================================== */

@media (max-width: 767px) {
  .qnr-section-title {
    font-size: 20px;
  }

  .qnr-name {
    font-size: 16px;
  }

  .qnr-date {
    font-size: 13px;
  }
}