/* ============================================================
   Product-Detail Featured Markets（product-detail.html Section 3）
   Figma Frame 579:16362（1920x840，白底）
   蓝色底形 + 白色装饰带 + 标题/按钮 + 4 张重叠市场卡
   等比缩放：min(vw, px) + 百分比定位
   ============================================================ */

.pd2-markets {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 840;
  background: var(--color-white);
  overflow: hidden;
}

/* 蓝色底形（Figma 0,26, 1920x651）+ 白色装饰带（0,-37, 2242x714） */
.pd2-markets__blue {
  position: absolute;
  left: 0;
  top: 3.1%;                          /* 26/840 */
  width: 100%;
  aspect-ratio: 1920 / 651;
  background: var(--color-primary);
  border-radius: var(--radius-md);
}

.pd2-markets__white {
  position: absolute;
  left: 0;
  top: -4.4%;                         /* -37/840 */
  width: 116.77%;                     /* 2242/1920 */
  aspect-ratio: 2242 / 714;
  background: var(--color-white);
  /* 梯形白色层（Figma 579:16384：右下角斜切 1818.47/2242=81.108%，
     露出底部蓝色，形成第 4 卡右侧的蓝色点缀块） */
  clip-path: polygon(0 0, 100% 0, 81.108% 100%, 0 100%);
  pointer-events: none;
}

.pd2-markets__title {
  position: absolute;
  left: 10.83%;                       /* 208/1920 */
  top: 18.33%;                        /* 154/840 */
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 56px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  z-index: 2;
}

/* Learn More 六角胶囊按钮（同 index Well-T in Action 的 news__learn：SVG 描边胶囊，
   hover 蓝底白字、active 缩放） */
.pd2-markets__btn {
  position: absolute;
  left: 81.46%;                       /* 1564/1920 */
  top: 21.19%;                        /* 178/840 */
  width: clamp(120px, 9.479vw, 182px);
  aspect-ratio: 182 / 58;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 2;
}

.pd2-markets__btn-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pd2-markets__btn-shape path {
  transition: fill var(--duration-base) var(--ease-standard);
}

.pd2-markets__btn span {
  position: relative;
  z-index: 1;
  font-family: var(--font-primary);
  font-size: clamp(0.8125rem, 0.9375vw, 1.125rem);  /* 同 index，移动端下限 13px */
  font-weight: 400;
  color: var(--color-primary);
  white-space: nowrap;
  transition: color var(--duration-base) var(--ease-standard);
}

.pd2-markets__btn:hover .pd2-markets__btn-shape path {
  fill: var(--color-primary);
}

.pd2-markets__btn:hover span {
  color: var(--color-white);
}

/* 入场完成后收窄 motion.css 的 0.7s 过渡，恢复 index 的按压回弹手感 */
.pd2-markets__btn.in-view {
  transition: transform var(--duration-micro) var(--ease-emphasized);
}

.pd2-markets__btn.in-view:active {
  transform: scale(0.96);
}

/* --- 4 张市场卡（Figma 组 -66,304, 2052x373，卡宽 663，间距 463 重叠排布） --- */
.pd2-markets__cards {
  position: absolute;
  left: -3.44%;                       /* -66/1920 */
  top: 36.19%;                        /* 304/840 */
  width: 106.88%;                     /* 2052/1920 */
  aspect-ratio: 2052 / 373;
  z-index: 2;
}

