/* ===== 联系与到访 · 页面专属样式 ===== */

.page-contact{
  position:relative;
  background:var(--bg);
  color:var(--ink);
  overflow-x:clip;
}

/* ---------- 看台栏杆：章节左缘加密刻度 ---------- */
.page-contact .spread{
  position:relative;
  padding:clamp(42px,7vw,92px) 0;
}

.page-contact .spread::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:1px;
  background:repeating-linear-gradient(180deg,var(--line-green) 0 5px,transparent 5px 13px);
  opacity:.6;
  pointer-events:none;
}

/* ---------- 面包屑 ---------- */
.page-contact .crumbs{
  padding:clamp(14px,2.6vw,26px) 0 0;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
}

.page-contact .crumbs ol{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:0 8px;
  align-items:center;
  color:var(--ink-mute);
}

.page-contact .crumbs li + li::before{
  content:"/";
  margin-right:8px;
  color:var(--line-strong);
}

.page-contact .crumbs a{
  color:var(--ink-dim);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}

.page-contact .crumbs a:hover{
  color:var(--snow);
  border-bottom-color:var(--blue);
}

.page-contact .crumbs [aria-current="page"]{
  color:var(--snow);
}

/* ---------- 首屏 ---------- */
.page-contact .contact-hero__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(24px,4vw,60px);
}

.page-contact .contact-hero__title{
  margin:10px 0 0;
  font-size:clamp(31px,7vw,66px);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.015em;
  color:var(--snow);
}

.page-contact .contact-hero__aside .lede{
  margin:0;
  max-width:34em;
}

.page-contact .contact-hero__facts{
  list-style:none;
  margin:clamp(20px,3vw,32px) 0 0;
  padding:0;
  border-top:1px solid var(--line);
}

.page-contact .contact-hero__facts li{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:4px 16px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:13px;
}

.page-contact .contact-hero__facts-k{
  color:var(--ink-mute);
  letter-spacing:.08em;
}

.page-contact .contact-hero__facts-v{
  color:var(--snow);
  letter-spacing:.02em;
}

/* ---------- 章节标题统一样式 ---------- */
.page-contact .contact-channels__title,
.page-contact .contact-feedback__title,
.page-contact .contact-visit__title,
.page-contact .contact-coop__title,
.page-contact .contact-close__title{
  margin:8px 0 0;
  font-size:clamp(25px,4.4vw,44px);
  font-weight:300;
  line-height:1.16;
  letter-spacing:-.012em;
  color:var(--snow);
}

/* ---------- 三张联系卡 ---------- */
.page-contact .contact-cards{
  margin-top:clamp(26px,4vw,48px);
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(16px,2.2vw,22px);
}

.page-contact .contact-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:clamp(24px,3vw,36px);
  border:1px solid var(--line);
  border-radius:var(--r);
  background:
    linear-gradient(155deg,var(--glass) 0%,rgba(11,46,36,.4) 55%,var(--glass-blue) 100%);
  transition:border-color .35s var(--ease),transform .35s var(--ease);
}

.page-contact .contact-card:hover,
.page-contact .contact-card:focus-within{
  border-color:var(--line-strong);
  transform:translateY(-4px);
}

.page-contact .contact-card__copy{
  position:absolute;
  top:clamp(13px,2vw,19px);
  right:clamp(13px,2vw,19px);
  z-index:2;
  opacity:.6;
  transition:opacity .3s var(--ease);
}

.page-contact .contact-card:hover .contact-card__copy,
.page-contact .contact-card__copy:focus-visible{
  opacity:1;
}

.page-contact .contact-card__label{
  margin:0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
}

.page-contact .contact-card__name{
  margin:0;
  padding-right:clamp(0px,10vw,74px);
  font-family:var(--font-mono);
  font-size:clamp(15px,1.6vw,19px);
  font-weight:700;
  line-height:1.42;
  color:var(--snow);
  word-break:break-word;
  overflow-wrap:anywhere;
}

.page-contact .contact-card__text{
  margin:0;
  max-width:34em;
  font-size:15px;
  line-height:1.78;
  color:var(--ink-dim);
}

