/* ==========================================================================
   香港站 · 港式排版层（region_hongkong.css）
   ------------------------------------------------------------------------------
   只在 [data-region="hongkong"] 下生效，不修改公共骨架，只覆盖：
   1) 首屏色彩：深色城市底 + 霓虹黄强调，按钮黄底深字保证对比度；
   2) 排版密度：区块间距收紧、标题粗黑、字距收紧、方角与 1px 细线；
   3) 港式信息习惯：中英并置的副标题、首屏 WhatsApp / 电话联络条、
      服务与案例清单化的边框处理。
   加载顺序在 region_zone.css、region_experience.css 之后。
   ========================================================================== */

/* ---------- 1. 首屏：深底亮色强调 ---------- */
[data-region="hongkong"] .rzx-hero,
[data-region="hongkong"] .rz-hero {
  --rz-accent: #ffc531;
  --rz-accent-2: #45e0c8;
}

[data-region="hongkong"] .rzx-title,
[data-region="hongkong"] .rz-hero-title {
  font-weight: 800;
  letter-spacing: -0.012em;
}

/* 中英并置：中文主标之下的英文副标 */
[data-region="hongkong"] .rzx-title-en {
  margin: -4px 0 0;
  max-width: 34em;
  font-size: clamp(15px, 1.55vw, 19px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--rz-hero-soft) 86%, transparent);
}

