/* ==========================================================
   联系我们页（/contact.php）页面专属样式
   ----------------------------------------------------------
   · 作用域：<main class="contact-page">，由 contact.php 的 $mainClass 注入
   · ⚠ 本文件**不修改任何全局规则**：所有选择器都以 .contact-page 开头，
       不触碰 :root / body / .container / .header / .footer，
       其他页面也不会加载它（仅在 contact.php 的 $extraCss 里引入）
   · ⚠ 颜色一律**复用既有 CSS 变量**（取值由主题层 theme-darkgold 决定），
       本文件不新增任何色值 ⇒ 视觉体系与全站保持一致
   · ⚠ .contact-grid / .contact-item / .contact-icon / .contact-form /
       .gallery-grid / .gallery-card / .form-* 等类被全站与 style.css 共用，
       本文件一律**不覆盖**它们；本页改用全新的 .ct-* 类，互不干扰。

   2026-09-19 前台视觉升级（本轮）：
     ① Hero 改为与 /products.php、/news.php 一致的高级企业技术官网 Hero
        （面包屑 + eyebrow + 主标题品牌金渐变 + 引导语，深炭黑底 + 充足留白）
     ② 环境与设施画廊卡片化：细金线、低透明度边框、无玻璃拟态
     ③ 地图区块：**保留地图功能与失败降级逻辑**，降级底色由蓝灰 slate
        改为品牌炭黑（去 blue），外链按钮沿用品牌金
     ④ 联系方式：6 项信息卡片化（细金线 + 低透明度边框 + 暗金图标），
        不使用玻璃拟态、不使用大面积金色背景
     ⑤ 在线咨询表单区：炭黑卡片 + 金色 hairline，表单控件沿用全站样式
     ⛔ 全程不改动任何数据读取 / 表单提交接口 / 路由 / 后台逻辑
   ========================================================== */

/* ==========================================================
   C1  Hero —— 高级企业技术官网风格
   ========================================================== */
.contact-page .ct-hero {
  position: relative;
  text-align: left;
  padding-top: var(--space-16);
  padding-bottom: var(--space-10);
}
/* 极克制的品牌金径向晕 + 60px 网格（与 .page-hero 同规格，错开一倍避免摩尔纹） */
.contact-page .ct-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 78% 12%, rgba(var(--brand-500-rgb), 0.10) 0%, transparent 56%),
    radial-gradient(ellipse at 8% 96%, rgba(var(--brand-400-rgb), 0.05) 0%, transparent 54%);
}
.contact-page .ct-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-1) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-1) 1px, transparent 1px);
  background-size: 120px 120px;
  mask-image: radial-gradient(ellipse at 70% 40%, black 6%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, black 6%, transparent 72%);
}
.contact-page .ct-hero > .container {
  position: relative;
  z-index: 1;
}

/* 面包屑 */
.contact-page .ct-crumb {
  margin-bottom: var(--space-6);
  font-size: var(--fs-sm);
  color: var(--tx-muted);
}
.contact-page .ct-crumb a {
  color: var(--tx-muted);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.contact-page .ct-crumb a:hover {
  color: var(--brand-500);
}
.contact-page .ct-crumb .sep {
  margin: 0 10px;
  opacity: 0.45;
}

/* eyebrow —— 复用全站 .section-eyebrow 造型，本页仅控制间距 */
.contact-page .ct-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-5);
}

/* 主标题：品牌金渐变 */
.contact-page .ct-title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(32px, 4.4vw, var(--fs-5xl));
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--text-1);
}
.contact-page .ct-title-accent {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 引导语 */
.contact-page .ct-lead {
  max-width: 720px;
  margin: 0;
  font-size: var(--fs-lg);
  line-height: 1.7;
  color: var(--tx-lead);
}
.contact-page .ct-lead-sub {
  max-width: 720px;
  margin: var(--space-3) 0 0;
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--tx-muted);
}

/* Hero 下方一条渐隐金色 hairline（分隔 + 高级感） */
.contact-page .ct-hero-rule {
  height: 1px;
  margin-top: var(--space-12);
  background: var(--grad-hairline);
  border: 0;
}

/* ==========================================================
   C2  区块标题（复用全站 .section-head 语义，收紧留白）
   ========================================================== */
.contact-page .ct-sec-head {
  text-align: left;
  margin-bottom: var(--space-10);
}
.contact-page .ct-sec-title {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, var(--fs-2xl));
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-1);
}
.contact-page .ct-sec-desc {
  max-width: 760px;
  margin: var(--space-3) 0 0;
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--tx-muted);
}

/* ==========================================================
   C3  环境与设施画廊卡片
   ========================================================== */
