/* ============================================================
   磐承工事 — Warm Theme Layer
   套用「溫暖在地感」風格到各服務頁：淺藍白底、圓角卡片、藥丸按鈕、柔和陰影
   以 <link> 形式載入於各頁 inline <style> 之後，覆寫既有樣式。
   ============================================================ */

/* ── Background tone: lighter blue-white ── */
:root { --gray-light: #ECF1F9; }
body { background: #F4F7FB; }
.section-gray { background: #ECF1F9 !important; }

/* ── Unify big titles to warm rounded sans (match 關於磐承) ── */
.hero-title,
.section-title,
.pitch-title {
  font-family: 'Noto Sans TC', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: .05em !important;
}

/* ── Rounded cards + soft shadows ── */
.service-item,
.fence-card,
.elig-card,
.sub-card,
.step,
.reminder,
.faq-item,
.why-card,
.scope-card,
.wf-card,
.contact-form,
.line-cta,
.pitch-col,
.pm-dialog,
.pm-image img,
.about-svc-card,
.area-card,
.company-card {
  border-radius: 22px !important;
}

/* slightly tighter radius for small list-row cards */
.step { border-radius: 16px !important; }

/* soft warm shadow on the key product/service cards */
.service-item,
.fence-card,
.about-svc-card,
.scope-card,
.elig-card,
.sub-card,
.why-card,
.contact-form {
  box-shadow: 0 10px 30px rgba(27,47,110,.07) !important;
}

/* image visuals inside cards keep top corners rounded */
.fence-visual { border-radius: 22px 22px 0 0 !important; overflow: hidden; }
.wf-thumb { border-radius: 22px 22px 0 0 !important; }

/* ── Pill buttons everywhere ── */
.btn-primary,
.btn-outline,
.nav-cta,
.form-submit,
.big-cta-btn,
.line-btn,
.brand-quote-btn,
.pm-cta-row .btn-primary,
.pm-cta-row .btn-outline-dark {
  border-radius: 999px !important;
}

/* button hover lift to match warm feel */
.btn-primary:hover,
.form-submit:hover { transform: translateY(-2px); }

/* ── Rounded form inputs ── */
.form-input { border-radius: 12px !important; }

/* ── Badges & chips softened ── */
.fence-badge,
.sub-tag,
.fence-view {
  border-radius: 999px !important;
}

/* ── FAQ items keep rounded but remove harsh full-width divider feel ── */
.faq-item { margin-bottom: 12px; border: 1px solid #E0E6F2 !important; background: #FCFDFE; overflow: hidden; }
.faq-item summary:hover { background: #F4F7FB; }

/* ============================================================
   行動裝置導覽列 RWD 修正（共用，套用全站）
   桌機維持單列；手機改成兩列：上列 logo + 立即諮詢，下列 4 個連結
   修正核心 bug：.nav-link 在窄螢幕被擠成逐字直排
   ============================================================ */
@media (max-width: 768px) {
  .nav {
    height: auto !important;
    flex-wrap: wrap;
    padding: 8px 14px !important;
    row-gap: 6px;
    align-items: center;
  }
  .nav-logo-wrap {
    align-self: center;
    padding: 0 14px 0 4px !important;
    margin-right: 12px !important;
    border-right: none !important;
  }
  .nav-logo { height: 38px !important; }
  .nav-divider { display: none !important; }
  .nav-cta {
    order: 2;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }
  .nav-links {
    order: 3;
    flex: 1 0 100%;
    display: flex;
    justify-content: space-between;
    gap: 6px;
    padding-left: 0 !important;
  }
  .nav-link {
    white-space: nowrap;     /* 關鍵：避免單字被逐字換行 */
    font-size: 13px !important;
  }
}

/* 更窄的小手機（≤380px）再縮一點字級，確保一列放得下 */
@media (max-width: 380px) {
  .nav-link { font-size: 12px !important; letter-spacing: .02em !important; }
  .nav-links { gap: 2px; }
}

/* ============================================================
   行動裝置「多欄 grid」RWD 修正（共用，套用全站）
   桌機維持多欄；手機收斂欄數，避免卡片被擠成窄條、文字逐字直排。
   使用 !important 以蓋過部分元素的 inline style。
   ============================================================ */
@media (max-width: 768px) {
  /* 4 欄 → 2 欄：服務卡、圍籬產品卡 */
  .services-grid,
  .fence-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* 5 欄 → 2 欄：why-grid（含部分頁面 inline 設 4 欄者） */
  .why-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 3 欄 → 1 欄：各種說明 / 流程 / 公司資訊區 */
  .sub-grid,
  .phase-steps,
  .phase:last-child .phase-steps,
  .promise-grid,
  .about-svc-grid,
  .company-grid,
  .scope-grid,
  .workflow-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* 2 欄 → 1 欄：表單、聯絡、條件、故事、彈窗等左右分欄 */
  .contact-grid,
  .form-row,
  .elig-grid,
  .area-grid,
  .story-grid,
  .lz-story-grid,
  .pitch-grid,
  .explain-grid,
  .pm-dialog,
  .big-cta-list {
    grid-template-columns: 1fr !important;
  }

  /* 圍籬卡片在手機上縮小內距與字級，2 欄更耐看 */
  .fence-name { font-size: 15px !important; }
  .fence-sub { font-size: 11px !important; }
}

/* 極窄小手機（≤380px）：圍籬產品卡與服務卡改單欄，完全不擠 */
@media (max-width: 380px) {
  .services-grid,
  .fence-grid {
    grid-template-columns: 1fr !important;
  }
}