/* 统一配图呈现：主体完整、色彩克制、桌面与手机共用同一安全取景区。 */
.hero-media,
.page-hero-media {
  top: 50%;
  right: clamp(24px, 4vw, 72px);
  bottom: auto;
  left: auto;
  width: min(49%, 680px);
  height: auto;
  aspect-ratio: var(--media-ratio, 3 / 2);
  transform: translateY(-50%);
  border-radius: 14px;
  isolation: isolate;
  background: #ecebe8;
  box-shadow: 0 22px 60px rgba(32, 36, 37, .10);
}

.hero-media::before,
.page-hero-media::before {
  position: absolute;
  inset: -12%;
  z-index: 0;
  background-image: var(--media-image);
  background-position: center;
  background-size: cover;
  filter: blur(28px) saturate(.55);
  opacity: .43;
  content: "";
  pointer-events: none;
}

.hero-media img,
.page-hero-media img {
  position: relative;
  z-index: 1;
  object-fit: contain;
  object-position: center;
  filter: saturate(.86) contrast(1.02);
}

.hero-copy,
.page-hero-lead { max-width: min(42vw, 500px); }

.section-visual,
.page-media,
.directory-card-media {
  background: #e9e9e6;
}

.section-visual img,
.page-media img,
.directory-card-media img {
  object-fit: contain;
  object-position: center;
  filter: saturate(.88) contrast(1.02);
}

.page-media img[src*="floor-03-v3"],
.page-media img[src*="floor-05-v3"],
.page-media img[src*="floor-08-v3"] { background: #303334; }

.section-visual:hover img { transform: none; }

/* 带说明的图采用独立信息带，不遮挡图像主体。 */
.section-visual.tall,
.about-visual,
.faq-visual {
  display: flex;
  flex-direction: column;
}

.section-visual.tall { aspect-ratio: 2 / 3; }

.section-visual.tall img,
.about-visual img,
.faq-visual img {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

.section-visual.tall figcaption,
.about-visual figcaption,
.faq-visual figcaption {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  margin: 0;
  padding: 16px 20px;
  border: 0;
  border-radius: 0;
  background: #303334;
  backdrop-filter: none;
}

.page-media {
  aspect-ratio: 3 / 2;
  min-height: 0;
}

.directory-card {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

.directory-card-media {
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
}

.directory-card-body { padding: 24px 28px 28px; }

.advantage-backdrop img,
.standards-media img,
.consult-media img {
  object-fit: cover;
  object-position: center;
  filter: saturate(.58) contrast(1.05) brightness(.76);
}

.advantage-backdrop { background: #303334; }
.advantage-backdrop img {
  height: clamp(260px, 42vw, 520px);
  object-fit: contain;
  filter: saturate(.68) contrast(1.02) brightness(.92);
}
.advantage-backdrop::after {
  background: linear-gradient(180deg, rgba(48, 51, 52, .52) 0%, rgba(48, 51, 52, .76) 300px, #303334 540px);
}
.standards-media img,
.consult-media img { filter: saturate(.72) contrast(1.03) brightness(.87); }
.standards-media::after,
.consult-overlay {
  background: linear-gradient(90deg, rgba(48, 51, 52, .91), rgba(48, 51, 52, .78) 56%, rgba(48, 51, 52, .58));
}

@media (max-width: 767px) {
  .hero,
  .page-hero { padding-top: calc(var(--header-height) + 336px + 28px); }
  .hero-media,
  .page-hero-media {
    top: var(--header-height);
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 336px;
    aspect-ratio: auto;
    transform: none;
    border-radius: 0;
    box-shadow: none;
  }
  .hero-media img,
  .page-hero-media img { object-fit: contain; object-position: center; }
  .hero-shade,
  .page-hero-shade { display: none; }
  .hero-copy,
  .page-hero-lead { max-width: 100%; }
  .section-visual.tall { aspect-ratio: 2 / 3; }
  .about-visual,
  .faq-visual { aspect-ratio: 4 / 5; }
  .page-media { aspect-ratio: 16 / 10; min-height: 0; }
  .directory-card-media { aspect-ratio: 16 / 10; }
  .advantage-backdrop img { height: 260px; }
  .standards-media::after,
  .consult-overlay { background: rgba(48, 51, 52, .82); }
}

@media (max-width: 480px) {
  .hero,
  .page-hero { padding-top: calc(var(--header-height) + 300px + 28px); }
  .hero-media,
  .page-hero-media { height: 300px; }
}