/* 本地原生横幅 —— 替代原 Braze <christies-banner> 组件（原为 iframe 内嵌渲染）
   关键：用容器查询（container-type / @container / cqw）替代视口媒体查询，
   使每个横幅按“自身容器宽度”自适应，等价于原 iframe 内的独立视口行为。 */
.cbanner {
  --ch-brand-red: #960000;
  --ch-brand-natural-white: #f0e8d7;
  --ch-grey-10: #f7f7f7;
  --ch-grey-20: #ebebeb;
  --ch-black-80: #333333;
  --ch-black: #000000;
  --ch-white: #ffffff;
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--ch-white);
  font-family: "ABCArizonaSans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  container-type: inline-size;
  container-name: cbanner;
}
.cbanner__inner {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow: hidden;
}
.cbanner--reverse .cbanner__inner { flex-direction: row-reverse; }
.cbanner__media {
  flex: 1 1 50%;
  position: relative;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  background: var(--ch-grey-20);
}
.cbanner__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}
.cbanner__content {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 3rem;
  background: var(--ch-white);
  color: var(--ch-black-80);
}
.cbanner--grey10 .cbanner__content { background: var(--ch-grey-10); }
.cbanner--grey20 .cbanner__content { background: var(--ch-grey-20); }
.cbanner--beige .cbanner__content { background: var(--ch-brand-natural-white); }
.cbanner--red .cbanner__content { background: var(--ch-brand-red); color: var(--ch-grey-10); }
.cbanner--dark .cbanner__content { background: var(--ch-black-80); color: var(--ch-grey-10); }
.cbanner__heading {
  font-family: "ABCArizonaSerif", Georgia, "Times New Roman", serif;
  font-size: clamp(1.75rem, 2.5cqw, 4rem);
  font-weight: 300;
  line-height: 1.2;
  margin: 0;
  z-index: 2;
}
.cbanner__text {
  font-size: clamp(1rem, calc(1rem + (100cqw - 90rem) * 0.0041666667), 1.25rem);
  font-weight: 300;
  line-height: 1.55;
  max-width: 48ch;
  margin: 0.75rem 0 0;
  color: inherit;
}
.cbanner__button {
  display: inline-block;
  margin: 2.25em 0 0;
  padding: 0.9rem 1.8rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: clamp(0.75rem, calc(0.4cqw + 0.5rem), 1rem);
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  min-width: 240px;
  width: auto;
  text-align: center;
  align-self: flex-start;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cbanner__button:hover {
  background: var(--ch-black-80);
  color: var(--ch-white);
  border-color: var(--ch-black-80);
}
.cbanner--red .cbanner__button:hover,
.cbanner--dark .cbanner__button:hover {
  background: var(--ch-white);
  color: var(--ch-black-80);
  border-color: var(--ch-white);
}

/* 容器宽度 < 768px：竖排（等价于原组件在窄 iframe 内的移动端布局） */
@container cbanner (max-width: 767px) {
  .cbanner__inner,
  .cbanner--reverse .cbanner__inner { flex-direction: column; }
  .cbanner__media { width: 100%; flex: none; }
  .cbanner__content { flex: none; padding: 1.5rem 1rem; }
  .cbanner__button { width: 100%; }
}
@container cbanner (min-width: 1024px) and (max-width: 1279.98px) {
  .cbanner__content { padding: 4rem 2.5rem; }
}

/* 回退：不支持容器查询的浏览器按视口判断 */
@supports not (container-type: inline-size) {
  @media (max-width: 767px) {
    .cbanner__inner,
    .cbanner--reverse .cbanner__inner { flex-direction: column; }
    .cbanner__media { width: 100%; flex: none; }
    .cbanner__content { flex: none; padding: 1.5rem 1rem; }
    .cbanner__button { width: 100%; }
  }
}