/* === Contact (Mobile) — Polished Light Theme === */
/* ใช้ร่วมกับ home.mobie.css เพื่อสอดคล้องดีไซน์มือถือของทั้งเว็บ */

/* HERO */
.contact-hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--ring) }
.contact-hero .inner{ display:grid; grid-template-columns:1fr; gap:12px; padding:24px 0 16px }
.contact-hero h1{ margin:0 0 8px; font-size:clamp(24px,6vw,34px); line-height:1.18; letter-spacing:-.02em; font-weight:900 }
.contact-hero h1 span{ color:var(--brand) }
.contact-hero p{ margin:0; color:var(--muted) }
/* Center hero text on mobile */
.contact-hero .inner > div:first-child{
  text-align:center; margin-inline:auto; max-width:36ch;
}

/* Section spacing */
.contact-grid{ padding:22px 0 28px }

/* Stack to single column */
.two-col{ display:grid; grid-template-columns:1fr; gap:14px }
.form .row{ grid-template-columns:1fr !important }

/* Card base (รีใช้เงา/กรอบจากดีไซน์หลัก) */
.contact-card,.form-card{
  background:#fff; border:1px solid var(--ring); border-radius:20px; padding:16px;
  box-shadow:0 12px 30px rgba(15,23,42,.06); position:relative; overflow:hidden;
}
.contact-card::after,.form-card::after{
  content:""; position:absolute; inset:0; border-radius:20px; padding:1px;
  background:linear-gradient(135deg, var(--brand), var(--accent));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}

/* Notice */
.notice{ background:#ecfeff; border:1px solid #cffafe; padding:10px 12px; border-radius:12px; margin-top:8px; font-size:.95rem; display:none }
.notice.show{ display:block }

/* Contact list */
.contact-list{ list-style:none; padding:0; margin:0 }
.contact-list li{ display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px dashed var(--ring) }
.contact-list li:last-child{ border-bottom:0 }
.contact-list .icon{ font-size:20px; width:28px; text-align:center; line-height:1.2 }
.contact-list .label{ font-weight:800 }
.contact-list .value{ color:var(--text); word-break:break-word }
.contact-list a{ color:var(--brand); text-decoration:none; font-weight:600 }
.contact-list a:hover{ text-decoration:underline }

/* Form */
.form{ display:grid; gap:12px }
.form .row{ display:grid; grid-template-columns:1fr; gap:10px }
.form label{ font-weight:800; font-size:.95rem; margin-bottom:6px; display:inline-block }
.form input,.form select,.form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--ring); border-radius:14px;
  font-family:inherit; font-size:1rem; background:#fff;
}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none; border-color:#bfdbfe; box-shadow:0 0 0 3px rgba(59,130,246,.15);
}
.form textarea{ min-height:140px; resize:vertical }
.form .hint{ color:var(--muted); font-size:.92rem }
.form .actions{ display:flex; flex-direction:column; gap:8px; margin-top:4px }
.form .actions .btn{ width:100% }