/* === Contact (Desktop) — Polished Light Theme === */
/* ใช้ร่วมกับ home.desktop.css เพื่อรีใช้ตัวแปรสี/พื้นหลัง และรูปแบบปุ่ม/การ์ด */

:root{ /* ขยายได้หากต้องการเฉดพิเศษของหน้า Contact */ }

/* ---------------- HERO ---------------- */
.contact-hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 18% -10%, #e7f2ff, transparent 70%),
    radial-gradient(1200px 600px at 92% 110%, #e8fff6, transparent 65%),
    linear-gradient(180deg, #f6fbff, #ffffff);
  border-bottom:1px solid var(--ring);
}
.contact-hero > *{ position:relative; z-index:1 }
.contact-hero .inner{
  display:grid; grid-template-columns:1.25fr 1fr; gap:20px; align-items:center;
  padding:34px 0 22px;
}
.contact-hero h1{
  margin:0 0 8px; font-size:clamp(26px,3.4vw,42px); line-height:1.12;
  letter-spacing:-.02em; font-weight:900;
}
.contact-hero h1 span{ color:var(--brand) }
.contact-hero p{ color:var(--muted); margin:0 }

/* ---------------- Section ---------------- */
.contact-grid{ padding:26px 0 36px }

/* Two-column layout */
.two-col{ display:grid; grid-template-columns:1.05fr 1fr; gap:18px }

/* Cards */
.contact-card, .form-card{
  background:#fff; border:1px solid var(--ring); border-radius:20px; padding:18px;
  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;
}

/* 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 }
.contact-list .label{ font-weight:800 }
.contact-list .value{ color:var(--text) }

/* Form */
.form{ display:grid; gap:12px }
.form .row{ display:grid; grid-template-columns:1fr 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:10px 12px; border:1px solid var(--ring); border-radius:12px;
  font-family:inherit; font-size:1rem; background:#fff;
}
.form textarea{ min-height:120px; resize:vertical }
.form .hint{ color:var(--muted); font-size:.9rem }
.form .actions{ display:flex; gap:10px; align-items:center }

/* 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 }