/* wgf-classes.css - page-scoped chrome for /classes/, /class/<slug>/, /spec/<slug>/.
   THE SITEWIDE RE-CUT (owner OWNER_REVIEW_2026-07-04 Addendum 6 verbatim): the classes hub is
   the nav landing page and must be comprehensive; every class page is UNIQUELY themed by its own
   class color + class load-screen art; spec pages are integrated and interlinked, never a
   disconnected wiki. Kit surfaces only (wgf-chrome.css .wgf-window), no pills, no fill bars, no AI
   art. Per-class accent is driven by an inline `--class-accent` custom property (pvp_icons class
   colors); per-class art is a first-party Blizzard load screen (assets/loading-screens) behind a
   legibility scrim, or the class-color plate when no screen is served for that class.
   Tokens only; states default/hover/focus; reduced-motion respected. */

/* ------------------------------------------------------------------ the 13-class hub grid */
.wgf-cls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0;
  padding: 0;
  list-style: none;
}

/* Each class = a kit window (wgf-window) tinted with its own class accent. The accent rides the
   header underline + the art band edge, so a card reads as "this class" at a glance. */
.wgf-cls-card {
  --class-accent: var(--wgf-gold);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wgf-cls-card .wgf-window__title {
  gap: var(--space-2);
  border-bottom: 2px solid var(--class-accent);
  color: var(--class-accent);
}
.wgf-cls-card__crest {
  width: 26px;
  height: 26px;
  border: 1px solid var(--class-accent);
  border-radius: 3px;
  background: #000;
  object-fit: cover;
}

/* Art band: the first-party class load screen behind a dark scrim so the spec icons stay legible
   over any region of the art. No art served for this class -> the class-accent plate shows instead. */
.wgf-cls-card__art {
  position: relative;
  min-height: 92px;
  display: flex;
  align-items: flex-end;
  padding: var(--space-3);
  background:
    linear-gradient(180deg, rgba(6, 7, 12, 0.32) 0%, rgba(6, 7, 12, 0.72) 78%, rgba(6, 7, 12, 0.9) 100%),
    var(--class-art, linear-gradient(140deg,
      color-mix(in srgb, var(--class-accent) 42%, #0a0a0f), #08080c));
  background-size: cover;
  background-position: center 34%;
}
.wgf-cls-card__specrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.wgf-cls-spec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 4px;
  border: 1px solid rgba(0, 0, 0, 0.55);
  border-left: 2px solid var(--class-accent);
  border-radius: 3px;
  background: rgba(4, 5, 9, 0.72);
  color: var(--wgf-text);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.wgf-cls-spec:hover, .wgf-cls-spec:focus-visible {
  border-color: var(--class-accent);
  color: var(--wgf-gold-bright);
  outline: none;
}
.wgf-cls-spec img {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  background: #000;
}

/* Body of the card: meta snapshot + gold-making tip + interlinks. */
.wgf-cls-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
}

/* Meta snapshot: honest stat cells, label over value - NEVER a percentage-fill bar
   (owner ban, 13-ingame-reference sec 0 + sec 9). Value in white, label small-caps gold. */
.wgf-cls-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
.wgf-cls-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--wgf-well-edge, #05050a);
  border-radius: 4px;
  background: var(--wgf-well, #0a0a0c);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.55);
}
.wgf-cls-stat__label {
  font-family: var(--font-game);
  font-size: var(--text-xs);
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: var(--wgf-gold-muted, var(--wgf-gold));
}
.wgf-cls-stat__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-md);
  color: var(--wgf-text);
}
.wgf-cls-stat__sub {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--wgf-muted);
}

/* Gold-making tip: a real coin icon (assets/coins, owner sec 0.7) + one evergreen, method-not-verdict
   sentence. No baked market numbers (guide standard). */
