/* wgf-updates.css - /updates/ only (updates_app.py + updates_render.py).
 *
 * Layout the shared kit does not cover: the header fact list, the credited map-composite
 * art band, the framed entry head, the month rules, and the outbound rail. Everything
 * else comes from wgf-site-shell / wgf-seo-pages / wgf-chrome / wgf-info-pages, and the
 * icon rings come from wgf-blizzard-textures (.wgf-tex-icon-frame).
 *
 * Palette: tokens only (static/css/_tokens.css). No green, no gradient, no glow.
 */

/* ── Header: the honest counts, then the art band ────────────────────────────────── */

.wgf-upd__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-3) 0 0;
  padding: 0;
}
.wgf-upd__fact dt {
  margin: 0;
  color: var(--wgf-muted);
  font-family: var(--font-game);
  font-size: var(--text-xs);
  font-variant: small-caps;
  letter-spacing: 0.06em;
}
.wgf-upd__fact dd {
  margin: 0;
  color: var(--wgf-gold);
  font-family: var(--font-game-display);
  font-size: var(--text-lg);
  line-height: 1.2;
}

.wgf-upd__art {
  margin: var(--space-4) 0 0;
}
.wgf-upd__art img {
  display: block;
  width: 100%;
  height: 132px;
  object-fit: cover;
  object-position: center 42%;
  border: 1px solid var(--wgf-metal);
  background: var(--wgf-bg-2);
}
.wgf-upd__art figcaption {
  margin: var(--space-1) 0 0;
  color: var(--wgf-muted);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  line-height: 1.4;
}

/* ── Month rules between groups of entries ───────────────────────────────────────── */

.wgf-upd__month {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-3);
  color: var(--wgf-gold-accent);
  font-family: var(--font-game-display);
  font-size: var(--text-md);
  font-variant: small-caps;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.wgf-upd__month:first-child { margin-top: 0; }
.wgf-upd__month::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--wgf-metal-soft);
}

/* ── One entry ───────────────────────────────────────────────────────────────────── */

.wgf-upd__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}
.wgf-upd__frame {
  flex: 0 0 auto;
}
.wgf-upd__frame--sm {
  width: 44px;
  height: 44px;
  padding: 4px;
}
.wgf-upd__headtext {
  min-width: 0;
}
.wgf-upd__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-1);
}
.wgf-upd__tag {
  padding: 1px 8px;
  border: 1px solid var(--wgf-metal-soft);
  color: var(--wgf-gold-muted);
  font-family: var(--font-game);
  font-size: var(--text-xs);
  font-variant: small-caps;
  letter-spacing: 0.05em;
}
.wgf-upd .wgf-upd__title {
  margin: 0;
  color: var(--wgf-gold);
  font-family: var(--font-game-display);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.2;
}
.wgf-upd__live {
  margin: var(--space-2) 0 0;
}

/* ── The outbound rail ───────────────────────────────────────────────────────────── */

.wgf-upd__more {
  margin: var(--space-4) 0 0;
}
.wgf-upd__rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.wgf-upd__rail a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border: 1px solid var(--wgf-border);
  background: var(--wgf-well);
  color: var(--wgf-text);
  text-decoration: none;
}
.wgf-upd__rail a:hover,
.wgf-upd__rail a:focus-visible {
  border-color: var(--wgf-border-strong);
}
.wgf-upd__railtxt {
  display: block;
  min-width: 0;
}
.wgf-upd__railname {
  display: block;
  color: var(--wgf-gold-link);
  font-family: var(--font-game-display);
  font-size: var(--text-md);
  line-height: 1.2;
}
.wgf-upd__railblurb {
  display: block;
  margin-top: 2px;
  color: var(--wgf-muted);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: 1.35;
}

@media (max-width: 600px) {
  .wgf-upd__art img { height: 96px; }
  .wgf-upd__facts { gap: var(--space-2) var(--space-4); }
}