/* wgf-item-card.css — normalized item card + inline chip + WoW quality scale.
   Single home for quality colors (replaces the ad-hoc pills in wgf-seo-pages.css
   and the inline q-* in items_app.py). Warm Stone + Gold; tokens where available. */

/* WoW quality scale — the EXACT in-game client palette, consumed from the --q-* tokens
   in static/css/_tokens.css (owner standard 2026-07-02: match in-game styling always;
   the old locally-brightened rare/epic hexes are gone). The `.wgf-shell-page h1.q-*`
   forms exist because the shell paints every h1 gold at (0,1,1) — an item name that IS
   a heading (the item page's SSR tooltip hero) still carries its quality colour. */
.q-poor,.wgf-shell-page h1.q-poor{color:var(--q-poor)}
.q-common,.wgf-shell-page h1.q-common{color:var(--q-common,#ffffff)}
.q-uncommon,.wgf-shell-page h1.q-uncommon{color:var(--q-uncommon)}
.q-rare,.wgf-shell-page h1.q-rare{color:var(--q-rare)}
.q-epic,.wgf-shell-page h1.q-epic{color:var(--q-epic)}
.q-legendary,.wgf-shell-page h1.q-legendary{color:var(--q-legendary)}
.q-artifact,.wgf-shell-page h1.q-artifact{color:var(--q-artifact)}
.q-heirloom,.wgf-shell-page h1.q-heirloom{color:var(--q-heirloom)}
/* Chips must keep their quality colour even inside scopes that restyle links generically
   (.gp-body a, .gsh-guide-detail a, …) — the a.class.class form outranks those. */
a.wgf-item-chip.q-poor{color:var(--q-poor)}a.wgf-item-chip.q-common{color:var(--q-common,#ffffff)}
a.wgf-item-chip.q-uncommon{color:var(--q-uncommon)}a.wgf-item-chip.q-rare{color:var(--q-rare)}
a.wgf-item-chip.q-epic{color:var(--q-epic)}a.wgf-item-chip.q-legendary{color:var(--q-legendary)}
a.wgf-item-chip.q-artifact{color:var(--q-artifact)}a.wgf-item-chip.q-heirloom{color:var(--q-heirloom)}

/* Card (5a) — standard vertical identity. 8px token rhythm; depth from the panel
   layer, not a gradient; one uniform body gap instead of ad-hoc per-element margins. */
.wgf-item-card{display:grid;grid-template-columns:56px 1fr;align-items:center;gap:var(--space-3);
  padding:var(--space-2) var(--space-3);
  border:1px solid var(--wgf-border-neutral);border-radius:var(--radius-card,12px);background:var(--wgf-panel-1);
  transition:border-color var(--motion-fast,120ms) var(--ease-standard,ease),
             transform var(--motion-fast,120ms) var(--ease-standard,ease)}
.wgf-item-card:hover{border-color:var(--wgf-border-strong);transform:translateY(-2px)}
.ic-icon{width:56px;height:56px;border-radius:var(--radius-control,8px);overflow:hidden;
  border:1px solid var(--wgf-border-neutral);background:#0c0a07}
.ic-icon img{width:100%;height:100%;display:block}
.ic-body{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}
/* identity reads as one unit: name · quality · Wowhead, left-flowing + tight, no big gap */
.ic-head{align-self:stretch;display:flex;align-items:baseline;column-gap:var(--space-2);
  row-gap:var(--space-1);flex-wrap:wrap}
.ic-name{font-family:var(--font-display,'Cinzel',serif);font-weight:700;font-size:1.05rem;
  line-height:1.2;text-decoration:none}
.ic-name:hover{text-decoration:underline}
/* quality = plain small-caps label in the quality colour (no pill); sits right after the name */
.ic-badge{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;line-height:1}
.ic-note{margin:0;font-size:.85rem;color:var(--wgf-muted,var(--wgf-neutral-text));line-height:1.45}
/* price — single line, or a clean aligned grid for Silver/Gold gather tiers */
.ic-price{margin:0;font-family:var(--font-mono,monospace);font-size:.95rem;color:var(--wgf-text)}
.ic-price--multi{display:grid;grid-template-columns:auto auto;justify-content:start;
  column-gap:var(--space-3);row-gap:var(--space-1);align-items:baseline}
.ic-tier{font-family:var(--font-ui,serif);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--wgf-muted,var(--wgf-neutral-text));align-self:center}
/* gather-quality tier tint (Silver/Gold/Bronze) — colour carries the crafting
   quality so the herb cards' tiers read at a glance. Star is decorative. */
.ic-tier-star{margin-right:.3rem;font-size:.92em;line-height:1;text-shadow:0 0 3px rgba(0,0,0,.55)}
.ic-tier--gold{color:var(--wgf-gold-primary)}
.ic-tier--silver{color:#cdd3da}
.ic-tier--bronze{color:#c8814b}
.ic-coins{display:inline-flex;align-items:baseline;gap:.35rem;flex-wrap:wrap}
.ic-sub{color:var(--wgf-muted,var(--wgf-neutral-text));font-size:.8rem;font-family:var(--font-ui,serif)}
.ic-realm{background:#0c0a07;color:var(--wgf-text);border:1px solid var(--wgf-border-neutral);
  border-radius:var(--radius-control,8px);padding:.2rem .45rem;font:inherit;font-size:.85rem;max-width:12rem;margin-right:.4rem}

/* Inline chip */
.wgf-item-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.04rem .42rem .04rem .16rem;
  border:1px solid var(--wgf-border,rgba(244,196,92,.22));border-radius:var(--radius-pill,999px);
  background:rgba(0,0,0,.22);text-decoration:none;font-weight:600;white-space:nowrap;line-height:1.3;
  vertical-align:-0.28em}
.wgf-item-chip img{width:16px;height:16px;border-radius:3px;display:block}
.wgf-item-chip:hover{border-color:var(--wgf-gold,var(--wgf-gold-primary))}

/* Card grid for shelves of featured items */
.wgf-item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:var(--space-3);margin:1rem 0 .5rem}

/* ── Compact row (5b): related lists, search results, category lists, deals/AH rows.
   Whole row links to the internal /item/ page via a stretched link; the Wowhead
   reference stays independently clickable above it. ── */
.wgf-item-row{position:relative;display:flex;align-items:center;gap:.7rem;padding:.5rem .65rem;
  border:1px solid var(--wgf-border-neutral);border-radius:var(--radius-control);background:var(--wgf-panel-1);
  transition:border-color var(--motion-fast,120ms) var(--ease-standard,ease),
             background var(--motion-fast,120ms) var(--ease-standard,ease)}
.wgf-item-row:hover{border-color:var(--wgf-border-strong);background:var(--wgf-panel-2)}
.ir-ic{flex:0 0 auto;width:40px;height:40px;border-radius:6px;overflow:hidden;background:#0c0a07;
  border:1px solid var(--wgf-border-neutral)}
.ir-ic img{width:100%;height:100%;display:block}
.ir-main{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:.08rem}
.ir-nm{font-family:var(--font-display,'Cinzel',serif);font-weight:700;font-size:.98rem;line-height:1.2;
  text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ir-nm:hover{text-decoration:underline}
.ir-meta{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.ir-cat{font-family:var(--font-ui,serif);font-size:.78rem;color:var(--wgf-muted)}
.ir-price{flex:0 0 auto;font-size:.92rem;white-space:nowrap}
/* crafting-quality star — colour carries the tier (gold > silver > bronze) so the
   same-named reagent quality ranks don't read as duplicate rows */
.ir-tier{flex:0 0 auto;font-size:.95rem;line-height:1;text-shadow:0 0 3px rgba(0,0,0,.6)}
.ir-tier--gold{color:var(--wgf-gold-primary)}
.ir-tier--silver{color:#cdd3da}
.ir-tier--bronze{color:#c8814b}
/* stretched link — the whole row navigates to our item page (real anchor; ctrl/middle-click work) */
.wgf-rowlink::after{content:"";position:absolute;inset:0;z-index:0}
@media (max-width:520px){
  .wgf-item-row{flex-wrap:wrap}
  .ir-price{margin-left:52px}
}

/* ── Item-details reference glyph — quiet by default, gold on hover; data-wgf-item
   drives the first-party on-hover item tooltip (wgf-item-tooltip.js). Our internal
   /item/ page stays the primary destination. ── */
.wgf-item-ref{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.18em;
  font-family:var(--font-ui,serif);font-size:.78rem;color:var(--wgf-muted);text-decoration:none;
  white-space:nowrap;padding:.1rem .32rem;border-radius:var(--radius-control,8px);
  transition:color var(--motion-fast,120ms) var(--ease-standard,ease)}
.wgf-item-ref:hover,.wgf-item-ref:focus-visible{color:var(--wgf-gold-bright)}
.wgf-item-ref__ext{flex:0 0 auto;opacity:.85}
.wgf-item-ref__label{letter-spacing:.01em}

/* ── In-game AH result-row skin (owner review 2026-07-03) ──────────────────────────
   "When you search in game, you see the results on the auction house — that's how it
   should look here." Rows read as in-game AH results: dark plate rows, gold hover wash,
   a quality-colored ring on the item icon. Composes the existing .wgf-item-row markup. */
.wgf-item-row {
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.14)), var(--wgf-panel-1);
  border: 1px solid var(--wgf-border-neutral-soft);
  border-radius: var(--radius-control);
}
.wgf-item-row + .wgf-item-row { margin-top: 2px; }
.wgf-item-row:hover, .wgf-item-row:focus-within {
  background: linear-gradient(180deg, rgba(var(--wgf-gold-rgb),.10), rgba(var(--wgf-gold-rgb),.04)), var(--wgf-panel-2);
  border-color: rgba(var(--wgf-gold-rgb),.35);
}
.wgf-item-row .ir-ic img, .wgf-item-card .ic-icon img {
  border: 1px solid var(--wgf-border-neutral);
  border-radius: 3px;
  background: #000;
}
.wgf-item-row.q-poor .ir-ic img,      .wgf-item-card.q-poor .ic-icon img      { border-color: var(--q-poor); }
.wgf-item-row.q-common .ir-ic img,    .wgf-item-card.q-common .ic-icon img    { border-color: var(--q-common); }
.wgf-item-row.q-uncommon .ir-ic img,  .wgf-item-card.q-uncommon .ic-icon img  { border-color: var(--q-uncommon); }
.wgf-item-row.q-rare .ir-ic img,      .wgf-item-card.q-rare .ic-icon img      { border-color: var(--q-rare); }
.wgf-item-row.q-epic .ir-ic img,      .wgf-item-card.q-epic .ic-icon img      { border-color: var(--q-epic); }
.wgf-item-row.q-legendary .ir-ic img, .wgf-item-card.q-legendary .ic-icon img { border-color: var(--q-legendary); }
.wgf-item-row.q-artifact .ir-ic img,  .wgf-item-card.q-artifact .ic-icon img  { border-color: var(--q-artifact); }
.wgf-item-row.q-heirloom .ir-ic img,  .wgf-item-card.q-heirloom .ic-icon img  { border-color: var(--q-heirloom); }
@media (prefers-reduced-motion: reduce) { .wgf-item-row { transition: none; } }