/* wgf-gems.css - the /gems/ + /gem/ family's own layout (gem_render.py is the markup home).
 *
 * Palette: tokens only (docs/ui-ux/17-blizzard-palette.md). Slate panels, bronze/gold rules,
 * parchment text. No green chrome, no gradient, no glow, no drawn texture - every image on
 * these pages is a real client asset served from /assets/.
 *
 * Every rule here is scoped to a .wgf-gem-* class, so nothing in this sheet can reach a
 * shared component. Loaded through gem_app's extra_css.
 */

/* ── detail hero: the client icon in its quality ring, beside the title ───────────── */
.wgf-gem-hero__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.wgf-gem-hero__text { min-width: 0; }
.wgf-gem-hero .wgf-qborder.wgf-gem-icon { width: 72px; height: 72px; flex: 0 0 auto; }
.wgf-gem-hero .wgf-qborder.wgf-gem-icon > img { width: 52px; height: 52px; }
/* No quality ring resolved: the icon still shows, seated on the same slate plate. */
.wgf-gem-hero span.wgf-gem-icon:not(.wgf-qborder) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  background: var(--wgf-well, #08090c);
  border: 1px solid var(--wgf-metal, #6e5a2a);
}
.wgf-gem-hero span.wgf-gem-icon:not(.wgf-qborder) > img { width: 52px; height: 52px; }
.wgf-gem-hero__title { margin: 0; }

/* ── socket chips: colour swatch + the facet link ─────────────────────────────────── */
.wgf-gem-chips { margin-bottom: 10px; }
.wgf-gem-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wgf-gem-chip__icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  background: #000;
  flex: 0 0 auto;
}

/* ── source / recipe rows ─────────────────────────────────────────────────────────── */
.wgf-gem-src__h {
  margin: 12px 0 6px;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--wgf-gold-muted, #b5a06a);
}
.wgf-gem-src {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.wgf-gem-src__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--wgf-panel, #14161c);
  border: 1px solid var(--wgf-border-neutral-soft, #202229);
  color: var(--wgf-text, #f4ecd8);
}
.wgf-gem-src__icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  object-fit: cover;
  background: #000;
}

/* ── hub art strip: a real loading screen, cropped to a band and credited ─────────── */
.wgf-gem-art {
  position: relative;
  margin: 0 0 14px;
  border: 1px solid var(--wgf-metal, #6e5a2a);
  background: var(--wgf-well, #08090c);
  overflow: hidden;
}
.wgf-gem-art__img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  object-position: 50% 42%;
}
.wgf-gem-art__line,
.wgf-gem-art__cap {
  margin: 0;
  padding: 6px 10px;
  font-size: 0.82rem;
  background: var(--wgf-bg-base, #0a0b0f);
  border-top: 1px solid var(--wgf-metal-soft, #3a3120);
}
.wgf-gem-art__line { color: var(--wgf-text, #f4ecd8); }
.wgf-gem-art__cap { color: var(--wgf-muted, #b3a88f); }

/* ── socket-colour key under the hub filters ──────────────────────────────────────── */
.wgf-gem-key {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wgf-gem-key__row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  background: var(--wgf-panel, #14161c);
  border: 1px solid var(--wgf-border-neutral-soft, #202229);
}
.wgf-gem-key__icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  background: #000;
  flex: 0 0 auto;
}
.wgf-gem-key__name { color: var(--wgf-text, #f4ecd8); }
.wgf-gem-key__n {
  color: var(--wgf-gold-muted, #b5a06a);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
  .wgf-gem-art__img { height: 130px; }
  .wgf-gem-hero .wgf-qborder.wgf-gem-icon { width: 56px; height: 56px; }
  .wgf-gem-hero .wgf-qborder.wgf-gem-icon > img { width: 40px; height: 40px; }
}
.wgf-gem-comparison-scroll { max-width: 100%; overflow-x: auto; }
.wgf-gem-comparison-scroll table { width: 100%; min-width: 520px; border-collapse: collapse; }
.wgf-gem-comparison-scroll th, .wgf-gem-comparison-scroll td { padding: 10px; text-align: left; }
.wgf-gem-comparison-scroll caption { text-align: left; padding: 8px 0; }