/* wgf-item-categories.css - the /items/<category>/ trade-good hubs (items_app.py).
 *
 * Replaces the two inline <style> blocks items_app.py used to emit (banned by
 * docs/ui-ux/18-blizzard-asset-kit.md section 2.11 - no inline <style> in shell output).
 * Those blocks were also the last green chrome on this family: a mint-tinted status well,
 * a green "live" dot and a pulsing halo behind it. Everything here is palette tokens
 * from static/css/_tokens.css - near-black slate plates, bronze/gold rules, parchment text.
 *
 * Blizzard art used by this sheet: none directly. The item-quality rings are
 * .wgf-qborder--<name> from wgf-chrome.css (assets/ui/auctionhouse-itemicon-border-*.png),
 * which the SEO shell already links on every page - this sheet only sizes them.
 */

/* ── header band: the wgf_iconbg mosaic (assets/bg/*.webp, 648px repeatable tile
 *    composited from extracted client icons) behind the hero. The tile is painted on a
 *    z-index:-1 pseudo-element at low opacity - a flat veil, not a gradient scrim - so the
 *    parchment title keeps its contrast without any new colour entering the palette. */
.wgf-icat-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0 0 .25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--wgf-metal, #6e5a2a);
  border-radius: var(--radius-card, 5px);
  background: var(--wgf-bg-base, #0a0b0f);
}
.wgf-icat-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--wgf-icat-art, none);
  background-repeat: repeat;
  background-size: 108px 108px;
  opacity: .18;
}
.wgf-icat-banner .wgf-seo-hero { margin: 0; }

/* ── hero: the category crest beside a FrizQT-family title ─────────────────── */
.wgf-icat-hero {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  column-gap: 1rem;
  row-gap: .25rem;
}
.wgf-icat-hero__crest {
  grid-row: 1 / span 3;
  width: 64px;
  height: 64px;
}
.wgf-icat-hero__crest > img {
  width: 46px;
  height: 46px;
}
.wgf-icat-hero .wgf-seo-eyebrow,
.wgf-icat-hero .wgf-seo-h1,
.wgf-icat-hero .wgf-seo-sub {
  grid-column: 2;
  margin: 0;
}
.wgf-icat-hero .wgf-seo-sub { margin-top: .45rem; }
@media (max-width: 560px) {
  .wgf-icat-hero { grid-template-columns: 1fr; }
  .wgf-icat-hero__crest { grid-row: auto; }
  .wgf-icat-hero .wgf-seo-eyebrow,
  .wgf-icat-hero .wgf-seo-h1,
  .wgf-icat-hero .wgf-seo-sub { grid-column: 1; }
}

/* ── the at-a-glance readout (real numbers, counted from the rows on the page) ── */
.wgf-icat-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  margin: 1rem 0 0;
  border: 1px solid var(--wgf-metal, #6e5a2a);
  border-radius: var(--radius-card, 5px);
  background: var(--wgf-metal-soft, #3a3120);
  overflow: hidden;
}
.wgf-icat-fact {
  margin: 0;
  padding: .7rem .9rem;
  background: var(--wgf-panel, #14161c);
}
.wgf-icat-fact dt {
  margin: 0 0 .25rem;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wgf-muted, #b3a88f);
}
.wgf-icat-fact dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--wgf-text, #f4ecd8);
}

/* ── the item shelf ───────────────────────────────────────────────────────── */
.wgf-icat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .55rem;
  margin: 1rem 0 .5rem;
  padding: 0;
  list-style: none;
}
.wgf-icat-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: .6rem;
  padding: .5rem .7rem;
  text-decoration: none;
  background: var(--wgf-panel, #14161c);
  border: 1px solid var(--wgf-border, rgba(255, 209, 0, .20));
  border-radius: var(--radius-card, 5px);
}
.wgf-icat-row:hover,
.wgf-icat-row:focus-visible {
  border-color: var(--wgf-border-strong, rgba(255, 209, 0, .38));
  background: var(--wgf-panel-2, #1a1d24);
}
.wgf-icat-row .wgf-qborder { grid-row: 1 / span 2; }
.wgf-icat-row__name {
  grid-column: 2;
  font-weight: 600;
  font-size: .97rem;
  overflow-wrap: anywhere;
  text-decoration: none;
}
.wgf-icat-row__name:hover,
.wgf-icat-row__name:focus-visible { text-decoration: underline; }
.wgf-icat-row__price {
  grid-column: 3;
  grid-row: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wgf-icat-row__stock {
  grid-column: 2 / span 2;
  grid-row: 2;
  font-size: .81rem;
  color: var(--wgf-muted, #b3a88f);
  font-variant-numeric: tabular-nums;
}
.wgf-icat-empty {
  margin: 1.1rem 0;
  padding: .8rem 1rem;
  border: 1px solid var(--wgf-metal-soft, #3a3120);
  border-radius: var(--radius-card, 5px);
  background: var(--wgf-well, #08090c);
  color: var(--wgf-muted, #b3a88f);
}

/* ── the sibling rail: every trade-good category, both directions ──────────── */
.wgf-icat-siblings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .55rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.wgf-icat-sib {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .7rem;
  text-decoration: none;
  background: var(--wgf-panel, #14161c);
  border: 1px solid var(--wgf-border, rgba(255, 209, 0, .20));
  border-radius: var(--radius-card, 5px);
  color: var(--wgf-gold-link, #ffe375);
}
.wgf-icat-sib:hover,
.wgf-icat-sib:focus-visible {
  border-color: var(--wgf-border-strong, rgba(255, 209, 0, .38));
  background: var(--wgf-panel-2, #1a1d24);
}
.wgf-icat-sib > img {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 1px solid var(--wgf-metal, #6e5a2a);
  background: #000;
}
.wgf-icat-sib[aria-current="page"] {
  border-color: var(--wgf-gold-primary, #ffd100);
  color: var(--wgf-text, #f4ecd8);
}

/* ── prose ─────────────────────────────────────────────────────────────────── */
.wgf-icat-prose {
  max-width: 740px;
  margin: 2rem 0 0;
  color: var(--wgf-text, #f4ecd8);
  line-height: 1.7;
  font-family: var(--font-ui, Georgia, serif);
  font-size: 1.04rem;
}
.wgf-icat-prose h2 {
  font-family: var(--font-display, 'Palatino Linotype', serif);
  color: var(--wgf-gold, #ffd100);
  font-size: 1.45rem;
  margin: 2rem 0 .65rem;
}
.wgf-icat-prose p { margin: 0 0 1rem; }
.wgf-icat-prose a { color: var(--wgf-gold-link, #ffe375); }

/* Section headings outside the prose block share the display face + gold. */
.wgf-icat-h2 {
  font-family: var(--font-display, 'Palatino Linotype', serif);
  color: var(--wgf-gold, #ffd100);
  font-size: 1.45rem;
  margin: 2rem 0 .65rem;
}