/* wgf-pet-abilities.css - the /pet-abilities/ + /pet-ability/ family's own rules.
 *
 * Everything structural is borrowed from shared sheets already linked by these pages:
 * .wgf-ag-card / .wgf-ag-grid (wgf-ag-card.css), .wgf-qborder (wgf-chrome.css),
 * .wgf-world-facts (wgf-world.css), .rd-type-btn (wgf-small-mines.css). This file only
 * adds what is specific to pet abilities: the family icon strip, the icon-ring hero, and
 * the A-to-Z pager.
 *
 * Palette: slate #0d0f14 / #14161c panels, bronze #6e5a2a / #b7912f rules, gold #ffd100
 * titles, parchment #f4ecd8 body, muted #9d9d9d. No green, no gradients, no glows.
 * Tokens first, literal only as the var() fallback (docs/ui-ux/17-blizzard-palette.md).
 */

/* ── family badges (hub filter strip, card meta, detail eyebrow) ─────────────────── */

.wgf-pa-fam {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wgf-pa-fam__icon {
  display: block;
  flex: 0 0 auto;
  border: 1px solid var(--wgf-border, #6e5a2a);
  border-radius: 2px;
  image-rendering: auto;
}

.wgf-pa-cd {
  margin-left: 8px;
  color: var(--wgf-muted, #b3a88f);
  white-space: nowrap;
}

.wgf-pa-families {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wgf-pa-fambtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.wgf-pa-fambtn .rd-type-btn__count {
  color: var(--wgf-muted, #b3a88f);
  font-variant-numeric: tabular-nums;
}

/* ── detail hero: the client icon ring beside the title ──────────────────────────── */

.wgf-pa-hero {
  display: flex;
  align-items: center;
  gap: 16px;
}

.wgf-pa-hero__ring {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
}

.wgf-pa-hero__ring .wgf-qborder__icon {
  width: 56px;
  height: 56px;
}

.wgf-pa-hero__text {
  min-width: 0;
}

.wgf-pa-hero__title {
  margin: 2px 0 0;
  color: var(--wgf-gold-primary, #ffd100);
}

@media (max-width: 480px) {
  .wgf-pa-hero {
    gap: 12px;
  }

  .wgf-pa-hero__ring {
    width: 56px;
    height: 56px;
  }

  .wgf-pa-hero__ring .wgf-qborder__icon {
    width: 42px;
    height: 42px;
  }
}

/* ── A-to-Z pager inside one pet family ─────────────────────────────────────────── */

.wgf-pa-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.wgf-pa-pager__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 200px;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--wgf-border, #6e5a2a);
  border-radius: 3px;
  background: var(--wgf-panel, #14161c);
  text-decoration: none;
}

.wgf-pa-pager__link--next {
  text-align: right;
}

.wgf-pa-pager__link:hover,
.wgf-pa-pager__link:focus-visible {
  border-color: var(--wgf-border-strong, #b7912f);
}

.wgf-pa-pager__dir {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wgf-muted, #b3a88f);
}

.wgf-pa-pager__name {
  color: var(--wgf-gold-primary, #ffd100);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}