/* ==========================================================================
   Widget 09 — Locations（地点列表）
   ★ 不用美国地图：客户只有两三个州，全美地图会空得很尴尬。
     改成大卡片网格 —— 2~3 张排一行正好撑满，以后加到十几个也不塌。
   数据源是 location CPT，widget 里选"全部 / 指定几个"，卡片内容自动来。
   控件：数据源 / 排序 / 数量 / 列数(桌面/平板/手机) / 布局(网格|列表) /
        是否显示城市标签 / 是否显示电话 / 卡片比例 / 按钮文字
   ========================================================================== */

.hpb-loc__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--hpb-line);
}

/* 覆盖统计：3 个州 / 12 座城市 —— 比一张空地图有信息量 */
.hpb-loc__stats { display: flex; gap: 2.5rem; }
.hpb-loc__stat b {
  display: block;
  font-family: var(--hpb-font-display);
  font-variant-numeric: lining-nums;
  font-size: 2.4rem;
  font-weight: 500;
  color: var(--hpb-champagne);
  line-height: 1;
}
.hpb-loc__stat span {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--hpb-fs-2xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hpb-text-faint);
}

/* --------------------------------------------------------------------------
   卡片网格
   -------------------------------------------------------------------------- */
/* ★ 列数写在 CSS 里，不要用 HTML 行内 style —— 行内优先级高于媒体查询，
   会把文件末尾的响应式列数全盖掉。 */
.hpb-loccards {
  --hpb-cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--hpb-cols), 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}
.hpb-loccards--two { --hpb-cols: 2; }

.hpb-loccard {
  display: flex;
  flex-direction: column;
  background: var(--hpb-surface);
  border: 1px solid var(--hpb-line);
  transition: border-color var(--hpb-dur) var(--hpb-ease),
              transform var(--hpb-dur) var(--hpb-ease);
}
.hpb-loccard:hover { border-color: var(--hpb-line-strong); transform: translateY(-4px); }

.hpb-loccard__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.hpb-loccard__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.82) brightness(0.72);
  transition: transform 1.1s var(--hpb-ease), filter var(--hpb-dur) var(--hpb-ease);
}
.hpb-loccard:hover .hpb-loccard__media img { transform: scale(1.05); filter: saturate(1) brightness(0.9); }

/* 州名压在图上 */
.hpb-loccard__state {
  position: absolute;
  left: 0; bottom: 0;
  padding: 0.9rem 1.35rem;
  background: rgba(15, 13, 10, 0.9);
  border-top: 1px solid var(--hpb-line);
  border-right: 1px solid var(--hpb-line);
  font-family: var(--hpb-font-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--hpb-text);
  line-height: 1;
}

.hpb-loccard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.6rem 1.5rem 1.5rem;
}

/* 城市标签 */
.hpb-cities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  margin-bottom: 1.35rem;
}
.hpb-cities li {
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--hpb-line);
  font-size: var(--hpb-fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hpb-text-dim);
  transition: color var(--hpb-dur) var(--hpb-ease), border-color var(--hpb-dur) var(--hpb-ease);
}
.hpb-loccard:hover .hpb-cities li { color: var(--hpb-text); border-color: var(--hpb-line-strong); }

.hpb-loccard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.35rem;
  border-top: 1px solid var(--hpb-line-soft);
}
.hpb-loccard__phone {
  font-family: var(--hpb-font-display);
  font-variant-numeric: lining-nums;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--hpb-text-dim);
  white-space: nowrap;   /* 三栏时电话会被挤成两行 */
}
.hpb-loccard__go {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  font-size: var(--hpb-fs-2xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hpb-brass);
  white-space: nowrap;
}
/* base.css 里 svg 有 max-width:100%，在 flex 里会被压扁成一条线 */
.hpb-loccard__go svg { flex: none; width: 13px; height: 9px; }
.hpb-loccard:hover .hpb-loccard__go { color: var(--hpb-champagne); }

/* --------------------------------------------------------------------------
   没覆盖到的地区：一条安静的说明
   -------------------------------------------------------------------------- */
.hpb-loc__note {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--hpb-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.hpb-loc__note p { max-width: 52ch; color: var(--hpb-text-dim); }
.hpb-loc__note strong { color: var(--hpb-text); font-weight: 500; }

@media (max-width: 1000px) { .hpb-loccards { --hpb-cols: 2; } }
@media (max-width: 640px)  { .hpb-loccards { --hpb-cols: 1; } }