/* ===== PAIN POINTS 基本尺寸與排版===== */
.painpoints-section {
  padding: clamp(48px, 6vw, 96px) 0;
  background-color: var(--bg-light, #f2f2f2);
}

/* 容器變數 */
.pp-scroller {
  position: relative;
  --gap: 16px;
}

/* 滑軌（單一宣告） */
.pp-track {
  display: grid;
  grid-auto-flow: column;
  gap: var(--gap);
  padding-inline: 8px; /* 左右留邊，不被按鈕擋住（手機/平板用） */
  padding-bottom: 6px; /* 陰影不被截掉 */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
  scroll-padding-left: 8px; /* 與padding-inline 對齊 */
  touch-action: pan-x; /* 觸控滾動更順（避免 iOS 誤判手勢)*/
  -webkit-overflow-scrolling: touch;
}
.pp-track::-webkit-scrollbar {
  display: none;
} /* Chrome/Safari */

/* 卡片（交由 grid-auto-columns 控寬，不再設定 width/min-width） */
.pp-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  scroll-snap-align: start;
}

/* 圖片比例 */
.pp-card img {
  width: 100%;
  height: clamp(200px, 26vw, 280px);
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* 漸層文字區 */
.pp-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
  color: #fff;
}

/* 文字樣式放大 */
.pp-overlay h5,
.pp-overlay p {
  white-space: normal;
  word-break: keep-all;
  line-height: 1.4;
  overflow-wrap: anywhere; /*極長英數字的保護（避免英數字太長時溢出)*/
}

.pp-overlay h5 {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 22px); /* 主標*/
}

.pp-overlay p {
  margin: 0;
  font-size: clamp(15px, 1.6vw, 18px); /* 副標 */
  opacity: 0.95;
}

/* 只在支援 hover 的裝置啟用放大（刪掉全域 .pp-card:hover） */
@media (hover: hover) and (pointer: fine) {
  .pp-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  }
}

/* 導航按鈕（玻璃感 + Bootstrap Icons SVG） */
.pp-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(240, 240, 240, 0.35);
  backdrop-filter: blur(3px); /*毛玻璃效果*/
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.5); /* 箭頭 50% */
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease;
  -webkit-backdrop-filter: blur(3px);
}
.pp-nav svg {
  width: 28px;
  height: 28px;
}
.pp-prev {
  left: 14px;
}
.pp-next {
  right: 14px;
}

@media (hover: hover) and (pointer: fine) {
  .pp-nav:hover {
    background: rgba(240, 240, 240, 0.55);
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.7);
  }
}

/* 深色偏好 */
@media (prefers-color-scheme: dark) {
  .pp-nav {
    background: rgba(30, 30, 30, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.75);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }
  .pp-nav:hover {
    background: rgba(30, 30, 30, 0.65);
    color: #fff;
  }
}

/* 無動效偏好 */
@media (prefers-reduced-motion: reduce) {
  .pp-nav {
    transition: none;
  }
}

/* === RWD 欄數與尺寸 === */

/* 手機：卡片更寬、右側露下一張 */
@media (max-width: 576px) {
  .pp-scroller {
    --gap: 12px;
    --peek: 28px;
    --side: 8px;
  }
  .pp-track {
    padding-inline: var(--side);
    gap: var(--gap);
    grid-auto-columns: calc(100% - var(--peek));
  }
  .pp-card {
    min-width: 0;
  }
  .pp-card img {
    height: clamp(180px, 40vh, 260px);
  }
}

/* 平板：兩欄 */
@media (min-width: 768px) and (max-width: 991.98px) {
  .pp-track {
    padding-inline: 0;
    grid-auto-columns: calc((100% - var(--gap)) / 2);
  }
  .pp-card {
    min-width: 0;
  }
  .pp-card img {
    height: 260px;
  }
}

/* 桌機：三欄（修正為真正三欄） */
@media (min-width: 992px) {
  .pp-track {
    padding-inline: 0;
    grid-auto-columns: calc((100% - var(--gap) * 2) / 3);
  }
  .pp-card {
    min-width: 0;
  }
  .pp-card img {
    height: 280px;
  }
}

/* 超大桌機：四欄 */
@media (min-width: 1400px) {
  .pp-track {
    grid-auto-columns: calc((100% - var(--gap) * 3) / 4);
  }
}