/* wgf-pve-hub.css - the PvE hub (/pve/) and Mythic+ ladder (/pve/mythic-plus/) additions.
 *
 * Owner: pve_app.py + pve_render.py (lane page:pve-hub, 2026-09-03). Everything here is the
 * in-game palette from static/css/_tokens.css - near-black slate plates, bronze/gold rules, gold
 * headings, parchment body. No green chrome, no gradients, no glows: the only colour a rule may
 * take from outside the palette is --cc, the class colour a class tile sets inline from
 * pvp_icons.CLASS_COLOR (the same table the ladder rows use).
 *
 * Art referenced: assets/ui/ui-frame-metal-corner*-2x.png (the client's window metal corners,
 * sliced by tools/slice_ui_atlas.py). Every url() below was ls-verified on disk.
 */

/* ── shared section furniture ─────────────────────────────────────────────────────────────── */
.wgf-pve-h {
  font-size: 1.15rem;
  margin: 0 0 .2rem;
  color: var(--wgf-gold-primary, #ffd100);
  letter-spacing: .01em;
}
.wgf-pve-sub {
  margin: 0 0 .75rem;
  color: var(--wgf-muted, #b3a88f);
  font-size: .9rem;
}
.wgf-pve-icon {
  display: block;
  border: 1px solid var(--wgf-metal, #6e5a2a);
  background: var(--wgf-bg-2, #0d0f14);
  flex: 0 0 auto;
}

.wgf-pve-classes,
.wgf-pve-dgns,
.wgf-pve-explore {
  margin: 1.25rem 0;
  padding: .9rem 1rem 1rem;
  background: var(--wgf-panel, #14161c);
  border: 1px solid var(--wgf-metal, #6e5a2a);
}

/* ── credited art strip ───────────────────────────────────────────────────────────────────── */
.wgf-pve-art {
  position: relative;
  margin: 0 0 1rem;
  padding: 0;
  border: 1px solid var(--wgf-metal, #6e5a2a);
  background: var(--wgf-bg-2, #0d0f14);
}
.wgf-pve-art__img {
  display: block;
  width: 100%;
  height: clamp(140px, 22vw, 260px);
  object-fit: cover;
  object-position: center 38%;
}
/* Client window corners over the art (assets/ui/, atlas-sliced - never painted by hand). */
.wgf-pve-art::before,
.wgf-pve-art::after {
  content: "";
  position: absolute;
  top: 0;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-size: 32px 32px;
  pointer-events: none;
}
.wgf-pve-art::before {
  left: 0;
  background-image: url(/assets/ui/ui-frame-metal-cornertopleft-2x.png);
}
.wgf-pve-art::after {
  right: 0;
  background-image: url(/assets/ui/ui-frame-metal-cornertopright-2x.png);
}
.wgf-pve-art__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .75rem;
  padding: .45rem .7rem;
  border-top: 1px solid var(--wgf-metal-soft, #3a3120);
  font-size: .82rem;
}
.wgf-pve-art__kicker {
  color: var(--wgf-muted, #b3a88f);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .7rem;
}
.wgf-pve-art__name { color: var(--wgf-text, #f4ecd8); font-weight: 600; }
.wgf-pve-art__credit { color: var(--wgf-muted, #b3a88f); margin-left: auto; }

/* ── class crest grid ─────────────────────────────────────────────────────────────────────── */
.wgf-pve-class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: .5rem;
}
.wgf-pve-class {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .55rem;
  text-decoration: none;
  color: var(--wgf-text, #f4ecd8);
  background: var(--wgf-bg-2, #0d0f14);
  border: 1px solid var(--wgf-border-neutral, #2e313a);
  border-left: 3px solid var(--cc, var(--wgf-metal, #6e5a2a));
}
.wgf-pve-class:hover,
.wgf-pve-class:focus-visible {
  border-color: var(--wgf-gold-accent, #b7912f);
  background: var(--wgf-panel-2, #1a1d24);
}
.wgf-pve-class__crest {
  flex: 0 0 auto;
  border: 1px solid var(--wgf-metal, #6e5a2a);
}
.wgf-pve-class__name {
  font-size: .88rem;
  color: var(--cc, var(--wgf-text, #f4ecd8));
  overflow-wrap: anywhere;
}

/* ── dungeon fact cards ───────────────────────────────────────────────────────────────────── */
.wgf-pve-dgn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .6rem;
}
.wgf-pve-dgn {
  display: block;
  text-decoration: none;
  color: var(--wgf-text, #f4ecd8);
  background: var(--wgf-bg-2, #0d0f14);
  border: 1px solid var(--wgf-border-neutral, #2e313a);
}
.wgf-pve-dgn:hover,
.wgf-pve-dgn:focus-visible { border-color: var(--wgf-gold-accent, #b7912f); }
.wgf-pve-dgn__art {
  display: block;
  width: 100%;
  height: 104px;
  object-fit: cover;
  border-bottom: 1px solid var(--wgf-metal-soft, #3a3120);
}
.wgf-pve-dgn__body { display: block; padding: .45rem .6rem .55rem; }
.wgf-pve-dgn__name {
  display: block;
  color: var(--wgf-gold-primary, #ffd100);
  font-size: .95rem;
  margin-bottom: .15rem;
}
.wgf-pve-dgn__fact {
  display: block;
  color: var(--wgf-muted, #b3a88f);
  font-size: .8rem;
}
.wgf-pve-dgn__fact b { color: var(--wgf-text, #f4ecd8); }

/* ── explore rail ─────────────────────────────────────────────────────────────────────────── */
.wgf-pve-xgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .4rem;
}
.wgf-pve-xlink {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .38rem .5rem;
  text-decoration: none;
  color: var(--wgf-text, #f4ecd8);
  background: var(--wgf-bg-2, #0d0f14);
  border: 1px solid var(--wgf-border-neutral, #2e313a);
  font-size: .88rem;
}
.wgf-pve-xlink:hover,
.wgf-pve-xlink:focus-visible {
  border-color: var(--wgf-gold-accent, #b7912f);
  color: var(--wgf-gold-primary, #ffd100);
}
.wgf-pve-xlink__t { overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .wgf-pve-art__credit { margin-left: 0; flex-basis: 100%; }
}