/**
 * pager.css — FacultyPage Theme
 *
 * Styles the Drupal pager / pagination rendered by pager.html.twig.
 * Fixes the vertical-stacking bug by making fp-pager__list a flex row.
 *
 * States:
 *   Default      — outlined number buttons
 *   .is-active   — filled terra circle for current page
 *   --prev/next  — arrow-only icon buttons
 *   --ellipsis   — muted … separator
 *   :hover       — terra-pale fill
 *   :focus-visible — accessible ring
 */

/* ── WRAPPER ─────────────────────────────────────────────────────────────── */
.fp-pager {
  display: flex;
  justify-content: center;
  padding: 1.75rem 0 0.5rem;
}

/* ── LIST — THE KEY FIX: flex row, not block ─────────────────────────────── */
.fp-pager__list {
  display: flex;          /* ← this is what was missing */
  flex-direction: row;    /* explicit: horizontal */
  align-items: center;
  flex-wrap: wrap;        /* wraps gracefully on small screens */
  gap: 0.3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── SHARED BUTTON STYLE (applies to both <a> and <span>) ─────────────────  */
/*.fp-pager__item a,*/
.fp-pager__item span:not(.visually-hidden) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 0.45rem;
  border-radius: var(--fp-radius);
  border: 1.5px solid var(--fp-border);
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  color: var(--fp-mid);
  text-decoration: none;
  background: var(--fp-white);
  transition: background var(--fp-transition),
              border-color var(--fp-transition),
              color var(--fp-transition),
              box-shadow var(--fp-transition);
  cursor: pointer;
  line-height: 1;
  user-select: none;
}

/* Hover */
.fp-pager__item a:hover {
  background: var(--fp-terra-pale);
  border-color: var(--fp-terra);
  color: var(--fp-terra-dark);
}

/* Focus ring */
.fp-pager__item a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(196, 99, 58, 0.25);
  border-color: var(--fp-terra);
}

/* ── CURRENT PAGE ────────────────────────────────────────────────────────── */
.fp-pager__item.is-active span:not(.visually-hidden) {
  background: var(--fp-terra);
  border-color: var(--fp-terra);
  color: var(--fp-white);
  font-weight: 700;
  cursor: default;
  box-shadow: 0 2px 6px rgba(196, 99, 58, 0.3);
}

/* ── PREV / NEXT / FIRST / LAST — icon-only ──────────────────────────────── */
.fp-pager__item--prev a,
.fp-pager__item--next a,
.fp-pager__item--first a,
.fp-pager__item--last a {
  font-size: 0.9rem;
  color: var(--fp-mid);
  border-color: var(--fp-border);
}

.fp-pager__item--prev a:hover,
.fp-pager__item--next a:hover,
.fp-pager__item--first a:hover,
.fp-pager__item--last a:hover {
  background: var(--fp-terra-pale);
  border-color: var(--fp-terra);
  color: var(--fp-terra-dark);
}

/* Add a small gap between prev group and page numbers */
.fp-pager__item--prev  { margin-right: 0.25rem; }
.fp-pager__item--next  { margin-left:  0.25rem; }
.fp-pager__item--first { margin-right: 0.1rem; }
.fp-pager__item--last  { margin-left:  0.1rem; }

/* ── ELLIPSIS ────────────────────────────────────────────────────────────── */
.fp-pager__item--ellipsis span {
  border-color: transparent;
  background: transparent;
  color: var(--fp-light);
  cursor: default;
  min-width: 24px;
  letter-spacing: 0.05em;
  font-family: inherit;
  font-size: 0.85rem;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */

/* On tablet: hide first/last, keep prev/next */
@media (max-width: 768px) {
  .fp-pager__item--first,
  .fp-pager__item--last {
    display: none;
  }

  .fp-pager__item a,
  .fp-pager__item span:not(.visually-hidden) {
    min-width: 32px;
    height: 32px;
    font-size: 0.68rem;
  }
}

/* On small mobile: hide middle page numbers, keep prev/current/next */
@media (max-width: 480px) {
  /* Hide all plain page number items by default */
  .fp-pager__item:not(.fp-pager__item--prev):not(.fp-pager__item--next):not(.fp-pager__item--first):not(.fp-pager__item--last):not(.is-active):not(.fp-pager__item--ellipsis) {
    display: none;
  }

  .fp-pager__item a,
  .fp-pager__item span:not(.visually-hidden) {
    min-width: 36px;
    height: 36px;
  }
}

/* ── PRINT ───────────────────────────────────────────────────────────────── */
@media print {
  .fp-pager { display: none; }
}

/* ── DRUPAL CORE FALLBACK ────────────────────────────────────────────────────
   Override the default Drupal pager classes in case any contrib module
   or view still outputs the old .pager__items markup instead of our template.
   ─────────────────────────────────────────────────────────────────────────── */
.pager__items {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}

.pager__item a,
.pager__item.is-active a,
.pager__item.is-active span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border-radius: var(--fp-radius);
  border: 1.5px solid var(--fp-border);
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  color: var(--fp-mid);
  text-decoration: none;
  background: var(--fp-white);
  transition: all var(--fp-transition);
  padding: 0 0.45rem;
}

.pager__item a:hover {
  background: var(--fp-terra-pale);
  border-color: var(--fp-terra);
  color: var(--fp-terra-dark);
}

.pager__item.is-active a,
.pager__item.is-active span {
  background: var(--fp-terra);
  border-color: var(--fp-terra);
  color: white;
  font-weight: 700;
}

.pager__item--next a,
.pager__item--previous a {
  font-size: 0.9rem;
}

/* Hide the text "Next ›" and "Last »" labels — icon only */
.pager__item--next a span[aria-hidden],
.pager__item--last a span[aria-hidden],
.pager__item--first a span[aria-hidden],
.pager__item--previous a span[aria-hidden] {
  font-size: 0.9rem;
}

.pager__item--ellipsis {
  display: flex;
  align-items: center;
  color: var(--fp-light);
  padding: 0 0.2rem;
  font-size: 0.85rem;
}