/* ============================================
   關於瑋崧｜詢價與聯絡 about-weisong-contact.css（瑋崧企業社）
   由 Locofy 電腦版匯出「轉寫」而非重新設計：色彩／間距／圓角／字級／
   行高皆沿用 Locofy 原值；僅將絕對定位版面重構為正常流 + RWD。

   命名規範（使用者要求）：
   - 以 H2 為界，每區塊各自一份獨立 CSS，區塊間不共用任何 class。
   - 每區塊上下 padding 各寫各的、不共用同一條規則。
   - 唯一例外＝跨頁共用組件：page-hero / page-tab / page-sec-lead / pill-btn。
   BEM 前綴：.abt-
   ============================================ */

/* ====================================================================
   區塊 1：詢價流程說明（abt-flow）
   票根標籤 + 米色 bar + 4 步驟卡（棕標頭塊 Rectangle-185 295×64 + 編號 + 描述）。
   整區頂部漸層米色底（原稿 page-bg：#f4eddd → 透明）。
   ==================================================================== */
.abt-flow {
  padding-top: clamp(48px, 6vw, 84px);
  padding-bottom: clamp(48px, 6vw, 80px);
}
.abt-flow__bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.abt-flow__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 295px);
  justify-content: center;
  max-width: 1240px;
  margin-inline: auto;
}
.abt-flow__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
/* 箭頭造型標頭塊：Rectangle-185 SVG 當背景（左右尖角、顏色交替），只放名稱白字。
   尖角區左右各約 24px，padding 留出避免文字壓到尖角。 */
.abt-flow__head {
  width: 295px;
  min-height: 64px;
  background: center / 100% 100% no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 30px;
  box-sizing: border-box;
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
}
.abt-flow__name {
  line-height: 1.2;
}
.abt-flow__desc {
  width: 248px;
  margin: 0;
  font-size: 16px;
  line-height: 20px;
  color: #000;
  text-align: left;
}

/* ====================================================================
   區塊 2：詢價表單（abt-form）
   描邊字前言（白框 text-shadow + drop-shadow、「立即諮詢」橘）+ 白卡表單。
   ==================================================================== */
