/* ============================================================
   星悦医疗 · 联系我们（contact.css）
   页头主张 + 发丝线联系方式网格 + 对接流程 + 留言表单 + 地图 + 渠道 + 售后
   ============================================================ */

/* ---------------- 页头 ---------------- */
.contact-hero{min-height:clamp(360px,44vh,480px);display:flex;align-items:center}
/* 页头配图：画面左侧是明亮的浅色墙面与地面，白字直接压上去对比度不足，
   因此在左侧加一道由深到透的横向暗罩，右侧保留图片细节 */
.contact-hero > img{opacity:.85;object-position:center 42%}
.contact-hero::after{
  background:
    linear-gradient(90deg,rgba(9,55,68,.80) 0%,rgba(9,55,68,.58) 34%,rgba(10,68,83,.22) 68%,rgba(10,68,83,.06) 100%),
    linear-gradient(180deg,rgba(9,55,68,.10),rgba(10,68,83,.26));
}
.contact-hero .page-hero-inner{width:100%;padding:clamp(78px,9.5vw,124px) 0 clamp(58px,7vw,92px)}
.contact-hero h1{max-width:22em}
.contact-hero p{max-width:680px}

/* ---------------- 联系方式总览 ---------------- */
.contact-grid{grid-template-columns:repeat(3,1fr)}
.contact-cell{
  padding:clamp(26px,2.6vw,38px) clamp(22px,2.2vw,32px);
  display:flex;flex-direction:column;gap:14px;transition:background .3s ease;
}
.contact-cell:hover{background:#FBFDFE}
.contact-cell > svg{width:26px;height:26px;color:var(--primary)}
.contact-cell .label{font-size:var(--fs-xs);letter-spacing:.22em;color:var(--muted)}
.contact-cell .value{
  font-size:16px;font-weight:600;color:var(--ink);letter-spacing:.03em;line-height:1.6;
  text-decoration:none;transition:color var(--dur-fast) ease;
}
a.value:hover{color:var(--primary)}
.contact-cell .note{font-size:var(--fs-small);color:var(--muted);line-height:1.8}

/* 服务时间横条 */
.hours{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:clamp(16px,2.4vw,44px);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:24px 0;margin-top:var(--gap-md);
}
.hours .eyebrow{flex:0 0 auto}
.hours-list{display:flex;flex-wrap:wrap;gap:clamp(16px,2.6vw,50px);flex:1 1 auto}
.hours-list span{
  display:inline-flex;align-items:baseline;gap:10px;
  font-size:var(--fs-small);color:var(--text-body);
}
.hours-list span::before{content:"";width:14px;height:1px;background:var(--primary);flex:0 0 auto;transform:translateY(-4px)}
.hours-list b{color:var(--ink);font-weight:600;margin-right:2px}

.contact-note{font-size:var(--fs-xs);color:#9AA8AE;margin-top:18px;letter-spacing:.04em;line-height:1.8}

/* ---------------- 咨询与演示对接 ---------------- */
.consult{display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(30px,4.4vw,70px)}
.consult h3,.steps h3{font-size:var(--fs-h3);margin-bottom:20px}

.who-list li{
  display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--line-soft);
  font-size:14.5px;color:#55666E;line-height:1.8;
}
.who-list li:first-child{padding-top:0}
.who-list li::before{content:"";width:6px;height:6px;background:var(--primary);flex:0 0 auto;margin-top:12px}

.steps-list{counter-reset:s}
.steps-list li{position:relative;padding:16px 0 16px 54px;border-bottom:1px solid var(--line-soft)}
.steps-list li:first-child{padding-top:2px}
.steps-list li::before{
  counter-increment:s;content:"0" counter(s);
  position:absolute;left:0;top:19px;font-size:13px;font-weight:700;color:var(--primary);letter-spacing:.12em;
}
.steps-list li:first-child::before{top:5px}
.steps-list b{display:block;font-size:15px;color:var(--ink);margin-bottom:5px;letter-spacing:.03em}
.steps-list span{font-size:14px;color:var(--muted);line-height:1.8}

.prep{margin-top:clamp(32px,4vw,56px);border-top:1px solid var(--border);padding-top:26px}
.prep .eyebrow{display:block;margin-bottom:20px}
.prep-list{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.2vw,36px)}
.prep-list span{font-size:14.5px;color:#55666E;line-height:1.8;padding-left:16px;border-left:2px solid var(--line)}

/* ---------------- 在线留言表单 ---------------- */
.message-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(32px,4.6vw,74px);align-items:start}
/* 六个字段排成两列，短字段不必各占一整行 */
.form{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 18px}
.form > .consent,.form > .form-foot,.form > .form-msg{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:9px}
.field label{font-size:var(--fs-small);font-weight:600;color:var(--ink);letter-spacing:.05em}
.field label em{font-style:normal;font-size:var(--fs-xs);font-weight:400;color:var(--muted);margin-left:8px}
.field input,.field textarea{
  width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  font-family:inherit;font-size:var(--fs-body);color:var(--ink);letter-spacing:var(--ls-body);
  transition:border-color var(--dur-fast) ease,box-shadow var(--dur-fast) ease;
}
.field textarea{min-height:134px;resize:vertical;line-height:1.8}
.field input::placeholder,.field textarea::placeholder{color:#A6B3B8}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(14,90,110,.1)}
.form-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:4px}
.form-tip{font-size:var(--fs-xs);color:var(--muted)}

