/* ============================================================
   Markets-Detail KV / Hero（markets-detail.html Section 1）
   Figma Frame 476:19698，1920x970
   - 背景：linear-gradient(-66.48deg, #fff 0%, var(--color-soft-blue) 131.3%)
   - 面包屑固定定位（同 markets-cards 惯例，left:54px）
   - navbar 为 position:fixed（90px），KV 需 padding-top 130px 让位
   - 文本列（title 76px / 绿色斜杠 accent / 两段 desc）最宽 1066px
   - 右侧图片 550x600 绝对定位于屏幕右缘（左圆角 8px），随视口收缩
   ============================================================ */

.mkd-kv {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 970;
  overflow: hidden;
  background: linear-gradient(-66.48deg, var(--color-white) 0%, var(--color-soft-blue) 131.3%);
}

/* 1920 以上锁定 970px 高度（与 product-detail 一致） */
@media (min-width: 1920px) {
  .mkd-kv {
    height: 970px;
    aspect-ratio: auto;
  }
}

/* --- 面包屑（设计稿固定定位，不随内容容器；同 markets-cards 惯例 left:54px） --- */
.mkd-kv__crumb {
  position: absolute;
  top: 150px;
  left: 54px;
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 3;
}

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

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

.mkd-kv__crumb-link,
.mkd-kv__crumb-current {
  font-family: var(--font-primary);
  font-size: clamp(0.875rem, 0.9375vw, 1.125rem);
  font-weight: 300;
  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);
}

.mkd-kv__crumb-link::before,
.mkd-kv__crumb-current::before {
  content: "";
  position: absolute;
  inset: -14px;
}

.mkd-kv__crumb-home {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
  position: relative;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.mkd-kv__crumb-home::before {
  content: "";
  position: absolute;
  inset: -14px;
}

.mkd-kv__crumb-home:hover {
  opacity: 0.7;
}

.mkd-kv__crumb-link:hover {
  color: var(--color-primary-dark);
}

.mkd-kv__crumb-link:focus-visible,
.mkd-kv__crumb-home:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- 内容（撑满 KV 作为定位上下文） --- */
.mkd-kv__inner {
  position: absolute;
  inset: 0;
}

.mkd-kv__text {
  position: absolute;
  left: 7.14%;
  top: 50%;
  transform: translateY(-50%);
  width: 54.32%;
  display: flex;
  flex-direction: column;
  z-index: 2;
}

/* --- 文字 --- */
.mkd-kv__title {
  font-family: var(--font-primary);
  font-size: 68px;                    /* 64→68/1920，PC 固定值（同步 products KV） */
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin: 0;
}

.mkd-kv__accent {
  display: block;
  width: min(11.09vw, 213px);
  height: 5px;
  margin: min(1.5625vw, 1.875rem) 0;
  background: var(--color-secondary); /* var(--color-secondary) */
}

.mkd-kv__desc {
  font-family: var(--font-primary);
  font-size: 24px;                    /* 32→24/1920，PC 固定值（同步 products KV） */
  font-weight: 400;
  line-height: 36px;                  /* 48→36/1920（24×1.5） */
  letter-spacing: -0.02em;
  color: var(--color-text-secondary);
  max-width: 1066px;
  margin: 0;
}

.mkd-kv__desc + .mkd-kv__desc {
  margin-top: 40px;
}

/* --- 右侧图片（绝对定位于屏幕右缘；宽度随视口收缩） --- */
.mkd-kv__media {
  position: absolute;
  top: 191px;
  right: 0;
  width: clamp(320px, calc(100vw - 1138px), 550px);
  aspect-ratio: 550 / 600;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  overflow: hidden;
  z-index: 1;
}

.mkd-kv__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* hover 缓动放大（PC 鼠标 hover / 移动端点按 sticky hover 均触发）：
     只缩放图片本体，外框不动不遮文字；media 已 overflow:hidden 兜住缩放溢出 */
  transition: transform var(--duration-slow) var(--ease-standard);
}

.mkd-kv__media:hover img {
  transform: scale(1.05);
}

/* ==================== 响应式 ==================== */
@media (max-width: 1200px) {
  .mkd-kv__crumb {
    top: 110px;
  }
}

@media (max-width: 992px) {
  .mkd-kv__crumb {
    top: 84px;
  }

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

  .mkd-kv__desc {
    font-size: clamp(1rem, 0.16vw + 0.96rem, 1.25rem);
    line-height: 1.5;
  }
}

@media (max-width: 768px) {
  .mkd-kv {
    padding-top: 80px;
    padding-bottom: 56px;
    aspect-ratio: auto;
    height: auto;
    overflow: visible;
    position: relative;
  }

  .mkd-kv__crumb {
    position: static;
    max-width: var(--container-content);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    margin-bottom: 40px;
    gap: 16px;
  }

  /* 移动端堆叠：文字恢复流式布局 */
  .mkd-kv__inner {
    position: static;
    display: flex;
    flex-direction: column;
  }

  .mkd-kv__text {
    position: static;
    transform: none;
    width: 100%;
    max-width: var(--container-content);
    margin: 0 auto;
    padding: 0 var(--container-padding);
  }

  .mkd-kv__media {
    position: static;
    width: calc(100% - 2 * var(--container-padding));
    max-width: 520px;
    aspect-ratio: 550 / 600;
    border-radius: var(--radius-md);
    margin: 40px auto 56px;
  }

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

  .mkd-kv__accent {
    margin-top: calc(min(1.5625vw, 1.875rem) + 5px);
    margin-bottom: 5px;
  }

  .mkd-kv__desc {
    font-size: clamp(1rem, 0.04vw + 0.98rem, 1.125rem);
    line-height: 1.5;
    margin-top: min(1.5625vw, 1.875rem);
  }

  .mkd-kv__desc + .mkd-kv__desc {
    margin-top: 16px;
  }

  .mkd-kv__media {
    display: none;
  }
}

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

  .mkd-kv__desc {
    font-size: clamp(0.9375rem, 0.04vw + 0.92rem, 1rem);
    line-height: 1.5;
    margin-top: min(1.5625vw, 1.875rem);
  }

  .mkd-kv__desc + .mkd-kv__desc {
    margin-top: 12px;
  }
}

/* PC端：导航背景透明，文字保持深色 */
@media (min-width: 993px) {
  .navbar {
    background: rgba(255, 255, 255, 0) !important;
  }

  .navbar.scrolled {
    background: rgba(255, 255, 255, 1) !important;
  }

  .navbar__menu-item > a {
    color: #333333 !important;
  }

  .navbar__brochure {
    color: #333333 !important;
  }

  .navbar__brochure .navbar__icon path {
    fill: #333333 !important;
  }

  .navbar__divider {
    background: var(--color-divider) !important;
  }

  .navbar__lang {
    color: #333333 !important;
  }

  .navbar__lang .navbar__icon path {
    fill: #333333 !important;
  }
}

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