.page-contact .contact-card__meta{
  margin:auto 0 0;
  padding-top:14px;
  border-top:1px dashed var(--line-green);
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.6;
  letter-spacing:.04em;
  color:var(--amber);
}

/* ---------- 客服场景图 ---------- */
.page-contact .contact-scene{
  margin:clamp(22px,3.6vw,44px) 0 0;
  border-radius:var(--r);
  overflow:hidden;
}

.page-contact .contact-scene img,
.page-contact .visit-photo img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
}

/* ---------- 反馈流程 ---------- */
.page-contact .feedback-jump{
  list-style:none;
  margin:clamp(18px,3vw,30px) 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.page-contact .feedback-jump a{
  display:inline-block;
  padding:7px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--ink-dim);
  text-decoration:none;
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease);
}

.page-contact .feedback-jump a:hover{
  border-color:var(--blue);
  background:var(--glass-blue);
  color:var(--snow);
}

.page-contact .feedback-track{
  list-style:none;
  position:relative;
  margin:clamp(26px,4vw,50px) 0 0;
  padding:0;
  display:grid;
  gap:clamp(22px,3.4vw,40px);
}

.page-contact .feedback-track::before{
  content:"";
  position:absolute;
  left:7px;
  top:12px;
  bottom:12px;
  width:1px;
  background:linear-gradient(180deg,var(--orange) 0%,var(--blue) 52%,rgba(31,111,235,0) 100%);
  opacity:.6;
}

.page-contact .feedback-step{
  position:relative;
  padding-left:clamp(30px,4vw,46px);
  scroll-margin-top:calc(var(--header-h) + 24px);
}

.page-contact .feedback-step__node{
  position:absolute;
  left:0;
  top:8px;
  width:15px;
  height:15px;
  border-radius:50%;
  background:var(--night);
  border:2px solid var(--orange);
  box-shadow:0 0 0 5px rgba(255,106,31,.12);
}

.page-contact .feedback-step__body{
  max-width:62ch;
}

.page-contact .feedback-step .index-num{
  display:block;
  margin:0 0 2px;
  font-family:var(--font-mono);
  letter-spacing:.18em;
  color:var(--blue-mist);
}

.page-contact .feedback-step__title{
  margin:2px 0 8px;
  font-size:clamp(17px,2.2vw,23px);
  font-weight:400;
  line-height:1.4;
  color:var(--snow);
}

.page-contact .feedback-step p{
  margin:0;
  font-size:15px;
  line-height:1.78;
  color:var(--ink-dim);
}

/* ---------- 到访与地址 ---------- */
.page-contact .visit-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(28px,4vw,56px);
}

.page-contact .visit-copy .prose + .prose{
  margin-top:14px;
}

.page-contact .visit-details{
  margin:clamp(20px,3vw,28px) 0 0;
  padding:2px 18px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:rgba(6,26,20,.45);
}

.page-contact .visit-details summary{
  cursor:pointer;
  list-style:none;
  padding:14px 0;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.06em;
  color:var(--blue-mist);
}

.page-contact .visit-details summary::-webkit-details-marker{
  display:none;
}

.page-contact .visit-details summary::after{
  content:"＋";
  float:right;
  margin-left:12px;
  color:var(--orange);
}

.page-contact .visit-details[open] summary::after{
  content:"－";
}

.page-contact .visit-list{
  margin:0 0 18px;
  padding-left:20px;
  display:grid;
  gap:8px;
  font-size:15px;
  line-height:1.72;
  color:var(--ink-dim);
}

.page-contact .visit-list li::marker{
  color:var(--orange);
}

.page-contact .visit-copy .btn{
  margin-top:clamp(20px,3vw,28px);
}

.page-contact .visit-photo{
  margin:0;
  border-radius:var(--r);
  overflow:hidden;
}

/* ---------- 备案与运营信息 ---------- */
.page-contact .record-block{
  position:relative;
  overflow:hidden;
  padding:clamp(26px,4vw,52px);
  border:1px solid var(--line-green);
  border-radius:var(--r);
  background:linear-gradient(140deg,var(--green-700) 0%,rgba(20,82,63,.9) 46%,var(--green-900) 100%);
}

