/* =========================================================
   Niiice Layout2 — contact.css（/contact/ 專用；class 前綴 l2ct- 防互撞）
   值全依 CAPTURE_REPORT ② Contact + 母站 post-28.css，非目測。
   共用樣式（banner / 按鈕 / RWD 節奏）在 base.css，不重複。
   註：右欄「聯絡 CTA 區」為任務指定之刻意差異（原站 Elementor form →
   mailto / 電話 CTA），欄位視覺沿用母站表單語彙（palette-7 底、
   底線 1px palette-5、radius 0、欄距 24、雙欄 50/50、送出鈕樣式）。
   ========================================================= */

/* ---------- 頁首 banner（標題列下距 48 → 手機 24，post-28 4269add） ---------- */
.l2ct-banner__inner { padding-bottom: 48px; }

/* Blocksy ct-breadcrumbs 重刻（14px w500 uppercase、字 palette-3、separator 左右 8px） */
.l2ct-breadcrumbs {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-typo);
  color: var(--color-text);
}
.l2ct-breadcrumbs a { color: var(--color-text); }
.l2ct-breadcrumbs a:hover { color: var(--color-accent-hover); }
.l2ct-breadcrumbs__sep { margin: 0 8px; }

/* =========================================================
   主區（post-28 df1b641：margin 56 上 / 104 下 → 手機 48/80）
   兩欄放在同一 row、gap 0（139d993）→ 框線相接成一體格線
   ========================================================= */
.l2ct-main {
  margin-top: 56px;
  margin-bottom: 104px;
}
.l2ct-grid {
  display: flex;
  align-items: stretch; /* 兩欄等高，共邊框線相接 */
}

/* 左欄 40%：1px palette-5 全框 + padding 48（→手機 24）、圖垂直置中
   （post-28 ebb86cc：justify-content center） */
.l2ct-media {
  flex: 0 0 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--palette-5);
  padding: 48px;
}
.l2ct-media__img {
  width: 100%;
  height: auto; /* 800×1200 natural ratio，不裁切 */
}
/* 無圖佔位（niiice_img 空值輸出 .niiice-img-empty）維持直式比例感 */
.l2ct-media .niiice-img-empty { min-height: 480px; }

/* 右欄 60%：框線 1px 上右下 / 左 0（與左欄共邊）+ padding 48（→手機 24）、
   column gap 12（post-28 bd0b7ec） */
.l2ct-body {
  flex: 0 0 60%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--palette-5);
  border-left: 0;
  padding: 48px;
}

/* 描述：Elementor 內容區 body 16px lh1.8、字 palette-3、下距 32px
   （post-28 5584a58） */
.l2ct-desc {
  font-size: var(--typo-text-fs);
  line-height: var(--typo-text-lh);
  letter-spacing: var(--ls-typo);
  color: var(--palette-3);
  margin-bottom: 32px;
}

/* ---------- 聯絡 CTA 區（刻意差異；視覺沿用母站表單語彙） ----------
   母站欄位：雙欄 col-50、欄距 24（左右各 12）、group 下距 24、
   label 上、欄位 palette-7 底 + 底線 1px palette-5 + radius 0 */
.l2ct-cta {
  display: flex;
  flex-direction: column;
}
.l2ct-cta__fields {
  display: flex;
  flex-wrap: wrap;
  margin-left: -12px;  /* 對齊母站 form-fields-wrapper 負邊距欄距法 */
  margin-right: -12px;
}
.l2ct-cta__row {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 0 12px;
  margin-bottom: 24px;
}
.l2ct-cta__label {
  display: block;
  font-size: var(--typo-secondary-fs);   /* 14px */
  line-height: var(--typo-secondary-lh);
  letter-spacing: var(--ls-typo);
  color: var(--palette-4);
  padding-bottom: 4px; /* 母站 labels-above label padding-bottom 4px */
}
.l2ct-cta__value {
  display: block;
  font-size: var(--typo-text-fs);        /* 16px */
  line-height: var(--typo-text-lh);
  letter-spacing: var(--ls-typo);
  color: var(--palette-3);
  background: var(--palette-7);
  border-bottom: 1px solid var(--palette-5);
  border-radius: 0;
  padding: 8px 0 12px;
}
a.l2ct-cta__value:hover { color: var(--color-accent-hover); }

/* CTA 鈕：樣式本體 = base .niiice-btn--submit（底 palette-11、字 palette-4、
   uppercase、radius 80、padding 12 48；hover 底 palette-6 字 palette-3）；
   對齊母站 elementor-button-align-start */
.l2ct-cta__btn { align-self: flex-start; }

/* =========================================================
   RWD（斷點值 = 母站 post-28 media query；tablet 無欄位變化）
   ========================================================= */
@media (max-width: 767px) {
  .l2ct-banner__inner { padding-bottom: 24px; }

  .l2ct-main { margin-top: 48px; margin-bottom: 80px; }

  /* 直排：左欄全框在上，右欄接續在下 → 框線改 0 上 / 左右下 1px
     （post-28 mobile bd0b7ec border-width 0 1px 1px 1px） */
  .l2ct-grid { flex-direction: column; }
  .l2ct-media,
  .l2ct-body {
    flex-basis: auto;
    width: 100%;
    padding: 24px;
  }
  .l2ct-body {
    border: 1px solid var(--palette-5);
    border-top: 0;
  }

  /* CTA 欄位改單欄 */
  .l2ct-cta__row { flex-basis: 100%; max-width: 100%; }
}