/**
 * Qing Elementor Widget — 轻蜓光电 产品线版块 (prodlines)
 *
 * Ported 1:1 from 轻蜓光电官网/css/style.css (版块2｜两大产品线, ~line 611-810).
 *
 * NAMING: every source class is prefixed with `qpl-` because the theme's own
 * style.css already owns generic names such as `.section-title`. The prefix
 * prevents collisions while keeping a 1:1 node/structure mapping.
 *
 * RESET: the source relies on a global `* { margin: 0 }` reset. Re-declaring
 * that globally would leak into the rest of the page, so the reset is scoped
 * to the widget root `.qpl` instead.
 *
 * RESPONSIVE: the source uses 1080px / 860px breakpoints. Elementor cannot
 * express arbitrary breakpoints through responsive controls, so those queries
 * are kept here in CSS. Controls that vary per breakpoint in the source ship
 * WITHOUT defaults so they do not emit inline CSS that would override these
 * media queries.
 *
 * @package Qing
 */

/* ===== 作用域变量 ===== */
.qpl {
  --qpl-accent: #1f6feb;
  --qpl-accent-dark: #0b3d91;
  --qpl-accent-light: #4a90ff;
  --qpl-btn-gradient: linear-gradient(
    135deg,
    #0b3d91 0%,
    #1f6feb 55%,
    #4a90ff 100%
  );
  --qpl-overlay-top: rgba(5, 10, 22, 0.08);
  --qpl-overlay-mid: rgba(5, 10, 22, 0.45);
  --qpl-overlay-bottom: rgba(5, 10, 22, 0.85);

  /* 文字区渐变：上透明 → 下纯黑，由「卡片内容区」控件覆盖。 */
  --qpl-body-grad-top: rgba(0, 0, 0, 0);
  --qpl-body-grad-mid: rgba(0, 0, 0, 0.55);
  --qpl-body-grad-bottom: rgba(0, 0, 0, 0.96);
  --qpl-body-grad-mid-stop: 55%;
}

/* ===== 作用域重置（替代源码全局 * reset） ===== */
.qpl,
.qpl *,
.qpl *::before,
.qpl *::after {
  box-sizing: border-box;
}

.qpl p,
.qpl h2,
.qpl h3 {
  margin: 0;
  padding: 0;
}

.qpl a {
  text-decoration: none;
}

.qpl img {
  max-width: 100%;
  border: 0;
}

/* ===== 版块容器 ===== */
.qpl-prodlines {
  background: #f5f5f5;
  padding: 76px 0 84px;
}

.qpl-prodlines-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 50px;
}

/* ===== 版块头部 ===== */
.qpl-prodlines-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}

.qpl-section-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #999;
  margin-bottom: 16px;
  text-align: center;
}

.qpl-section-title {
  font-size: 40px;
  font-weight: 800;
  color: #111;
  line-height: 1.2;
  text-align: center;
}

/* 标题下方居中下划线 */
.qpl-section-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin: 18px auto 0;
  background: var(--qpl-btn-gradient);
  border-radius: 2px;
}

/* 左对齐标题（含下划线左对齐） */
.qpl-section-title.qpl-is-left {
  text-align: left;
}

.qpl-section-title.qpl-is-left::after {
  margin-left: 0;
  margin-right: auto;
}

/* 隐藏下划线（由控件开关切换） */
.qpl-section-title.qpl-no-rule::after {
  display: none;
}

/* ===== 卡片网格 ===== */
.qpl-prodlines-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

/* 产品线卡片 — 图片铺满 + 底部叠加文字 */
.qpl-pl-card {
  display: block;
  position: relative;
  overflow: hidden;
  background: #000;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.qpl-pl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.qpl-pl-media {
  position: relative;
  aspect-ratio: 16 / 9;
  /* 自定义高度。默认 auto —— 此时 aspect-ratio 生效，保持 16/9。
     「卡片图片区」里设了高度就写成具体值，aspect-ratio 自动让位，
     图片靠 object-fit: cover 铺满新高度。 */
  height: var(--qpl-media-h, auto);
  overflow: hidden;
}

.qpl-pl-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease, opacity 0.4s ease;
  opacity: 0.82;
}

.qpl-pl-card:hover .qpl-pl-media img {
  transform: scale(1.05);
  opacity: 0.68;
}

/* 底部深色渐变遮罩 */
.qpl-pl-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--qpl-overlay-bottom) 0%,
    var(--qpl-overlay-mid) 42%,
    var(--qpl-overlay-top) 100%
  );
  pointer-events: none;
}

/* 文字叠加在图片底部 */
.qpl-pl-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 32px 30px;
  z-index: 1;
  /* 文字背景：上透明 → 下黑的渐变。
     用 background-image 而不是 background 简写，这样「内容区背景色」
     控件设的 background-color 不会被一起清掉，两者可叠加。 */
  background-image: linear-gradient(
    to bottom,
    var(--qpl-body-grad-top) 0%,
    var(--qpl-body-grad-mid) var(--qpl-body-grad-mid-stop),
    var(--qpl-body-grad-bottom) 100%
  );
}

.qpl-pl-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.qpl-pl-desc {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 16px;
}

.qpl-pl-link {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.55);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.qpl-pl-card:hover .qpl-pl-link {
  color: #fff;
  border-color: #fff;
}

