/* ============================================================
   Product-Detail Section 3「Featured Markets」固定场景卡（en 版）
   页面：app/web/en/product-detail.shtml（<section class="pd2-scenes" id="markets">）
   设计基准：html/well-t-demo-en/product-detail.shtml 的 pd2-markets 段
             + html/well-t-demo-en/css/pd2-markets.css
             （Figma Frame 579:16362，1920x840 白底；蓝色底形 + 白色装饰带 + 标题/按钮 + 4 张重叠场景卡）
   选择器改名：pd2-markets__* → pd2-scenes__*（本次按页面语义改名，几何与数值逐条照搬）：
     __blue / __white 蓝色底形与白色装饰带，__head / __title / __btn / __btn-shape 标题与梯形描边按钮，
     __cards / __card / __overlay / __hex / __label 重叠场景卡与 hover 态。
   与基准（4 张写死的静态卡）相比，本文件另承担三件事：
   1. 卡片数量由 CMS 场景标签（product.scenes）决定：卡宽 32.31%、步长 22.56% 固定不变；
      张数 > 4 时由 .pd2-scenes__cards--scroll 承担横向滚动（只让卡片行滚动，
      标题、按钮、蓝白底装饰不参与）；张数 = 4 时不产生任何溢出，与设计逐像素一致；
      张数 < 4 时卡片仍按基准尺寸与步长从 left 0 起排、右侧留白。
   2. 场景 code → 配图的映射表落在模板的 {% set %} 字典里：图片文件名与 code 的 slug 并非一一对应
      （如 scene-cn-refractory-materials → market-refractory.jpg），无法拼字符串；
      映射不到图的卡照常渲染，底色由 .pd2-scenes__card 自身的 background: var(--color-text) 兜底。
   3. 入场动效沿用 motion.css 的 [data-m-anim]（卡 slide-in-right、按钮 fade-up-20），
      本文件只写静态样式与 hover 态，无 @keyframes。
   ============================================================ */

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

/* 蓝色底形（Figma 0,26, 1920x651）+ 白色装饰带（0,-37, 2242x714） */
.pd2-scenes__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-scenes__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-scenes__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: clamp(1.75rem, 3.9583vw, 4.75rem);  /* en 基准为 clamp，区别于 cn 的固定 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-scenes__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-scenes__btn-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

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

.pd2-scenes__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: 600;                   /* en 基准为 600，区别于 cn 的 400 */
  color: var(--color-primary);
  white-space: nowrap;
  transition: color var(--duration-base) var(--ease-standard);
}

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

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

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

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

/* --- 场景卡行（Figma 组 -66,304, 2052x373，卡宽 663，间距 463 重叠排布） ---
   卡号的 left 与入场延迟由模板按序号生成（left = index*22.56%，--m-delay = 200 + index*200ms），
   4 张时逐字复现基准的 0/22.56/45.12/67.68% 与 200/400/600/800ms */
.pd2-scenes__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;
}

/* 张数 > 4：卡片行横向滚动。overflow 只在需要时开启，
   保证 4 张（设计态）时容器不产生滚动区域与滚动条。
   滚动条隐藏（同 application.css 的 .application__cards 做法）：本容器高度由 aspect-ratio
   精确等于卡高，经典滚动条会占掉容器内容高度、把卡片底边切掉一截；隐藏后几何与设计完全一致，
   PC 端用 shift+滚轮 / 触控板横扫拖动。 */
.pd2-scenes__cards--scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.pd2-scenes__cards--scroll::-webkit-scrollbar {
  display: none;
}

.pd2-scenes__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;
}

/* 卡面配图。基准写的是 > img:first-child；本例卡面图可能缺（场景 code 未进映射表），
   那时六边形图标会成为 first-child 而被铺满整卡，故改为排除 .pd2-scenes__hex 的 img */
.pd2-scenes__card > img:not(.pd2-scenes__hex) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

/* hover 内容（渐变遮罩 + 六边形 + 标签）：默认隐藏，hover 淡入（同设计稿第 2 卡） */
.pd2-scenes__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-scenes__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-scenes__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 标签位置：en 基准（html/well-t-demo-en/css/pd2-markets.css）没有 cn 的
   @media (min-width:1201px) 居中块，故 en 保持基准的 left:24.74% / top:70% 不动。
   ⚠️ 两语言基准在这一点上不一致（cn 是「方案 C」居中偏左 6.6%，en 是原始 164/663）——
   本次按各语言基准逐条还原，未擅自统一，差异见交付报告。 */

.pd2-scenes__card:hover .pd2-scenes__overlay,
.pd2-scenes__card:hover .pd2-scenes__hex,
.pd2-scenes__card:hover .pd2-scenes__label {
  opacity: 1;
}

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

  .pd2-scenes__blue,
  .pd2-scenes__white {
    position: static;
    display: none;
  }

  /* 标题+按钮上下堆叠、整体左右居中（移动端） */
  .pd2-scenes__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-scenes__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-scenes__btn {
    position: relative;
    /* 重置基础 absolute 的 left/top：relative 下残留偏移会把按钮推出可视区 */
    left: auto;
    top: auto;
    width: 120px;
    height: 44px;
    aspect-ratio: auto;
  }

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

  /* 移动端是竖向 flex 堆叠，横向滚动规则必须失效（否则可能多出横向滚动条） */
  .pd2-scenes__cards--scroll {
    overflow: visible;
  }

  .pd2-scenes__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-scenes__overlay,
  .pd2-scenes__label {
    opacity: 1;
  }

  .pd2-scenes__hex {
    display: none;
  }

  .pd2-scenes__card.is-active .pd2-scenes__overlay,
  .pd2-scenes__card.is-active .pd2-scenes__label {
    opacity: 1;
  }

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

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

  /* 设计源在 ≤768 写了两条 .pd2-markets__title 字号（同在一条媒体查询里，
     后者覆盖前者、前者从未生效），此处只保留生效值 */
  .pd2-scenes__title {
    font-size: clamp(1.625rem, 8vw, 2.25rem);
    line-height: 1.18;
  }

  .pd2-scenes__cards {
    gap: 16px;
  }

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

/* ==================== 无障碍降级 ====================
   tokens.css 已有全局 `*` 兜底（animation/transition-duration → 0.01ms !important），
   这里只把本文件自己声明的过渡逐条点明，与 pd2_params.css 同一做法（不再复制那个全局块）。 */
@media (prefers-reduced-motion: reduce) {
  .pd2-scenes__btn-shape path,
  .pd2-scenes__btn span,
  .pd2-scenes__btn.in-view,
  .pd2-scenes__overlay,
  .pd2-scenes__hex,
  .pd2-scenes__label {
    transition: none;
  }
}