.page-contact .record-block::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:min(260px,38%);
  height:100%;
  background:repeating-linear-gradient(90deg,var(--line-green) 0 1px,transparent 1px 10px);
  opacity:.35;
  pointer-events:none;
}

.page-contact .contact-record__title{
  position:relative;
  margin:8px 0 0;
  font-size:clamp(22px,3.4vw,34px);
  font-weight:300;
  line-height:1.2;
  color:var(--snow);
}

.page-contact .record-rows{
  position:relative;
  margin:clamp(20px,3vw,32px) 0 0;
}

.page-contact .record-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:4px 20px;
  padding:14px 0;
  border-bottom:1px dashed var(--line-green);
}

.page-contact .record-row:last-child{
  border-bottom:0;
}

.page-contact .record-row dt{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--data);
}

.page-contact .record-row dd{
  margin:0;
  font-family:var(--font-mono);
  font-size:15px;
  color:var(--snow);
  overflow-wrap:anywhere;
}

.page-contact .record-row a{
  color:var(--blue-mist);
  text-decoration:none;
  border-bottom:1px solid var(--line-strong);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}

.page-contact .record-row a:hover{
  color:var(--snow);
  border-bottom-color:var(--orange);
}

/* ---------- 合作与内容沟通 ---------- */
.page-contact .coop-list{
  margin-top:clamp(24px,4vw,44px);
  display:grid;
  gap:0;
  border-top:1px solid var(--line);
}

.page-contact .coop-item{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  padding:clamp(20px,3vw,32px) 0;
  border-bottom:1px solid var(--line);
}

.page-contact .coop-item__head{
  display:grid;
  gap:10px;
  justify-items:start;
}

.page-contact .coop-item__head h3{
  margin:0;
  font-size:clamp(17px,2vw,21px);
  font-weight:400;
  line-height:1.42;
  color:var(--snow);
}

.page-contact .coop-item p{
  margin:0;
  max-width:54ch;
  font-size:15px;
  line-height:1.78;
  color:var(--ink-dim);
}

.page-contact .coop-item__link{
  justify-self:start;
  align-self:end;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.05em;
  color:var(--blue-mist);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}

.page-contact .coop-item__link:hover{
  color:var(--snow);
  border-bottom-color:var(--orange);
}

/* ---------- 收束 ---------- */
.page-contact .contact-close__inner{
  display:grid;
  gap:14px;
  max-width:780px;
  padding-top:clamp(24px,3.6vw,44px);
  border-top:1px solid var(--line);
}

.page-contact .contact-close__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:6px;
}

/* ---------- 桌面栅格 ---------- */
@media (min-width:900px){

  .page-contact .contact-hero__grid{
    grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
    align-items:end;
    gap:clamp(40px,6vw,110px);
  }

  .page-contact .contact-hero__aside{
    padding-bottom:6px;
  }

  .page-contact .visit-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
    align-items:start;
  }

  .page-contact .feedback-track{
    padding-left:clamp(0px,4vw,44px);
  }
}

@media (min-width:820px){

  .page-contact .contact-cards{
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:start;
  }

  .page-contact .contact-card:nth-child(2){
    margin-top:clamp(22px,4vw,58px);
  }

  .page-contact .contact-card:nth-child(3){
    margin-top:clamp(10px,2vw,26px);
  }
}

@media (min-width:840px){

  .page-contact .coop-item{
    grid-template-columns:minmax(200px,24%) minmax(0,1fr) auto;
    gap:8px 28px;
    align-items:start;
  }

  .page-contact .coop-item__link{
    align-self:center;
  }
}

@media (min-width:1100px){

  .page-contact .contact-channels__title,
  .page-contact .contact-feedback__title,
  .page-contact .contact-visit__title,
  .page-contact .contact-coop__title,
  .page-contact .contact-close__title{
    max-width:20ch;
  }
}

@media (hover:none){

  .page-contact .contact-card__copy{
    opacity:1;
  }
}