/* ===== 底部“更多”链接 ===== */
.qpl-section-more {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

.qpl-prodlines-more {
  font-size: 15px;
  color: #333;
  white-space: nowrap;
  padding-bottom: 6px;
  border-bottom: 1.5px solid #999;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.qpl-prodlines-more:hover {
  color: #000;
  border-color: #000;
}

/* ===== 版块2 响应式（源码断点，保留在 CSS 中） ===== */
/* ===== 进入动效：标题、卡片、图片及卡片文案逐层播放 ===== */
@keyframes qpl-enter-up {
  from { opacity: 0; transform: translate3d(0, 30px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes qpl-enter-media {
  from { opacity: 0; transform: scale(1.07); }
  to { opacity: 0.82; transform: scale(1); }
}

@keyframes qpl-enter-content {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.qpl-prodlines.is-motion-ready .qpl-prodlines-head,
.qpl-prodlines.is-motion-ready .qpl-pl-card,
.qpl-prodlines.is-motion-ready .qpl-pl-title,
.qpl-prodlines.is-motion-ready .qpl-pl-desc,
.qpl-prodlines.is-motion-ready .qpl-pl-link,
.qpl-prodlines.is-motion-ready .qpl-section-more {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.qpl-prodlines.is-motion-ready .qpl-pl-media img {
  opacity: 0;
  transform: scale(1.07);
  transition: opacity 0.82s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.82s cubic-bezier(0.22, 1, 0.36, 1);
}

.qpl-prodlines.is-motion-ready.is-motion-visible .qpl-prodlines-head,
.qpl-prodlines.is-motion-ready.is-motion-visible .qpl-pl-card,
.qpl-prodlines.is-motion-ready.is-motion-visible .qpl-pl-title,
.qpl-prodlines.is-motion-ready.is-motion-visible .qpl-pl-desc,
.qpl-prodlines.is-motion-ready.is-motion-visible .qpl-pl-link,
.qpl-prodlines.is-motion-ready.is-motion-visible .qpl-section-more {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.qpl-prodlines.is-motion-ready.is-motion-visible .qpl-pl-media img {
  opacity: 0.82;
  transform: scale(1);
}

.qpl-prodlines.is-motion-ready.is-motion-visible .qpl-pl-card:hover {
  transform: translateY(-4px);
}

.qpl-prodlines.is-motion-ready.is-motion-visible .qpl-pl-card:hover .qpl-pl-media img {
  opacity: 0.68;
  transform: scale(1.05);
}

.qpl-prodlines.is-motion-ready .qpl-prodlines-head { transition-delay: 0.08s; }
.qpl-prodlines.is-motion-ready .qpl-pl-card:nth-child(1) { transition-delay: 0.22s; }
.qpl-prodlines.is-motion-ready .qpl-pl-card:nth-child(2) { transition-delay: 0.38s; }
.qpl-prodlines.is-motion-ready .qpl-pl-card:nth-child(3) { transition-delay: 0.54s; }
.qpl-prodlines.is-motion-ready .qpl-pl-card:nth-child(4) { transition-delay: 0.70s; }
.qpl-prodlines.is-motion-ready .qpl-pl-card:nth-child(1) .qpl-pl-media img { transition-delay: 0.30s; }
.qpl-prodlines.is-motion-ready .qpl-pl-card:nth-child(2) .qpl-pl-media img { transition-delay: 0.46s; }
.qpl-prodlines.is-motion-ready .qpl-pl-card:nth-child(3) .qpl-pl-media img { transition-delay: 0.62s; }
.qpl-prodlines.is-motion-ready .qpl-pl-card:nth-child(4) .qpl-pl-media img { transition-delay: 0.78s; }
.qpl-prodlines.is-motion-ready .qpl-pl-title { transition-delay: 0.48s; }
.qpl-prodlines.is-motion-ready .qpl-pl-desc { transition-delay: 0.58s; }
.qpl-prodlines.is-motion-ready .qpl-pl-link { transition-delay: 0.68s; }
.qpl-prodlines.is-motion-ready .qpl-section-more { transition-delay: 0.82s; }

@media (prefers-reduced-motion: reduce) {
  .qpl-prodlines.is-motion-ready .qpl-prodlines-head,
  .qpl-prodlines.is-motion-ready .qpl-pl-card,
  .qpl-prodlines.is-motion-ready .qpl-pl-media img,
  .qpl-prodlines.is-motion-ready .qpl-pl-title,
  .qpl-prodlines.is-motion-ready .qpl-pl-desc,
  .qpl-prodlines.is-motion-ready .qpl-pl-link,
  .qpl-prodlines.is-motion-ready .qpl-section-more {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 1080px) {
  .qpl-prodlines-inner {
    padding: 0 24px;
  }
  .qpl-section-title {
    font-size: 32px;
  }
}

@media (max-width: 860px) {
  .qpl-prodlines {
    padding: 48px 0 56px;
  }
  .qpl-prodlines-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .qpl-prodlines-head {
    align-items: center;
  }
  .qpl-section-title {
    font-size: 27px;
  }
  .qpl-pl-card:hover {
    box-shadow: 6px 6px 0 var(--qpl-accent);
  }
}

/* ===== Elementor 编辑器：空重复项占位 ===== */
.elementor-editor-active .qpl-prodlines-grid:empty::before {
  content: "请在“产品线卡片”中添加至少一张卡片";
  display: block;
  padding: 40px;
  text-align: center;
  color: #999;
  font-size: 14px;
  border: 1px dashed #ccc;
}