/* =========hero======== */
.hero {
  position: relative;
  width: 100vw;
/* 兜底高度（任何浏览器都能用） */
  height: calc(250px + 60vh);
  min-height: 65vh; /* 再加一道保险，避免极端情况下高度过小 */
  overflow: hidden; /* 统一放大裁切 */
  margin-top: 44px;
  padding: 0;
  will-change: transform, border-radius;
  transform-origin: bottom center;
}
/* 浏览器支持 svh 时，用它覆盖（地址栏展开时更准） */
@supports (height: 1svh) {
  .hero {
    height: calc(250px + 60svh);
  }
}
/* 浏览器支持 dvh 时，再用 dvh 覆盖（地址栏收起时更准） */
@supports (height: 1dvh) {
  .hero {
    height: calc(250px + 60dvh);
  }
}
/* 渐变遮罩（亮色模式默认隐藏） */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.4) 100%);
  mix-blend-mode: multiply;
  opacity: 0;
  z-index: 1;
}
/* 关键：图片绝对铺满，统一“放大裁切”效果 */
.hero img {
  position: absolute;
  inset: 0; /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  object-fit: cover; /* 裁切填充 */
  object-position: top; /* 居中裁切，跨端一致 */
  display: block;
  z-index: 0; /* 在遮罩之下、文本之下 */
/* 如需更强放大感可解开： */
/* transform: scale(1.06); */
}
/* 标题层 */
.hero-text {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  text-align: center;
  font-family: "Helvetica Neue", Helvetica, sans-serif, "PingFang SC";
  font-weight: bold;
  font-size: 32px;
  text-shadow: 0 2px 12px #000;
  z-index: 2; /* 在遮罩之上 */
}
.hero-text p {
  font-size: 16px;
  font-weight: normal;
}
/* 深色模式：仍可保留遮罩设置（默认透明） */
@media (prefers-color-scheme: dark) {
  .hero::before {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.4) 100%);
    opacity: 1;
  }
}
/* 方屏下字体缩小 */
@media (max-aspect-ratio: 1/1) {
  .hero-text {
    font-size: 28px;
  }
  .hero-text p {
    font-size: 12px;
  }
  .hero {
    min-height: 70vh;
  }
}