.pd2-markets__card {
  position: absolute;
  width: 32.31%;                      /* 663/2052 */
  aspect-ratio: 663 / 373;
  /* 梯形形状（Figma Rectangle 39924 精确路径，随卡片等比缩放） */
  clip-path: url(#pd2-market-clip);
  display: block;
  text-decoration: none;
}

.pd2-markets__card > img:first-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 卡片自身背景：设计稿 var(--color-text)（图片未加载时兜底） */
.pd2-markets__card {
  background: var(--color-text);
}

/* hover 内容（渐变遮罩 + 六边形 + 标签）：默认隐藏，hover 淡入（同设计稿第 2 卡） */
.pd2-markets__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(25, 118, 172, 0) 0%, rgba(2, 72, 150, 0.75) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.pd2-markets__hex {
  position: absolute;
  left: 45.1%;                        /* 299/663 */
  top: 41.29%;                        /* 154/373 */
  width: 9.95%;                       /* 66/663 */
  aspect-ratio: 1 / 1;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.pd2-markets__label {
  position: absolute;
  left: 24.74%;                       /* 164/663 */
  top: 70%;                           /* 284/373 → 上移：多行文字不贴下边 */
  max-width: 44%;                     /* 限定宽度：长文字在卡内换行不溢出，且不贴右缘 */
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: min(1.667vw, 2rem);      /* 32/1920 */
  color: var(--color-white);
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard);
}

/* PC 端：hover 文字右移到卡片中线左侧约 6.6% 处（方案 C —— 贴中线但保留一丝左偏的设计感）。
   基准：1920 下 label.left 由 164 右移 60px 至 224（224/663 = 33.78%），
   配合 translateX(-50%) 使文字盒中心稳定落在 33.78% - 半盒宽。
   目标中心位 = 43.4%（= 50% - 6.6%），即以卡片中线为参照固定左偏 6.6% 卡宽，
   相比"按 1920 算 60px 绝对值"，此写法在任意视口都不漂移。
   ⚠️ 断点取 1201：本文件自带 `@media (max-width:1200px)` 移动端块在源码中更靠后，
   用 min-width:1200 会在 1200 档被压掉；且移动端该标签已有 left:0/right:0/width:100%/text-align:center
   的居中规则，本块仅 PC 生效，移动端结构上不受影响。
   ⚠️ 必须放宽 max-width：translateX(-50%) 下若文字换行，盒宽变化会让居中出现半行偏移。 */
@media (min-width: 1201px) {
  .pd2-markets__label {
    left: 43.4%;
    transform: translateX(-50%);
    max-width: 44%;
    white-space: nowrap;
  }
}

.pd2-markets__card:hover .pd2-markets__overlay,
.pd2-markets__card:hover .pd2-markets__hex,
.pd2-markets__card:hover .pd2-markets__label {
  opacity: 1;
}

/* ==================== 响应式（1200 以下移动端布局） ==================== */
@media (max-width: 1200px) {
  .pd2-markets {
    aspect-ratio: auto;
    padding: 80px 0 64px;
  }

  .pd2-markets__blue,
  .pd2-markets__white {
    position: static;
    display: none;
  }

  /* 标题+按钮上下堆叠、整体左右居中（移动端） */
  .pd2-markets__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    max-width: var(--container-content);
    margin: 0 auto 56px;
    padding: 0 var(--container-padding);
    box-sizing: border-box;
    text-align: center;
  }

  .pd2-markets__title {
    position: static;
    font-size: clamp(1.5rem, 0.65vw + 1.35rem, 2.5rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin-bottom: 0;
  }

  /* 按钮移动端尺寸同 index（clamp 下限 120x44）。
     relative（非 static）：内部 SVG 胶囊是 absolute，static 会让其定位基准
     穿透到 section，胶囊错乱铺满整块——index 基础即 relative */
  .pd2-markets__btn {
    position: relative;
    /* 重置基础 absolute 的 left/top：relative 下残留偏移会把按钮推出可视区 */
    left: auto;
    top: auto;
    width: 120px;
    height: 44px;
    aspect-ratio: auto;
  }

  /* 响应式：4 卡改为圆角长方形、单列竖向罗列、完全对齐；
     遮罩 + 文字常显，无 hover 箭头 */
  .pd2-markets__cards {
    position: static;
    width: 100%;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 0 var(--container-padding);
  }

  .pd2-markets__card {
    position: relative;
    left: auto !important;        /* 覆盖桌面内联 left:X%（绝对定位残留） */
    top: auto !important;
    width: 100% !important;
    aspect-ratio: 663 / 373;
    clip-path: none;              /* 梯形 → 圆角长方形 */
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  /* 移动端：遮罩 + 文字常显（等同桌面 hover 态），去掉六角箭头 */
  .pd2-markets__overlay,
  .pd2-markets__label {
    opacity: 1;
  }

  .pd2-markets__hex {
    display: none;
  }

  .pd2-markets__card.is-active .pd2-markets__overlay,
  .pd2-markets__card.is-active .pd2-markets__label {
    opacity: 1;
  }

  .pd2-markets__label {
    left: 0;
    right: 0;
    top: auto;
    bottom: 8%;
    width: 100%;
    max-width: none;                  /* 移动端全宽居中，可在卡内换行 */
    text-align: center;
  }
}

@media (max-width: 768px) {
  .pd2-markets {
    padding: 56px 0 48px;
  }

  .pd2-markets__title {
    font-size: clamp(1.5rem, 0.81vw + 1.31rem, 2.75rem);
    line-height: 1.18;
  }

  .pd2-markets__cards {
    gap: 16px;
  }

  .pd2-markets__title {
    font-size: clamp(1.625rem, 8vw, 2.25rem);
    line-height: 1.18;
  }

  .pd2-markets__label {
    font-size: clamp(1rem, 0.32vw + 0.92rem, 1.5rem);
  }
}

/* ==================== 无障碍降级 ==================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}