/* ============================================================
   Markets 卡片列表（markets.html Section 2）
   面包屑 + 10 个图文交替市场卡片 + 底部水印 + 右侧滚动导航
   （Figma markets#Frame 1707481632，卡片组 x=208 宽 1504）
   ============================================================ */

.mk-cards {
  position: relative;
  background: var(--color-white);
  padding: 138px 0 374px;   /* 顶部留白：面包屑底边→下方间距 73px */
  overflow: hidden;
}

.mk-cards__inner {
  max-width: 1504px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* --- 面包屑（设计稿固定定位，不随内容容器；同 products 页面惯例） --- */
.mk-cards__crumb {
  position: absolute;
  top: 40px;
  left: 54px;
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 2;
}

.mk-cards__crumb img {
  height: clamp(16px, 1.042vw, 1.25rem);
  width: auto;
}

.mk-cards__crumb .mk-cards__crumb-arrow {
  height: clamp(12px, 0.729vw, 0.875rem);
}

.mk-cards__crumb-link {
  font-family: var(--font-primary);
  font-size: clamp(0.875rem, 0.9375vw, 1.125rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.36px;
  color: var(--color-primary);
  text-decoration: none;
  position: relative;
  transition: color var(--duration-base) var(--ease-standard),
              opacity var(--duration-base) var(--ease-standard);
}

.mk-cards__crumb-link::before {
  content: "";
  position: absolute;
  inset: -14px;
}

.mk-cards__crumb-link:hover {
  color: var(--color-primary-dark);
}

.mk-cards__crumb-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- 卡片列表 --- */
.mk-cards__list {
  display: flex;
  flex-direction: column;
}

.mk-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 150px; /* Figma 卡片间距 150px */

  scroll-margin-top: 100px; /* 圆点导航/锚点跳转时上方留白 */}

.mk-card:last-child {
  margin-bottom: 0;
}

/* 左图右文：媒体列前置 */
.mk-card--media-left .mk-card__media {
  order: -1;
}

/* 文本列（Figma 752x445 文字区：标题顶部对齐，描述底部对齐） */
.mk-card__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 445px;
  padding: 0 80px 20px;
}

.mk-card__title {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: clamp(2rem, 0.85vw + 1.8rem, 3.3125rem);
  line-height: 1.15;
  letter-spacing: -0.96px; /* -0.02em */
  color: var(--color-primary);
  margin: 0;
}

.mk-card__desc {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(1rem, 0.32vw + 0.92rem, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.64px; /* -0.02em */
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 600px;
}

/* 媒体列（Figma 752x445 图区，圆角 8） */
.mk-card__media {
  aspect-ratio: 752 / 445;
  overflow: hidden;
  border-radius: var(--radius-md);
}

/* 图片外链（链接到 markets-detail）：<a> 撑满媒体块，img 的 height:100% 才有确定基准，
   整张图片可点击；不影响 hover 放大 / 视差（选择器均为后代匹配） */
.mk-card__media a {
  display: block;
  width: 100%;
  height: 100%;
}

/* 图片右下角 45° 斜切（Figma #579:17713 路径：水平 34.8/752=4.63%，垂直 34.8/445=7.82%）
   缩放用独立 scale 属性：transition 仅作用于 scale；
   视差 JS 逐帧写入的是独立 translate 属性（见 markets.js），互不冲突 */
.mk-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  clip-path: polygon(0 0, 100% 0, 100% 92.18%, 95.37% 100%, 0 100%);
  /* 缩放原点固定在右下角：hover 放大时右下斜角不位移，
     不会被容器 overflow:hidden 的直角边裁掉 */
  transform-origin: right bottom;
  scale: 1;
  transition: scale var(--duration-base) var(--ease-standard);
}

/* 视差卡片（mk-card-2 / mk-card-7，共 2 个区块）：
   图片常驻 6% 放大，为 JS 视差平移（约 ±3% 图高）留出血量 */
.mk-card--parallax .mk-card__media img {
  scale: 1.06;
  will-change: translate, scale;
}

/* hover（PC）/ 点按 .is-active（触屏，见 markets.js）：图片缓动放大 10%，
   外容器 overflow hidden 裁切，画框尺寸不变（1.1 > 1.06，视差平移仍有出血余量） */
.mk-card:hover .mk-card__media img,
.mk-card.is-active .mk-card__media img {
  scale: 1.1;
}

/* 六边形箭头（Figma #579:17714 位于图文交界处：left=719/1504=47.8%, top=190/445=42.7%）
   卡 1 为 example（默认显示），其余卡片 hover 时才显示 */
.mk-card__hex {
  position: absolute;
  left: 47.8%;
  top: 42.7%;
  width: 66px;
  height: 66px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}

.mk-card:hover .mk-card__hex {
  opacity: 1;
  transform: translateY(0);
}

/* 触屏点按（.is-active）与 hover 等价：六边形绿色按钮同步显示 */
.mk-card.is-active .mk-card__hex {
  opacity: 1;
  transform: translateY(0);
}

/* --- 底部水印（Figma #579:17773 贴左贴底；SVG 内部已含 opacity 0.1，勿重复设置） --- */
.mk-cards__watermark {
  position: absolute;
  left: 0;
  bottom: -2px;   /* 仅 PC：下移 2px（≤1200/≤992 断点内 bottom:0 覆盖，移动端不变） */
  width: 940px;
  max-width: 100%;
  pointer-events: none;
}

