/* 容器与背景 */
.mbb-amb{
  padding: clamp(40px, 8vw, 96px) 20px;
  background:
    radial-gradient(1200px 600px at 65% -10%, rgba(50,120,255,.10), transparent),
    linear-gradient(180deg, rgba(0,0,0,.02), transparent 55%),
    #f7faff;
  border-top: 1px solid rgba(0,0,0,.06);
}
.mbb-amb__inner{
  max-width: 1160px; margin: 0 auto;
  display: grid; gap: 40px;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
}

/* 左：媒体（给透明PNG提供“柔性背板”） */
.mbb-amb__media{
  position: relative; width: 100%;
  display: grid; place-items: center;
}
.mbb-amb__backplate{
  position: absolute; inset: auto 0 0 0;
  height: min(72%, 560px);
  margin: 0 auto; max-width: 520px;
  border-radius: 24px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.65), rgba(245,248,255,.9) 60%, rgba(235,242,255,.9) 100%),
    linear-gradient(180deg, rgba(43,91,215,.12), rgba(43,91,215,.04));
  box-shadow: 0 20px 60px rgba(20,60,140,.18), inset 0 1px 0 rgba(255,255,255,.6);
  filter: saturate(1.02);
}
.mbb-amb__img{
  position: relative; z-index: 1;
  width: auto; max-width: min(92%, 520px);
  height: auto; max-height: min(72vh, 800px);
  object-fit: contain;
  filter: drop-shadow(0 18px 36px rgba(20,60,140,.18));display: block;
}

.mbb-amb__img,
.mbb-amb__backplate{
  pointer-events: none;
}
/* 右：文案 */
.mbb-amb__title{
  font-size: clamp(22px, 3vw, 32px);
  margin: 0 0 8px; font-weight: 800; letter-spacing: .3px;
}
.mbb-amb__name{ margin: 0 0 12px; font-weight: 700; color: #2b5bd7; font-size: 18px; }
.mbb-amb__tag{ color:#6b7fb0; font-weight:600; margin-left:.5em; font-size: 18px; }
.mbb-amb__quote{
  margin: 12px 0 16px; padding: 20px 18px;
  background: #fff; border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px; line-height: 1.8;
}
.mbb-amb__quote p{ padding-bottom: 15px;}
.mbb-amb__slogan{ color:#5b6f92; margin: 0 0 18px; font-size: 14px; }
.mbb-amb__sign{  height: 70px; }

/* CTA（若启用） */
.mbb-amb__cta{ display:flex; gap:12px; flex-wrap:wrap; }
.mbb-amb__btn{
  display:inline-block; padding: 10px 18px; border-radius: 10px;
  text-decoration:none; font-weight:700; border:1px solid #2b5bd7;
  transition: transform .08s ease, background .2s ease, filter .2s ease;
}
.mbb-amb__btn--primary{ background:#2b5bd7; color:#fff; }
.mbb-amb__btn--ghost{ background:#fff; color:#2b5bd7; }
.mbb-amb__btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }

/* 播放按钮（覆盖在人物图上） */
.mbb-amb__play{
  position:absolute; inset:auto auto 8% 8%; margin:auto;
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:999px;
  background:#ffffffcc; backdrop-filter: blur(6px);
  border:1px solid rgba(0,0,0,.08); cursor:pointer;
  font-weight:700; color:#1b2b5a;
  box-shadow:0 8px 24px rgba(20,60,140,.15);
  transition:transform .1s ease, filter .2s ease, background .2s ease;
	z-index: 3;            /* 高于 .mbb-amb__img 的 z-index:1 */
  pointer-events: auto;
}
.mbb-amb__play:hover{ transform:translateY(-1px); filter:brightness(1.03); }
.mbb-amb__play:active{ transform:translateY(0); }
.mbb-amb__play-icon{ font-size:18px; line-height:1; }
.mbb-amb__play-text{ font-size:14px; }

/* 弹窗与视频 */
/* 让 <dialog> 始终居中在“页面屏幕” */
.mbb-amb__dialog{
  border: none;
  padding: 0;
  background: transparent;
  max-width: none;
  width: auto;
}

/* 打开时采用固定定位 + 居中网格，兼容不支持 showModal 的降级 */
.mbb-amb__dialog[open]{
  position: fixed;
  inset: 0;                  /* 顶、右、底、左均为 0，覆盖全屏 */
  margin: 0;
  display: grid;             /* 居中承载视频 */
  place-items: center;
  z-index: 9999; /* 确保位于最上层 */
	top:10%;
}

/* 背景遮罩（showModal 会自动加 ::backdrop；降级时我们用 JS 动态加遮罩） */
.mbb-amb__dialog::backdrop{
  background: rgba(0, 10, 30, .55);
  backdrop-filter: blur(3px);
}

/* 视频尺寸：限制在视口内 */
.mbb-amb__video{
  width: min(90vw, 900px);
  height: auto;
  background: #000;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}


/* 关闭按钮 */
.mbb-amb__close{
  position:absolute; right: -8px; top: -40px;
  width:36px; height:36px; border-radius:999px;
  border:1px solid rgba(255,255,255,.4);
  background:#ffffff22; color:#fff; cursor:pointer;
  backdrop-filter: blur(6px); font-size:20px; line-height:1;
}
@media (max-width: 560px){
  .mbb-amb__close{ right: 8px; top: -48px; }
}

/* 响应式 */
@media (max-width: 1000px){
  .mbb-amb__inner{ grid-template-columns: 1fr; gap: 24px; }
  .mbb-amb__media{ order: -1; } /* 移动端：图在上 */
  .mbb-amb__img{ max-height: 60vh; }
}

/* 尊重系统“减少动效”设置 */
@media (prefers-reduced-motion: reduce){
  .mbb-amb__play, .mbb-amb__btn{ transition:none; }
}