/* wgf-classic-items.css - the Blizzard-asset layer for the Classic item pages
 * (item_version_page_app / item_version_page_render). Scoped under .wgf-vitem so nothing
 * here can reach another family. Linked through the module's extra_css seam.
 *
 * Palette: the in-game values from docs/ui-ux/17-blizzard-palette.md ONLY - near-black
 * slate plates #0d0f14/#14161c, bronze/gold rules #6e5a2a/#b7912f, gold #ffd100, parchment
 * #f4ecd8, muted #9d9d9d, quality q0-q5. No green chrome (uncommon-quality green on an
 * item name is Blizzard's own and stays), no gradients, no glows.
 *
 * The quality rings themselves live in wgf-chrome.css (.wgf-qborder--<ring>, the
 * assets/ui/auctionhouse-itemicon-border-*.png nine-slices); this sheet only sizes and
 * seats them. FrizQT: the @font-face rules are declared ONLY in wgf-game-skin.css, which
 * a shell page must not pull in (it restyles body), so the stack falls back until that
 * lift lands - see the lane's shared request. */

.wgf-vitem {
  --vi-plate: #0d0f14;
  --vi-plate-2: #14161c;
  --vi-rule: #6e5a2a;
  --vi-rule-lit: #b7912f;
  --vi-gold: #ffd100;
  --vi-parchment: #f4ecd8;
  --vi-muted: #9d9d9d;
}

/* ── identity ─────────────────────────────────────────────────────────────────── */

.wgf-vitem .wgf-vitem-hero__id { align-items: flex-start; }

/* The ring art is a round metal frame; wgf-chrome.css already rounds the icon inside it.
   Only the outer box size is per-page, and it rides as an inline width/height. */
.wgf-vitem .wgf-vitem-hero__id .wgf-qborder { flex: 0 0 auto; margin-right: .2rem; }

.wgf-vitem .wgf-vitem-hero__name {
  font-family: FrizQT, "Friz Quadrata TT", Georgia, "Times New Roman", serif;
  letter-spacing: .01em;
}

.wgf-vitem .wgf-vitem-tt__line--effect { color: var(--vi-parchment); }
.wgf-vitem .wgf-vitem-tt__line--effect a { color: var(--vi-gold); text-decoration: none; }
.wgf-vitem .wgf-vitem-tt__line--effect a:hover { text-decoration: underline; }

/* ── hub: the icon grid ──────────────────────────────────────────────────────── */

.wgf-vitem .wgf-vitem-tiles {
  list-style: none;
  margin: .5rem 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .45rem;
}

.wgf-vitem .wgf-vitem-tile {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
  padding: .3rem .45rem;
  border: 1px solid var(--vi-rule);
  border-radius: 3px;
  background: var(--vi-plate-2);
}

.wgf-vitem .wgf-vitem-tile:hover { border-color: var(--vi-rule-lit); }
.wgf-vitem .wgf-vitem-tile .wgf-qborder { flex: 0 0 auto; }

.wgf-vitem .wgf-vitem-tile__name {
  min-width: 0;
  font-size: .84rem;
  line-height: 1.25;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.wgf-vitem .wgf-vitem-tile__name:hover { text-decoration: underline; }

.wgf-vitem .wgf-vitem-tile__meta {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: .7rem;
  color: var(--vi-muted);
  white-space: nowrap;
}

/* ── hub: the compact directory rows ─────────────────────────────────────────── */

.wgf-vitem .wgf-vitem-hub__row { align-items: center; gap: .45rem; }
.wgf-vitem .wgf-vitem-hub__row .wgf-qborder { flex: 0 0 auto; }
.wgf-vitem .wgf-vitem-hub__row > a { text-decoration: none; }
.wgf-vitem .wgf-vitem-hub__row > a:hover { text-decoration: underline; }

/* The hover-card icon that rides inside seo_links.item_link is redundant next to the
   framed ring on these rows, so it is hidden HERE rather than asked for and thrown away. */
.wgf-vitem .wgf-vitem-hub__row > a > .wgf-icon,
.wgf-vitem .wgf-vitem-tile > a > .wgf-icon { display: none; }

/* ── sections ────────────────────────────────────────────────────────────────── */

.wgf-vitem .wgf-rg-section { margin: 1rem 0; }

/* An ad slot inside the main column keeps the plate rules of its neighbours so the
   ADVERTISEMENT box reads as part of the page frame, not a hole in it. */
.wgf-vitem .wgf-seo-main > .wgf-ad-slot { margin: 1rem auto; }

@media (max-width: 720px) {
  .wgf-vitem .wgf-vitem-tiles { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
}