/* ============================================================
   右侧滚动导航（scrollspy）
   Figma 圆点列：x=1839/1920=95.78%（right≈65px），间距 39px
   设计稿为静态快照，此处实现为固定定位 + IntersectionObserver 高亮
   ============================================================ */
.mk-sidenav {
  position: fixed;
  top: 38%;
  right: 65px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px; /* 圆点间距缩小（原 23px → 12px → 8px → 6px） */
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.mk-sidenav.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.mk-sidenav__item {
  position: relative;
  width: 209px; /* 184 标签 + 9 间距 + 16 圆点 */
  height: 35px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.mk-sidenav__pill {
  position: absolute;
  left: 0;
  top: 0;
  width: 184px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('../images/mk-label-bg.svg') no-repeat center / 184px 35px;
  color: var(--color-white);
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.32px;
  pointer-events: none;
  opacity: 0;
  transform: translateX(var(--translate-sm));
  transition: opacity var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}

.mk-sidenav__dot {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-dot); /* #EEEEEE */
  transition: background var(--duration-base) var(--ease-standard);
}

.mk-sidenav__item.is-active .mk-sidenav__pill {
  opacity: 1;
  transform: translateX(0);
}

.mk-sidenav__item.is-active .mk-sidenav__dot {
  background: url('../images/mk-dot-active.svg') no-repeat center / cover;
}

.mk-sidenav__item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ==================== 响应式 ==================== */

@media (max-width: 1680px) {
  /* 侧边导航与卡片区重叠，隐藏 */
  .mk-sidenav {
    display: none;
  }
}

@media (max-width: 1200px) {
  .mk-cards {
    padding: 104px 0 280px;   /* 顶部留白：面包屑底边→下方间距 55px */
  }

  /* 移动端面包屑：同 about / news / products 惯例 */
  .mk-cards__crumb {
    top: 24px;
    left: var(--container-padding);
  }

  .mk-card {
    margin-bottom: 100px;
  }

  .mk-card__body {
    padding: 0 48px;
    min-height: 360px;
  }

  .mk-card__title {
    font-size: clamp(1.5rem, 0.85vw + 1.27rem, 2.8125rem);
    line-height: 1.15;
    letter-spacing: -0.8px;
  }

  .mk-card__desc {
    font-size: clamp(1rem, 0.08vw + 0.98rem, 1.125rem);
    line-height: 1.5;
    letter-spacing: -0.52px;
  }

  .mk-cards__watermark {
    bottom: 0;
  }
}

@media (max-width: 992px) {
  .mk-cards {
    padding: 100px 0 220px;   /* 顶部留白：面包屑底边→下方间距 ~51px */
  }

  /* 卡片堆叠为单列：图片在上，文字在下 */
  .mk-card {
    grid-template-columns: 1fr;
    margin-bottom: 80px;
  }

  .mk-card--media-left .mk-card__media {
    order: initial;
  }

  .mk-card__media {
    aspect-ratio: 752 / 445;
  }

  .mk-card__body {
    min-height: auto;
    padding: 48px 32px;
    gap: 32px;
  }

  .mk-card__title {
    font-size: clamp(1.5rem, 0.61vw + 1.36rem, 2.4375rem);
    line-height: 1.25;
  }

  .mk-card__desc {
    font-size: clamp(1rem, 0.04vw + 0.98rem, 1.125rem);
    line-height: 1.5;
  }

  /* 卡片 1 六边形移入媒体区右上角（媒体在上、正文在下） */
  .mk-card__hex {
    left: auto;
    right: 24px;
    top: 24px;
  }

  /* 入场动效：PC 的左右方向滑入在移动端改为由下向上滑入
     （选择器加 .mk-card 提升优先级覆盖 motion.css 变体初始位移；
     in-view 终态 transform:none 由 motion.css 收尾，不受影响） */
  .mk-card [data-m-anim="fade-right-80"],
  .mk-card [data-m-anim="fade-left-80"] {
    transform: translate3d(0, 50px, 0);
  }

  .mk-cards__watermark {
    bottom: 0;
  }
}

@media (max-width: 768px) {
  .mk-cards {
    padding: 96px 0 160px;   /* 顶部留白：面包屑底边→下方间距 47px */
  }

  .mk-card {
    margin-bottom: 56px;
  }

  .mk-card__body {
    padding: 32px 24px;
    gap: 24px;
  }

  .mk-card__title {
    font-size: clamp(1.5rem, 0.81vw + 1.31rem, 2.75rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
  }

  .mk-card__desc {
    font-size: clamp(0.9375rem, 0.04vw + 0.92rem, 1rem);
    line-height: 1.5;
  }

  /* 移动端隐藏六边形（水印保留显示，同 products 的 pd-series__deco） */
  .mk-card__hex {
    display: none;
  }
}

@media (max-width: 576px) {
  .mk-card__title {
    font-size: clamp(1.625rem, 8vw, 2.25rem);
    line-height: 1.18;
  }
}

/* ==================== 无障碍降级 ==================== */
@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;
  }
}