/**
 * pagination.css — pasek stron listy: status, przyciski numerów, „Następna →".
 *
 * KOMPONENT: znacznik składa template-parts/components/pagination.php
 * z wyniku paginate_links() — czyli z ZNACZNIKA RDZENIA WordPressa, tak
 * jak notice.css ubiera znacznik WooCommerce. Wołają go lista wpisów
 * (home / archive / index) i wyniki wyszukiwania, a docelowo sklep;
 * arkusze widoków wczytują się tylko u siebie, więc pasek nie należy
 * do żadnego z nich.
 *
 * Wymaga tokens.css i base.css. Klasy rdzenia (page-numbers, current,
 * prev, next, dots) zostają w znaczniku jako kotwice (reguła 26), styl
 * siedzi na .dc-pagination__*.
 *
 * Makieta: panel r20 szkło .62 + blur(30), padding 18/20, cień 0 12 36 .1
 * + inset; przyciski 42×42 r12; bieżąca — tint CTA + obwódka a48 + tekst
 * #7c6420 + poświata; pozostałe szkło .72 + obwódka biała .95 + tekst
 * #3a3a3a; nieaktywna strzałka #c9c5bc na szkle .5 z obwódką line.
 * Scalenia (reguła 15): 42 → --dc-space-40; r20 → --dc-radius-22 (karta
 * w panelu, drabinka C.9); cień → --dc-shadow-lg + inset-top (reguła 13);
 * bieżąca strona = przepis „wybrany" rangi 3 z C.1 (gradient CTA + a50 +
 * --dc-on-accent, bez poświaty) — tekst na tincie bierze --dc-on-accent,
 * nie #7c6420 z makiety, bo tak brzmi „wybrany" w każdym innym miejscu
 * motywu; pozostałe przyciski = ranga 4 (ikonowy / kwadrat r12, szkło,
 * obwódka subtle, najazd wyłącznie kolorem, nacisk scale + inset-press).
 */

/* ==========================================================================
   1. PANEL
   ========================================================================== */

.dc-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--dc-space-20);
  margin-block-start: var(--dc-space-40);
  padding: var(--dc-space-18) var(--dc-space-20);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-22);
  background-color: var(--dc-surface-glass-soft);
  -webkit-backdrop-filter: var(--dc-blur-lg);
  backdrop-filter: var(--dc-blur-lg);
  box-shadow: var(--dc-shadow-lg), var(--dc-shadow-inset-top);
}

/* „Strona 1 z 3": 13,5 px #7a7568 → --dc-text-base / --dc-text-subtle. */
.dc-pagination__status {
  padding-inline-start: var(--dc-space-6);
  font-size: var(--dc-text-base);
  color: var(--dc-text-subtle);
}

/* ==========================================================================
   2. PRZYCISKI STRON — RANGA 4 (kwadrat r12), bieżąca jako „wybrany" rangi 3
   ========================================================================== */

.dc-pagination__pages {
  display: flex;
  align-items: center;
  gap: var(--dc-space-8);
}

.dc-pagination__page,
.dc-pagination__arrow,
.dc-pagination__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--dc-space-40);
  height: var(--dc-space-40);
  padding-inline: var(--dc-space-6);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-12);
  background-color: var(--dc-surface-glass);
  color: var(--dc-text-secondary);
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-none);
  text-decoration: none;
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    border-color var(--dc-duration-base) var(--dc-ease),
    color var(--dc-duration-base) var(--dc-ease),
    box-shadow var(--dc-duration-base) var(--dc-ease),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

/* Najazd wyłącznie kolorem (C.2): szkło → pełne tło, tekst → tusz.
   Bez uniesienia o 1 px z makiety. */
a.dc-pagination__page:hover,
a.dc-pagination__arrow:hover {
  background-color: var(--dc-surface);
  color: var(--dc-text);
}

a.dc-pagination__page:active,
a.dc-pagination__arrow:active {
  transform: scale(0.97);
  box-shadow: var(--dc-shadow-inset-press);
}

/* Bieżąca strona — „wybrany" z rangi 3 (C.1). Nie jest odnośnikiem
   (<span aria-current="page">), więc bez najazdu. */
.dc-pagination__page--current {
  border-color: var(--dc-accent-a50);
  background-image: var(--dc-gradient-cta);
  color: var(--dc-on-accent);
}

/* Wielokropek: bez ramki, bez tła — to nie przycisk. */
.dc-pagination__dots {
  border-color: transparent;
  background-color: transparent;
  color: var(--dc-text-subtle);
}

/* Strzałki: chevron-down obrócony (reguła 7/uwaga H — ta sama ikona co
   w karuzeli i menu, obrót jest sprawą CSS). Ikona w --dc-text jak
   w rangach ikonowych nawigacji. */
.dc-pagination__arrow {
  color: var(--dc-text);
}

.dc-pagination__arrow--prev .dc-icon {
  transform: rotate(90deg);
}

.dc-pagination__arrow--next .dc-icon {
  transform: rotate(-90deg);
}

/* Nieaktywna strzałka (pierwsza / ostatnia strona) — jak disabled z C.1:
   tło zapadnięte, obwódka line, ikona subtle, bez najazdu. */
.dc-pagination__arrow--disabled {
  border-color: var(--dc-border-line);
  background-color: var(--dc-surface-sunken);
  color: var(--dc-text-subtle);
}

/* ==========================================================================
   3. „NASTĘPNA STRONA →" — odnośnik z grotem (reguła 22)
   Kopia .dc-wholesale__link; 14 px = --dc-text-md.
   ========================================================================== */

.dc-pagination__next {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-8);
  margin-inline-end: var(--dc-space-6);
  padding-block-end: var(--dc-space-4);
  border-block-end: var(--dc-border-heavy) solid var(--dc-accent);
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-bold);
  color: var(--dc-text);
  text-decoration: none;
  transition:
    gap var(--dc-duration-base) var(--dc-ease),
    color var(--dc-duration-base) var(--dc-ease);
}

.dc-pagination__next:hover {
  gap: var(--dc-space-14);
  color: var(--dc-accent-strong);
}

.dc-pagination__next .dc-icon {
  transition: margin-inline-end var(--dc-duration-base) var(--dc-ease);
}

.dc-pagination__next:hover .dc-icon {
  margin-inline-end: calc(var(--dc-space-8) - var(--dc-space-14));
}