/* 背景保留设计图的玻璃场景，文字和四个服务入口独立排版。 */
.medical-layout .about-hero--glass {
  position: relative;
  min-height: 0;
  padding: 0;
  background: #eaf3f9;
  /* 产品服务的542px首屏包含73px导航，统一两页背景底边。 */
  height: calc(542px - 73px);
}

.about-hero-scene {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 独立画布保持插画与图标同比缩放，背景高度调整不拉伸图像。 */
.about-hero-canvas {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  aspect-ratio: 2168 / 725;
  transform: translateY(-50%);
}

.about-hero-art {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

.about-hero-canvas > picture { display: contents; }

/* 横幅尾部保留轻微蓝色层次，与下方介绍自然衔接。 */
.about-hero-scene::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, transparent 72%, rgba(234, 243, 249, .35) 86%, #eaf3f9 100%);
  pointer-events: none;
}

.about-hero-copy {
  position: absolute;
  z-index: 2;
  top: 20.5%;
  /* 与下方公司介绍1240px内容容器的左边线保持一致。 */
  left: max(56px, calc((100% - 1240px) / 2));
  width: 44%;
  max-width: 570px;
}

.about-hero--glass .page-kicker {
  gap: 1.1vw;
  margin-bottom: 2.3vw;
  color: #778797;
  font-size: .9vw;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: .12vw;
}

.about-hero--glass .page-kicker::before {
  width: 2.7vw;
  height: 2px;
  background: #ff8038;
}

.medical-layout .about-hero--glass .brand-headline {
  font-size: 54px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: .04vw;
  color: #172633;
}

.about-hero--glass .brand-headline .headline-response {
  margin-top: .25vw;
  font-size: .93em;
  font-weight: inherit;
  letter-spacing: inherit;
}

.about-hero--glass .brand-headline .headline-accent {
  color: #ff7c35;
}

.about-hero-description {
  margin-top: 24px;
  color: #788797;
  font-size: 16px;
  line-height: 1.8;
}

/* 图标路径与产品服务菜单一致，坐标随画布同比缩放。 */
.about-hero--glass .about-orbit-icon {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 4.76%;
  height: 13.6%;
  border-radius: 20%;
  transform: translate(-50%, -50%);
  color: #ff8038;
}

.about-orbit-icon svg {
  width: 47%;
  height: 47%;
  filter: drop-shadow(0 3px 2px rgba(255, 130, 56, .14));
  transition: transform .2s ease;
}

.about-orbit-icon--pharmacy { left: 62.4%; top: 33.2%; }
.about-hero--glass .about-orbit-icon--diagnosis { left: 82%; top: 34.5%; color: #4488ff; }
.about-hero--glass .about-orbit-icon--prescription { left: 61.7%; top: 56.6%; color: #4488ff; }
.about-orbit-icon--industry { left: 82.4%; top: 59.2%; }
.about-orbit-icon--diagnosis svg,
.about-orbit-icon--prescription svg { filter: drop-shadow(0 3px 2px rgba(68, 136, 255, .14)); }
.about-orbit-icon:hover svg { transform: translateY(-3px); }
.about-orbit-icon:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

@media (min-width: 701px) {
  .medical-layout.company-page .about-hero--glass {
    --about-hero-height: calc(542px - 73px);
    height: var(--about-hero-height);
  }
  /* 画布等比覆盖横幅，图标随原图一起缩放，避免上下露底或入口错位。 */
  .company-page .about-hero-canvas {
    left: 50%;
    width: max(100%, calc(var(--about-hero-height) * 2168 / 725));
    transform: translate(-50%, -50%);
  }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .medical-layout.company-page .about-hero--glass { --about-hero-height: clamp(320px, 36vw, 396px); }
  .about-hero-copy { left: 32px; width: 48%; }
  .medical-layout .about-hero--glass .brand-headline { font-size: 44px; }
  .about-hero--glass .page-kicker { font-size: 11px; }
}

@media (max-width: 700px) {
  .medical-layout .about-hero--glass {
    height: auto;
    /* 取原图左侧环境铺满首屏，让标题直接显示在场景背景上。 */
    background:
      linear-gradient(180deg, transparent 65%, #edf6fb 100%),
      #eaf3f9 url('../img/about-hero-glass.png?v=20261002-compact2') left center / auto 100% no-repeat;
  }

  /* 支持格式选择时与首屏图片共用 WebP；旧内核继续使用上面的 PNG。 */
  @supports (background-image: image-set(url('../img/about-hero-glass.webp') type('image/webp'))) {
    .medical-layout .about-hero--glass {
      background-image:
        linear-gradient(180deg, transparent 65%, #edf6fb 100%),
        image-set(url('../img/about-hero-glass.webp') type('image/webp'), url('../img/about-hero-glass.png?v=20261002-compact2') type('image/png'));
    }
  }

  .about-hero-copy {
    position: relative;
    top: auto;
    left: auto;
    width: calc(100% - 40px);
    max-width: none;
    margin: 0 auto;
    padding-top: 32px;
  }

  .about-hero--glass .page-kicker {
    gap: 10px;
    margin-bottom: 20px;
    font-size: 12px;
    letter-spacing: 1.5px;
  }

  .about-hero--glass .page-kicker::before { width: 28px; }
  .medical-layout .about-hero--glass .brand-headline { font-size: clamp(30px, 8.7vw, 36px); letter-spacing: 0; }
  .about-hero--glass .brand-headline .headline-response { margin-top: 4px; }
  .about-hero-description { margin-top: 16px; font-size: 14px; }

  /* 图标场景按屏幕宽度自然撑开，文字变长时由内容决定首屏高度。 */
  .about-hero-scene {
    height: auto;
    aspect-ratio: 1.65;
    margin-top: 16px;
    -webkit-mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .35) 6%, rgba(0, 0, 0, .85) 14%, #000 22%);
    mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .35) 6%, rgba(0, 0, 0, .85) 14%, #000 22%);
  }
  .about-hero-scene::after {
    background:
      linear-gradient(180deg, rgba(234, 243, 249, .22) 0%, rgba(234, 243, 249, 0) 45%),
      linear-gradient(180deg, transparent 66%, rgba(237, 246, 251, .45) 82%, #edf6fb 100%);
  }
  .about-hero-canvas {
    top: 50%;
    left: 50%;
    width: 300%;
    height: auto;
    transform: translate(-72%, -48%);
    -webkit-mask-image:
      linear-gradient(180deg, transparent 0%, #000 22%, #000 82%, transparent 100%),
      linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(180deg, transparent 0%, #000 22%, #000 82%, transparent 100%),
      linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-composite: intersect;
  }
  .about-hero--glass .about-orbit-icon { min-width: 44px; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-orbit-icon svg { transition: none; }
  .about-orbit-icon:hover svg { transform: none; }
}