/* 提交结果提示：原为一行绿色小字，改为带底色的提示块，并区分成功/未送达 */
.form-msg{display:none}
.form-msg.is-on{
  display:block;margin-top:4px;padding:14px 16px;line-height:1.85;
  font-size:var(--fs-small);color:var(--ink);font-weight:400;
  background:var(--primary-tint);border:1px solid var(--line);border-left:3px solid var(--primary);
}
.form-msg b{display:block;margin-bottom:5px;font-weight:600;color:var(--primary)}
.form-msg.is-error{background:#FFF7ED;border-left-color:#C2410C}
.form-msg.is-error b{color:#B4470E}

/* 必填标记与个人信息同意 */
.field label .req{color:#C2410C;margin-left:4px;font-weight:400}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-xs);color:#55666E;line-height:1.8}
.consent input{width:15px;height:15px;margin-top:4px;flex:0 0 auto;accent-color:var(--primary);padding:0}
.consent a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.field-error{border-color:#C2410C !important;box-shadow:0 0 0 3px rgba(194,65,12,.1) !important}

.message-aside{display:flex;flex-direction:column;gap:clamp(24px,2.8vw,38px)}
.message-aside h3{font-size:var(--fs-card);letter-spacing:.04em;margin-bottom:16px}
.message-aside p{font-size:14.5px;color:#55666E;line-height:1.95}

/* ---------------- 地图位置 ---------------- */
.map-grid{display:grid;grid-template-columns:.95fr 1.15fr;gap:clamp(32px,4.6vw,70px);align-items:start}
.map-grid h3{font-size:var(--fs-h3);margin-bottom:20px}
.addr{
  display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink);font-weight:600;
  letter-spacing:.03em;line-height:1.75;padding-bottom:20px;border-bottom:1px solid var(--border);
}
.addr svg{width:18px;height:18px;color:var(--primary);flex:0 0 auto;margin-top:5px}
.map-grid p{font-size:14.5px;color:#55666E;line-height:1.95}

.map-box{
  position:relative;aspect-ratio:16/10;border:1px solid var(--border);border-radius:var(--radius);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;
  text-align:center;padding:34px;
  background:
    repeating-linear-gradient(0deg,var(--line-soft) 0 1px,transparent 1px 48px),
    repeating-linear-gradient(90deg,var(--line-soft) 0 1px,transparent 1px 48px),
    #F8FAFB;
}
.map-box svg{width:34px;height:34px;color:var(--primary)}
.map-box b{font-size:15px;color:var(--ink);font-weight:600;letter-spacing:.05em}
.map-box span{font-size:var(--fs-small);color:var(--muted);line-height:1.8;max-width:300px}
.map-box--link{text-decoration:none;transition:border-color .22s ease,background-color .22s ease}
.map-box--link:hover{border-color:var(--primary);background-color:#F2F9FB}

/* ---------------- 渠道 / 售后（发丝线三格） ---------------- */
.channel-grid,.support-grid{grid-template-columns:repeat(3,1fr)}
.channel-cell,.support-cell{padding:clamp(26px,2.6vw,38px) clamp(22px,2.2vw,32px);display:flex;flex-direction:column}
.channel-cell h3,.support-cell h3{
  display:flex;align-items:center;gap:11px;font-size:var(--fs-card);letter-spacing:.04em;margin-bottom:18px;
}
.channel-cell h3 svg,.support-cell h3 svg{width:22px;height:22px;color:var(--primary);flex:0 0 auto}
.cell-list li{
  position:relative;padding:11px 0 11px 20px;border-top:1px solid var(--line-soft);
  font-size:14.5px;color:#55666E;line-height:1.8;
}
.cell-list li:first-child{border-top:0;padding-top:2px}
.cell-list li::before{content:"";position:absolute;left:0;top:20px;width:8px;height:1px;background:var(--primary)}
.cell-list li:first-child::before{top:11px}
.cell-foot{margin-top:18px;font-size:var(--fs-xs);color:var(--muted);line-height:1.85}
.channel-cell .link-arrow{margin-top:auto;padding-top:22px}

/* ---------------- 响应式 ---------------- */
@media (max-width:1024px){
  .contact-grid{grid-template-columns:repeat(2,1fr)}
  .consult,.message-grid,.map-grid{grid-template-columns:1fr}
  .channel-grid,.support-grid{grid-template-columns:1fr}
  .prep-list{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .contact-grid{grid-template-columns:1fr}
  .prep-list{grid-template-columns:1fr}
  .hours-list{flex-direction:column;gap:12px}
  .map-box{aspect-ratio:4/3}
  .form{grid-template-columns:1fr}
  .form-foot .btn{width:100%}
}