/* wgf-zones - the /zones/ hub and /zone/<slug>/ detail page's own chrome (page-zones lane,
   2026-09-03). Loaded through zone_app's extra_css seam, only on those two routes.

   Blizzard palette only (docs/ui-ux/17-blizzard-palette.md): near-black slate plates,
   bronze/gold rules, parchment text, gold headings. No gradients, no glows, no green.
   The corner ornaments are real client slices from assets/ui/ (ui-frame-metal-corner*-2x),
   scaled down; nothing here is painted by hand. */

/* ── the zone's loading-screen plate, beside the page title ───────────────────────────── */

.wgf-zone-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}

.wgf-zone-hero__text {
  flex: 1 1 320px;
  min-width: 0;
}

.wgf-zone-art {
  position: relative;
  flex: 0 0 auto;
  width: min(320px, 100%);
  margin: 0;
  padding: 0;
  border: 1px solid var(--wgf-metal, #6e5a2a);
  background: var(--wgf-panel, #14161c);
}

.wgf-zone-art__img {
  display: block;
  width: 100%;
  height: auto;
}

.wgf-zone-art__cap {
  padding: 6px 9px;
  border-top: 1px solid var(--wgf-metal, #6e5a2a);
  color: var(--wgf-muted, #b3a88f);
  font-size: 12px;
  line-height: 1.3;
}

/* Real client window corners (assets/ui/ui-frame-metal-corner*-2x.png), 150px and 64px
   sources drawn at 26px. Decorative only, so they are aria-hidden spans, never images. */
.wgf-zone-art__corner {
  position: absolute;
  width: 26px;
  height: 26px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.wgf-zone-art__corner--tl {
  top: -1px;
  left: -1px;
  background-image: url("/assets/ui/ui-frame-metal-cornertopleft-2x.png");
}

.wgf-zone-art__corner--tr {
  top: -1px;
  right: -1px;
  background-image: url("/assets/ui/ui-frame-metal-cornertopright-2x.png");
}

.wgf-zone-art__corner--bl {
  bottom: -1px;
  left: -1px;
  background-image: url("/assets/ui/ui-frame-metal-cornerbottomleft-2x.png");
}

.wgf-zone-art__corner--br {
  bottom: -1px;
  right: -1px;
  background-image: url("/assets/ui/ui-frame-metal-cornerbottomright-2x.png");
}

/* ── the /zones/ header art strip ─────────────────────────────────────────────────────── */

.wgf-zone-strip {
  margin: 0 0 16px;
  border: 1px solid var(--wgf-metal, #6e5a2a);
  background: var(--wgf-well, #08090c);
}

.wgf-zone-strip__img {
  display: block;
  width: 100%;
  height: clamp(120px, 22vw, 220px);
  object-fit: cover;
  object-position: center 40%;
}

.wgf-zone-strip__cap {
  padding: 7px 10px;
  border-top: 1px solid var(--wgf-metal, #6e5a2a);
  color: var(--wgf-muted, #b3a88f);
  font-size: 12px;
  line-height: 1.35;
}

.wgf-zone-strip__link {
  color: var(--wgf-gold-primary, #ffd100);
}

/* ── the facts plate on the detail page ───────────────────────────────────────────────── */

.wgf-zone-facts__note {
  margin: 8px 0 0;
  color: var(--wgf-muted, #b3a88f);
  font-size: 13px;
}