/* ========================================================
   COMMON PAGINATION STYLES
   - Dùng chung cho: Recruitment, News, Projects
   - Sử dụng CSS Variables để dễ customize
   ======================================================== */

:root {
  --pagination-brand-color: #055ea9;
  --pagination-text-color: #0f172a;
  --pagination-hover-bg: #055ea9;
  --pagination-hover-color: #fff;
  --pagination-disabled-opacity: 0.45;
  --pagination-dots-color: #6b7280;
  --pagination-button-size: 36px;
  --pagination-button-size-mobile: 32px;
  --pagination-gap: 20px;
  --pagination-gap-mobile: 8px;
  --pagination-icon-size: 20px;
  --pagination-icon-size-mobile: 18px;
  --pagination-margin: 22px 0 100px;
}

/* ========== Pagination Base ========== */


.pagination .page-numbers,
.th-news__pagination .page-numbers {
  display: flex;
  justify-content: center;
  gap: var(--pagination-gap);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* mobile-specific compact list is hidden by default on desktop */
.pagination .page-numbers.page-numbers--mobile {
  display: none;
}

/* Cho phép <li> không phá layout (nếu có echo <li> quanh từng item) */
.pagination .page-numbers > li,
.th-news__pagination .page-numbers > li {
  display: contents;
}

/* ========== Buttons (numbers + prev/next) ========== */
.pagination a.page-numbers,
.pagination span.page-numbers,
.th-news__pagination a.page-numbers,
.th-news__pagination span.page-numbers {
  display: inline-flex;
  width: var(--pagination-button-size);
  height: var(--pagination-button-size);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  align-items: center;
  justify-content: center;
  color: var(--pagination-text-color);
  background: transparent;
  border: 0;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease,
    transform 0.12s ease;
}

/* Hover chỉ cho link (span là disabled/current thì không) */
.pagination a.page-numbers:hover,
.th-news__pagination a.page-numbers:hover {
  background: var(--pagination-hover-bg);
  color: var(--pagination-hover-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Active (click) */
.pagination a.page-numbers:active,
.th-news__pagination a.page-numbers:active {
  transform: translateY(1px);
}

/* Focus (keyboard a11y) */
.pagination a.page-numbers:focus-visible,
.th-news__pagination a.page-numbers:focus-visible {
  outline: 2px solid
    color-mix(in oklab, var(--pagination-brand-color) 70%, white);
  outline-offset: 2px;
}

/* ========== Current Page ========== */
.pagination .page-numbers.current,
.pagination span.page-numbers.current,
.th-news__pagination .current,
.th-news__pagination span.page-numbers.current {
  background: var(--pagination-brand-color);
  color: var(--pagination-hover-color);
  pointer-events: none;
}

/* Nếu muốn viền + nền nhạt thay vì fill đặc */
.pagination span.page-numbers.current.is-outline,
.th-news__pagination span.page-numbers.current.is-outline {
  background: transparent;
  color: var(--pagination-brand-color);
  box-shadow: inset 0 0 0 2px var(--pagination-brand-color);
}

/* ========== Ellipsis Dots ========== */
.pagination .dots,
.th-news__pagination .dots {
  width: auto;
  min-width: 24px;
  padding: 0 6px;
  color: var(--pagination-dots-color);
  background: transparent;
  cursor: default;
}

/* ========== Disabled State ========== */
.pagination .is-disabled,
.pagination .page-numbers[aria-disabled="true"],
.th-news__pagination .is-disabled,
.th-news__pagination .page-numbers[aria-disabled="true"] {
  opacity: var(--pagination-disabled-opacity);
  pointer-events: none;
  cursor: default;
  filter: grayscale(100%);
}

.pagination .is-disabled:hover,
.th-news__pagination .is-disabled:hover {
  background: transparent;
  box-shadow: none;
}

/* ========== Icons (CSS mask từ file SVG) ========== */
.pagination .icon,
.th-news__pagination .icon {
  width: var(--pagination-icon-size);
  height: var(--pagination-icon-size);
  display: inline-block;
  background-color: currentColor;
}

.pagination .icon-chevron-left,
.th-news__pagination .icon-chevron-left {
  -webkit-mask: url("../../images/icons/arrow-left.svg") no-repeat center /
    contain;
  mask: url("../../images/icons/arrow-left.svg") no-repeat center / contain;
}

.pagination .icon-chevron-right,
.th-news__pagination .icon-chevron-right {
  -webkit-mask: url("../../images/icons/arrow-right.svg") no-repeat center /
    contain;
  mask: url("../../images/icons/arrow-right.svg") no-repeat center / contain;
}

/* ========== Icon Styles (Alternative - Inline SVG) ========== */
.pagination .page-arrow,
.th-news__pagination .page-arrow {
  width: var(--pagination-icon-size);
  height: var(--pagination-icon-size);
  display: block;
}

.pagination .page-arrow.is-rotate,
.th-news__pagination .page-arrow.is-rotate {
  transform: rotate(180deg);
}

/* ========== Prev/Next Buttons ========== */
.pagination .prev,
.pagination .next,
.th-news__pagination .prev,
.th-news__pagination .next {
  background: none;
  border: none;
}

.pagination a.prev:hover,
.pagination a.next:hover,
.th-news__pagination a.prev:hover,
.th-news__pagination a.next:hover {
  background: var(--pagination-hover-bg);
  color: var(--pagination-hover-color);
}

/* ========== Dark Mode (Optional) ========== */
@media (prefers-color-scheme: dark) {
  .pagination a.page-numbers,
  .pagination span.page-numbers,
  .th-news__pagination a.page-numbers,
  .th-news__pagination span.page-numbers {
    color: #e5e7eb;
  }

  .pagination a.page-numbers:hover,
  .th-news__pagination a.page-numbers:hover {
    background: color-mix(in oklab, #3b82f6 85%, black);
    color: #fff;
  }

  .pagination .current,
  .th-news__pagination .current {
    background: color-mix(in oklab, #3b82f6 85%, black);
  }

  .pagination .dots,
  .th-news__pagination .dots {
    color: #9ca3af;
  }
}

/* ========== Mobile Responsive ========== */
@media (max-width: 480px) {
  /* hide full list on small screens and show the compact variant */
  .pagination .page-numbers {
    display: none;
  }
  .pagination .page-numbers.page-numbers--mobile {
    display: flex;
    gap: var(--pagination-gap-mobile);
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
  }

  .pagination .page-numbers.page-numbers--mobile a.page-numbers,
  .pagination .page-numbers.page-numbers--mobile span.page-numbers {
    min-width: var(--pagination-button-size-mobile);
    height: var(--pagination-button-size-mobile);
    font-size: 13px;
  }

  .pagination .page-numbers.page-numbers--mobile .icon,
  .pagination .page-numbers.page-numbers--mobile .page-arrow {
    width: var(--pagination-icon-size-mobile);
    height: var(--pagination-icon-size-mobile);
  }
}

.proj-archive .pagination {
  margin-top: 50px;
  display: flex;
  gap: var(--pagination-gap);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.proj-archive .pagination .page-numbers {
  background: #fff;
  color: #000;
}

a.page-numbers:hover {
  background: var(--pagination-hover-bg);
  color: var(--pagination-hover-color);
}

.proj-archive .pagination .page-numbers.current,
.proj-archive .pagination .page-numbers:focus-visible {
  background: var(--pagination-hover-bg);
  color: var(--pagination-hover-color);
}

.proj-archive .pagination .page-numbers.is-disabled {
  color: #9aa6bf;
  cursor: default;
  pointer-events: none;
}

.proj-archive .pagination .prev:hover,
.proj-archive .pagination .next:hover {
  color: var(--pagination-hover-color);
}

@media (max-width: 480px) {
  .proj-archive .pagination .page-numbers {
    min-width: var(--pagination-button-size-mobile);
    height: var(--pagination-button-size-mobile);
    /* padding: 0 10px; */
    font-size: 13px;
  }
}

/* ========================================================
   UTILITY CLASSES
   ======================================================== */
.sr-only,
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}