/* wgf-guides-professions-hub.css — /guides/professions/ and its family pages.
   Owned by guide_version_render.py; nothing else links it. Palette tokens only
   (docs/ui-ux/17-blizzard-palette.md): near-black slate panels, bronze/gold edges, gold
   #ffd100 headings, parchment text. No green anywhere — the ithildin ramp is gone sitewide
   and quality green is an ITEM colour, which this sheet never paints.
   Loads AFTER wgf-chrome.css / wgf-ag-card.css / wgf-version-switch.css so its scoped
   variants win; it adds classes, it overrides none of theirs. */

/* Same face the client draws its title text in. Declared here (as wgf-item-tooltip.css
   does) so the identity line is FrizQT even on a page that does not load the tooltip. */
@font-face {
  font-family: "FrizQT";
  src: url("/assets/fonts/frizqt.woff2") format("woff2");
  font-display: swap;
}

/* ── art header strip ──────────────────────────────────────────────────────────────── */
/* The offline-composed Blizzard icon mosaic (wgf_iconbg) as a banner, dimmed under a
   slate scrim so the caption keeps its contrast over any region of the tile. */
.wgf-gph-art {
  position: relative;
  margin: 0 0 1rem;
  border: 1px solid var(--wgf-metal, #6e5a2a);
  background: var(--wgf-panel-1, #14161c);
  overflow: hidden;
}
.wgf-gph-art__plate {
  height: 132px;
  background-image: var(--gph-art);
  background-size: 128px;
  background-repeat: repeat;
  box-shadow: inset 0 0 0 9999px rgba(8, 9, 12, .62);
}
.wgf-gph-art__cap {
  padding: .6rem .85rem .7rem;
  border-top: 1px solid var(--wgf-metal-soft, #3a3120);
  background: var(--wgf-panel-1, #14161c);
}
.wgf-gph-art__eyebrow {
  margin: 0;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wgf-neutral-text, #9b9384);
}
.wgf-gph-art__heading {
  margin: .15rem 0 .3rem;
  font-family: "FrizQT", var(--font-display), serif;
  font-size: 1.05rem;
  color: var(--wgf-gold-primary, #ffd100);
}
.wgf-gph-art__credit {
  display: block;
  font-size: .72rem;
  line-height: 1.45;
  color: var(--wgf-neutral-text, #9b9384);
}

/* ── identity line (family page) ───────────────────────────────────────────────────── */
.wgf-gph-id {
  display: flex;
  gap: .8rem;
  align-items: center;
  margin: 0 0 .85rem;
}
.wgf-gph-ring { flex: 0 0 auto; }
.wgf-gph-id__text { min-width: 0; }
.wgf-gph-id__name {
  margin: 0;
  font-family: "FrizQT", var(--font-display), serif;
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--wgf-gold-primary, #ffd100);
}
.wgf-gph-id__sub {
  margin: .2rem 0 0;
  font-size: .86rem;
  color: var(--wgf-muted, #b3a88f);
}
.wgf-gph-seal {
  display: inline-block;
  margin-left: .5rem;
  padding: .06rem .45rem;
  border: 1px solid var(--gph-seal, var(--wgf-gold-accent, #b7912f));
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: .18em;
  color: var(--gph-seal, var(--wgf-gold-accent, #b7912f));
}

/* ── facts table ───────────────────────────────────────────────────────────────────── */
.wgf-gph-facts {
  width: 100%;
  margin: 0 0 1rem;
  border: 1px solid var(--wgf-metal, #6e5a2a);
  border-collapse: collapse;
  background: var(--wgf-well, #08090c);
  font-size: .88rem;
}
.wgf-gph-facts caption {
  padding: .4rem .6rem;
  border-bottom: 1px solid var(--wgf-metal-soft, #3a3120);
  background: var(--wgf-panel-1, #14161c);
  font-family: "FrizQT", var(--font-display), serif;
  font-size: .95rem;
  text-align: left;
  color: var(--wgf-gold-primary, #ffd100);
}
.wgf-gph-facts th,
.wgf-gph-facts td {
  padding: .38rem .6rem;
  border-top: 1px solid var(--wgf-border-neutral-soft, #202229);
  text-align: left;
  vertical-align: top;
}
.wgf-gph-facts th {
  width: 42%;
  font-weight: 400;
  color: var(--wgf-neutral-text, #9b9384);
}
.wgf-gph-facts td { color: var(--wgf-text, #f4ecd8); }

/* ── hub counts strip ──────────────────────────────────────────────────────────────── */
.wgf-gph-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 .5rem;
}
.wgf-gph-stat {
  flex: 1 1 8rem;
  padding: .5rem .7rem;
  border: 1px solid var(--wgf-metal-soft, #3a3120);
  background: var(--wgf-panel-1, #14161c);
}
.wgf-gph-stat__n {
  display: block;
  font-family: "FrizQT", var(--font-display), serif;
  font-size: 1.4rem;
  line-height: 1.1;
  color: var(--wgf-gold-primary, #ffd100);
}
.wgf-gph-stat__l {
  display: block;
  margin-top: .1rem;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wgf-neutral-text, #9b9384);
}
.wgf-gph-stats__builds {
  margin: 0 0 1rem;
  font-size: .8rem;
  color: var(--wgf-muted, #b3a88f);
}

/* ── tile grid ─────────────────────────────────────────────────────────────────────── */
/* The plate itself is wgf-ag-card.css; this only tints the mosaic behind it and marks
   the gathering/crafting type with a bronze or gold top rule. */
.wgf-gph-grid { margin: 0 0 1.25rem; }
.wgf-gph-tile { background-size: 96px; background-repeat: repeat; }
.wgf-gph-tile--gathering { border-top: 2px solid var(--wgf-gold-primary, #ffd100); }
.wgf-gph-tile--crafting { border-top: 2px solid var(--wgf-gold-accent, #b7912f); }

/* ── contents rail ─────────────────────────────────────────────────────────────────── */
.wgf-gph-toc {
  margin: 0 0 1rem;
  padding: .55rem .75rem .7rem;
  border-left: 3px solid var(--wgf-gold-accent, #b7912f);
  background: var(--wgf-panel-1, #14161c);
}
.wgf-gph-toc__title {
  margin: 0 0 .3rem;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wgf-neutral-text, #9b9384);
}
.wgf-gph-toc__list {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--wgf-muted, #b3a88f);
}
.wgf-gph-toc__list li { margin: .12rem 0; }
.wgf-gph-toc__list a { color: var(--wgf-gold-link, #ffe375); text-decoration: none; }
.wgf-gph-toc__list a:hover,
.wgf-gph-toc__list a:focus-visible { text-decoration: underline; }

/* ── hub backlink ──────────────────────────────────────────────────────────────────── */
.wgf-gph-up {
  margin: 1rem 0 0;
  font-size: .86rem;
  color: var(--wgf-muted, #b3a88f);
}
.wgf-gph-up a { color: var(--wgf-gold-link, #ffe375); }

@media (max-width: 640px) {
  .wgf-gph-art__plate { height: 96px; }
  .wgf-gph-facts th { width: 50%; }
}