/* ==========================================================================
   contact.html — 聯絡我們頁
   只放這頁專屬樣式；共用 token／元件（.wrap／.eyebrow／.rule／.btn／.page-hero 等）
   請見 css/style.css，不在此重複定義。
   ========================================================================== */

/* 視覺隱藏但保留給螢幕閱讀器 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   雙欄版面 — 左：聯絡資訊／右：表單（比照 L05 兩欄圖文精神）
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: calc(var(--gap) * 2.4);
  align-items: start;
}

.contact-info h2,
.contact-form-wrap h2 { margin: 12px 0 0; }
.contact-info .rule,
.contact-form-wrap .rule { margin: 20px 0 28px; }

/* --------------------------------------------------------------------------
   左欄 — 聯絡資訊
   -------------------------------------------------------------------------- */
.info-list { border-top: 1px solid var(--hairline); }
.info-item {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--gap);
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
}
.info-item dt {
  font-family: "Noto Sans TC Medium", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bronze-txt);
}
.info-item dd {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink);
  line-height: 1.7;
}
.info-item dd a { border-bottom: 1px solid var(--hairline); }
.info-item dd a:hover { color: var(--bronze-txt); border-color: var(--bronze); }

.info-note {
  margin-top: 24px;
  color: var(--stone);
  font-size: 0.875rem;
  line-height: 1.75;
  max-width: 42ch;
}
.info-note a { color: var(--bronze-txt); border-bottom: 1px solid var(--hairline); }
.info-note a:hover { border-color: var(--bronze); }

/* --------------------------------------------------------------------------
   右欄 — 表單
   -------------------------------------------------------------------------- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
/* .contact-form 的 display:flex 與瀏覽器內建 [hidden]{display:none} 特異度相同，
   author 樣式表會蓋過 user-agent 樣式表，若不特別加這條規則，
   js/contact.js 設定 hidden 之後表單仍會停留在畫面上（已在瀏覽器實測時抓到並修正）。 */
.contact-form[hidden] { display: none; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}

.field label {
  font-family: "Noto Sans TC Medium", sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--ink);
}
.field label .req,
.form-note .req { color: var(--negative); margin-left: 2px; }

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: 8px !important;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Noto Sans TC", sans-serif;
  font-size: 0.9375rem;
  padding: 13px 14px;
  transition: border-color .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 118px; line-height: 1.65; }

.field input::placeholder,
.field textarea::placeholder { color: var(--ash); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--bronze);
}

/* 必填欄位未填寫且已離開焦點時，以去飽和的語意紅標示錯誤（不用瀏覽器預設鮮紅） */
.field input:not(:focus):invalid:not(:placeholder-shown),
.field textarea:not(:focus):invalid:not(:placeholder-shown) {
  border-color: var(--negative);
}

.field-hint { font-size: 0.75rem; color: var(--mist); }

.phone-field { display: flex; gap: 10px; }
.phone-field select { flex: 0 0 156px; }
.phone-field input { flex: 1; min-width: 0; }

.form-note {
  font-size: 0.8125rem;
  color: var(--mist);
  line-height: 1.7;
}
.form-note a { color: var(--bronze-txt); border-bottom: 1px solid var(--hairline); }
.form-note a:hover { border-color: var(--bronze); }

.contact-form button[type="submit"] {
  align-self: flex-start;
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   送出後的成功訊息（取代表單，js/contact.js 控制顯示／隱藏）
   -------------------------------------------------------------------------- */
.form-success {
  border-top: 2px solid var(--ink);
  padding-top: 28px;
}
.form-success h3 { margin-bottom: 10px; }
.form-success p { color: var(--stone); font-size: 0.9375rem; line-height: 1.7; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .contact-grid { grid-template-columns: 1fr; gap: 56px; }
}
@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; gap: 22px; }
  .phone-field { flex-direction: column; }
  .phone-field select { flex-basis: auto; }
}