/* ==========================================================================
   Widget 06 — Callout (v2)
   v1 → v2：偏移的金色空框装饰 → 去掉；占位方块 → 真实照片满出容器。
   "图片 + 偏移边框"是 Bootstrap 模板年代的老装饰，现在看很旧。
   控件：小标题 / 标题 / 富文本 / 引言 / 按钮×2 / 图片 / 左右翻转 / 背景色
   ========================================================================== */

.hpb-callout { overflow: hidden; }

.hpb-callout__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
}

.hpb-callout--flip .hpb-callout__media { order: -1; }

.hpb-callout__title { font-size: var(--hpb-fs-h2); margin-top: 1.1rem; }
.hpb-callout__text { margin-top: 1.5rem; max-width: 44ch; }

/* 引言：细左线 + 衬线斜体，克制 */
.hpb-quote {
  margin: 2.25rem 0 0;
  padding-left: 1.5rem;
  border-left: 1px solid var(--hpb-brass);
  font-family: var(--hpb-font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.45;
  color: var(--hpb-champagne);
}

.hpb-callout__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.5rem;
}

/* --------------------------------------------------------------------------
   图片：满出右边界，做出"版心被打破"的编辑感
   -------------------------------------------------------------------------- */
.hpb-callout__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--hpb-line);
  /* 向右满出容器，一直顶到视口边缘 */
  margin-right: calc((100vw - min(100vw, var(--hpb-container))) / -2 - var(--hpb-gutter));
}
.hpb-callout--flip .hpb-callout__media {
  margin-right: 0;
  margin-left: calc((100vw - min(100vw, var(--hpb-container))) / -2 - var(--hpb-gutter));
}

.hpb-callout__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.85);
  transition: transform 1.4s var(--hpb-ease);
}
.hpb-callout__media:hover img { transform: scale(1.04); }

@media (max-width: 900px) {
  .hpb-callout__inner { grid-template-columns: 1fr; }
  .hpb-callout--flip .hpb-callout__media { order: 0; margin-left: 0; }
  .hpb-callout__media { margin-right: 0; aspect-ratio: 4 / 3; }
}