/**
 * @file
 * Visual styles for pager.
 *
 * Per-background colors (default/white, trust, attitude, academy, ambience)
 * driven by --pgr-* custom properties, overridden per ancestor .surface--*
 * context — same pattern as navigation-link.css / logo.css.
 *
 * Figma node: 694:33610 (Pagination)
 */

/* ── Color tokens: default (white/no surface context) ──────────────── */
.pager__item {
  --pgr-color:         var(--trust, #550a2d);
  --pgr-hover-bg:      var(--ambience-200, #f3f0ed);
  --pgr-hover-color:   var(--attitude-500, #cc80c8);
  --pgr-pressed-bg:    var(--ambience-200, #f3f0ed);
  --pgr-pressed-color: var(--attitude-600, #996096);
  --pgr-current-bg:    var(--ambience, #ebe6e1);
  --pgr-current-color: var(--trust, #550a2d);
  --pgr-focus-ring:    var(--accent, #fa263a);
}

/* ── Surface auto-adapt ── */

.surface--trust .pager__item {
  --pgr-color:         var(--white, #ffffff);
  --pgr-hover-bg:      var(--trust-500, #440824);
  --pgr-hover-color:   var(--attitude, #ffa0fa);
  --pgr-pressed-bg:    var(--trust-500, #440824);
  --pgr-pressed-color: var(--attitude-500, #cc80c8);
  --pgr-current-bg:    var(--trust-600, #2b0517);
  --pgr-current-color: var(--white, #ffffff);
  --pgr-focus-ring:    var(--accent, #fa263a);
}

.surface--attitude .pager__item {
  --pgr-color:         var(--trust, #550a2d);
  --pgr-hover-bg:      var(--attitude-300, #ffb3fb);
  --pgr-hover-color:   var(--accent-500, #c81e2e);
  --pgr-pressed-bg:    var(--attitude-300, #ffb3fb);
  --pgr-pressed-color: var(--accent-600, #961723);
  --pgr-current-bg:    var(--attitude-200, #ffcffd);
  --pgr-current-color: var(--trust, #550a2d);
  --pgr-focus-ring:    var(--accent, #fa263a);
}

.surface--academy .pager__item {
  --pgr-color:         var(--white, #ffffff);
  --pgr-hover-bg:      var(--academy-300, #c0a57b);
  --pgr-hover-color:   var(--trust, #550a2d);
  --pgr-pressed-bg:    var(--academy-300, #c0a57b);
  --pgr-pressed-color: var(--trust-600, #2b0517);
  --pgr-current-bg:    var(--academy-500, #97784b);
  --pgr-current-color: var(--white, #ffffff);
  /* Academy uses a darker accent-500 focus ring instead of accent. */
  --pgr-focus-ring:    var(--accent-500, #c81e2e);
}

.surface--ambience .pager__item {
  --pgr-color:         var(--trust, #550a2d);
  --pgr-hover-bg:      var(--ambience-500, #dbd4ce);
  --pgr-hover-color:   var(--attitude-500, #cc80c8);
  --pgr-pressed-bg:    var(--ambience-500, #dbd4ce);
  --pgr-pressed-color: var(--attitude-600, #996096);
  --pgr-current-bg:    var(--ambience-600, #bab0a7);
  --pgr-current-color: var(--trust, #550a2d);
  --pgr-focus-ring:    var(--accent, #fa263a);
}

/* ── Layout ── */

.pager__items {
  display: grid;
  clear: both;
  list-style: none;
  text-align: center;
  font-size: var(--text-paragraph-m);
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 1rem;
  padding: 0;
}
/* Standard: fünf Elemente pro Zeile */
.pager__items > * {
  grid-column: span 2;
}

/* Erste Zeile: zwei Elemente */
.pager__items > :nth-child(-n + 2) {
  grid-column: span 5;
}

/* Letzte Zeile: zwei Elemente */
.pager__items > :nth-last-child(-n + 2) {
  grid-column: span 5;
}



.pager a {
  text-decoration: none;
}

.pager__item a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 38px;
  padding: var(--spacing-150, 12px);
  border-radius: var(--border-radius-m, 4px);
  border: 0 solid transparent;
  font-weight: var(--font-weight-bold);
  color: var(--pgr-color);
  transition: background-color 0.15s ease, color 0.15s ease;
}

@media (min-width: 768px) {

  .pager__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .pager__item a {
    min-width: 54px;
    min-height: 44px;
    padding: var(--spacing-050, 4px) var(--spacing-250, 20px);
  }
}

.pager__item:not(.is-active) a:hover {
  background-color: var(--pgr-hover-bg);
  color: var(--pgr-hover-color);
  cursor: pointer;
}

.pager__item:not(.is-active) a:active {
  background-color: var(--pgr-pressed-bg);
  color: var(--pgr-pressed-color);
}

.pager__item a:focus-visible {
  outline: none;
  border-width: var(--border-width-bold, 4px);
  border-color: var(--pgr-focus-ring);
  color: var(--pgr-color);
}

/* ── Current page ── */

.pager__item.is-active {
  display: inline-block;
}

.pager__item.is-active a {
  font-weight: var(--font-weight-bold);
  background: var(--pgr-current-bg);
  color: var(--pgr-current-color);
}