/* ==========================================================================
   Shared post-listing chrome — /news and /insights

   The two listings are deliberately DIFFERENT designs (news.css, insights.css).
   This file holds only what the SHARED partials render, so the markup and its
   styling stay in one place: templates/partials/feed-pager.php.

   Loaded BEFORE the page's own stylesheet, so either page may override.
   Logical properties throughout — one set of rules serves fa and en.
   ========================================================================== */

.feedpg {
  margin-block-start: var(--s-12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
}
.feedpg[hidden] {
  display: none;
}

.feedpg__inner {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  justify-content: center;

  /* Page numbers read left-to-right in both locales: "1 2 3" is a number line,
     not prose. The prev/next chevrons are flipped for RTL below instead. */
  direction: ltr;
}

.feedpg__page,
.feedpg__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-inline-size: 40px;
  block-size: 40px;
  padding-inline: var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-body);
  font-size: var(--t-sm);
  text-decoration: none;
  transition: border-color var(--dur-1, 0.15s), background-color var(--dur-1, 0.15s),
              color var(--dur-1, 0.15s);
}

a.feedpg__page:hover,
a.feedpg__step:hover {
  border-color: var(--c-primary);
  color: var(--c-primary-deep);
  text-decoration: none;
}

.feedpg__page.is-current {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
  font-weight: 500;
}

.feedpg__step.is-disabled {
  opacity: 0.42;
  cursor: default;
}

.feedpg__gap {
  color: var(--c-muted);
  padding-inline: var(--s-1);
}

.feedpg__chev {
  inline-size: 18px;
  block-size: 18px;
  flex: none;
}
/* The pager row is forced to LTR above, so the chevrons must be rotated rather
   than swapped — the links themselves always mean "lower / higher page". */
.feedpg__chev--prev {
  transform: rotate(90deg);
}
.feedpg__chev--next {
  transform: rotate(-90deg);
}

.feedpg__status {
  font-size: var(--t-sm);
  color: var(--c-muted);
  margin: 0;
  text-align: center;
}
.feedpg__status[hidden] {
  display: none;
}

@media (max-width: 560px) {
  /* Below this the ± window plus both step buttons wraps to three lines. The
     numbers are what people actually aim at; the words are not. */
  .feedpg__step > span {
    display: none;
  }
  .feedpg__step {
    min-inline-size: 40px;
    padding-inline: 0;
  }
}