.contact-page .ct-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
/* 按实际图片数量自适应列数，避免"3 列放 2 张留空洞" */
.contact-page .ct-gallery-grid[data-count="1"] {
  grid-template-columns: minmax(0, 1fr);
}
.contact-page .ct-gallery-grid[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.contact-page .ct-gallery-card {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--grad-card);
  box-shadow: var(--shadow-card);
  transition: border-color var(--t-base) var(--ease),
    transform var(--t-base) var(--ease);
}
.contact-page .ct-gallery-card:hover {
  border-color: var(--line-card-hi);
  transform: translateY(-4px);
}
.contact-page .ct-gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow) var(--ease);
}
.contact-page .ct-gallery-card:hover img {
  transform: scale(1.04);
}
/* 标签：暗色半透明底 + 金色小圆点（不发光） */
.contact-page .ct-gallery-tag {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(var(--mask-1), 0.62);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  color: var(--text-1);
}
.contact-page .ct-gallery-tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-500);
}

/* ==========================================================
   C4  地图区块（保留功能，仅收敛外框视觉）
   ========================================================== */
.contact-page .ct-map-frame {
  position: relative;
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--grad-card);
  box-shadow: var(--shadow-card);
}
/* 地图容器（#hrwMap）自身的内联样式由 PHP / amap.js 控制：
   - 降级态：contact.php 内联（本轮已由 slate 蓝灰改为品牌炭黑）
   - 成功态：amap.js 覆写为 background:none + var(--shadow-xl)
   本文件只补圆角一致性，保证两种状态外框都贴合 .ct-map-frame */
.contact-page .ct-map-frame #hrwMap {
  border-radius: var(--r-lg);
}

/* ==========================================================
   C5  联系方式 —— 卡片化（细金线 + 低透明度边框）
   ========================================================== */
.contact-page .ct-contact-section {
  position: relative;
  background: var(--bg-dark);
}
.contact-page .ct-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-12);
  align-items: start;
}

/* 信息卡片列 */
.contact-page .ct-info-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.contact-page .ct-info-card {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--grad-card);
  box-shadow: var(--shadow-card);
  transition: border-color var(--t-base) var(--ease);
}
.contact-page .ct-info-card:hover {
  border-color: var(--line-card-hi);
}
/* 图标：暗金透明底 + 细金边，无发光、无大面积金色 */
.contact-page .ct-info-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: rgba(var(--brand-500-rgb), 0.06);
  color: var(--brand-500);
}
.contact-page .ct-info-body {
  min-width: 0;
}
.contact-page .ct-info-label {
  margin: 0 0 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-1);
}
.contact-page .ct-info-line {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--tx-body);
  word-break: break-word;
}
.contact-page .ct-info-line + .ct-info-line {
  margin-top: 2px;
}
.contact-page .ct-info-line a {
  color: var(--tx-body);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.contact-page .ct-info-line a:hover {
  color: var(--brand-500);
}

/* ==========================================================
   C6  在线咨询表单区（外框收敛，表单控件沿用全站样式）
   ========================================================== */
.contact-page .ct-form-card {
  padding: var(--space-8);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--grad-card);
  box-shadow: var(--shadow-card);
}
.contact-page .ct-form-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-1);
}
.contact-page .ct-form-desc {
  margin: 0 0 var(--space-6);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--tx-muted);
}

/* ==========================================================
   C7  锚点偏移修正
   /contact.php#contact-form 会被 header / footer 的 CTA 调用，
   而全站没有 scroll-margin，跳转后 72px 吸顶 header 会盖住标题。
   仅在本页作用域内补上（不动全局）。
   ========================================================== */
.contact-page #contact-form {
  scroll-margin-top: calc(var(--header-h) + var(--space-6));
}

/* ==========================================================
   C8  响应式
   ========================================================== */
@media (max-width: 1280px) {
  .contact-page .ct-contact-grid {
    gap: var(--space-8);
  }
}

@media (max-width: 1024px) {
  .contact-page .ct-contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .contact-page .ct-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contact-page .ct-gallery-grid[data-count="1"] {
    grid-template-columns: minmax(0, 1fr);
  }
  .contact-page .ct-gallery-grid[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .contact-page .ct-hero {
    padding-top: var(--space-10);
    padding-bottom: var(--space-8);
  }
  .contact-page .ct-hero-rule {
    margin-top: var(--space-8);
  }
  .contact-page .ct-sec-head {
    margin-bottom: var(--space-8);
  }
  /* 单列展示 —— 不产生横向滚动 */
  .contact-page .ct-gallery-grid,
  .contact-page .ct-gallery-grid[data-count="1"],
  .contact-page .ct-gallery-grid[data-count="2"],
  .contact-page .ct-gallery-grid[data-count="3"] {
    grid-template-columns: minmax(0, 1fr);
  }
  .contact-page .ct-info-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .contact-page .ct-info-card {
    padding: var(--space-5);
  }
  .contact-page .ct-form-card {
    padding: var(--space-6);
  }
  .contact-page .ct-map-frame {
    padding: 0;
    border-radius: var(--r-lg);
  }
  .contact-page .ct-map-frame #hrwMap {
    border-radius: var(--r-lg);
  }
}

@media (max-width: 480px) {
  .contact-page .ct-hero::after {
    background-size: 80px 80px;
  }
  .contact-page .ct-info-icon {
    width: 40px;
    height: 40px;
  }
}