/* ==========================================================================
   contact.html — 手機版體驗強化（只補手機版行為，桌機樣式維持 page-contact.css 原樣）
   載入順序在 page-contact.css 之後，同特異度規則以本檔為準。
   ========================================================================== */

/* --------------------------------------------------------------------------
   雙欄→單欄堆疊時，「表單」視覺上排到「聯絡資訊」前面 —
   手機使用者通常想先看到表單直接填寫。維持 HTML 原始順序（不動 DOM／
   不影響閱讀器循序閱讀順序），只用 CSS order 調整視覺呈現順序，
   與 page-contact.css 讓雙欄變單欄的同一個中斷點（980px）對齊。
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .contact-grid { gap: 48px; }
  .contact-form-wrap { order: -1; }
  .contact-info { order: 2; }
}

/* --------------------------------------------------------------------------
   欄位並排在中寬螢幕（平板／橫向手機）也容易太擠，把「職稱／Last name／
   First name／統編」等並排欄位的單欄化中斷點從 640px 提早到 768px，
   國碼＋電話號碼這組也一併提早改為上下堆疊。
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .field-row { grid-template-columns: 1fr; gap: 20px; }
  .phone-field { flex-direction: column; gap: 12px; }
  .phone-field select { flex-basis: auto; }
}

/* --------------------------------------------------------------------------
   8 個欄位的觸控體驗 — 確保每個輸入框在手機上至少 44px 高、欄位間距
   足夠避免誤觸相鄰欄位、label 清楚易讀。
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .contact-form { gap: 26px; }

  .field { gap: 9px; }
  .field label { font-size: 0.9375rem; }

  .field input,
  .field select,
  .field textarea {
    min-height: 48px;
    font-size: 1rem; /* 16px 可避免部分行動瀏覽器 focus 時自動縮放頁面 */
    padding: 13px 14px;
  }
  .field textarea { min-height: 132px; }

  .phone-field select,
  .phone-field input { min-height: 48px; }

  /* 提交按鈕在手機版改全寬，比小按鈕更好點擊 */
  .contact-form button[type="submit"] {
    align-self: stretch;
    width: 100%;
    text-align: center;
    padding: 16px 28px;
    margin-top: 6px;
  }
}

/* --------------------------------------------------------------------------
   左欄聯絡資訊 — 窄螢幕上 label／內容並排容易擠壓，改為上下堆疊更好讀。
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .info-item {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 16px 0;
  }
  .info-item dt { font-size: 0.6875rem; letter-spacing: 1.2px; }
}

/* --------------------------------------------------------------------------
   送出成功訊息 — 手機版留白與標題級距微調，讓訊息更清楚醒目。
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .form-success { padding-top: 24px; }
  .form-success h3 { font-size: 1.25rem; }
  .form-success p { font-size: 1rem; }
}