/* ==========================================================================
   Widget 08 — Page Head（内页页头）
   所有内页共用：地点列表 / 地点单页 / 菜单 / FAQ / 图库 / 活动 / 联系。
   比首页 Hero 矮，结构一样，所以能复用同一套遮罩和排版逻辑。
   控件：面包屑开关 / 小标题 / 标题 / 导语 / 背景图 / 遮罩浓度 / 高度 /
        对齐(左/中) / 按钮×2
   ========================================================================== */

.hpb-pagehead {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(400px, 58svh, 620px);
  padding-top: calc(var(--hpb-header-h) + 4rem);
  padding-bottom: clamp(3rem, 6vh, 4.5rem);
  overflow: hidden;
  isolation: isolate;
}

.hpb-pagehead__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 50%;
  filter: saturate(0.82) brightness(0.72);
}

.hpb-pagehead__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top,   rgba(15, 13, 10, 0.95) 0%, rgba(15, 13, 10, 0.55) 42%, rgba(15, 13, 10, 0.25) 75%),
    linear-gradient(to right, rgba(15, 13, 10, 0.85) 0%, rgba(15, 13, 10, 0.35) 55%, transparent 88%);
}

.hpb-pagehead__inner { width: 100%; max-width: 46rem; }

/* 面包屑 */
.hpb-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
  font-size: var(--hpb-fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hpb-text-faint);
}
.hpb-crumbs a { transition: color var(--hpb-dur) var(--hpb-ease); }
.hpb-crumbs a:hover { color: var(--hpb-champagne); }
.hpb-crumbs span[aria-current] { color: var(--hpb-brass); }
.hpb-crumbs li { display: flex; align-items: center; gap: 0.6rem; }
.hpb-crumbs li + li::before { content: "/"; color: var(--hpb-brass-dim); }

.hpb-pagehead__title { font-size: clamp(2.6rem, 6vw, 4.5rem); margin-top: 1.25rem; }
.hpb-pagehead__title em { font-style: italic; color: var(--hpb-champagne); }

.hpb-pagehead__lead { margin-top: 1.5rem; max-width: 46ch; }

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

/* 一行关键信息，压在页头底部（地点单页用：起价 / 时长 / 覆盖城市） */
.hpb-pagehead__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hpb-line);
}
.hpb-fact__label {
  display: block;
  font-size: var(--hpb-fs-2xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hpb-text-faint);
  margin-bottom: 0.35rem;
}
.hpb-fact__val {
  font-family: var(--hpb-font-display);
  font-variant-numeric: lining-nums;
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--hpb-champagne);
  line-height: 1.2;
}

@media (max-width: 700px) {
  .hpb-pagehead { min-height: 60svh; }
  .hpb-pagehead__facts { gap: 1.5rem 2rem; }
}