/* BookingHero —— 免费预约页顶部主视觉（Figma 1868:11653）。
   组成：客厅插画照片 + 装饰椭圆 + 整页绿渐变 + 顶部压暗层
        + 「预约立享：」/「轻松 住新家」/「坐享其成」标签 / 三个 0 元权益标签。

   几何全部用 cqw（1cqw = 本层宽 1%），整块随页面宽等比缩放。
   文案字体是抖音美好体（本机已装，可真实命中）。 */

.mzh-booking-hero {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  /* 设计里是 375×812 的整页背景层 —— 不能用 inset:0，否则会被滚动内容撑高 */
  height: var(--booking-page-height);
  overflow: clip;
  container-type: inline-size;
  pointer-events: none;
  /* 资源由 JS 注入，这里给默认值以便样式中直接引用 */
  --hero-bg-image: none;
  --hero-badge-image: none;
  --hero-pill-image: none;
}

/* 整页绿渐变（设计里是 375×812 的覆盖层）
   ⚠️ 这里不能写 `--hero-bg-image: none` —— 会覆盖宿主上由 JS 注入的同名变量，
      结果渐变整层不显示，露出手机底色（实测就是这个问题）。默认值统一放在宿主上。 */
.mzh-booking-hero__bg {
  position: absolute;
  inset: 0;
  background-image: var(--hero-bg-image);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.mzh-booking-hero__photo {
  position: absolute;
  left: var(--booking-photo-x);
  top: var(--booking-photo-y);
  width: var(--booking-photo-w);
  height: var(--booking-photo-h);
  object-fit: cover;
  display: block;
}

.mzh-booking-hero__ellipse {
  position: absolute;
  left: var(--booking-ellipse-x);
  top: var(--booking-ellipse-y);
  width: var(--booking-ellipse-w);
  height: var(--booking-ellipse-h);
  display: block;
}

/* 顶部压暗层：让白色状态栏/文案压得住亮背景 */
.mzh-booking-hero__scrim {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--booking-scrim-w);
  height: var(--booking-scrim-h);
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--booking-scrim-from) calc(var(--booking-scrim-alpha) * 100%), transparent),
    transparent
  );
  opacity: var(--booking-scrim-opacity);
}

/* ---- 主视觉文案（抖音美好体）---- */
.mzh-booking-hero__text {
  position: absolute;
  font-family: var(--booking-hero-font);
  color: var(--booking-hero-fg);
  text-shadow: var(--booking-hero-shadow);
  white-space: nowrap;
  line-height: 1;
}

.mzh-booking-hero__eyebrow {
  left: var(--booking-eyebrow-left);
  top: var(--booking-eyebrow-top);
  transform: translateY(-50%);
  font-size: var(--booking-eyebrow-size);
}

.mzh-booking-hero__title {
  left: var(--booking-title-left);
  top: var(--booking-title-top);
  transform: translateY(-50%);
  font-size: var(--booking-title-size);
  line-height: var(--booking-title-lh);
  display: flex;
  flex-direction: column;
}

.mzh-booking-hero__badge {
  position: absolute;
  left: var(--booking-badge-x);
  top: var(--booking-badge-y);
  width: var(--booking-badge-w);
  height: var(--booking-badge-h);
  background-image: var(--hero-badge-image);
  background-size: 100% 100%;
  /* 只圆左上 + 右下 */
  border-radius: var(--booking-badge-radius) 0 var(--booking-badge-radius) 0;
}

.mzh-booking-hero__badge-text {
  left: var(--booking-badge-text-x);
  top: var(--booking-badge-text-y);
  transform: translateY(-50%);
  font-size: var(--booking-badge-text-size);
}

/* ---- 三个 0 元权益标签 ----
   优先用设计稿导出的整组矢量（文字是快看世界体的字形轮廓）；下面的矢量拼装方式是
   本机装了该字体时的替代路径。 */
.mzh-booking-hero__pills {
  position: absolute;
  left: var(--booking-pills-x);
  top: var(--booking-pills-y);
  width: var(--booking-pills-w);
  height: var(--booking-pills-h);
  display: block;
}

.mzh-booking-hero__pill {
  position: absolute;
  left: var(--booking-pill-x);
  width: var(--booking-pill-w);
  height: var(--booking-pill-h);
  background-image: var(--hero-pill-image);
  background-size: 100% 100%;
  border-radius: var(--booking-pill-radius) 0 var(--booking-pill-radius) 0;
}

.mzh-booking-hero__pill--1 { top: var(--booking-pill1-y); }
.mzh-booking-hero__pill--2 { top: var(--booking-pill2-y); }
.mzh-booking-hero__pill--3 { top: var(--booking-pill3-y); }

/* 「0元」左侧的实色块 */
.mzh-booking-hero__pill-cap {
  position: absolute;
  left: var(--booking-pill-x);
  width: var(--booking-pill-cap-w);
  height: var(--booking-pill-h);
  background: var(--booking-pill-cap-bg);
  border-radius: var(--booking-pill-radius) 0 var(--booking-pill-radius) 0;
}

.mzh-booking-hero__pill-cap--1 { top: var(--booking-pill1-y); }
.mzh-booking-hero__pill-cap--2 { top: var(--booking-pill2-y); }
.mzh-booking-hero__pill-cap--3 { top: var(--booking-pill3-y); }

.mzh-booking-hero__pill-text {
  font-family: var(--booking-pill-font), var(--typography-family-base);
  font-size: var(--booking-pill-text-size);
  line-height: normal;
  transform: translateX(-50%);
  text-align: center;
}

.mzh-booking-hero__pill-price { left: var(--booking-pill-price-x); }
.mzh-booking-hero__pill-label { left: var(--booking-pill-text-x); }

.mzh-booking-hero__pill-price--1,
.mzh-booking-hero__pill-label--1 { top: var(--booking-pill-text-1-y); }
.mzh-booking-hero__pill-price--2,
.mzh-booking-hero__pill-label--2 { top: var(--booking-pill-text-2-y); }
.mzh-booking-hero__pill-price--3,
.mzh-booking-hero__pill-label--3 { top: var(--booking-pill-text-3-y); }