/* User-supplied content imagery. Keep every existing section background intact. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}
.content-hero-image,
.content-inner-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.sol-hero-art.content-art-replaced {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.sol-hero-art.content-art-replaced .content-hero-image {
  max-width: 100%;
  max-height: 100%;
}

/* Desktop solution illustrations sit closer to the copy. Flex shrinking must
   be disabled or percentage enlargement collapses back to the container size.
   类钩子（2026-09-29 由图片文件名钩子改造）：.art-em = 放大 116%；
   .art-em-lg = 132% 视觉量补偿档（09-29 恢复同事《Banner配置与定位.json》分档：
   AI盘点/人才盘点/干部竞聘/金牌店长/高潜识别五图专项放大；margin-top:-20px 上提
   消速览卡重叠——盒底与 116% 档同一水平线=容器底+24px，卡顶余 18px，顶部溢出
   68px 在 hero 88px 内边距内不被裁）；
   .art-keep = 保持核准原尺寸（自我觉察工作坊）。 */
@media (min-width: 1025px) {
  .sol-hero-art.content-art-replaced
    .content-hero-image.art-em {
    flex: 0 0 auto;
    max-width: none;
    max-height: none;
    width: 116%;
    height: 116%;
    transform: translateX(-44px);
  }

  .sol-hero-art.content-art-replaced
    .content-hero-image.art-em-lg {
    flex: 0 0 auto;
    max-width: none;
    max-height: none;
    width: 132%;
    height: 132%;
    transform: translateX(-56px);
    margin-top: -20px;
  }

  .sol-hero-art.content-art-replaced
    .content-hero-image.art-keep {
    transform: none;
  }
}

.page-header .art.content-art-replaced {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 12px 4% 10px 2%;
  background: transparent;
}

.page-header .art.content-art-replaced .content-hero-image {
  max-width: 560px;
  max-height: 100%;
}

/* Whitepaper art stays at its original position, only reduced by 10%. */
.whitepaper-page-header .art.content-art-replaced .content-hero-image {
  width: 90%;
  height: 90%;
  max-width: 504px;
  transform: none;
}

/* Customer-case and knowledge-channel headers share a protected two-column
   layout at tablet and compact-desktop widths. The copy column keeps its own
   measure and the illustration stays inside a separate right-hand region. */
@media (min-width: 769px) and (max-width: 1280px) {
  .page-header {
    padding-left: 32px;
    padding-right: 32px;
  }

  .page-header .page-header-inner {
    box-sizing: border-box;
    padding-right: 45%;
  }

  .page-header .page-header-inner > p {
    width: 100%;
    max-width: 100%;
  }

  .page-header .art.content-art-replaced {
    width: 44%;
    padding: 12px 3% 10px 2%;
  }

  .page-header .art.content-art-replaced .content-hero-image {
    max-width: 100%;
    max-height: 88%;
  }

  .page-header h1 {
    font-size: clamp(36px, 4vw, 44px);
  }
}

