/* =========================================================
   Niiice Layout2 — service.css（/service/ 專用；class 前綴 l2svc- 防互撞）
   值全依 CAPTURE_REPORT ② Service + 母站 post-26.css / post-641.css，非目測。
   共用樣式（banner / eyebrow / accordion / 按鈕 / RWD 節奏）在 base.css，不重複。
   斷點：tablet ≤1024、mobile ≤767（timeline 4/2/1 站每屏，需與
   page-service.php 內 pager script 的 perView 一致）。
   ========================================================= */

/* ---------- 頁首 banner ----------
   base 的 .niiice-banner__inner 預設 padding-bottom 24；
   母站 service 頁（post-26 cb5539c）標題列下距桌機 48 → 手機 24 */
.l2svc-banner__inner { padding-bottom: 48px; }

/* Blocksy ct-breadcrumbs 重刻（global.css：14px w500 uppercase；
   main.min.css：文字色 theme-text-color、連結無底線、separator 左右 8px） */
.l2svc-breadcrumbs {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-typo);
  color: var(--color-text);
}
.l2svc-breadcrumbs a { color: var(--color-text); }
.l2svc-breadcrumbs a:hover { color: var(--color-accent-hover); }
.l2svc-breadcrumbs__sep { margin: 0 8px; }

/* ---------- 共用標題（h2 22px 走 base；此 class 只留 hook） ---------- */
.l2svc-head-title { margin: 0; }

/* =========================================================
   區塊 1：Process（post-26 ab4eec2：margin 80/80、column gap 64 → 手機 24；
   標題組 9f5d3ca gap 12、置中）
   ========================================================= */
.l2svc-process { margin-top: 80px; margin-bottom: 80px; }
.l2svc-process__inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.l2svc-process__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

/* ---------- 水平 timeline（jet-horizontal-timeline 重刻） ---------- */
.l2svc-timeline { position: relative; }
.l2svc-timeline__viewport { overflow: hidden; }
.l2svc-timeline__track {
  position: relative;
  display: flex;
  transition: transform .5s ease; /* jet arrows-nav：500ms 平移 */
}

/* 中線改掛在每個 item 上（::before 橫貫該站全寬）— 跟著 track 內容全長延伸，
   任何站數 / 斷點都不斷線（審查修復：原 .l2svc-timeline__line left:0;right:0 只鋪到
   track 可視寬，滑到第 5、6 站時中線消失）。原元素保留但隱藏（樣板 markup 不動）。 */
.l2svc-timeline__line { display: none; }

/* 站點：桌機 4 站/屏（100%/4、左右 padding 60px = 120px/2）；
   tablet 2 站；mobile 1 站（padding 24px = 48px/2）— post-26 2319356 */
.l2svc-timeline__item {
  position: relative;
  flex: 0 0 25%;
  max-width: 25%;
  padding: 0 60px;
}
.l2svc-timeline__item::before {
  content: '';
  position: absolute;
  top: calc(var(--process-node-size) / 2);
  left: 0;
  right: 0;
  height: 1px;
  background: var(--palette-5);
}

/* 圓形節點：200×200、1px palette-5 框、底 palette-7、字 palette-3、
   內數字 16px；hover 底 palette-6（post-26 point-content / is-hover） */
.l2svc-timeline__point {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--process-node-size);
  height: var(--process-node-size);
  margin: 0 auto; /* jet --align-center */
  border: 1px solid var(--palette-5);
  border-radius: 50%;
  background: var(--palette-7);
  color: var(--palette-3);
  font-size: 16px;
  transition: background-color .2s ease;
}
.l2svc-timeline__item:hover .l2svc-timeline__point { background: var(--palette-6); }

/* 下方卡：list--bottom card margin-top 30px；底 palette-7、無框無圓角 */
.l2svc-timeline__card {
  margin-top: 30px;
  background: var(--palette-7);
}
/* 卡標題 h5：Elementor「primary」18px w400 lh1.8 ls1px、下距 8px */
.l2svc-timeline__title {
  font-size: var(--typo-primary-fs);
  font-weight: 400;
  line-height: var(--typo-primary-lh);
  letter-spacing: var(--ls-typo);
  margin: 0 0 8px 0;
}
/* 卡描述：「text」16px lh1.8 ls1px、palette-3 */
.l2svc-timeline__desc {
  font-size: var(--typo-text-fs);
  line-height: var(--typo-text-lh);
  letter-spacing: var(--ls-typo);
  color: var(--palette-3);
}

/* 左右箭頭：jet-arrow — 絕對定位貼左右緣、垂直置中、底 palette-7、
   色 palette-5、SVG 24px；disabled opacity .5 不可點 */
.l2svc-timeline__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--palette-7);
  color: var(--palette-5);
  transition: opacity .2s ease;
}
.l2svc-timeline__arrow svg { width: 24px; height: 24px; }
.l2svc-timeline__arrow--prev { left: 0; }
.l2svc-timeline__arrow--next { right: 0; }
.l2svc-timeline__arrow.is-disabled {
  opacity: .5;
  cursor: default;
  pointer-events: none;
}

