/**
 * @file pager.css
 * Responsive show/hide for the desktop/mobile pager halves in
 * templates/includes/pager.twig.
 *
 * Deliberately NOT using Tailwind's `hidden`/`lg:*` utilities here: Drupal
 * core ships its own unlayered `.hidden { display: none; }` (core/modules/
 * system/css/components/hidden.module.css, loaded on every page). Per the
 * CSS Cascade Layers spec, unlayered rules always beat rules inside a
 * `@layer` — including Tailwind's own utilities, which live in
 * `@layer utilities`. A class named `hidden` can never be un-hidden by a
 * Tailwind responsive variant on this project; this file uses plain,
 * non-colliding class names instead, in a stylesheet that is itself
 * unlayered (attached as a plain library, same as Drupal core's), so the
 * cascade resolves on source order/specificity as normal.
 *
 * The breakpoint matches Tailwind's `lg` (992px, see agora_theme's
 * grid.css --breakpoint-md / main.css @theme block) so both halves swap at
 * exactly the same width the rest of the page's responsive layout uses.
 */

.pager--desktop {
  display: none;
}

.pager--mobile {
  display: block;
}

@media (min-width: 992px) {
  .pager--desktop {
    display: block;
  }

  .pager--mobile {
    display: none;
  }
}