.safe-case-layout .mlt-case-art.content-art-replaced {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.safe-case-layout .mlt-case-art.content-art-replaced .content-inner-image {
  max-height: 330px;
}

.mh2-whitepaper-art.content-art-replaced {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.mh2-whitepaper-art.content-art-replaced .content-inner-image {
  max-height: 230px;
}

.founder-mark.founder-portrait {
  --founder-portrait-height: 350px;
  width: 260px;
  height: var(--founder-portrait-height);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  align-self: end;
}

.founder-mark.founder-portrait .content-inner-image {
  width: auto;
  height: var(--founder-portrait-height);
  max-width: 100%;
  max-height: var(--founder-portrait-height);
  flex: 0 0 auto;
  object-position: center bottom;
}

@media (max-width: 1024px) {
  .founder-mark.founder-portrait {
    --founder-portrait-height: 286px;
    width: 210px;
  }
}

@media (max-width: 768px) {
  .sol-hero-art.content-art-replaced,
  .page-header .art.content-art-replaced,
  .mh2-whitepaper-art.content-art-replaced {
    display: none;
  }

  .founder-mark.founder-portrait {
    --founder-portrait-height: 116px;
    width: 84px;
    align-self: start;
  }
}

/* Latest page-body illustrations (2026-09-27).
   These classes replace former placeholder treatments in full: no inherited
   tint, frame, radius, shadow or decorative pseudo-element may remain. */
.page-inner-visual,
.page-inner-switch-frame {
  position: relative;
  min-width: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}

.page-inner-visual::before,
.page-inner-visual::after,
.page-inner-switch-frame::before,
.page-inner-switch-frame::after {
  content: none !important;
  display: none !important;
}

.page-inner-visual > img,
.page-inner-switch-frame > img,
.page-inner-switch-frame .apt-img-layer > img,
.page-inner-switch-frame .content-inner-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  filter: none !important;
}

.page-inner-switch-frame > img {
  transition: opacity .18s ease;
}

.page-inner-switch-frame.is-image-changing > img {
  opacity: 0;
}

/* Equal-height text/image rows: the artwork is removed from intrinsic layout
   sizing, so the copy/accordion column determines the shared desktop height. */
@media (min-width: 1025px) {
  .apt-overview-row.inner-media-equal-row {
    align-items: stretch !important;
  }

  .inner-media-equal-row > .page-inner-switch-frame,
  .inner-media-equal-row > .page-inner-visual {
    align-self: stretch;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }

  .inner-media-equal-row > .page-inner-switch-frame > img,
  .inner-media-equal-row > .page-inner-switch-frame > .apt-img-layer,
  .inner-media-equal-row > .page-inner-visual > img {
    position: absolute;
    inset: 0;
  }
}

/* 360: stable scenario frame and consultant illustration. */
.eval-scene-visual.page-inner-switch-frame {
  width: 520px;
  height: 440px;
}

.eval-consult-art.page-inner-visual {
  min-height: 300px;
}

/* AI report sections. */
.aical-report-placeholder.page-inner-visual {
  min-height: 360px;
}

.ai-post-layout {
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(420px, 1.04fr);
  gap: 48px;
  align-items: stretch;
  max-width: 1080px;
  margin: 40px auto 0;
}

.ai-post-layout .ai-post-accordion {
  min-width: 0;
  max-width: none !important;
  margin: 0 !important;
}

.ai-post-visual {
  height: 100%;
  min-height: 390px;
}

/* PSA model and three application scenes. */
.psa-model-grid.latest-model-image {
  display: block !important;
}

.psa-model-visual {
  width: 100%;
  aspect-ratio: 2606 / 898;
}

.psa-scene-placeholder.page-inner-visual {
  min-height: 330px;
}

/* Talent inventory cards. */
.mode-card-visual.page-inner-visual {
  width: 100% !important;
  height: 150px !important;
  min-height: 150px !important;
  margin: 0 !important;
}

/* Career aptitude, BA, high-potential and iDriver rows. */
.apt-overview-img.page-inner-switch-frame,
.apt-overview-img.page-inner-visual {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.apt-overview-img.page-inner-switch-frame .apt-img-layer {
  padding: 0 !important;
  background: transparent !important;
}

.apt-principle-img.page-inner-visual,
.apt-report-cover.page-inner-visual,
.t5-service-visual.page-inner-visual,
.social-value-visual.page-inner-visual,
.store-journey-visual.page-inner-visual,
.campus-report-visual.page-inner-visual {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.hp-ninegrid-visual.page-inner-visual {
  min-height: 360px;
}

.hp-adv-row .hp-adv-image {
  flex-basis: 46%;
}

/* Self-awareness: a fixed visual frame prevents the accordion row from
   jumping when copy panels of different heights are selected. */
@media (min-width: 1025px) {
  .sa-product-adv .apt-overview-row {
    min-height: 360px;
  }

  .sa-product-adv .sa-feature-accordion,
  .sa-product-adv .sa-fixed-visual {
    height: 360px !important;
    min-height: 360px !important;
  }
}

.sa-course-layout.latest-course-image {
  grid-template-columns: minmax(260px, .82fr) minmax(0, 1fr) minmax(0, 1fr) !important;
}

.sa-course-visual.page-inner-visual {
  min-height: 300px;
  padding: 0 !important;
  border-right: 0 !important;
}

/* Gold-sales tool image occupies the existing stable tool media block. */
.gold-tool-media.page-inner-switch-frame {
  color: transparent !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* The current WorkBuddy edition presents the three gold-sales dimensions as
   equal cards instead of a switcher. Keep the supplied artwork inside the
   card's existing visual height and remove the former tinted illustration
   panel completely. */
.gold-model-viz.page-inner-visual {
  flex: 0 0 172px !important;
  width: calc(100% - 32px);
  height: 172px !important;
  min-height: 172px !important;
  margin: 0 16px 14px !important;
  padding: 0 !important;
}

.gold-model-viz.page-inner-visual > img {
  width: auto;
  height: 100%;
  max-width: 82%;
  margin: 0 auto;
}

/* The supplied wide card illustrations include their own background. They
   therefore fill the media strip instead of being letterboxed over the white
   card, which previously looked like a white line above the image. */
.t5-service-visual.page-inner-visual,
.mode-card-visual.page-inner-visual {
  height: 115px !important;
  min-height: 115px !important;
}

.t5-service-visual.page-inner-visual > img,
.mode-card-visual.page-inner-visual > img {
  object-fit: cover;
  object-position: center;
}

/* Stable desktop accordion/media pairs. The row owns the height, so switching
   the open panel never changes document flow. */
@media (min-width: 1025px) {
  .stable-accordion-row {
    height: 378px;
    min-height: 378px;
    align-items: stretch !important;
  }

  .stable-ba-row {
    height: 420px;
    min-height: 420px;
  }

  .stable-accordion-row > .apt-overview-img,
  .stable-accordion-row > .apt-accordion {
    height: 100% !important;
    min-height: 0 !important;
  }

  .stable-accordion-row > .apt-accordion {
    overflow: hidden;
  }

  .stable-accordion-row .apt-acc-item {
    flex: 0 0 auto;
  }

  .stable-accordion-row .apt-acc-item.active {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
}

/* AI calibration report: give the supplied report artwork enough horizontal
   resolution to remain legible, while keeping the copy to a readable measure. */
@media (min-width: 769px) {
  .aical-report {
    width: min(100%, 1100px) !important;
    max-width: 1100px !important;
    grid-template-columns: minmax(250px, .72fr) minmax(480px, 1.28fr) !important;
    gap: 38px !important;
  }

  .aical-report-copy p {
    max-width: 430px;
  }

  .aical-report-placeholder.page-inner-visual {
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 1186 / 730 !important;
    justify-self: stretch !important;
  }
}

/* AI+ report: the content-rich accordion receives the larger column; the
   illustration remains intentionally compact and visually subordinate. */
.ai-post-layout {
  grid-template-columns: minmax(300px, .76fr) minmax(520px, 1.24fr);
  gap: 36px;
  max-width: 1160px;
}

.ai-post-visual {
  width: 100%;
  max-width: 420px;
  justify-self: end;
}

.ai-post-layout .ai-post-accordion {
  width: 100%;
}

/* DRisk reuses the social-recruitment hero artwork as a clean, borderless CTA
   illustration instead of the former SVG placeholder. */
.drisk-social-art.content-art-replaced {
  flex: 0 0 320px;
  height: 210px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.drisk-social-art.content-art-replaced > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* SAFE process centre mark is a supplied raster asset. The parent diamond is
   rotated by the page stylesheet, so rotate the image back to keep it upright. */
.safe-center-mark > img {
  width: 42px !important;
  height: 42px !important;
  object-fit: contain;
  transform: rotate(-45deg);
}

/* The detailed-course illustration is supporting content, not a third text
   column. Keep it compact and leave the two schedules equal room. */
.sa-course-layout.latest-course-image {
  grid-template-columns: minmax(180px, .52fr) minmax(0, 1fr) minmax(0, 1fr) !important;
}

.sa-course-visual.page-inner-visual {
  min-height: 248px;
  align-self: start;
}

.sa-course-visual.page-inner-visual > img {
  width: min(100%, 220px);
  height: auto;
  max-height: 248px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .ai-post-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .ai-post-visual {
    width: 100%;
    height: clamp(260px, 58vw, 390px);
    min-height: 0;
  }

  .page-inner-switch-frame,
  .page-inner-visual {
    min-height: 220px;
  }

  .inner-media-equal-row > .page-inner-switch-frame,
  .inner-media-equal-row > .page-inner-visual {
    width: 100% !important;
    aspect-ratio: 4 / 3;
  }

  .sa-course-layout.latest-course-image {
    grid-template-columns: 1fr !important;
  }

  .sa-course-visual.page-inner-visual {
    min-height: 260px;
    border-bottom: 1px solid #E5E6EB !important;
  }

  .drisk-social-art.content-art-replaced {
    display: none;
  }
}

@media (max-width: 768px) {
  .safe-center-mark > img {
    width: 32px !important;
    height: 32px !important;
  }

  .eval-scene-visual.page-inner-switch-frame {
    width: 100%;
    height: 300px;
  }

  .aical-report-placeholder.page-inner-visual,
  .hp-ninegrid-visual.page-inner-visual {
    min-height: 260px;
  }

  .mode-card-visual.page-inner-visual {
    height: 100px !important;
    min-height: 100px !important;
  }

  .aical-report {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .aical-report-placeholder.page-inner-visual {
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 1186 / 730;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-inner-switch-frame > img {
    transition: none;
  }
}