/* ============================================================
   Markets-Detail KV / Hero（markets-detail.html Section 1）
   Figma Frame 476:19698，1920x970
   - 背景：linear-gradient(-66.48deg, #fff 0%, #ECF6FB 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%;
  overflow: hidden;
  background: linear-gradient(-66.48deg, var(--color-white) 0%, #ECF6FB 131.3%);
  padding-top: 130px; /* 90px fixed navbar + 40px 呼吸间距 */
  /* 上下居中（仅 PC）：padding-bottom 平衡可见区（navbar 底 90px 起）上方的净留白，
     即 130（padding-top）+ 96（inner padding-top）− 90（navbar）= 136px；
     上间隙 == 下间隙，文本块在可见区内垂直居中，且与文本高度无关恒成立。
     移动端由下方各断点覆盖，保持不变 */
  padding-bottom: 136px;
}

/* --- 面包屑（设计稿固定定位，不随内容容器；同 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, 20px);
  width: auto;
}

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

.mkd-kv__crumb-link,
.mkd-kv__crumb-current {
  font-family: var(--font-primary);
  font-size: clamp(14px, 0.9375vw, 18px);
  font-weight: 400;
  line-height: 25px;
  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;
}

/* --- 内容（1504 容器；grid 第二列 minmax(320px,1fr) 为右侧图片预留） --- */
.mkd-kv__inner {
  position: relative;
  max-width: 1504px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
  padding-top: 96px; /* crumb 行下方留白（设计 title y=226.5 - 130 padding = 96.5） */
  display: grid;
  grid-template-columns: minmax(0, 1066px) minmax(320px, 1fr);
  align-items: start;
}

.mkd-kv__text {
  grid-column: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* --- 文字 --- */
.mkd-kv__title {
  font-family: var(--font-primary);
  font-size: min(5vw, 96px);
  font-weight: 800;
  line-height: min(5.208vw, 100px);
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin: 0;
  animation-delay: 0.1s;
}

.mkd-kv__accent {
  width: 213px;
  height: 5px;
  margin: 40px 0 46px; /* title 底(≈331) → accent(373.5) → para1(416) */
  animation-delay: 0.2s;
}

.mkd-kv__desc {
  font-family: var(--font-primary);
  font-size: min(1.667vw, 32px);
  font-weight: 400;
  line-height: min(2.5vw, 48px);
  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__desc:nth-of-type(1) {
  animation-delay: 0.25s;
}

.mkd-kv__desc:nth-of-type(2) {
  animation-delay: 0.4s;
}

/* --- 右侧图片（绝对定位于屏幕右缘；宽度随视口收缩）
   宽度公式：clamp(320, 100vw-1138, 550)px 保证与 grid 预留列匹配、不压到文本 */
.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;
  animation-delay: 0.3s;
}

.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);
}

/* 入场动画：复用 animations.css 词汇（slide-up / fade-in），延迟需 backwards 填充避免闪烁 */
.mkd-kv .animate-fade-in,
.mkd-kv .animate-slide-up {
  animation-fill-mode: backwards;
}

/* ==================== 响应式 ==================== */
@media (max-width: 1200px) {
  .mkd-kv {
    padding-top: 110px; /* navbar 90px + 20px */
    padding-bottom: 70px;
  }

  .mkd-kv__crumb {
    top: 110px;
  }


}

@media (max-width: 992px) {
  .mkd-kv {
    padding-top: 84px; /* navbar 64px + 20px */
  }

  .mkd-kv__crumb {
    top: 84px;
  }

  .mkd-kv__title {
    font-size: 44px;
    line-height: 54px;
  }

  .mkd-kv__desc {
    font-size: 20px;
    line-height: 30px;
  }
}

@media (max-width: 768px) {
  .mkd-kv {
    padding-top: 80px;          /* navbar 64px + 16px */
    padding-bottom: 56px;
  }

  .mkd-kv__crumb {
    top: 96px;
    left: var(--container-padding);
    gap: 14px;
  }

  /* 堆叠布局：图片转为静态、居中、全圆角 */
  .mkd-kv__inner {
    grid-template-columns: 1fr;
    padding-top: 64px;
  }

  .mkd-kv__text {
    grid-column: auto;
  }

  /* 图片：留出左右边距并水平居中（与文字对齐），上留白与文字隔开、下留白与区块隔开。
     注：不能用 width:100% + min-height:100vh + margin:auto 做"剩余区域垂直居中"——
     手机视口不够高且图片为竖版，内容常超 100vh，无剩余空间使居中失效，且 width:100% 无左右边距 */
  .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: 38px;
    line-height: 48px;
  }

  .mkd-kv__accent {
    margin: 28px 0 32px;
  }

  .mkd-kv__desc {
    font-size: 18px;
    line-height: 28px;
  }
}

@media (max-width: 480px) {
  .mkd-kv__title {
    font-size: 32px;
    line-height: 42px;
  }

  .mkd-kv__desc {
    font-size: 16px;
    line-height: 26px;
  }

  .mkd-kv__media {
    max-width: 380px;
  }
}

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