/* wgf-pagination.css — Module M30: Pagination component.
   Used beneath search results, leaderboard tables, item lists, and guide indexes.
   Prev/Next + numbered pages; active page gold-highlighted with aria-current="page";
   ellipsis collapses long ranges; disabled edges use aria-disabled="true".
   Colours/type from _tokens.css. */

.pager{
  display:flex;
  align-items:center;
  gap:var(--space-1);
  flex-wrap:wrap;
}

/* ── shared button chrome ── */
.pager__prev,
.pager__next,
.pager__page,
.pager__ellipsis{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:36px;
  min-width:36px;
  padding:0 var(--space-2);
  border:1px solid var(--wgf-border-neutral);
  border-radius:var(--radius-control);
  background:var(--wgf-panel-1);
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  font-variant-numeric:tabular-nums;
  color:var(--wgf-muted);
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  line-height:1;
  transition:
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}
@media(prefers-reduced-motion:reduce){
  .pager__prev,.pager__next,.pager__page,.pager__ellipsis{transition:none;}
}

/* ── prev / next labels ── */
.pager__prev,
.pager__next{
  font-family:var(--font-display);
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:0 var(--space-3);
  gap:var(--space-1);
}

/* ── hover ── */
.pager__prev:hover:not([aria-disabled="true"]),
.pager__next:hover:not([aria-disabled="true"]),
.pager__page:hover:not([aria-current]){
  background:var(--wgf-panel-2);
  border-color:var(--wgf-border);
  color:var(--wgf-text);
}

/* ── active / current page ── */
.pager__page[aria-current="page"]{
  background:var(--wgf-panel-2);
  border-color:var(--wgf-border-strong);
  color:var(--wgf-gold-primary);
  cursor:default;
  pointer-events:none;
  font-weight:500;
}

/* ── disabled prev / next ── */
.pager__prev[aria-disabled="true"],
.pager__next[aria-disabled="true"]{
  opacity:.3;
  cursor:default;
  pointer-events:none;
}

/* ── ellipsis ── */
.pager__ellipsis{
  border-color:transparent;
  background:transparent;
  pointer-events:none;
  cursor:default;
  color:var(--wgf-muted);
  min-width:24px;
  font-family:var(--font-ui);
  letter-spacing:.1em;
}

/* ── page list reset ── */
.pager__pages{
  display:flex;
  align-items:center;
  gap:var(--space-1);
  list-style:none;
  margin:0;
  padding:0;
  flex-wrap:wrap;
}

/* ── focus ring on interactive elements ── */
.pager__prev:focus-visible,
.pager__next:focus-visible,
.pager__page:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
}

/* ── responsive: on narrow screens stack prev/next above/below pages ── */
@media(max-width:480px){
  .pager{
    justify-content:center;
    gap:var(--space-2);
  }
  .pager__prev,.pager__next{
    flex:1 0 auto;
    justify-content:center;
  }
  .pager__pages{
    justify-content:center;
    width:100%;
    order:1;
  }
  .pager__next{ order:2; }
}

/* =============================================================================
   IN-GAME RECUT (owner ruling 2026-08-14, live-fire reskin)
   "page selectors, arrows, etc. - we are going for near 1:1 for ALL types in game."

   The pager above is the generic web control: rounded corners, --font-mono digits, a
   flat --wgf-panel-1 fill. The client has none of those. Recut in place (this file is
   the component's one home, Rule 11):
     numbered pages -> the stone plate letter-tab, gold Friz small-caps, squared
     active page    -> fully lit gold on a metal border (the client selected tab)
     prev / next    -> the red action plate, same slices as .wgf-btn-red
     ellipsis       -> inert, no plate (it is not a target)
   Markup is untouched: wgf_ui.pagination_html still emits the same nav.pager tree, so
   nothing that asserts on that HTML can break.
   ============================================================================= */

.pager__page,
.pager__prev,
.pager__next {
  border-radius: 0;                                /* squared - no rounded controls */
  font-family: var(--font-game);
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.03em;
  text-shadow: var(--text-ink-outline);
}

/* Numbered pages: the stone plate, matching the A-Z letter tabs exactly. */
.pager__page {
  color: var(--wgf-gold-dim);
  border: 1px solid var(--wgf-metal);
  background:
    linear-gradient(rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.38)),
    url(/assets/ui/classhall-stone-tile.png) left top / 256px 256px repeat,
    var(--wgf-plate-hi);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.pager__page:hover { color: var(--wgf-gold-bright); }

/* The page you are on - the client lights the selected tab fully. */
.pager__page[aria-current="page"] {
  color: var(--wgf-gold-bright);
  border-color: var(--wgf-metal);
  background:
    linear-gradient(rgba(var(--wgf-gold-rgb), 0.10), rgba(var(--wgf-gold-rgb), 0.04)),
    url(/assets/ui/classhall-stone-tile.png) left top / 256px 256px repeat,
    var(--wgf-plate-hi);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}

/* Prev / Next are ACTIONS, so they take the red plate - the same three slices as
   .wgf-btn-red, which is what the client puts on every directional control. */
.pager__prev,
.pager__next {
  border: 0;
  padding: 0 13px;                                 /* == cap width at this height */
  color: var(--wgf-gold-dim);
  background:
    url(/assets/ui/128-redbutton-left-cap.png) left center / auto 100% no-repeat border-box,
    url(/assets/ui/128-redbutton-right-cap.png) right center / auto 100% no-repeat border-box,
    url(/assets/ui/_128-redbutton-center.png) left center / auto 100% repeat-x content-box;
  background-color: transparent;
  filter: brightness(0.66) saturate(0.9);
}
.pager__prev:hover,
.pager__next:hover {
  filter: brightness(0.9) saturate(1);
  color: var(--wgf-gold-bright);
}
/* An edge with nowhere to go stays dark and inert rather than teasing a hover. */
.pager__prev[aria-disabled="true"],
.pager__next[aria-disabled="true"] {
  filter: brightness(0.4) saturate(0.6);
  color: var(--wgf-gold-dim);
  cursor: default;
  pointer-events: none;
}

/* The ellipsis is a gap marker, not a control: strip the plate off it entirely. */
.pager__ellipsis {
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--wgf-muted);
  cursor: default;
}