/* =====================================================
   qing-post-hero  —  文章详情页首屏
   前缀: qnh-
   结构：面包屑 + 元信息（分类 · 日期）+ 大标题 + 摘要
   背景支持图片或纯色（由 Elementor 背景组控件输出），可叠遮罩

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

   版块高度、内边距、最大宽度、各元素字号与间距、背景、遮罩等，
   都由 Elementor 控件按断点输出内联 CSS。同一属性不在这里重复
   声明 —— 否则控件的桌面档值（不带媒体查询、特异性 0,2,0）会压掉
   本文件里 @media 内的规则（0,1,0，媒体查询不提升特异性）。

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

/* ---------- 外层容器 ---------- */
.qnh-wrap {
  position: relative;
  /* 背景由「背景」组控件输出（图片 / 纯色 / 渐变皆可）。
     这里给一个浅灰兜底，控件没设时也不会是透明的。 */
  background-color: #ececec;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
}

/* 遮罩层：背景用深色大图时压一层底色保证文字可读。
   默认 opacity: 0（不可见），由「遮罩不透明度」控件开启。
   用 ::before 而不是给 wrap 加半透明底色 —— 后者会把背景图一起压掉。 */
.qnh-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #ffffff;
  opacity: 0;
  pointer-events: none;
}

/* ---------- 内容区 ----------
   --qnh-align 由「内容对齐」控件写在 .qnh-wrap 上，取值 start / center / end。
   这三个词 align-items 与 text-align 都认，所以一个变量既定位块、
   又对齐块内文字，不必拆成两个控件让用户填两遍。
   （flex-start / flex-end 只有 align-items 认，text-align 会判为非法值。） */
.qnh-inner {
  position: relative;
  z-index: 2;
  max-width: 1140px;
  margin: 0 auto;
  padding: 72px 50px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: var(--qnh-align, center);
  text-align: var(--qnh-align, center);
}

/* ---------- 面包屑 ---------- */
.qnh-crumb {
  font-size: 13px;
  line-height: 1.8;
  color: #888;
  margin: 0 0 18px;
  /* 层级多时在窄屏换行，而不是撑破容器 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: var(--qnh-align, center);
  gap: 0 6px;
}

.qnh-crumb a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.qnh-crumb a:hover {
  color: #1f6feb;
}

.qnh-crumb-sep {
  color: #bbb;
}

/* 当前页那一项不带链接 */
.qnh-crumb-current {
  color: #555;
}

/* ---------- 元信息（分类 · 日期） ---------- */
.qnh-meta {
  font-size: 14px;
  line-height: 1.8;
  color: #666;
  margin: 0 0 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: var(--qnh-align, center);
  gap: 0 8px;
}

.qnh-meta a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.qnh-meta a:hover {
  color: #1f6feb;
}

.qnh-meta-sep {
  color: #bbb;
}

/* ---------- 标题 ---------- */
.qnh-title {
  font-size: 52px;
  font-weight: 800;
  color: #111;
  line-height: 1.25;
  margin: 0 0 20px;
  /* 不含空格的长串（英文型号名之类）在窄屏必须能断开，
     否则会把容器顶宽、右侧溢出屏幕。 */
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* ---------- 摘要 ---------- */
.qnh-desc {
  font-size: 16px;
  line-height: 1.9;
  color: #666;
  margin: 0;
  max-width: 720px;
  overflow-wrap: anywhere;
}

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

@media (max-width: 1080px) {
  .qnh-title {
    font-size: 40px;
  }
}

@media (max-width: 767px) {
  .qnh-title {
    font-size: 30px;
  }

  .qnh-desc {
    font-size: 15px;
  }

  .qnh-crumb {
    font-size: 12px;
  }

  .qnh-meta {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .qnh-title {
    font-size: 25px;
  }
}