/* =========================================================
   區塊 2：Pricing（post-26 dc19bf3：full-width 底 palette-11、上下 1px；
   左欄 30%（margin 104 上下）＋右欄 70% 清單）
   ========================================================= */
.l2svc-pricing {
  background: var(--palette-11);
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}
.l2svc-pricing__inner {
  display: flex;
  align-items: flex-start;
}
.l2svc-pricing__head {
  flex: 0 0 30%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 104px 0;
}
/* 清單容器：post-26 7a064b7 margin 104 上下；4cae90e padding 24px 0、
   列距 80px（= 每列上下 padding 40px，grid-collapse 首尾外抵銷） */
.l2svc-pricing__list {
  flex: 0 0 70%;
  margin: 104px 0;
  padding: 24px 0;
}
/* 每列：row、align center、gap 12(直)×24(橫)、wrap — post-641 33e62d4 */
.l2svc-pricing__item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 40px 0;
}
/* 圓形編號章：48px 寬、min-height 48、radius 80、底 palette-7（母站宣告
   overlay 0.8 但無 bg 圖 → 依 CAPTURE 附錄 5 純色）、數字「text」16px 置中；
   post-641 acb44c9 無框線 */
.l2svc-pricing__num {
  flex: 0 0 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 80px;
  background: var(--palette-7);
  text-align: center;
}
.l2svc-pricing__num span {
  font-size: var(--typo-text-fs);
  line-height: var(--typo-text-lh);
  letter-spacing: var(--ls-typo);
  color: var(--color-heading);
}
/* 內容欄 90%：column gap 8 — post-641 078abce */
.l2svc-pricing__content {
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* 收費項目 h4：200px 寬欄（tablet 240）、字 palette-4 — post-641 63af095 */
.l2svc-pricing__name {
  width: 200px;
  max-width: 200px;
  color: var(--palette-4);
  margin: 0;
}
/* 收費描述：16px lh1.8（Elementor 內容區 body） */
.l2svc-pricing__desc {
  font-size: var(--typo-text-fs);
  line-height: var(--typo-text-lh);
  letter-spacing: var(--ls-typo);
  color: var(--palette-3);
}

/* =========================================================
   區塊 3：FAQ（post-26 6ca964f：margin-top 96 → 手機 48；標題組置中、
   gap 12、下距 40 → 手機 0；手風琴 margin-bottom 104 → 手機 0）
   手風琴本體樣式走 base .niiice-accordion；此處只補 service 頁差異：
   標籤 = Elementor「primary」18px（base 預設 20px 是首頁服務手風琴的值）、
   +/x icon 20px（post-26 0e48f8b icon font-size:20px）
   ========================================================= */
.l2svc-faq { margin-top: 96px; }
.l2svc-faq__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin-bottom: 40px;
}
.l2svc-faq__accordion { margin-bottom: 104px; }
.l2svc-faq .niiice-accordion__label {
  font-size: var(--typo-primary-fs);
  line-height: var(--typo-primary-lh);
  letter-spacing: var(--ls-typo);
}
.l2svc-faq .niiice-accordion__label::after { font-size: 20px; }
/* 答案 rich：16px lh1.8 palette-3 */
.l2svc-faq__a {
  font-size: var(--typo-text-fs);
  line-height: var(--typo-text-lh);
  letter-spacing: var(--ls-typo);
  color: var(--palette-3);
}

/* =========================================================
   RWD（斷點值 = 母站 post-26 / post-641 media query）
   ========================================================= */
@media (max-width: 1024px) {
  /* timeline 2 站/屏（padding 維持 60px — 母站 tablet 未改） */
  .l2svc-timeline__item { flex-basis: 50%; max-width: 50%; }
  /* pricing 列 gap 收成 12、項目名欄 240px — post-641 tablet */
  .l2svc-pricing__item { gap: 12px; }
  .l2svc-pricing__name { width: 240px; max-width: 240px; }
}

@media (max-width: 767px) {
  .l2svc-banner__inner { padding-bottom: 24px; }

  .l2svc-process__inner { gap: 24px; }
  /* timeline 1 站/屏、左右 padding 24px（48px/2） */
  .l2svc-timeline__item { flex-basis: 100%; max-width: 100%; padding: 0 24px; }

  /* pricing 直排：左欄 margin 80 上 / 0 下、清單 0 上 / 80 下 — post-26 mobile */
  .l2svc-pricing__inner { flex-direction: column; }
  .l2svc-pricing__head { flex-basis: auto; width: 100%; margin: 80px 0 0 0; }
  .l2svc-pricing__list { flex-basis: auto; width: 100%; margin: 0 0 80px 0; }

  .l2svc-faq { margin-top: 48px; }
  .l2svc-faq__head { margin-bottom: 0; }
  .l2svc-faq__accordion { margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .l2svc-timeline__track { transition: none; }
}