/* =============================================================
   contact.html 专属样式 —— 联系我们
   骨架：图片背景首屏 / 四张大卡 / 左文右图来访说明 /
         留言入口横带 / 城市链接网格
   ============================================================= */

/* ---------- 1. 图片首屏 ---------- */
.ct-hero{
  position:relative;min-height:460px;
  display:flex;align-items:center;
  padding:calc(var(--topbar-h) + var(--header-h) + 60px) 0 80px;
  color:#EFE9DC;overflow:hidden;
}
.ct-hero-bg{
  position:absolute;inset:0;z-index:-2;
  background:url("../images/banner-contact.jpg") center/cover no-repeat;
  transform:scale(1.04);
}
.ct-hero-overlay{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(42,38,32,.94) 10%,rgba(42,38,32,.6) 60%,rgba(42,38,32,.42) 100%);
}
.ct-hero-title{
  font-size:clamp(32px,4.4vw,52px);line-height:1.3;margin:18px 0 20px;
  color:#F5EFE2;letter-spacing:.03em;
}
.ct-hero-sub{font-size:16px;color:#C9C1B2;max-width:560px;line-height:1.95}

/* 深色首屏面包屑 */
.ct-crumb-home{color:#D8D2C6}
.ct-crumb-home:hover{color:#fff}
.ct-crumb-sep{color:#8F8677}
.ct-crumb-cur{color:#EFE9DC}

/* ---------- 2. 联系大卡 ---------- */
.ct-card-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.ct-card{
  background:var(--paper);border:1px solid var(--line);
  border-top:3px solid var(--earth);
  border-radius:var(--radius);padding:30px 26px;
  display:flex;flex-direction:column;gap:8px;
  transition:transform .35s ease,box-shadow .35s ease;
}
a.ct-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.ct-card-icon{
  width:46px;height:46px;border-radius:50%;
  background:rgba(174,135,73,.12);color:var(--earth-deep);
  display:flex;align-items:center;justify-content:center;margin-bottom:10px;
}
.ct-card-icon svg{width:22px;height:22px}
.ct-card h3{font-size:15px;letter-spacing:.14em;color:var(--ink-soft)}
.ct-card-main{
  font-family:var(--font-serif);font-size:22px;font-weight:700;
  color:var(--ink);line-height:1.4;
}
.ct-card-sub{font-size:12.5px;color:var(--ink-faint);line-height:1.8}

/* ---------- 3. 来访说明 ---------- */
.visit-wrap{
  display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;
}
.visit-list{margin-top:26px;display:flex;flex-direction:column;gap:0}
.visit-item{
  display:grid;grid-template-columns:110px 1fr;gap:18px;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.visit-k{font-size:14px;font-weight:700;color:var(--earth-deep)}
.visit-v{font-size:14px;color:var(--ink-soft);line-height:1.85}
.visit-v a{color:var(--earth-deep);border-bottom:1px dashed rgba(142,107,54,.5)}
.visit-figure{margin:0}
.visit-figure img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow)}
.visit-figure figcaption{margin-top:10px;font-size:13px;color:var(--ink-faint)}

/* ---------- 4. 留言入口带 ---------- */
.msg-band{
  background:var(--dark);border-radius:var(--radius);
  padding:44px 48px;display:flex;justify-content:space-between;
  align-items:center;gap:30px;flex-wrap:wrap;
}
.msg-band-copy h2{color:#EFE9DC;font-size:26px;margin:8px 0 10px}
.msg-band-copy p{color:#A49C8C;font-size:14.5px;line-height:1.9;max-width:560px}

/* ---------- 5. 城市链接 ---------- */
.city-link-grid{
  display:grid;grid-template-columns:repeat(8,1fr);gap:12px;
}
.city-link-grid a{
  text-align:center;padding:12px 8px;font-size:13.5px;
  border:1px solid var(--line);border-radius:var(--radius);
  color:var(--ink-soft);background:var(--paper);
  transition:all .25s ease;
}
.city-link-grid a:hover{border-color:var(--earth);color:var(--earth-deep);background:rgba(174,135,73,.06)}

/* ---------- 6. FAQ 引导行 ---------- */
.faq-row{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  flex-wrap:wrap;
}
.faq-row p{font-size:15px;color:var(--ink-soft)}
.faq-row-links{display:flex;gap:10px}
.faq-row-links a{
  font-size:13.5px;border:1px solid var(--line-strong);
  padding:8px 18px;border-radius:20px;transition:all .25s ease;
}
.faq-row-links a:hover{border-color:var(--earth);color:var(--earth-deep)}

/* ---------- 响应式 ---------- */
@media (max-width:991px){
  .ct-card-grid{grid-template-columns:1fr 1fr}
  .visit-wrap{grid-template-columns:1fr}
  .city-link-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:640px){
  .ct-card-grid{grid-template-columns:1fr}
  .city-link-grid{grid-template-columns:repeat(2,1fr)}
  .msg-band{padding:30px 24px}
  .visit-item{grid-template-columns:1fr;gap:4px}
}