/* =====================================================
   qing-scene-tiles  —  场景图卡（等宽竖版圆角卡，文字压在图上）
   前缀: qst-

   三个场景类部件的分工：
   - qpsc-（适用场景版块）：等宽卡片，文字在图片「下方」
   - qsm- （场景拼图版块）：大小不等的拼图，固定行高
   - qst- （本部件）      ：等宽竖版卡，高度由宽高比决定，文字压图上
   前缀独立，样式互不影响。
   ===================================================== */

.qst-wrap {
  background: #f2f6fd;
  padding: 72px 0;
}

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

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

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

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

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

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

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

/* ---------- 卡片 ----------
   高度由 aspect-ratio 算出，所以所有卡片自动等高，不需要固定行高。
   这是本部件和「场景拼图」的核心差别。

   isolation: isolate 是给色调层用的：mix-blend-mode 默认会和整个
   页面堆叠上下文混合，加了它之后混合范围被限制在卡片内部，不会把
   版块底色也一起染上。 */
.qst-card {
  position: relative;
  aspect-ratio: 19 / 21;
  overflow: hidden;
  border-radius: 10px;
  display: block;
  text-decoration: none;
  background: #dfe7f5;
  isolation: isolate;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 悬停蓝色渐变层：默认完全透明，交互时才显示。 */
.qst-card:not(.qst-card--empty)::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(0, 108, 255, 0.04) 0%,
    rgba(0, 87, 230, 0.82) 100%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.qst-card:not(.qst-card--empty):hover::after,
.qst-card:not(.qst-card--empty):focus-within::after {
  opacity: 1;
}

/* ---------- 图片 ---------- */
.qst-media {
  position: absolute;
  inset: 0;
  display: block;
}

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

/* ---------- 整卡色调层 ----------
   颜色和混合模式由控件驱动；没设颜色时 PHP 不输出这个元素。
   用来把不同来源、色系不一的图统一成一个调子。 */
.qst-tint {
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ---------- 渐变衬底 ----------
   夹在图片（含色调层）和文字之间，从底部往上由深到透明。
   颜色与高度由控件驱动，这里是兜底值。 */
.qst-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60%;
  background-image: linear-gradient(
    to top,
    rgba(13, 71, 161, 0.75) 0%,
    transparent 100%
  );
  pointer-events: none;
}

/* ---------- 文字 ----------
   铺满整卡再用 flex 定位，四种位置只需切换 align-items /
   justify-content，不必换定位方式。 */
.qst-label {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  padding: 20px 16px 22px;
  box-sizing: border-box;
  pointer-events: none;
}

.qst-name {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
}

.qst-card--bottom-center .qst-label {
  align-items: flex-end;
  justify-content: center;
  text-align: center;
}

.qst-card--bottom-left .qst-label {
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;
}

.qst-card--center .qst-label {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.qst-card--top-center .qst-label {
  align-items: flex-start;
  justify-content: center;
  text-align: center;
}

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

/* 无图时文字改深色，否则白字落在浅色斜纹上看不见 */
.qst-card--empty .qst-name {
  color: #555;
}

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

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

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

  .qst-name {
    font-size: 15px;
  }
}