/* KOBIL — Resources: pagination (Figma 6201:91702, component 3816:23735)
 *
 * One stylesheet for all three lists. The static pages each styled their own
 * pager (`insights-browser__page-*`, `csb__page*`, `ebk-browser__page-*`) because
 * each page had its own sheet; the markup is one React component now
 * (components/site/Pager.tsx), so the three near-copies collapse into this.
 *
 * Measured off the frame — the old rules differed on every point that matters:
 *   · the active page is Dark Blue (#1046cf) and SemiBold; the others are navy
 *     and Regular. The static CSS had that inverted (all blue, active navy).
 *   · the arrows are a bare 18px glyph in a 34px hit area — no border, no fill.
 *     The static CSS drew a 44px bordered box with a tinted background.
 *   · gaps: 20px around the number row, 12px between numbers.
 */

.rs-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--w20);
  /* 80px between the last card row and the pager (frame 6201:91684). */
  margin-top: var(--w80);
}

.rs-pager__pages {
  display: flex;
  align-items: center;
  gap: var(--w12);
  font-family: var(--font-sans);
  font-size: var(--w16);
  line-height: var(--w23);
}

.rs-pager__num {
  font-weight: 400;
  color: var(--navy);
  transition: color var(--dur) var(--ease);
}

.rs-pager__num:hover {
  color: var(--blue);
}

/* The page you are on: Dark Blue, SemiBold, not a link. */
.rs-pager__num[aria-current='page'] {
  font-weight: 600;
  color: var(--blue-dark);
  cursor: default;
}

.rs-pager__gap {
  font-weight: 600;
  color: var(--navy);
}

/* 14px box + 10px padding in the frame = a 34px hit area around an 18px glyph. */
.rs-pager__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--w10);
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--navy);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.rs-pager__arrow:hover:not(:disabled) {
  color: var(--blue);
}

/* At the first/last page the control is a disabled button, greyed to System/65%. */
.rs-pager__arrow:disabled {
  color: var(--navy-65);
  cursor: default;
}

.rs-pager__arrow svg {
  display: block;
  width: var(--w18);
  height: var(--w18);
}

@media (max-width: 768px) {
  .rs-pager {
    gap: var(--m16);
    /* The phone pager is a full-width band: 20px under the last card, then 32
       above and below the row itself. That is what makes the frame instance
       6201:92003 87 tall (32+23+32) while its ink is only 13px of glyphs — I read
       the 87 as the control's height at first, which left the row sitting 32px
       too high with the card 64px too short. */
    margin-top: var(--m20);
    padding: var(--m32) 0;
  }

  .rs-pager__pages {
    gap: var(--m10);
    font-size: var(--m14);
    line-height: var(--m20);
  }

  .rs-pager__arrow {
    padding: var(--m8);
  }

  .rs-pager__arrow svg {
    width: var(--m18);
    height: var(--m18);
  }
}