/* =====================================================
   qing-scene-bars  —  应用场景卡（圆角图片 + 底部蓝色圆角横条标签）
   前缀: qsb-

   四个场景类部件的分工：
   - qpsc-（适用场景版块）：等宽卡片，纯文字标签在图片下方
   - qsm- （场景拼图版块）：大小不等的拼图，固定行高
   - qst- （场景图卡版块）：竖版卡，文字压在渐变蒙层上
   - qsb- （本部件）      ：实心圆角横条压在图片下沿
   前缀独立，样式互不影响。
   ===================================================== */

.qsb-wrap {
  background: #f4f7fd;
  padding: 64px 0;
}

.qsb-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 50px;
  box-sizing: border-box;
}

/* ---------- 版块标题 ----------
   两种形态由「标题对齐」控件切换：
   --center（默认）：标题居中，装饰条是下方一小段横线
   --left          ：装饰条是标题左侧的竖条

   装饰条颜色 / 粗细由控件以自定义属性传入（--qsb-bar-c、--qsb-bar-w），
   两种形态各自消费。不让控件直接输出 border-left-*：居中模式要把竖条
   整条去掉，而控件内联 CSS 的权重和加载顺序都在本文件之后，压不掉。 */
.qsb-title {
  font-size: 28px;
  font-weight: 800;
  color: #111;
  line-height: 1.3;
  margin: 0 0 56px;
}

/* 居中：横线在标题下方。
   用 ::after 而不是 border-bottom —— border 会拉满整个块宽度，
   这里要的是一小段居中短线。 */
.qsb-title--center {
  text-align: center;
  padding-bottom: 14px;
  position: relative;
}

.qsb-title--center::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: var(--qsb-bar-len, 56px);
  height: var(--qsb-bar-w, 3px);
  background-color: var(--qsb-bar-c, #1f6feb);
  border-radius: 2px;
}

/* 左对齐：竖条 */
.qsb-title--left {
  text-align: left;
  padding-left: 18px;
  border-left: var(--qsb-bar-w, 3px) solid var(--qsb-bar-c, #1f6feb);
}

/* ---------- 卡片网格 ---------- */
.qsb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}

/* ---------- 卡片 ----------
   纵向 flex：图片在上，横条在下。横条靠负 margin 上移压住图片下沿，
   所以卡片自身不能裁切（没有 overflow: hidden）。 */
.qsb-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  transition: transform 0.3s ease;
}

/* ---------- 图片 ----------
   高度由 aspect-ratio 算出，所有卡片自动等高。
   overflow: hidden 把图片裁进圆角，也为悬停放大兜住边界。 */
.qsb-media {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #e9eef6;
}

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

/* 无图占位：编辑器里能看出这里有张图 */
.qsb-media--empty {
  border: 1px dashed #b8b8b8;
  background: repeating-linear-gradient(
    -45deg,
    #dcdcdc,
    #dcdcdc 10px,
    #e4e4e4 10px,
    #e4e4e4 20px
  );
}

/* ---------- 标签横条 ----------
   实心圆角块，靠负 margin-top 上移压在图片下沿（由「横条上移」控件
   驱动，-22px 是兜底值）。

   为什么用负 margin 而不是绝对定位：负 margin 下横条仍在文档流里，
   卡片高度会自动把重叠算进去，网格行高、行间距都不用额外补偿；
   绝对定位则要给卡片留出底部空间，还得手算。

   position + z-index 保证横条画在图片之上。图片区虽然有
   overflow: hidden，但横条是它的兄弟节点，不受其裁切影响。 */
.qsb-bar {
  position: relative;
  z-index: 1;
  display: block;
  box-sizing: border-box;
  width: 88%;
  margin-top: -22px;
  padding: 12px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1657c8 0%, #2f7ce0 100%);
  box-shadow: 0 6px 16px rgba(22, 87, 200, 0.28);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  transition: background 0.3s ease;
}

/* =====================================================
   响应式
   说明：版块内边距、内容区左右内边距、每行数量、网格间距、图片
   宽高比与圆角、横条宽度/上移/内边距/圆角、标题下方间距等，均由
   Elementor 响应式控件按断点输出内联 CSS；同一属性不在此重复
   声明，否则桌面默认值会压掉媒体查询。
   此处仅保留没有控件默认值的属性（字号）。
   ===================================================== */

@media (max-width: 860px) {
  .qsb-title {
    font-size: 24px;
  }
}

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

  .qsb-bar {
    font-size: 14px;
  }
}