/* Banner —— 主功能方形 banner（Figma 1887:1199 / 1917:9679，196×196，圆角 8）。

   整幅是一张图片（banner.jpg，从 Figma 的「无按钮」帧 1917:9679 @3x 导出）。
   为什么不逐层复刻：图内文字用的是「快看世界体 / DingTalk Sans / 阿里巴巴普惠体 2.0」
   三种品牌字体，设计系统里没有、小程序里也装不了；逐字复刻必失真。
   设计稿本意就是一张成品广告图，故按整幅图落。

   ★ CTA「0元预约」是**真实组件**（不再烘在图里）—— 用户已在 Figma 里
   把 banner 的 btn 帧标为 hidden 并另外导出了底图。
   它必须随 banner 等比缩放：位置/尺寸用百分比，圆角与字号用 cqw
   （容器查询单位，1cqw = 本容器宽的 1%），所以这里要开 container-type。

   宽度按设计稿比例随容器伸缩（196 : 139 与右侧快捷网格分配行宽），
   375 基准下正好 196 —— 见 .mzh-home__media-row。 */

.mzh-banner {
  /* 行宽按设计稿 196 : (196+139) 分配，再留出行间距 8；
     375 下 (343−8)×196/335 = 196 ✓。用 calc 显式算，不靠 flex-grow ——
     实测 flex-grow 会被 aspect-ratio 的内容尺寸干扰，分配出 182:153。 */
  flex: 0 0 calc((100% - var(--home-layout-media-gap)) * 196 / 335);
  aspect-ratio: 1 / 1;
  min-width: 0;
  position: relative;
  container-type: inline-size;   /* 让 CTA 能用 cqw 随 banner 等比缩放 */
  border-radius: var(--banner-square-radius);
  overflow: clip;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
}

.mzh-banner__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- CTA「0元预约」 ---- */
.mzh-banner__cta {
  position: absolute;
  left: var(--banner-square-cta-left);
  top: var(--banner-square-cta-top);
  width: var(--banner-square-cta-width);
  height: var(--banner-square-cta-height);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  border-radius: var(--banner-square-cta-radius);
  background-image: linear-gradient(
    var(--banner-square-cta-angle),
    var(--color-bg-cta-gradient-1) var(--banner-square-cta-stop-1),
    var(--color-bg-cta-gradient-2) var(--banner-square-cta-stop-2));
  filter: drop-shadow(var(--banner-square-cta-shadow));
  font-size: var(--banner-square-cta-font-size);
  line-height: var(--banner-square-cta-line-height);
  font-weight: var(--typography-weight-medium);
  color: var(--banner-square-cta-fg);
  white-space: nowrap;
}