/* =====================================================
   qing-contact-info  —  联系方式版块（左地图 + 右图标信息列表）
   前缀: qci-
   对应源码 .contact-main / .contact-main-grid / .contact-info-list
   ===================================================== */

.qci-wrap {
  background: #fff;
  padding: 72px 0 56px;
}

/* ---------- 标题、地图与联系信息进入视口动画 ---------- */
@keyframes qci-enter-up { from { opacity: 0; transform: translate3d(0, 30px, 0); } to { opacity: 1; transform: none; } }
@keyframes qci-enter-left { from { opacity: 0; transform: translate3d(-48px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes qci-enter-right { from { opacity: 0; transform: translate3d(48px, 0, 0); } to { opacity: 1; transform: none; } }

.qing-motion-js .qci-wrap:not(.is-motion-visible) .qci-title,
.qing-motion-js .qci-wrap:not(.is-motion-visible) .qci-map,
.qing-motion-js .qci-wrap:not(.is-motion-visible) .qci-info { opacity: 0; }
.qing-motion-js .qci-wrap:not(.is-motion-visible) .qci-title { transform: translate3d(0, 30px, 0); }
.qing-motion-js .qci-wrap:not(.is-motion-visible) .qci-map { transform: translate3d(-48px, 0, 0); }
.qing-motion-js .qci-wrap:not(.is-motion-visible) .qci-info { transform: translate3d(48px, 0, 0); }
.qci-wrap.is-motion-visible .qci-title { animation: qci-enter-up 1.2s cubic-bezier(.22,1,.36,1) 100ms backwards; }
.qci-wrap.is-motion-visible .qci-map { animation: qci-enter-left 1.35s cubic-bezier(.22,1,.36,1) 320ms backwards; }
.qci-wrap.is-motion-visible .qci-info { animation: qci-enter-right 1.35s cubic-bezier(.22,1,.36,1) 600ms backwards; }

@media (prefers-reduced-motion: reduce) {
  .qing-motion-js .qci-wrap .qci-title,
  .qing-motion-js .qci-wrap .qci-map,
  .qing-motion-js .qci-wrap .qci-info { opacity: 1; transform: none; animation: none; }
}

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

/* ---------- 版块标题 ---------- */
.qci-title {
  font-size: 26px;
  font-weight: 800;
  color: #111;
  line-height: 1.35;
  margin: 0 0 30px;
}

/* ---------- 两列栅格 ---------- */
.qci-grid {
  display: flex;
  gap: 56px;
  align-items: flex-start;
}

/* ---------- 地图区 ---------- */
.qci-map {
  flex: 0 0 42%;
  max-width: 42%;
  min-height: 260px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background: #eaf1e6;
}

.qci-map iframe,
.qci-map img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  border: 0;
  display: block;
}

/* 无地图占位 */
.qci-map--empty {
  border: 1px dashed #b8b8b8;
  background: repeating-linear-gradient(
    -45deg,
    #e6ece2,
    #e6ece2 10px,
    #eef3ea 10px,
    #eef3ea 20px
  );
}

/* ---------- 地图角标链接 ---------- */
.qci-map-link {
  --qci-link-offset: 10px;
  position: absolute;
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  color: #1f6feb;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.qci-map-link:hover {
  background: #fff;
}

/* 角标四角定位（边缘距离由 --qci-link-offset 控件驱动） */
.qci-map-link--right-bottom {
  right: var(--qci-link-offset);
  bottom: var(--qci-link-offset);
}

.qci-map-link--left-bottom {
  left: var(--qci-link-offset);
  bottom: var(--qci-link-offset);
}

.qci-map-link--right-top {
  right: var(--qci-link-offset);
  top: var(--qci-link-offset);
}

.qci-map-link--left-top {
  left: var(--qci-link-offset);
  top: var(--qci-link-offset);
}

/* ---------- 信息区 ---------- */
.qci-info {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 8px;
}

.qci-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.qci-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  font-size: 16px;
  line-height: 1.6;
  color: #444;
}

/* ---------- 行内图标 ----------
   字号驱动尺寸：内置 SVG 与 Elementor 图标库（svg / 图标字体）
   统一按 .qci-icon 的 font-size 缩放，便于用控件调节。 */
.qci-icon {
  flex: 0 0 auto;
  color: #111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  margin-top: 2px;
}

.qci-icon svg {
  width: 1em;
  height: 1em;
  display: block;
}

.qci-icon i {
  font-size: inherit;
  line-height: 1;
}

.qci-text {
  color: #444;
  min-width: 0;
}

/* ---------- 多行（地址）行 ---------- */
.qci-addr-line {
  display: block;
}

.qci-addr-line + .qci-addr-line {
  margin-top: 8px;
}

.qci-addr-line b {
  color: #222;
  font-weight: 700;
}

/* =====================================================
   响应式
   说明：版块内边距、内容区左右内边距、两列间距、地图宽度与
   最小高度、行间距、图标间距、地址行间距等，均由 Elementor
   响应式控件按断点输出内联 CSS；同一属性不在此重复声明，
   否则桌面默认值会压掉媒体查询。
   此处仅保留没有控件默认值的属性（堆叠方向 / 字号）。
   ===================================================== */

@media (max-width: 860px) {
  .qci-grid {
    flex-direction: column;
  }

  /* 堆叠后地图按宽度铺满。父级 align-items:flex-start 会阻止交叉轴拉伸，
     故必须显式给 width；该属性无对应控件，不存在覆盖冲突。 */
  .qci-map {
    width: 100%;
  }

  .qci-title {
    font-size: 22px;
  }

  .qci-row {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .qci-row {
    font-size: 14px;
  }
}