.wgf-cls-tip {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--wgf-text);
}
.wgf-cls-tip__coin {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

/* Interlink rail: quiet text links, class-accent on hover. The whole-site backlink mandate. */
.wgf-cls-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}
.wgf-cls-links a {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--wgf-gold);
  text-decoration: none;
}
.wgf-cls-links a:hover, .wgf-cls-links a:focus-visible {
  color: var(--wgf-gold-bright);
  text-decoration: underline;
  outline: none;
}

/* ------------------------------------------------------ per-class + per-spec themed page hero */
/* The class page steps you INTO the class fantasy: its load-screen art fills the hero window, the
   class accent lines the frame, and the title reads in the class color. */
.wgf-cls-hero {
  position: relative;
  overflow: hidden;
  border-color: var(--class-accent, var(--wgf-metal));
}
.wgf-cls-hero__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(6, 7, 12, 0.66) 0%, rgba(6, 7, 12, 0.5) 42%, rgba(6, 7, 12, 0.82) 100%),
    var(--class-art, linear-gradient(140deg,
      color-mix(in srgb, var(--class-accent) 40%, #0a0a0f), #08080c));
  background-size: cover;
  background-position: center 32%;
  filter: saturate(1.05);
}
.wgf-cls-hero__inner {
  position: relative;
  z-index: 1;
  padding: var(--space-6) var(--space-5);
}
.wgf-cls-hero__eyebrow {
  margin: 0;
  font-family: var(--font-game);
  font-size: var(--text-sm);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  color: var(--class-accent);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.wgf-cls-hero__h1 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-1) 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-2xl, var(--text-xl));
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--class-accent);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.92);
}
.wgf-cls-hero__h1 img {
  width: 48px;
  height: 48px;
  border: 2px solid var(--class-accent);
  border-radius: 5px;
  background: #000;
}
.wgf-cls-hero__sub {
  margin: 0;
  max-width: 62ch;
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: 1.45;
  color: var(--wgf-text);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Section windows on the detail pages carry a thin class-accent header underline so the whole page
   flows as one themed record, not disconnected plates. */
.wgf-cls-sec .wgf-window__title { border-bottom: 2px solid var(--class-accent); color: var(--class-accent); }
.wgf-cls-sec .wgf-window__body { display: flex; flex-direction: column; gap: var(--space-3); }

/* Spec tiles on the class page: art-less kit rows, role chip, class-accent left border, link deep. */
.wgf-cls-spectiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
}
.wgf-cls-spectile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--wgf-metal-soft, #2e2e2e);
  border-left: 3px solid var(--class-accent);
  border-radius: 4px;
  background: var(--wgf-well, #0a0a0c);
  color: var(--wgf-text);
  text-decoration: none;
}
.wgf-cls-spectile:hover, .wgf-cls-spectile:focus-visible {
  border-color: var(--class-accent);
  outline: none;
}
.wgf-cls-spectile img {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 1px solid var(--class-accent);
  border-radius: 3px;
  background: #000;
}
.wgf-cls-spectile__name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--wgf-gold-bright);
}
.wgf-cls-spectile__role {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--wgf-muted);
}

/* Interlink card grid (ladders / talents / sets) shared by class + spec pages. */
.wgf-cls-portals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
}
.wgf-cls-portal {
  display: block;
  padding: var(--space-3);
  border: 1px solid var(--wgf-metal-soft, #2e2e2e);
  border-radius: 4px;
  background: var(--wgf-well, #0a0a0c);
  color: var(--wgf-gold-bright);
  font-family: var(--font-display);
  font-size: var(--text-md);
  text-decoration: none;
}
.wgf-cls-portal span {
  display: block;
  margin-top: 2px;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--wgf-muted);
}
.wgf-cls-portal:hover, .wgf-cls-portal:focus-visible {
  border-color: var(--class-accent);
  outline: none;
}

@media (max-width: 560px) {
  .wgf-cls-grid { grid-template-columns: 1fr; }
  .wgf-cls-meta { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .wgf-cls-card, .wgf-cls-spec { transition: none; }
}