/* ==========================================================================
   联系页 —— 联系信息 + 扫码 + 地图

   版式（2026-10-13 第 34 轮重做）
     左栏 = 4 张信息卡（带图标、值可点）+ 扫码块（**仅当地图占了右栏**）
     右栏 = 地图卡（sticky）；站点没配地图时右栏改放扫码；都没有则整页单栏

   为什么右栏优先给地图：地图是「截图 + 链接」的视觉块，放窄栏最合适；
   两张二维码卡本来就是竖向的，进右栏也会被压成横向紧凑卡，不显空。
   —— 这样任何配置组合下两栏都有内容，不会一边满一边空。

   ⚠️ 类名是门禁断言的**结构契约**（`.qr-block` ×1 / `.qr-card` ×2 /
      `.map-block` 有图有链接时 ×1，见 verify_contact_qr.py、verify_round25.py），
      重排时别改名。
   只用逻辑属性 —— 阿语 RTL 下栅格列与内边距会自动镜像。
   ========================================================================== */

.contact-layout {
  display: grid;
  gap: 24px;
  /* 信息列给宽些：里面是文字，太窄会频繁折行 */
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: start;
}

/* 地图、扫码都没有 → 整页单栏（信息卡自己会横向铺开） */
.contact-layout--solo { grid-template-columns: minmax(0, 1fr); }

.contact-layout__main {
  /* 栅格子项默认 min-width:auto —— 不加这条，长地址会把列宽顶破 */
  min-inline-size: 0;
  display: grid;
  gap: 24px;
}

.contact-layout__aside {
  min-inline-size: 0;
  /* 左栏比右栏长时地图跟着滚，视线不用来回找 */
  position: sticky;
  inset-block-start: calc(var(--header-h) + 16px);
}

@media (max-width: 1000px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .contact-layout__aside { position: static; inset-block-start: auto; }
}

/* ---- 图标（front/_icons.html 的内联 SVG）---------------------------------
   ⚠️ `.ico` 的**基础规则已上移到 03-components.css**（第 35 轮）——
      因为页头也用同一套图标，而它是全站共用组件，不属于本页。
      这里只留本页专属的尺寸覆写。 */
.card__icon .ico { inline-size: 22px; block-size: 22px; }

/* 卡片里的值现在是链接（打电话 / 发邮件 / 开官网），
   不加粗会跟正文的弱化灰混成一片，客户看不出能点 */
.card__text a { font-weight: 600; }

/* ==========================================================================
   扫码直达（WhatsApp / 微信）
   背景（业主 2026-10-12）：海外客户常用 WhatsApp、国内用微信，
   光给号码不够直观，放二维码让客户「扫一下就加上」。
   两张码图由后台上传，可能为空 —— 空则整块不渲染（模板层判空）。
   ========================================================================== */
.qr-block {
  padding-block: 24px 26px;
  padding-inline: 18px;
  border-radius: 16px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
}

.qr-block__head {
  text-align: center;
  margin-block-end: 24px;
}

.qr-block__title {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--text);
}

.qr-block__sub {
  margin: 8px auto 0;
  max-inline-size: 56ch;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--ink-3);
}

.qr-block__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* ---- 单张二维码卡 ---- */
.qr-card {
  margin: 0;
  inline-size: 220px;
  max-inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  background: var(--bg);
  border: 1px solid var(--line);
}

/* 二维码图片外层：白底 + 固定方框，保证任何底色下都清晰可扫 */
.qr-card__imgwrap {
  display: block;
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  padding: 8px;
  border-radius: 10px;
  background: #fff;                 /* 二维码必须贴白底：透明 PNG 压浅灰会看错定位角 */
  border: 1px solid var(--line);
  line-height: 0;
}

a.qr-card__imgwrap {
  transition: transform .15s ease, box-shadow .15s ease;
}

a.qr-card__imgwrap:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

a.qr-card__imgwrap:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.qr-card__img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.qr-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.qr-card__badge {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 3px 10px;
  border-radius: 999px;
}

