/* =========================================================
   MG.AI 全球条幅（Global Banner）· 立体多维 · 世界级工艺
   - 深色鎏金玻璃拟态 + 3D 悬浮 + 流光扫过 + 景深图文双栏
   - 与三语引擎解耦：自带 zh / id / en 文案（js/mg-banner.js）
   ========================================================= */
.mg-bnr{position:relative;overflow:hidden;margin:24px 0;border-radius:22px;
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  background:linear-gradient(135deg,#0b1220 0%,#16264a 55%,#1d3a72 100%);
  box-shadow:0 30px 60px -32px rgba(6,12,26,.85),0 0 0 1px rgba(245,185,66,.28) inset,0 2px 0 rgba(255,255,255,.06) inset;
  transform-style:preserve-3d;perspective:1200px;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease}
.mg-bnr::before{content:"";position:absolute;inset:-35% -12%;
  background:radial-gradient(58% 58% at 78% 16%,rgba(245,185,66,.24),transparent 70%);pointer-events:none}
.mg-bnr::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.15) 46%,rgba(255,255,255,.05) 52%,transparent 66%);
  transform:translateX(-130%);animation:mgSheen 9s ease-in-out infinite;animation-delay:var(--sheen-delay,0s)}
@keyframes mgSheen{0%,58%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.mg-bnr:hover{transform:translateY(-8px) rotateX(1.4deg) rotateY(-.5deg);
  box-shadow:0 46px 84px -34px rgba(6,12,26,.92),0 0 0 1px rgba(245,185,66,.5) inset}

/* 左：景深底图 */
.mg-bnr-media{position:relative;min-height:220px;overflow:hidden}
.mg-bnr-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);transition:transform 1s cubic-bezier(.2,.7,.2,1);opacity:.98}
.mg-bnr:hover .mg-bnr-media img{transform:scale(1.09)}
.mg-bnr-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,18,32,.05) 0%,rgba(11,18,32,.55) 55%,rgba(11,18,32,.9) 100%)}
.mg-bnr-media .mg-bnr-badge{position:absolute;left:18px;top:16px;z-index:2;
  padding:5px 12px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.14em;
  color:#0b1220;background:linear-gradient(180deg,#fde68a,#f5b942);
  box-shadow:0 10px 22px -12px rgba(245,185,66,.95),inset 0 1px 0 rgba(255,255,255,.8)}

/* 右：文案 */
.mg-bnr-body{position:relative;z-index:2;padding:28px 30px;display:flex;flex-direction:column;justify-content:center;gap:11px}
.mg-bnr-tag{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  padding:4px 11px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.2em;
  color:#ffe9b8;border:1px solid rgba(245,185,66,.55);background:rgba(245,185,66,.12)}
.mg-bnr-title{margin:0;font-size:clamp(18px,2.4vw,26px);font-weight:900;line-height:1.35;letter-spacing:.01em;
  background:linear-gradient(180deg,#ffffff 10%,#ffe9b8 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.mg-bnr-sub{margin:0;font-size:13.5px;line-height:1.9;color:#cbd5e1}
.mg-bnr-notice{margin-top:4px;padding-top:10px;border-top:1px dashed rgba(148,163,184,.32);
  font-size:12px;line-height:1.75;color:#9fb0c6}

/* 品类色调 */
.mg-bnr[data-cat="slogan"] .mg-bnr-tag{color:#ffe9b8;border-color:rgba(245,185,66,.6);background:rgba(245,185,66,.14)}
.mg-bnr[data-cat="adv"] .mg-bnr-tag{color:#fecaca;border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.12)}
.mg-bnr[data-cat="story"] .mg-bnr-tag{color:#99f6e4;border-color:rgba(45,212,191,.5);background:rgba(13,148,136,.16)}
.mg-bnr[data-cat="global"] .mg-bnr-tag{color:#bfdbfe;border-color:rgba(59,130,246,.55);background:rgba(37,99,235,.16)}

/* 紧凑版（窄栏 / 侧栏位） */
.mg-bnr.compact{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.mg-bnr.compact .mg-bnr-media{min-height:150px}
.mg-bnr.compact .mg-bnr-body{padding:20px 22px}

/* 占位：JS 未执行时的兜底，避免布局跳动 */
.mg-bnr-slot{margin:24px 0;min-height:170px;border-radius:22px;
  background:linear-gradient(135deg,#0f172a,#15233f);box-shadow:0 0 0 1px rgba(245,185,66,.18) inset}

@media (max-width:860px){
  .mg-bnr{grid-template-columns:1fr}
  .mg-bnr-media{min-height:180px}
  .mg-bnr-media::after{background:linear-gradient(180deg,rgba(11,18,32,.05) 0%,rgba(11,18,32,.85) 100%)}
  .mg-bnr-body{padding:22px 20px}
}
@media (prefers-reduced-motion:reduce){
  .mg-bnr{transition:none}
  .mg-bnr::after{animation:none;display:none}
  .mg-bnr-media img{transition:none}
}