/* ============================================================
   前台分頁 .news-pagination（全站共用元件）
   對應模板 App\Views\pagination_front、Figma node 1276-24851 / 1413-28599
   由 news_list / case_list / custom_system_list 等列表頁共用，故抽為全域元件
   ============================================================ */

/* 分頁列：[白底灰] prev / 1 2 3 / [白底灰] next（橘色為 hover 效果） */
.news-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 38px;
}

.news-pagination-arrow {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .25s, color .25s, transform .25s, box-shadow .25s;
}

.news-pagination-arrow svg {
  width: 22px;
  height: 22px;
}

/* 預設：左右箭頭皆白底 + 灰圖 + 陰影 */
.news-pagination-prev,
.news-pagination-next {
  background: var(--c-bg-white);
  color: var(--c-placeholder);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

/* hover：橘底 + 白圖（左右各自微位移） */
.news-pagination-prev:hover,
.news-pagination-next:hover {
  background: var(--c-brand);
  color: var(--c-on-dark);
  box-shadow: 0 4px 14px rgba(243, 152, 0, .35);
}

.news-pagination-prev:hover {
  transform: translateX(-2px);
}

.news-pagination-next:hover {
  transform: translateX(2px);
}

/* 停用狀態（無上一頁／下一頁）：降低透明度、不可點擊、不套用 hover 位移 */
.news-pagination-arrow.is-disabled {
  cursor: default;
  opacity: .4;
  pointer-events: none;
}

.news-pagination-pages {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 28px;
}

.news-pagination-pages a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: var(--fs-lg);
  color: var(--c-placeholder);
  text-decoration: none;
  letter-spacing: 1.6px;
  transition: color .25s;
}

.news-pagination-pages a:hover {
  color: var(--c-text-2);
}

/* 當前頁：深黑色 + Medium，比其他頁更醒目但不變橘 */
.news-pagination-pages li.is-current a {
  color: var(--c-text-2);
  font-weight: 500;
  letter-spacing: 2.4px;
}

/* === RWD === */
@media (max-width: 767.98px) {
  .news-pagination {
    gap: 16px;
  }

  .news-pagination-arrow {
    width: 44px;
    height: 44px;
  }
}