.qr-card__badge--wa {
  color: var(--ok);
  background: var(--wa-soft);
}

.qr-card__badge--wx {
  color: var(--ok);
  background: var(--ok-bg);
}

.qr-card__id {
  font-size: .875rem;
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
}

.qr-card__hint {
  font-size: .75rem;
  color: var(--ink-3);
}

/* 阿语等 RTL 下 badge / 数字仍保持可读（数字串本就不该镜像） */
[dir="rtl"] .qr-card__id {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---- 右栏里的扫码块：改成「横向紧凑卡」-------------------------------
   窄栏（约 380px）放两张 220px 竖卡会白出半屏，改成图在左、字在右的行式卡。 */
.contact-layout__aside .qr-block {
  background: var(--bg);            /* 跟地图卡统一成「白卡」，右栏观感一致 */
}

.contact-layout__aside .qr-block__head {
  text-align: start;
  margin-block-end: 14px;
}

.contact-layout__aside .qr-block__list {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 12px;
}

.contact-layout__aside .qr-card {
  inline-size: 100%;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 12px;
}

.contact-layout__aside .qr-card__imgwrap {
  inline-size: 104px;
  flex: 0 0 104px;
  margin-inline: 0;                 /* 覆盖窄屏那条 margin-inline:auto，否则行内被撑开 */
}

.contact-layout__aside .qr-card__body {
  align-items: flex-start;
  text-align: start;
  gap: 4px;
}

/* 窄栏里省掉重复的扫码提示 —— 块标题下的说明已经讲过了 */
.contact-layout__aside .qr-card__hint { display: none; }

@media (max-width: 480px) {
  .qr-block { padding-inline: 14px; }

  .qr-card { inline-size: 100%; }

  .qr-card__imgwrap { max-inline-size: 220px; margin-inline: auto; }

  /* 右栏紧凑卡在窄屏仍保持横向：图片缩到 84px 给文字让位 */
  .contact-layout__aside .qr-card__imgwrap {
    inline-size: 84px;
    flex: 0 0 84px;
    max-inline-size: 84px;
    margin-inline: 0;
  }
}

/* ==========================================================================
   联系页 · 地图区块（2026-10-12 第 25 轮新增，第 34 轮改版式）

   用「后台传的截图 + 可点链接」，而不是嵌入在线地图：
   Google Maps 国内不可达、高德/百度国外体验差，第三方脚本还拖慢首屏。
   整块在「既没图也没链接」时不渲染（模板层判空），所以这里不用管空态。
   ========================================================================== */
.map-block {
  padding: 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.map-block__head { margin-block-end: 14px; }
.map-block__title { margin: 0 0 4px; font-size: 1.0625rem; }
.map-block__sub { margin: 0; font-size: .8125rem; color: var(--ink-3); }

.map-block__figure { margin: 0; }
.map-block__link { display: block; }

.map-block__img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 10;
  max-block-size: 320px;
  object-fit: cover;               /* 截图比例五花八门，裁边比把右栏撑长好 */
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  transition: border-color .15s ease;
}
.map-block__link:hover .map-block__img { border-color: var(--primary); }
.map-block__link:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* 只填了地图链接、还没传截图时的占位（别让右栏塌成一条缝） */
.map-block__ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 18px;
  aspect-ratio: 16 / 10;
  max-block-size: 320px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--ink-3);
  text-align: center;
}
.map-block__ph .ico { inline-size: 28px; block-size: 28px; color: var(--primary); }
.map-block__ph-text { font-size: .8125rem; line-height: 1.5; }

.map-block__cap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-block-start: 14px;
  font-size: .875rem;
  color: var(--ink-2);
}
.map-block__addr { min-inline-size: 0; }

/* 「打开地图」做成按钮：这是右栏唯一的动作，得看得见 */
.map-block__open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 触控目标 ≥ 44px（移动端拇指点得着） */
  min-block-size: var(--tap-min);
  padding-inline: 16px;
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary-hover);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.map-block__open:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-accent);
}
.map-block__open:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }