/* kenda_market 市场分布组件样式 */
/* 尺寸取自原型图实测（原型容器 1160px -> 真实容器 1440px，缩放系数 1.2414） */
.kenda_market {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
  background: #F8FAFC;
  font-family: var(--font-family);
}

/* 内容容器：地图以此为定位参照，便于用百分比表达相对容器的偏移 */
.kenda_market-inner {
  position: relative;
}

/* ---------- 右下角地图底图 ---------- */
/* 宽度 83% ≈ 1197px，右偏移 -9.3% ≈ -134px（超出容器右缘），两者均为百分比，随容器等比缩放 */
.kenda_market-map {
  position: absolute;
  top: 18px;
  right: -9.3%;
  z-index: 3;
  width: 83%;
  aspect-ratio: 367 / 195;
}

.kenda_market-map-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- 地图标记点 ---------- */
/* 坐标用 CSS 变量定义，桌面端基于原型图实测值（相对地图图片 1197x636 的百分比） */
.kenda_market-marker[data-marker="alaska"] { left: 8.32%; top: 22.90%; }
.kenda_market-marker[data-marker="nebraska"] { left: 16.10%; top: 38.31%; }
.kenda_market-marker[data-marker="georgia"] { left: 25.66%; top: 31.75%; }
.kenda_market-marker[data-marker="florida"] { left: 21.92%; top: 43.55%; }
.kenda_market-marker[data-marker="texas"] { left: 49.97%; top: 36.89%; }
.kenda_market-marker[data-marker="ethiopia"] { left: 54.78%; top: 53.44%; }
.kenda_market-marker[data-marker="sydney"] { left: 78.94%; top: 68.76%; }

/* left/top 由上述规则或 liquid 内联输出，此处只负责把圆点中心对准该坐标 */
.kenda_market-marker {
  position: absolute;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.kenda_market-dot {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--text-color);
}

/* 地图点位闪烁 */
@keyframes blink {
  0%,100% { opacity: 1;transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5);}
}


.kenda_market-marker:hover .kenda_market-dot {
  animation: blink 1s infinite;
}


/* 城市名称 */
.kenda_market-city {
  position: absolute;
  font-family: var(--font-family);
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
  color: #000;
}

/* 圆点下方居中 */
.kenda_market-city--bottom {
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
}

/* 圆点上方居中 */
.kenda_market-city--top {
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
}

/* 圆点右下方 */
.kenda_market-city--right {
  top: calc(100% + 6px);
  left: calc(100% + 32px);
}

/* ---------- 左侧文案 ---------- */
.kenda_market-content {
  width: fit-content;
  position: relative;
  z-index: 1;
}

/* 大标题用 Inter 斜体 900（public.css 中注册的 --second-font-family） */
.kenda_market-title {
  width: fit-content;
  margin-bottom: 20px;
  font-family: var(--second-font-family);
  color: var(--text-color);
  font-size: 64px;
  font-style: italic;
  font-weight: 900;
  line-height: normal;
  text-transform: capitalize;
}

.kenda_market-subtitle {
  width: fit-content;
  /* 大标题-副标题 */
  font-family: var(--font-family);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px; /* 160% */
  text-transform: capitalize;
  color: #475569;
}

/* ---------- 数字块 ---------- */
/* margin-top 较大是为了给右侧地图让出纵向空间，与地图位置绑定 */
.kenda_market-stat {
  width: fit-content;
  margin-top: 83px;
}

.kenda_market-figure {
  display: flex;
  align-items: baseline;
  gap: 15px;
  color: var(--text-color);
}

.kenda_market-num {
  font-size: 98px;
  font-weight: 600;
  color: var(--color-second);
}

/* 重置 sup 默认上标偏移，改为与数字顶部对齐 */
.kenda_market-suffix {
  position: static;
  top: auto;
  align-self: flex-start;
  margin-top: 6px;
  font-size: 98px;
  font-weight: 500;
  line-height: 1;
  vertical-align: baseline;
  color: #000;
}

.kenda_market-unit {
  color: var(--text-color);
  font-size: 98px;
  font-weight: 600;
  text-transform: capitalize;
}

.kenda_market-stat-desc {
  margin-top: 11px;
  font-size: 32px;
  font-weight: 700;
  color: var(--text-color);
  text-transform: capitalize;
}

/* ---------- 底部品牌 logo 轮播 ---------- */
/* 注意：.swiper 自带 overflow:hidden，裁剪线在 padding box 外边缘，
   给本元素加 padding 并不能为投影留出空间，投影空间必须由 slide 内部的留白提供 */
.kenda_market-logos {
  position: relative;
  margin-top: 137px;
}

.kenda_market-logos.swiper.wow.fadeInUp.swiper-initialized.swiper-horizontal.swiper-pointer-events {
  padding: 0 10px;
  z-index: 4;

}


/* 纵向留白让圆的上下边缘离开裁剪线，投影得以完整显示；
   padding 只加在纵向，不影响 slide 宽度，故圆直径不变 */
.kenda_market-logos .swiper-slide {
  height: auto;
  padding: 14px 0 22px;
}

