/* =====================================================
   qing-feature-cards  —  圆图优势卡（竖版卡 + 顶部大圆形配图）
   前缀: qfc-

   与「核心优势版块」（qpav-）的分工：
   - qpav- ：以图标 / SVG 为主，圆形底衬只是衬底，不裁切内容
   - qfc-（本部件）：主体是一张裁成圆形的大配图，卡片更高
   前缀独立，样式互不影响。
   ===================================================== */

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

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

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

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

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

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

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

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

/* ---------- 卡片 ----------
   纵向 flex：圆图 → 名称 → 描述。
   align-items 管圆图和文字的横向位置，justify-content 管卡片比内容
   高时的纵向分布，两者都有控件。
   网格默认拉伸，所以同一行的卡片天然等高。 */
.qfc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  min-height: 330px;
  background: #fff;
  border-radius: 16px;
  padding: 34px 26px;
  box-sizing: border-box;
  text-decoration: none;
  transition: transform 0.28s ease, box-shadow 0.28s ease,
    border-color 0.28s ease;
}

/* ---------- 圆形配图 ----------
   高度用 aspect-ratio 锁成 1:1 而不是写 height: 同值 ——「圆形直径」
   控件支持 % 单位，若高宽各自取值，% 高度会相对父级高度算出椭圆。
   aspect-ratio 保证无论用 px 还是 %，拿到的都是正圆。

   overflow: hidden + border-radius: 50% 是把方图裁成圆形的关键，
   这也是本部件和「核心优势版块」圆形底衬的核心差别。 */
.qfc-circle {
  --qfc-mask-top: rgba(0, 108, 255, 0);
  --qfc-mask-bottom: rgba(0, 108, 255, 0.96);
  /* 控件设置的是悬停后蒙版强度；默认状态不染色。 */
  --qfc-mask-opacity: 1;
  width: 150px;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 26px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* 底色兜底，实际由「圆形底色」控件驱动（默认浅蓝到蓝的渐变）。
     透明底的 PNG / SVG 会露出这层颜色。 */
  background: linear-gradient(180deg, #eef4ff 0%, #9dc2ff 100%);
}

/* 图片上方的蓝色渐变蒙版。圆形底色在图片下方，无法对不透明图片
   产生截图中的染蓝效果，因此蒙版必须作为独立的覆盖层。 */
.qfc-circle::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    var(--qfc-mask-top) 0%,
    var(--qfc-mask-bottom) 100%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 蓝色渐变仅在卡片交互时显示，不再默认常驻。 */
.qfc-card:hover .qfc-circle::after,
.qfc-card:focus-within .qfc-circle::after {
  opacity: var(--qfc-mask-opacity);
}

.qfc-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
  /* 圆形自身也是 border-radius: 50%，图片跟着圆一起裁，
     这里补上圆角是为了 Safari 下 transform 放大时不露直角。 */
  border-radius: 50%;
  transition: transform 0.45s ease;
}

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

/* ---------- 文案 ---------- */
.qfc-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: #111;
  margin: 0 0 12px;
}

.qfc-desc {
  font-size: 14px;
  line-height: 1.8;
  color: #666;
  margin: 0;
}

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

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

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

  .qfc-name {
    font-size: 17px;
  }

  .qfc-desc {
    font-size: 13px;
  }
}