.abt-form {
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(56px, 7vw, 96px);
  background: linear-gradient(
    180deg,
    rgba(244, 237, 221, 0.8),
    rgba(244, 237, 221, 0)
  );
}
.abt-form__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  max-width: 700px;
  margin: 0 auto clamp(36px, 4vw, 56px);
  text-align: center;
}
/* 描邊大字標題：白框 text-shadow + drop-shadow（對齊設計稿） */
.abt-form__title {
  margin: 0;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2rem); /* 32px */
  font-weight: 700;
  color: #5a3b1f;
  text-shadow:
    3px 0 0 #fff,
    0 3px 0 #fff,
    -3px 0 0 #fff,
    0 -3px 0 #fff;
  filter: drop-shadow(4px 4px 7.8px rgba(0, 0, 0, 0.5));
}
.abt-form__title-accent {
  color: #ee6e00;
}
.abt-form__intro-desc {
  margin: 0;
  font-size: 16px;
  line-height: 20px;
  color: #000;
}
/* 白卡表單：radius 50 + 陰影、1200 寬 */
.abt-form__card {
  max-width: 1200px;
  margin-inline: auto;
  padding: clamp(40px, 5vw, 64px) clamp(28px, 6vw, 85px);
  box-sizing: border-box;
  border-radius: 50px;
  background-color: #fff;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
}
.abt-form__heading {
  margin: 0;
  align-self: stretch;
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  color: #000;
}
/* 欄位：兩欄並排（聯絡人/電話、信箱/公司、LINE/數量尺寸） */
.abt-form__grid {
  align-self: stretch;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 59px;
}
.abt-form__field {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.abt-form__label {
  font-size: 16px;
  color: #5a3b1f;
}
.abt-form__req {
  color: #e31717;
}
.abt-form__input {
  width: 100%;
  height: 52px;
  border: 1px solid #cfb18d;
  box-sizing: border-box;
  padding: 0 16px;
  font-size: 16px;
  color: #000;
  background-color: #fff;
}
.abt-form__input:focus-visible {
  outline: 2px solid #ee6e00;
  outline-offset: -1px;
}
/* 預估數量 + 尺寸：並排小欄 */
.abt-form__pair {
  display: flex;
  align-items: flex-end;
  gap: 46px;
}
.abt-form__pair .abt-form__field {
  flex: 1;
}
/* 整列欄位（需求說明、上傳） */
.abt-form__field--full {
  align-self: stretch;
}
.abt-form__textarea {
  width: 100%;
  min-height: 154px;
  border: 1px solid #cfb18d;
  box-sizing: border-box;
  padding: 18px;
  font-size: 16px;
  line-height: 20px;
  color: #000;
  background-color: #fff;
  resize: vertical;
}
.abt-form__textarea::placeholder {
  color: #c3c3c3;
}
.abt-form__textarea:focus-visible {
  outline: 2px solid #ee6e00;
  outline-offset: -1px;
}
/* 上傳：藍色小字 + icon */
.abt-form__upload {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 12px;
  color: #004dff;
  cursor: pointer;
}
.abt-form__upload-icon {
  width: 18px;
  height: 15px;
  object-fit: contain;
}
.abt-form__upload-label {
  cursor: pointer;
}
/* 送出 / 重填：送出棕 #5a3b1f、重填灰 #686868 */
.abt-form__actions {
  display: flex;
  align-items: center;
  gap: 52px;
}
.abt-form__submit,
.abt-form__reset {
  width: 200px;
  height: 44px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}
.abt-form__submit {
  background-color: #5a3b1f;
}
.abt-form__reset {
  background-color: #686868;
}
.abt-form__submit:hover {
  background-color: #6f4926;
}
.abt-form__reset:hover {
  background-color: #777;
}
.abt-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* Turnstile 元件間距 */
.abt-form__turnstile {
  margin-top: 8px;
}
/* 欄位錯誤態：紅框 + 紅字提示 */
.abt-form__field--error .abt-form__input,
.abt-form__field--error .abt-form__textarea {
  border-color: #e31717;
  outline-color: #e31717;
}
/* 必填提示：接在標籤文字後方（同行） */
.abt-form__error {
  margin-left: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: #e31717;
  white-space: nowrap;
}
/* 送出結果訊息 */
.abt-form__status {
  margin: 4px 0 0;
  align-self: stretch;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
}
.abt-form__status--success {
  color: #1a7d3c;
  font-weight: 500;
}
.abt-form__status--error {
  color: #e31717;
}
.abt-form__status--pending {
  color: #946838;
}

/* ====================================================================
   RWD（斷點 1280 / 1024 / 768 / 640）— 每區塊各自收斂
   ==================================================================== */
@media (max-width: 1024px) {
  /* 流程：4 → 2 欄 */
  .abt-flow__list {
    grid-template-columns: repeat(2, 295px);
    gap: 40px 20px;
  }
}

@media (max-width: 768px) {
  /* 表單：兩欄 → 單欄 */
  .abt-form__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  /* 流程：手機維持 2×2（設計稿 process-row 兩兩並排），欄寬縮至 ~150 */
  .abt-flow__list {
    grid-template-columns: repeat(2, minmax(0, 150px));
    justify-content: center;
    gap: 24px 10px;
  }
  .abt-flow__item {
    gap: 16px;
    align-items: center;
  }
  /* 箭頭標頭塊：136×56、白字 13px、標題可 2 行置中 */
  .abt-flow__head {
    width: 136px;
    min-height: 56px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: var(--fw-semibold);
  }
  /* 手機專屬箭頭圖（136×56，2×2 棋盤配色：棕/深棕/深棕/棕）；
     以 !important 覆蓋 PHP 內嵌的桌機 Rectangle-185 背景，不動桌機 */
  .abt-flow__item:nth-child(1) .abt-flow__head {
    background-image: url("../../images/about-contact/process__step-marker-bg-461-7197.svg") !important;
  }
  .abt-flow__item:nth-child(2) .abt-flow__head {
    background-image: url("../../images/about-contact/process__step-marker-bg-461-7203.svg") !important;
  }
  .abt-flow__item:nth-child(3) .abt-flow__head {
    background-image: url("../../images/about-contact/process__step-marker-bg-461-7210.svg") !important;
  }
  .abt-flow__item:nth-child(4) .abt-flow__head {
    background-image: url("../../images/about-contact/process-step__icon-bg-461-7216.svg") !important;
  }
  .abt-flow__name {
    line-height: 1.4;
  }
  /* 前兩步標題較長（9 字）：限寬斷成 4/5 兩行（提供紙盒/尺寸與需求）；
     後兩步（打樣確認/量產出貨）維持單行不限寬 */
  .abt-flow__item:nth-child(1) .abt-flow__name,
  .abt-flow__item:nth-child(2) .abt-flow__name {
    max-width: 5.5em;
  }
  /* 描述：貼齊欄寬、13px/22、左靠、自然換行 */
  .abt-flow__desc {
    width: 100%;
    font-size: 13px;
    line-height: 22px;
  }
  /* ===== 詢價表單：手機依設計稿 13px、白卡 radius 20、單欄 ===== */
  /* 前言：限寬 282（設計稿），讓描述自然斷成 3 行；描邊標題 16px、描述 13px/22 */
  .abt-form__intro {
    max-width: 282px;
    gap: 20px;
  }
  .abt-form__title {
    font-size: 16px;
    text-shadow:
      2px 0 0 #fff,
      0 2px 0 #fff,
      -2px 0 0 #fff,
      0 -2px 0 #fff;
  }
  .abt-form__intro-desc {
    font-size: 13px;
    line-height: 22px;
  }
  /* 白卡：radius 20、內距縮、群組間距 20 */
  .abt-form__card {
    max-width: 300px;
    border-radius: 20px;
    padding: 32px 24px;
    gap: 20px;
  }
  .abt-form__heading {
    font-size: 13px;
    font-weight: var(--fw-semibold);
  }
  /* 欄位：單欄堆疊、間距 16 */
  .abt-form__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .abt-form__field {
    gap: 8px;
  }
  .abt-form__label {
    font-size: 13px;
    font-weight: var(--fw-semibold);
  }
  .abt-form__input {
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
  }
  /* 預估數量 / 尺寸：維持並排兩欄（設計稿），縮 gap */
  .abt-form__pair {
    gap: 12px;
  }
  .abt-form__textarea {
    min-height: 130px;
    padding: 12px;
    font-size: 13px;
    line-height: 22px;
  }
  .abt-form__textarea::placeholder {
    font-size: 12px;
  }
  /* 上傳：藍字縮 10px */
  .abt-form__upload {
    font-size: 10px;
  }
  /* 送出／重填：直向堆疊、滿寬、13px */
  .abt-form__actions {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
  .abt-form__submit,
  .abt-form__reset {
    width: 100%;
    height: 30px;
    font-size: 13px;
    font-weight: 400;
  }
  .site-footer {
    margin-top: 40px;
  }
}

/* 本頁 .page-components 上內距：改數字即可，只影響本頁（未設則沿用共用預設 30px） */
.page-components { --pc-pt: 30px; }