/* 首屏小标：左侧竖条，港式刊物式标签 */
[data-region="hongkong"] .rzx-kicker {
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

[data-region="hongkong"] .rzx-kicker i {
  width: 3px;
  height: 14px;
  border-radius: 0;
  background: #ffc531;
}

/* 首屏文字色：haiwai_intl.css 的 `.region-page h1…h4 { color: var(--intl-ink) }`
   与 `.rzx-claim` / `.rz-answer` 的浅底配色是按「浅色首屏」写的，放到深色首屏上
   标题会变成深墨、结论条变成深字压深底。这里逐项锚定，权重统一加 body 前缀压过 intl 层。
   首页用 rzx- 骨架，服务页与案例页用 rz- 骨架，两套都要覆盖。 */
body[data-region="hongkong"] .rzx-hero .rzx-title,
body[data-region="hongkong"] .rzx-hero h1,
body[data-region="hongkong"] .rz-hero h1,
body[data-region="hongkong"] .rz-hero .rz-hero-title {
  color: var(--rz-hero-ink);
}

body[data-region="hongkong"] .rzx-hero .rzx-lead,
body[data-region="hongkong"] .rz-hero .rz-hero-lead {
  color: #b7c2d1;
}

body[data-region="hongkong"] .rzx-kicker,
body[data-region="hongkong"] .rz-kicker {
  color: #ffc531;
  background: rgba(255, 197, 49, 0.08);
  border-color: rgba(255, 197, 49, 0.32);
}

/* 结论条：深色首屏上用暗玻璃底 + 黄色竖线，避免浅色卡片在夜里发灰 */
body[data-region="hongkong"] .rzx-claim,
body[data-region="hongkong"] .rz-answer {
  background: rgba(255, 255, 255, 0.05);
  border-left: 2px solid #ffc531;
  color: #d7dee8;
}

body[data-region="hongkong"] .rzx-claim span { color: #d7dee8; }
body[data-region="hongkong"] .rzx-claim b,
body[data-region="hongkong"] .rz-answer b { color: #ffc531; }

/* 档案面板是白底卡片，霓虹黄在上面读不出来，统计数字改用深琥珀 */
body[data-region="hongkong"] .rzx-dossier .rzx-stat b {
  color: #9a6400;
}

/* 面包屑在浅底上，港式站点习惯用更实的次级文字色，不用浅灰 */
body[data-region="hongkong"] .rz-section nav[aria-label="breadcrumb"] { color: #55606f; }
body[data-region="hongkong"] .rz-section nav[aria-label="breadcrumb"] a { color: #1b2430; }

/* 天际线母题用 slice 缩放，英文版首屏更高时 SVG 会横向多出一点；
   首屏本身已 overflow:hidden，这里在母题容器上再收一次，避免元素级溢出 */
body[data-region="hongkong"] .rzx-motif { overflow: hidden; }

/* ---------- 2. 按钮：黄底深字，深底上才是可读的高对比 ---------- */
[data-region="hongkong"] .rzx-btn--primary,
[data-region="hongkong"] .rz-btn--primary {
  color: #11151c;
  background: linear-gradient(120deg, #ffc531 0%, #ffa914 100%);
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 12px 26px -16px rgba(255, 197, 49, 0.7);
}

[data-region="hongkong"] .rzx-btn--primary:hover,
[data-region="hongkong"] .rz-btn--primary:hover {
  box-shadow: 0 16px 32px -14px rgba(255, 197, 49, 0.8);
}

/* 首屏次按钮：透明 + 细边，避免白胶囊抢主按钮 */
[data-region="hongkong"] .rzx-hero .rzx-btn:not(.rzx-btn--primary) {
  color: var(--rz-hero-ink);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.22);
}

[data-region="hongkong"] .rzx-hero .rzx-btn:not(.rzx-btn--primary):hover {
  color: #ffc531;
  border-color: rgba(255, 197, 49, 0.72);
}

/* ---------- 3. 首屏联络条：WhatsApp 与电话并排 ---------- */
[data-region="hongkong"] .rzx-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin-top: 26px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

[data-region="hongkong"] .rzx-contact-wa,
[data-region="hongkong"] .rzx-contact-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

[data-region="hongkong"] .rzx-contact-wa {
  background: #22c35e;
  color: #04130a;
}

[data-region="hongkong"] .rzx-contact-wa:hover {
  background: #2ad76a;
}

[data-region="hongkong"] .rzx-contact-tel {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--rz-hero-ink);
  font-variant-numeric: tabular-nums;
}

[data-region="hongkong"] .rzx-contact-tel:hover {
  color: #ffc531;
}

[data-region="hongkong"] .rzx-contact-wa svg,
[data-region="hongkong"] .rzx-contact-tel svg {
  width: 17px;
  height: 17px;
  flex: none;
}

[data-region="hongkong"] .rzx-contact-hours,
[data-region="hongkong"] .rzx-contact-note {
  display: inline-flex;
  align-items: center;
  padding: 11px 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  line-height: 1.4;
}

[data-region="hongkong"] .rzx-contact-hours {
  color: var(--rz-hero-soft);
}

[data-region="hongkong"] .rzx-contact-note {
  color: rgba(255, 255, 255, 0.46);
}

/* ---------- 4. 档案卡：深底上的白资料卡 + 方角细边 ---------- */
[data-region="hongkong"] .rzx-dossier {
  border-radius: 2px;
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 20px 48px -34px rgba(0, 0, 0, 0.9);
}

[data-region="hongkong"] .rzx-dossier-head {
  border-radius: 0;
}

/* ---------- 5. 区块密度：比默认更紧凑，符合港式信息密度 ---------- */
[data-region="hongkong"] .rzx-sec {
  padding: 72px 0;
}

[data-region="hongkong"] .rz-section {
  padding: 64px 0;
}

[data-region="hongkong"] .rzx-head h2,
[data-region="hongkong"] .rz-head h2,
[data-region="hongkong"] .rz-head h1 {
  letter-spacing: -0.008em;
  font-weight: 800;
}

/* 区块小标：前置短横线，港式刊物常见的「— 標題」结构 */
[data-region="hongkong"] .rzx-eyebrow,
[data-region="hongkong"] .rz-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

[data-region="hongkong"] .rzx-eyebrow::before,
[data-region="hongkong"] .rz-eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--rz-accent);
}

/* ---------- 6. 市场判断卡 ---------- */
[data-region="hongkong"] .rzx-insight {
  border-radius: 2px;
  border: 1px solid var(--rz-line);
  background: var(--rz-surface);
}

[data-region="hongkong"] .rzx-insight:hover {
  border-color: color-mix(in srgb, var(--rz-accent) 46%, transparent);
}

[data-region="hongkong"] .rzx-insight-no {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

/* ---------- 7. 服务卡：编号 + 中英并置 ---------- */
[data-region="hongkong"] .rzx-svc {
  border-radius: 2px;
  border: 1px solid var(--rz-line);
  background: var(--rz-surface);
  box-shadow: none;
}

[data-region="hongkong"] .rzx-svc:hover {
  border-color: color-mix(in srgb, var(--rz-accent) 50%, transparent);
  box-shadow: 0 14px 30px -24px rgba(13, 17, 23, 0.5);
}

[data-region="hongkong"] .rzx-svc-no {
  color: var(--rz-accent);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

[data-region="hongkong"] .rzx-svc-en {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11.5px;
}

[data-region="hongkong"] .rzx-svc-link {
  letter-spacing: 0.02em;
}

/* ---------- 8. 案例卡 ---------- */
[data-region="hongkong"] .rzx-case,
[data-region="hongkong"] .rz-case {
  border-radius: 2px;
  border: 1px solid var(--rz-line);
  background: var(--rz-surface);
}

[data-region="hongkong"] .rzx-case:hover,
[data-region="hongkong"] .rz-case:hover {
  border-color: color-mix(in srgb, var(--rz-accent) 46%, transparent);
}

[data-region="hongkong"] .rzx-chip,
[data-region="hongkong"] .rz-chip,
[data-region="hongkong"] .rzx-tag,
[data-region="hongkong"] .rz-comp-tag {
  border-radius: 2px;
  letter-spacing: 0.02em;
}

/* ---------- 9. 交付与合规：清单化细线 ---------- */
[data-region="hongkong"] .rzx-delivery-card,
[data-region="hongkong"] .rz-comp {
  border-radius: 2px;
  border-color: var(--rz-line);
}

[data-region="hongkong"] .rzx-step {
  border-radius: 2px;
}

[data-region="hongkong"] .rzx-step-no {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* ---------- 10. FAQ ---------- */
[data-region="hongkong"] .rzx-faq,
[data-region="hongkong"] .rz-faq {
  border-radius: 2px;
  border-color: var(--rz-line);
}

/* ---------- 11. 其他站点入口 ---------- */
[data-region="hongkong"] .rzx-region {
  border-radius: 2px;
}

[data-region="hongkong"] .rzx-region:hover {
  border-color: color-mix(in srgb, var(--rz-accent) 46%, transparent);
}

[data-region="hongkong"] .rzx-region-en {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
}

/* ---------- 12. 服务页与案例页（rz- 前缀）：同属港式排版 ---------- */
[data-region="hongkong"] .rz-hero {
  background: var(--rz-hero-bg);
  color: var(--rz-hero-ink);
}

[data-region="hongkong"] .rz-hero .rz-kicker,
[data-region="hongkong"] .rz-hero .rz-hero-lead {
  color: var(--rz-hero-soft);
}

[data-region="hongkong"] .rz-hero .rz-hero-title {
  color: var(--rz-hero-ink);
  font-weight: 800;
  letter-spacing: -0.012em;
}

[data-region="hongkong"] .rz-hero .rz-btn:not(.rz-btn--primary) {
  color: var(--rz-hero-ink);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 2px;
}

[data-region="hongkong"] .rz-hero .rz-btn:not(.rz-btn--primary):hover {
  color: #ffc531;
  border-color: rgba(255, 197, 49, 0.72);
}

[data-region="hongkong"] .rz-btn--primary {
  border-radius: 2px;
}

[data-region="hongkong"] .rz-profile,
[data-region="hongkong"] .rz-answer,
[data-region="hongkong"] .rz-case,
[data-region="hongkong"] .rz-comp,
[data-region="hongkong"] .rz-faq {
  border-radius: 2px;
}

/* ---------- 13. 响应式 ---------- */
@media (max-width: 1024px) {
  [data-region="hongkong"] .rzx-sec {
    padding: 60px 0;
  }

  [data-region="hongkong"] .rz-section {
    padding: 54px 0;
  }
}

@media (max-width: 760px) {
  [data-region="hongkong"] .rzx-contact {
    flex-direction: column;
    align-items: stretch;
  }

  [data-region="hongkong"] .rzx-contact-wa,
  [data-region="hongkong"] .rzx-contact-tel,
  [data-region="hongkong"] .rzx-contact-hours,
  [data-region="hongkong"] .rzx-contact-note {
    justify-content: center;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
  }

  [data-region="hongkong"] .rzx-contact-wa {
    border-top: 0;
  }

  [data-region="hongkong"] .rzx-title-en {
    font-size: 14.5px;
    line-height: 1.5;
  }

  [data-region="hongkong"] .rzx-sec {
    padding: 48px 0;
  }
}