/* =====================================================================
   联系我们 · 页面独立样式 lianxi.css
   模块原创设计：超大号联系方式卡（电话卡跨两列）/ 办公环境分栏 / 到访信息行 / 深色时段带
   ===================================================================== */

/* ---------- 页面横幅 ---------- */
.banner-contact{background-image:url('../images/banner-contact.jpg')}

/* ---------- 联系方式大字卡 ---------- */
.hero-sec{background:#fff}
.hero-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hero-card{
  position:relative;border-radius:var(--radius-lg);padding:34px 30px;overflow:hidden;
  background:var(--c-ice-2);border:1px solid var(--c-line);transition:transform var(--trans),box-shadow var(--trans);
}
.hero-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.hero-card .h-ic{
  width:54px;height:54px;border-radius:14px;background:var(--c-grad);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.hero-card .h-ic svg{width:26px;height:26px;fill:#fff}
.hero-card h3{font-size:14px;color:var(--c-muted);font-weight:600;margin-bottom:8px}
.hero-card .h-val{font-size:22px;font-weight:800;color:var(--c-primary);line-height:1.35;word-break:break-all}
.hero-card .h-sub{margin-top:10px;font-size:13px;color:var(--c-text-2)}
.hero-card.phone-card{
  grid-column:span 2;background:var(--c-dark);border:none;
  background-image:radial-gradient(circle at 88% 10%,rgba(37,99,235,.4),transparent 55%);
}
.hero-card.phone-card h3{color:#9FB2D4}
.hero-card.phone-card .h-val{font-size:clamp(34px,4.5vw,52px);color:#fff;letter-spacing:1px}
.hero-card.phone-card .h-sub{color:#B9C9E6}
.hero-card.phone-card .h-ic{background:rgba(255,255,255,.14)}
.hero-card.wechat-card .h-val{font-size:20px}
.hero-card .h-val-sm{font-size:19px}

/* ---------- 办公环境 ---------- */
.office-sec{background:var(--c-ice-2)}
.office-wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
.office-media{position:relative}
.office-media img{border-radius:var(--radius-lg);aspect-ratio:4/3;object-fit:cover;box-shadow:var(--shadow-lg)}
.office-media .office-badge{
  position:absolute;left:-18px;bottom:-18px;background:#fff;border-radius:16px;padding:16px 24px;
  box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:12px;
}
.office-badge .ob-dot{width:12px;height:12px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.2)}
.office-badge b{font-size:15px;display:block}
.office-badge span{font-size:12.5px;color:var(--c-muted)}
.office-text h2{font-size:clamp(22px,2.6vw,32px);margin:10px 0 16px}
.office-text p{color:var(--c-text-2);margin-bottom:14px}

/* ---------- 到访指引 ---------- */
.visit-sec{background:#fff}
.visit-rows{max-width:860px;margin:0 auto;display:grid;gap:18px}
.visit-row{
  display:flex;gap:20px;align-items:flex-start;background:var(--c-ice-2);border-radius:var(--radius-lg);
  padding:24px 28px;border:1px solid var(--c-line);
}
.visit-row .v-ic{
  width:48px;height:48px;border-radius:12px;background:#fff;box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.visit-row .v-ic svg{width:24px;height:24px;fill:var(--c-accent)}
.visit-row h3{font-size:16.5px;margin-bottom:5px}
.visit-row p{color:var(--c-text-2);font-size:14px;line-height:1.7}

/* ---------- 咨询时段带 ---------- */
.hours-sec{background:var(--c-grad)}
.hours-wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.hours-wrap h2{color:#fff;font-size:clamp(20px,2.6vw,28px);margin-bottom:8px}
.hours-wrap p{color:#D6E2F6;font-size:15px}
.hours-times{display:flex;gap:16px;flex-wrap:wrap}
.hours-times span{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);color:#fff;
  padding:10px 20px;border-radius:999px;font-size:14px;font-weight:600;backdrop-filter:blur(4px);
}

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr 1fr}
  .hero-card.phone-card{grid-column:span 2}
  .office-wrap{grid-template-columns:1fr;gap:40px}
}
@media (max-width:640px){
  .hero-grid{grid-template-columns:1fr}
  .hero-card.phone-card{grid-column:span 1}
}