/* wgf-achievements.css - page-specific styling for the achievement lane
   (/achievements/, /achievements/<cat>/, /achievement/<slug>/).

   Scope: only the pieces this lane added on 2026-09-03 - the hub's art strip, the detail
   facts table, the series box, and the category tile plate. The client's achievement
   window itself lives in wgf-achv-frame.css and the plaque in wgf-achievement-plaque.css;
   nothing here restyles either.

   Palette: the achievement pane's own dark-wood tokens (#ece3cf ink, #e8c56e gold,
   #b1a58c muted) over the site's bronze edges (#6e5a2a / #b7912f). No green: the only
   green on this family is the client's own progress-bar fill in wgf-achv-frame.css,
   which is on the audited keep-list in docs/ui-ux/17-blizzard-palette.md. */

/* --- Hub art strip: the loading screen wgf_zonebg picked for this page ------------- */
.wgf-achv-art {
  margin: 0 0 10px;
  padding: 0;
  border: 1px solid #6e5a2a;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75);
  overflow: hidden;
  line-height: 0;
  max-height: 168px;
}

.wgf-achv-art img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: -14%;
  filter: saturate(0.94) brightness(0.86);
}

@media (max-width: 720px) {
  .wgf-achv-art { max-height: 108px; }
}

/* --- Category plate on a summary bar ---------------------------------------------- */
.wgf-achv-bar__icon {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-right: 0;
  border: 1px solid #6e5a2a;
  object-fit: cover;
}

/* --- Detail facts table ----------------------------------------------------------- */
.wgf-achv-facts {
  margin: 6px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid #6e5a2a;
}

.wgf-achv-facts__row {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  gap: 0 14px;
  padding: 7px 12px;
  background: rgba(12, 10, 7, 0.55);
}

.wgf-achv-facts dt {
  margin: 0;
  font-family: var(--font-game, inherit);
  font-size: 0.82rem;
  color: #b1a58c;
}

.wgf-achv-facts dd {
  margin: 0;
  font-size: 0.9rem;
  color: #ece3cf;
}

.wgf-achv-facts dd a { color: #e8c56e; }

@media (max-width: 560px) {
  .wgf-achv-facts__row { grid-template-columns: 1fr; gap: 2px; }
}

/* --- Series box ------------------------------------------------------------------- */
.wgf-achv-series {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  counter-reset: achv-tier;
  display: grid;
  gap: 4px;
}

.wgf-achv-series__row {
  counter-increment: achv-tier;
  border: 1px solid #4a3c1c;
  background: rgba(12, 10, 7, 0.55);
}

.wgf-achv-series__row > a,
.wgf-achv-series__row.is-current {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  text-decoration: none;
  color: #ece3cf;
  font-size: 0.9rem;
}

.wgf-achv-series__row > a::before,
.wgf-achv-series__row.is-current::before {
  content: counter(achv-tier);
  flex: 0 0 auto;
  min-width: 1.1em;
  font-family: var(--font-game, inherit);
  font-size: 0.78rem;
  color: #b1a58c;
}

.wgf-achv-series__row.is-current {
  border-color: #b7912f;
  color: #ffd100;
}

.wgf-achv-series__row > a:hover,
.wgf-achv-series__row > a:focus-visible { color: #ffd100; }

.wgf-achv-series__icon {
  flex: 0 0 auto;
  border: 1px solid #6e5a2a;
}

.wgf-achv-series__row span { flex: 1 1 auto; min-width: 0; }

.wgf-achv-series__pts {
  flex: 0 0 auto !important;
  font-family: var(--font-game, inherit);
  font-size: 0.8rem;
  color: #e8c56e;
}