/* wgf-spell-detail.css - the /spell/<slug>-<id>/ page only (spell_render.py).
   -------------------------------------------------------------------------------
   Colour comes from static/css/_tokens.css, which every seo_kit shell page already
   links: --wgf-panel / --wgf-bg-2 slate, --wgf-metal + --wgf-gold-accent bronze,
   --wgf-gold gold, --wgf-text parchment, --wgf-muted, --q-* item quality. Nothing
   here hardcodes a hex, so the palette stays in one home; no gradients, no glows,
   and no green chrome (the only green on this page is --q-uncommon on an uncommon
   item name, which is the client's own item colour).

   The frames are real client art: .wgf-tex-icon-frame comes from
   assets/wgf-blizzard-textures.css (the achievement ring, fdid 130656) and the
   route links that sheet alongside this one. This file only positions things. */

/* ---- identity header ---- */
.wgf-spd-hero__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 16px);
}
.wgf-spd-hero__text { min-width: 0; }
.wgf-spd__frame { flex: 0 0 auto; }
.wgf-spd-title {
  font-family: var(--font-game, serif);
  color: var(--wgf-gold);
  margin: 0;
}

.wgf-spd-schools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  margin: var(--space-2, 8px) 0 0;
}
.wgf-spd-school {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid var(--wgf-metal);
  background: var(--wgf-bg-2);
  color: var(--wgf-text);
  font-size: var(--text-xs, 0.75rem);
  letter-spacing: 0.02em;
}
.wgf-spd-school img {
  width: 18px;
  height: 18px;
  display: block;
}

.wgf-spd-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 16px);
  margin: var(--space-2, 8px) 0 0;
  color: var(--wgf-muted);
  font-size: var(--text-sm, 0.875rem);
}
.wgf-spd-meta__cell { white-space: nowrap; }

/* ---- item lists (reagents, items that grant this spell) ---- */
.wgf-spd-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-2, 8px);
}
.wgf-spd-item {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px);
  border: 1px solid var(--wgf-border-neutral);
  background: var(--wgf-panel);
  min-width: 0;
}
.wgf-spd-item__body {
  display: flex;
  align-items: baseline;
  gap: var(--space-2, 8px);
  min-width: 0;
}
.wgf-spd-item__name {
  color: var(--wgf-link);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.wgf-spd-item__name:hover,
.wgf-spd-item__name:focus { text-decoration: underline; }
/* Item quality, straight from the client scale. */
.wgf-spd-item__name.q-poor      { color: var(--q-poor); }
.wgf-spd-item__name.q-common    { color: var(--q-common); }
.wgf-spd-item__name.q-uncommon  { color: var(--q-uncommon); }
.wgf-spd-item__name.q-rare      { color: var(--q-rare); }
.wgf-spd-item__name.q-epic      { color: var(--q-epic); }
.wgf-spd-item__name.q-legendary { color: var(--q-legendary); }
.wgf-spd-item__name.q-artifact  { color: var(--q-artifact); }
.wgf-spd-item__name.q-heirloom  { color: var(--q-heirloom); }

.wgf-spd-item__count {
  flex: 0 0 auto;
  font-family: var(--font-game, serif);
  color: var(--wgf-gold);
}
.wgf-spd-item__count::before { content: "x"; }
.wgf-spd-item__trigger {
  flex: 0 0 auto;
  color: var(--wgf-muted);
  font-size: var(--text-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---- cohort rail ---- */
.wgf-spd-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-2, 8px);
}
.wgf-spd-tile {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px);
  border: 1px solid var(--wgf-border-neutral);
  background: var(--wgf-panel);
  color: var(--wgf-link);
  text-decoration: none;
  min-width: 0;
}
.wgf-spd-tile:hover,
.wgf-spd-tile:focus {
  border-color: var(--wgf-gold-accent);
  color: var(--wgf-gold-hover);
}
.wgf-spd-tile__name {
  overflow-wrap: anywhere;
  font-family: var(--font-game, serif);
}

.wgf-spd-more {
  margin: var(--space-2, 8px) 0 0;
}
.wgf-spd-more a {
  color: var(--wgf-link);
  text-decoration: none;
  border-bottom: 1px solid var(--wgf-metal);
}
.wgf-spd-more a:hover,
.wgf-spd-more a:focus { color: var(--wgf-gold-hover); }

/* ---- methodology caption ---- */
.wgf-spd-note {
  margin: var(--space-2, 8px) 0 0;
  color: var(--wgf-muted);
  font-size: var(--text-xs, 0.75rem);
}

@media (max-width: 540px) {
  .wgf-spd-hero__inner { gap: var(--space-2, 8px); }
  .wgf-spd-items,
  .wgf-spd-tiles { grid-template-columns: 1fr; }
}