/* Archive pagination.

   Built from the theme's own pill vocabulary — .pill-tab's radius, border weight and
   gradient "current" fill, .chip's hover recolour — so a paginated archive reads as part
   of the design system rather than as WordPress's default numbered list. No new colour,
   radius, font or easing value is introduced; every one is an existing token. */

.dd-pagination{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;
  margin-top:64px
}

/* Every pagination link ends in #insights-posts, so a new page opens at the first card
   rather than at the top of the page or at the controls. This reserves the room above it:
   the sticky header, plus the 80px the approved design puts between the feature banner and
   the grid, so the first row arrives with the design's own breathing space rather than
   pressed under the header. modules/insights-scroll.js reads this value back, so the gap is
   defined once, here. Scoped to the grid — no other scroll behaviour is affected. */
#insights-posts{scroll-margin-top:calc(var(--dd-header-height) + 80px)}
@media (max-width:900px){
  #insights-posts{scroll-margin-top:calc(var(--dd-header-height) + 48px)}
}

.dd-pagination .dd-page-num,
.dd-pagination .dd-page-arrow{
  font-family:var(--dd-font-ui);font-size:14px;line-height:1;
  min-width:44px;height:44px;padding:0 14px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--dd-ink);background:none;text-decoration:none;
  border:1px solid rgba(21,18,15,.13);border-radius:var(--dd-radius-pill);
  transition:color .35s var(--dd-ease),border-color .35s var(--dd-ease),background-color .35s var(--dd-ease),transform .35s var(--dd-ease)
}

@media (hover:hover){
  .dd-pagination a.dd-page-num:hover,
  .dd-pagination a.dd-page-arrow:hover{
    color:var(--dd-signal-4);border-color:var(--dd-signal-3);transform:translateY(-2px)
  }
}

.dd-pagination .dd-page-num.is-current{
  color:#fff;background:var(--dd-gradient);border-color:transparent
}

.dd-pagination .dd-page-arrow.is-disabled{
  color:rgba(21,18,15,.28);border-color:rgba(21,18,15,.08);cursor:default
}

.dd-pagination .dd-page-gap{
  font-family:var(--dd-font-ui);font-size:14px;color:rgba(21,18,15,.35);
  padding:0 2px;user-select:none
}

/* On the dark pages the same component inverts, using the dark border tokens. */
.dd-page-professional-learning .dd-pagination .dd-page-num,
.dd-page-professional-learning .dd-pagination .dd-page-arrow,
.section-slate .dd-pagination .dd-page-num,
.section-slate .dd-pagination .dd-page-arrow{
  color:var(--dd-paper);border-color:var(--dd-border-dark-strong)
}

@media (max-width:560px){
  .dd-pagination{gap:6px;margin-top:48px}
  .dd-pagination .dd-page-num,
  .dd-pagination .dd-page-arrow{min-width:40px;height:40px;padding:0 11px;font-size:13.5px}
}