/* 圆直径 = slide 宽度（由 index.js 的 slidesPerView / spaceBetween 决定，桌面端 ≈ 170px） */
.kenda_market-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #FFF;
  box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.15);
}

.kenda_market-logo-img {
  max-width: 80%;
  max-height: 50%;
  object-fit: contain;
}

/* ---------- 响应式 ---------- */
/* 1200px：pad 端微调地图与数字块纵向节奏 */
@media screen and (max-width: 1200px) {
  .kenda_market-stat {
    margin-top: 100px;
  }

  .kenda_market-logos {
    margin-top: 86px;
  }
}

/* 992px：移动端/pad 改为纵向流式布局，地图插入文案与 logo 中间；桌面端的绝对定位背景层改为普通流式块 */
@media screen and (max-width: 992px) {
  .kenda_market {
    padding: 80px 0;
  }

  .kenda_market-inner {
    display: flex;
    flex-direction: column;
  }

  /* 地图改为普通块，不再绝对定位；但保持 relative 作为标记点的定位容器 */
  .kenda_market-map {
    position: relative;
    order: 2;
    width: 100%;
    max-width: 680px;
    margin: 60px auto 0;
  }

  /* 文案块排第一 */
  .kenda_market-content {
    order: 1;
  }

  .kenda_market-stat {
    margin-top: 80px;
  }

  /* 移动端地图完整居中显示，左侧标记点（x<30%）需右移避免贴边 */
  .kenda_market-marker[data-marker="alaska"] { left: 11.32%; }
  .kenda_market-marker[data-marker="nebraska"] { left: 19.10%; }
  .kenda_market-marker[data-marker="georgia"] { left: 28.66%; }
  .kenda_market-marker[data-marker="florida"] { left: 24.92%; }

  /* 城市名称缩小，避免重叠 */
  .kenda_market-city {
    font-size: 16px;
  }

  /* logo 排最后，宽度改为自适应内容（移除固定容器约束） */
  .kenda_market-logos {
    order: 3;
    width: 100%;
    max-width: 100%;
    margin-top: 66px;
  }
}

/* 768px：标记点与城市名进一步缩小适应更窄屏幕；超大字号在此宽度会溢出，单独下调 */
@media screen and (max-width: 768px) {
  .kenda_market {
    padding: 60px 0;
  }

  .kenda_market-title {
    margin-bottom: 18px;
    font-size: 44px;
  }

  .kenda_market-subtitle {
    font-size: 16px;
  }

  .kenda_market-marker {
    width: 10px;
    height: 10px;
  }

  .kenda_market-city {
    font-size: 14px;
  }

  /* 城市名与圆点的间距也按比例缩小 */
  .kenda_market-city--bottom {
    top: calc(100% + 8px);
  }

  .kenda_market-city--top {
    bottom: calc(100% + 5px);
  }

  .kenda_market-city--right {
    top: calc(100% + 5px);
    left: calc(100% + 24px);
  }

  .kenda_market-map {
    margin-top: 50px;
  }

  .kenda_market-stat {
    margin-top: 70px;
  }

  .kenda_market-figure {
    gap: 14px;
  }

  .kenda_market-num {
    font-size: 72px;
  }

  .kenda_market-suffix {
    font-size: 24px;
  }

  .kenda_market-unit {
    font-size: 42px;
  }

  .kenda_market-stat-desc {
    font-size: 26px;
  }

  .kenda_market-logos {
    margin-top: 56px;
  }
}

/* 576px：超大字号继续下调防溢出，进一步收紧移动端间距；标记点与城市名最小尺寸 */
@media screen and (max-width: 576px) {
  .kenda_market {
    padding: 50px 0;
  }

  .kenda_market-title {
    margin-bottom: 14px;
    font-size: 34px;
  }

  .kenda_market-subtitle {
    font-size: 15px;
  }

  .kenda_market-marker {
    width: 8px;
    height: 8px;
  }

  /* 小屏地图占满宽度，左侧标记点继续右移 1%，避免触边 */
  .kenda_market-marker[data-marker="alaska"] { left: 12.32%; }
  .kenda_market-marker[data-marker="nebraska"] { left: 20.10%; }
  .kenda_market-marker[data-marker="georgia"] { left: 29.66%; }
  .kenda_market-marker[data-marker="florida"] { left: 25.92%; }

  .kenda_market-city {
    font-size: 7px;
  }

  /* 进一步缩小城市名与圆点间距 */
  .kenda_market-city--bottom {
    top: calc(100% + 6px);
  }

  .kenda_market-city--top {
    bottom: calc(100% + 4px);
  }

  .kenda_market-city--right {
    top: calc(100% + 4px);
    left: calc(100% + 18px);
  }

  .kenda_market-map {
    max-width: 100%;
    margin-top: 40px;
  }

  .kenda_market-stat {
    margin-top: 60px;
  }

  .kenda_market-num {
    font-size: 56px;
  }

  .kenda_market-unit {
    font-size: 32px;
  }

  .kenda_market-stat-desc {
    margin-top: 8px;
    font-size: 20px;
  }

  .kenda_market-logos {
    margin-top: 46px;
  }
}