/* ==========================================================================
   GNC SG — Pager / Pagination
   ==========================================================================
   Drawn from design/icon/pagination.png: "‹ 1 2 3 4 5 ›" as bare text, no
   boxes or borders. The page links are brand red and the page you are on is
   dark — the reverse of the usual "highlight the current page" treatment, so
   it is worth not second-guessing when editing this file.

   The design frame is 120px × 21px, but that width is simply what five pages
   plus two chevrons hug to; page counts vary, so only the height and the
   auto-layout properties (row, flex-end, 10px gap) are reproduced here.

   Markup comes from templates/navigation/pager.html.twig, which keeps the
   chevrons present-but-disabled at each end where core would drop them.
   ========================================================================== */

.pager {
  /* Sampled from the design. They sit outside the palette: the pager red is
     the darker "mosaic" red also used on the homepage tiles, not
     --color-primary, and neither grey lands on a --color-grey-* step. */
  --pager-link:     #DD1C1D;
  --pager-current:  #373737;
  --pager-disabled: #8C8C8C;

  margin-top: var(--space-10);
  display: flex;
  justify-content: flex-end;
}

.pager__items {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding: 0;
  gap: 10px;
  margin: 0;
  list-style: none;
  /* 16px text on a 21px line is the design's 21px frame height. */
  font-size: var(--font-size-base);
  line-height: 21px;
}

.pager__item {
  display: inline-flex;
  align-items: center;
}

/* One rule for links and for the current page's span, so the digits sit on a
   common baseline regardless of which one they are. */
.pager__item a,
.pager__item span[aria-current],
.pager__item-disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: var(--font-weight-normal);
  transition: color var(--transition-fast);
}

/* Page links */
.pager__item a {
  color: var(--pager-link);
}

.pager__item a:hover,
.pager__item a:focus-visible {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* Current page — dark, unlinked. */
.pager__item.is-active span[aria-current] {
  color: var(--pager-current);
  font-weight: var(--font-weight-medium);
}

/* Chevrons. currentColor ties the arrow to whichever state its parent is in,
   so the disabled grey and the link red both come through without repeating
   the colour on the SVG. */
.pager__chevron {
  display: block;
  color: inherit;
}

/* A chevron with nowhere to go: shown, but greyed and not interactive. */
.pager__item-disabled {
  color: var(--pager-disabled);
  cursor: default;
}

/* Ellipsis — core renders the character as a bare text node on the <li>, so
   there is no inner element to style. */
.pager__item--ellipsis {
  color: var(--pager-disabled);
}

/* ==========================================================================
   Mobile (design/mobile/pagination/Pagination-Container.png, drawn at 375px)
   ==========================================================================
   The mobile pager is not the desktop one reflowed — it inverts it. Desktop is
   bare text hugging the right edge with red links and a dark current page;
   mobile is centred, the links and ellipsis go grey, and the current page and
   the two chevrons become 30px tiles — the current page filled red with white
   digits, the chevrons outlined on white.

   Same markup drives both: templates/navigation/pager.html.twig already keeps
   the chevron present-but-disabled at each end, which is what holds the row's
   shape on the first and last page now that the chevrons are boxed.

   Measured at 375px: the row spans x83–x291, so it is centred, the tiles are
   30x30 on a 4px radius, and the gap is 12px between the numbers with the
   chevron tiles set 3px further out.
   ========================================================================== */

@media (max-width: 767px) {

  .pager {
    /* Both sampled from the mobile mock, both off-palette. Note the current
       page's red is --color-primary (#EC1C25) here, not the darker #DD1C1D
       the desktop pager uses for its links — the two designs differ. */
    --pager-box-border: #E3E5E9;

    /* Numbers, ellipsis and the dead chevron all share one grey, so the two
       vars above resolve to it rather than to their desktop values. */
    --pager-link:     #7F7F7F;
    --pager-disabled: #7F7F7F;

    justify-content: center;
    /* 35px clear of the last card in education-hub.png. */
    margin-top: var(--space-8);
  }

  .pager__items {
    justify-content: center;
    gap: 12px;
  }

  /* ---- Current page ----
     A filled tile rather than the desktop's plain dark text. min-width, not
     width: the design only ever shows single digits, but page 10 upwards has
     to widen the tile instead of overflowing it. */
  .pager__item.is-active span[aria-current] {
    min-width: 30px;
    height: 30px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--font-weight-medium);
  }

  /* ---- Chevron tiles ----
     The live link and the disabled span are boxed alike; only the ink differs,
     and that already comes from --pager-link / --pager-disabled above. */
  .pager__item--previous a,
  .pager__item--previous .pager__item-disabled,
  .pager__item--next a,
  .pager__item--next .pager__item-disabled {
    width: 30px;
    height: 30px;
    border: 1px solid var(--pager-box-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-white);
  }

  /* The chevron stays brand red when there is somewhere to go — it is the one
     thing on the row that does not follow --pager-link into grey. */
  .pager__item--previous a,
  .pager__item--next a {
    color: var(--color-primary);
  }

  /* 15px against the 12px between the numbers, so the tiles read as bookends
     rather than as part of the run. */
  .pager__item--previous {
    margin-right: 3px;
  }

  .pager__item--next {
    margin-left: 3px;
  }

  /* The numbers are not tiles, so the desktop underline-on-hover would sit
     under a tile edge on the chevrons. Numbers keep it; chevrons do not. */
  .pager__item--previous a:hover,
  .pager__item--previous a:focus-visible,
  .pager__item--next a:hover,
  .pager__item--next a:focus-visible {
    color: var(--color-primary-dark);
    text-decoration: none;
  }
}