/* wgf-realms.css - page-specific styling for the /realm/ family (realm_pages_app).
 *
 * Linked through the module's extra_css seam, never as an inline <style>. Shared chrome
 * (.wgf-qborder rings, .wgf-ad-slot, .wgf-seo-*, q-* quality colours) lives in the shell
 * sheets and is NOT redeclared here - only the bits this family adds.
 *
 * Palette: docs/ui-ux/17-blizzard-palette.md. Slate panels #0d0f14/#14161c, bronze/gold
 * rules #6e5a2a/#b7912f, gold #ffd100, parchment #f4ecd8, muted #9d9d9d. No green chrome,
 * no gradients, no glows.
 */

/* ── Hub: the loading-screen header strip ─────────────────────────────────── */
.rd-art {
  margin: 0 0 var(--space-4, 16px);
  border: 1px solid var(--wgf-metal, #6e5a2a);
  background: var(--wgf-panel-2, #1a1d24);
  overflow: hidden;
}
.rd-art__img {
  display: block;
  width: 100%;
  height: clamp(140px, 22vw, 260px);
  object-fit: cover;
  object-position: center 38%;
}
.rd-art__cap {
  padding: 6px 10px;
  border-top: 1px solid var(--wgf-metal, #6e5a2a);
  color: var(--wgf-muted, #b3a88f);
  font-size: .74rem;
  letter-spacing: .02em;
}

/* ── Tiles: the client icon that marks a realm's Auction House ────────────── */
.rd-tile-icon {
  flex: 0 0 auto;
  border: 1px solid var(--wgf-metal, #6e5a2a);
  background: #000;
  object-fit: cover;
}
.rd-feat-card .rd-tile-icon { margin-bottom: 8px; }
.rd-dir-card  .rd-tile-icon { margin-right: 8px; }

/* The shared card in wgf-seo-pages.css is `justify-content: space-between` with two
 * children; the directory row now carries four (icon, name, region, population), so the
 * name takes the slack instead of the gaps doing it. Scoped to this family's grids. */
.rd-dir-grid .rd-dir-card__name,
.rd-peer-grid .rd-dir-card__name { flex: 1 1 auto; }
.rd-dir-grid .rd-dir-card { gap: 0.4rem; }

/* ── The client's realm-list population ladder ────────────────────────────── */
/* Same six states and the same values as .wgf-rp-pop--* in wgf-realm-picker.css (the
 * realm picker's sheet, also owned by this lane). Blizzard's own colours: New blue,
 * Low green, Medium yellow, High orange, Full red, Locked grey. The green here is the
 * client's Low-population state, not chrome. */
.rd-pop {
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--wgf-muted, #b3a88f);
  white-space: nowrap;
}
.rd-pop--new    { color: #40c7eb; }
.rd-pop--low    { color: #40d860; }
.rd-pop--medium { color: #f0e442; }
.rd-pop--high   { color: #ff9a2a; }
.rd-pop--full   { color: #ff4a3d; }
.rd-pop--locked { color: #8a8a8a; }

/* ── Detail: the quality ring inside a deal row ───────────────────────────── */
/* wgf-chrome.css sizes .wgf-qborder at 44px for hero/tile use; a table row wants the
 * same real frame art at row height. Only the box is resized - the slice is untouched. */
.rd-item .wgf-qborder {
  width: 34px;
  height: 34px;
  margin-right: 8px;
}
.rd-item .wgf-qborder__icon {
  width: 24px;
  height: 24px;
}
.rd-item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.rd-item__name {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ── Detail: the "compare another realm" rail ─────────────────────────────── */
.rd-peer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.rd-peer-grid .rd-dir-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--wgf-metal, #6e5a2a);
  background: var(--wgf-panel-2, #1a1d24);
  color: var(--wgf-text, #f4ecd8);
  text-decoration: none;
}
.rd-peer-grid .rd-dir-card:hover,
.rd-peer-grid .rd-dir-card:focus-visible {
  border-color: var(--wgf-gold-accent, #b7912f);
  color: var(--wgf-gold-primary, #ffd100);
}
.rd-peer-grid .rd-dir-card__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}