/* ============================================
   組件共用樣式（shared）
   comp-header：實績案例 / 好評推薦 / FAQ 共用的收合標頭
   （背景框偽元素 + 漸層字標題 + 展開按鈕），只有文字不同。
   ============================================ */

/* 組件容器：四個組件垂直堆疊、組件間距、上下區塊 padding
   上內距各頁可不同：於各頁 pages/<slug>.css 覆寫 --pc-pt 即可（未設則用預設 30px）。
   例：.page-components { --pc-pt: 48px; } */
.page-components {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(56px, 7vw, 96px);
  padding-top: 30px;
  padding-bottom: clamp(56px, 7vw, 96px);
}

.comp-header {
  position: relative;
  width: 100%;
  max-width: 1162px;
  min-height: 65px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 11px 8px 21px;
  box-sizing: border-box;
}
/* 背景框：偽元素裝飾，全寬 top:0 left:0、放內容後面（共用一張 SVG 1164×63） */
.comp-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: url("../../images/components/case-studies/case-studies__header-bar-451-3126.svg")
    top center / 100% no-repeat;
  pointer-events: none;
}
/* 漸層文字標題（#41220e → #ab7a44） */
.comp-header__title {
  margin: 0;
  z-index: 1;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  background: linear-gradient(180.23deg, #41220e, #ab7a44);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* 展開/收合按鈕：漸層底 + 陰影（純 CSS 收合，label 綁 checkbox） */
.comp-header__expand {
  flex-shrink: 0;
  z-index: 1;
  height: 30px;
  border-radius: 4px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25);
  background: linear-gradient(180.23deg, #41220e, #ab7a44);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  box-sizing: border-box;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}
/* label 文字：展開時顯示「收合」、收合時顯示「展開」（覆蓋 PHP 預設字） */
.comp-header__expand-label {
  font-size: 0; /* 隱藏原始「展開」文字，改由 ::after 依狀態輸出 */
}
.comp-header__expand-label::after {
  content: "收合";
  font-size: 14px;
}
.comp-header__toggle:not(:checked)
  ~ .comp-header__expand
  .comp-header__expand-label::after {
  content: "展開";
}
/* 收合鍵箭頭：改用設計稿白色三角 SVG（預設朝下 ▼） */
.comp-header__expand-arrow {
  width: 11px;
  height: 9px;
  flex-shrink: 0;
  background: url("../../images/components/header-white-arrow.svg") center /
    contain no-repeat;
  transition: transform 0.2s ease;
}
/* 展開態（checked）：箭頭朝上（▲）；收合態：朝下（▼，預設） */
.comp-header__toggle:checked ~ .comp-header__expand .comp-header__expand-arrow {
  transform: rotate(180deg);
}

/* ===== 純 CSS 收合：未勾選（收合）時，隱藏標頭以外的區塊內容 ===== */
.case-studies:has(.comp-header__toggle:not(:checked)) > :not(.comp-header),
.reviews:has(.comp-header__toggle:not(:checked)) > :not(.comp-header),
.faq:has(.comp-header__toggle:not(:checked)) > :not(.comp-header) {
  display: none;
}

/* ============================================
   三區塊輪播「共用機制」（實績案例 / 好評推薦 / 延伸閱讀）
   只統一「捲動 / 拖曳」相關屬性，讓三者拖曳手感一致、不跑版；
   各自的 display（grid/flex）、max-width、--gap、卡片樣式仍留在各組件檔。
   重點：
   - 水平 padding 一律 0 → 首欄 offset=0、末頁留白計算不受瀏覽器 end-padding 差異影響。
   - --cols 為純整數，JS 直接讀取以「精準」分頁（不靠四捨五入量測）。
   - overscroll-behavior-x: contain → 水平拖曳不觸發瀏覽器返回手勢、不連動整頁。
   - scroll-behavior: auto → 落點動畫全由 JS 的 requestAnimationFrame 補間掌控。
   ============================================ */
.case-studies__grid,
.reviews__cards,
.related-articles__list {
  --cols: 3; /* 每頁欄數（斷點覆蓋）；JS 讀此值精準分頁 */
  --rows: 1; /* 每頁列數；>1 時由 JS 逐列（row-major）排列（case-studies=2） */
  --gap: 40px; /* 欄間距（各組件/斷點覆蓋） */
  --pad-x: 0px; /* 左右留白（卡片陰影空間；各組件覆蓋） */
  --pad-y: 12px; /* 上下留白（卡片陰影空間；各組件覆蓋） */
  position: relative; /* 讓子卡的位置相對於本容器（否則相對外層祖先→分頁位移跑版） */
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  padding: var(--pad-y) var(--pad-x);
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden; /* 不出現垂直捲軸/微跳動 */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: auto;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.case-studies__grid::-webkit-scrollbar,
.reviews__cards::-webkit-scrollbar,
.related-articles__list::-webkit-scrollbar {
  display: none;
}
/* 拖曳中：游標改 grabbing（定位皆由 JS 控制） */
.case-studies__grid.is-dragging,
.reviews__cards.is-dragging,
.related-articles__list.is-dragging {
  cursor: grabbing;
}
/* 展示項目不足一頁（不可捲動）時水平置中；由 JS 依 isScrollable 切換 is-centered。
   注意：可捲動時不可置中，否則捲動起點在中央、左側內容被裁切。 */
.case-studies__grid.is-centered,
.reviews__cards.is-centered,
.related-articles__list.is-centered {
  justify-content: center;
}
/* 卡片內圖片/連結不可被原生拖放（配合 JS dragstart preventDefault） */
.case-studies__grid img,
.case-studies__grid a,
.reviews__cards img,
.reviews__cards a,
.related-articles__list img,
.related-articles__list a {
  -webkit-user-drag: none;
}
/* 尾部 spacer（JS 動態插入以左對齊末頁）：不可被選取/點擊、不顯示標記 */
.carousel-spacer {
  list-style: none;
  pointer-events: none;
  user-select: none;
}

/* 共用分頁點（實績案例 / 好評推薦 / 延伸閱讀 卡片下方置中）
   設計稿：3 顆同尺寸圓點，作用中=棕漸層實心，其餘=白底細棕框（空心） */
.comp-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: 4px;
}
.comp-dots__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #ab7a44;
}
.comp-dots__dot--active {
  border-color: transparent;
  background: linear-gradient(360deg, #41220e, #ab7a44);
}

/* ===== RWD ≤640：標頭列與分頁點手機收斂（實績/好評/FAQ 共用） ===== */
@media (max-width: 640px) {
  .comp-header {
    min-height: 48px;
    padding: 8px 7px 8px 16px;
    gap: 10px;
  }
  /* 手機專屬標頭框圖（不覆蓋桌機共用圖） */
  .comp-header::before {
    background-image: url("../../images/case-studies/case-studies__header-bar-451-3126-mobile.svg");
  }
  .comp-header__title {
    font-size: 15px;
  }
  .comp-header__expand {
    height: 20px;
    padding: 4px 5px;
    gap: 4px;
  }
  .comp-header__expand-label::after {
    font-size: 12px;
  }
  .comp-header__expand-arrow {
    width: 10px;
    height: 8px;
  }
  .comp-dots {
    gap: 14px;
  }
}