/* ===============================
   Contact Us (Initium)
   - Dark premium style
   - Centered layout
   =============================== */

.contact-main{
  background: var(--surface-dark, #07141a);
  color: #eaf3f7;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* HERO */
.contact-hero{
  padding: clamp(56px, 6vw, 92px) 0 26px;
  position: relative;
  overflow: hidden;
}

.contact-hero::before{
  content:"";
  position:absolute;
  inset:-60px -120px auto -120px;
  height: 260px;
  background: radial-gradient(closest-side, rgba(15,173,230,0.22), rgba(15,173,230,0) 70%);
  pointer-events:none;
}

.contact-hero__inner{
  width: min(1160px, calc(100% - 48px));
  margin: 0 auto;
  text-align: center;
}

.contact-kicker{
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: 0.86;
  margin: 0 0 10px;
}

.contact-title{
  margin: 0 0 12px;
  font-size: clamp(28px, 2.7vw, 44px);
  line-height: 1.12;
  font-weight: 750;
}

.contact-sub{
  margin: 0 auto;
  max-width: 820px;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.7;
  opacity: 0.9;
}

/* WRAP */
.contact-wrap{
  padding: 28px 0 56px;
}

.contact-container{
  width: min(1160px, calc(100% - 48px));
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 18px;
  align-items: start;
}

/* CARD */
.contact-card{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
}

/* INFO LIST */
.contact-list{
  display: grid;
  gap: 12px;
}

.contact-item{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

.contact-item__icon{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(15,173,230,0.15);
  border: 1px solid rgba(15,173,230,0.22);
  flex: 0 0 auto;
  font-size: 16px;
}

.contact-item__label{
  font-size: 12px;
  opacity: 0.82;
  margin-bottom: 4px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.contact-item__value{
  font-size: 14px;
  line-height: 1.55;
  color: #eaf3f7;
  opacity: 0.94;
}

.contact-link{
  color: #bfefff;
  text-decoration: none;
}
.contact-link:hover{ text-decoration: underline; }

.contact-divider{
  height: 1px;
  margin: 16px 0;
  background: rgba(255,255,255,0.08);
}

.contact-mini__text{
  margin: 0;
  font-size: 13px;
  opacity: 0.86;
  line-height: 1.6;
}

/* FORM */
.contact-form{
  margin-top: 2px;
}

.contact-grid{
  display:grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.contact-grid__full{
  grid-column: 1 / -1;
}

.field__label{
  display:block;
  font-size: 12px;
  opacity: 0.88;
  margin: 0 0 6px;
  letter-spacing: 0.04em;
}

.field__input,
.field__textarea{
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border-radius: 14px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.10);
  color: #eaf3f7;
  padding: 12px 12px;
  font-size: 14px;
  outline: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.field__textarea{ resize: vertical; min-height: 140px; }

.field__input::placeholder,
.field__textarea::placeholder{
  color: rgba(234,243,247,0.55);
}

.field__input:focus,
.field__textarea:focus{
  border-color: rgba(15,173,230,0.6);
  box-shadow: 0 0 0 4px rgba(15,173,230,0.12);
}

.field--error .field__input,
.field--error .field__textarea{
  border-color: rgba(255,84,84,0.75);
  box-shadow: 0 0 0 4px rgba(255,84,84,0.12);
}

.contact-actions{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.contact-btn{
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(15,173,230,0.4);
  border-color: rgba(236, 227, 213, 0.85);
  background: #ECE3D5;
  color: #081726;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor:pointer;
  transition: transform .15s ease, filter .15s ease;
}

.contact-btn:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.contact-btn:active{ transform: translateY(0px); }

.contact-note{
  margin: 0;
  font-size: 12px;
  opacity: 0.78;
  line-height: 1.55;
}

/* TOAST */
.contact-toast{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(15,173,230,0.12);
  border: 1px solid rgba(15,173,230,0.22);
  font-size: 13px;
  opacity: 0.95;
}

/* FOOTNOTE */
.contact-footnote{
  padding: 0 0 62px;
}

.contact-footnote__inner{
  width: min(1160px, calc(100% - 48px));
  margin: 0 auto;
  text-align: center;
}

.contact-footnote__text{
  margin: 0 auto;
  max-width: 980px;
  font-size: 12px;
  opacity: 0.72;
  line-height: 1.7;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 18px;
}

/* RESPONSIVE */
@media (max-width: 920px){
  .contact-container{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px){
  .contact-grid{
    grid-template-columns: 1fr;
  }
}

/* ===== Contact form overflow fix ===== */

/* 1) 全局采用 border-box，避免 padding/border 造成溢出 */
.contact-main, .contact-main * {
  box-sizing: border-box;
}

/* 3) 关键：让 grid 子项可以缩小（默认 min-width:auto 会撑开） */
.field{
  min-width: 0;
}

/* 5) 兜底：如果还有1px~2px的视觉溢出，就裁切卡片内容 */
.contact-card{
  overflow: hidden;
}