/* wgf-obtain.css -- the "How to Obtain" block, shared by every collection family.
   Renders Blizzard's SourceText facts as label/value rows in a recessed well, matching
   the in-game collection tooltip rather than a plain paragraph. Tokens only (wgf-chrome);
   no new colors. See wgf_obtain.py. */

.wgf-obtain {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wgf-obtain__kicker {
  margin: 0;
  font-family: var(--font-game, serif);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  color: var(--wgf-gold-muted);
  font-size: 0.95rem;
}

/* The well: recessed panel, same idiom as the in-game item/collection detail box. */
.wgf-obtain__grid {
  display: grid;
  grid-template-columns: minmax(7.5rem, max-content) 1fr;
  gap: 1px;
  background: var(--wgf-well-edge, rgba(0, 0, 0, 0.55));
  border: 1px solid var(--wgf-well-edge, rgba(0, 0, 0, 0.55));
  border-radius: 4px;
  overflow: hidden;
}

.wgf-obtain__row {
  display: contents;
}

.wgf-obtain__k,
.wgf-obtain__v {
  background: var(--wgf-well, rgba(0, 0, 0, 0.28));
  padding: 8px 12px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.wgf-obtain__k {
  font-family: var(--font-game, serif);
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: var(--wgf-gold-muted);
  white-space: nowrap;
}

.wgf-obtain__v {
  color: var(--wgf-text);
  font-variant-numeric: tabular-nums;
}

.wgf-obtain__v a {
  color: var(--wgf-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--wgf-gold-rgb, 212, 175, 55), 0.35);
}

.wgf-obtain__v a:hover,
.wgf-obtain__v a:focus-visible {
  color: var(--wgf-gold-bright);
  border-bottom-color: currentColor;
}

/* Cost is the number people scan for: give it the gold the game gives it. */
.wgf-obtain__row[data-k="cost"] .wgf-obtain__v,
.wgf-obtain__row[data-k="price"] .wgf-obtain__v {
  color: var(--wgf-gold-bright, var(--wgf-gold));
  font-weight: 600;
}

.wgf-obtain__note {
  margin: 0;
  color: var(--wgf-muted, var(--wgf-text));
  line-height: 1.55;
}

/* Narrow screens: stack label above value so long vendor/zone names never squeeze the
   value column to a two-character ribbon. */
@media (max-width: 30rem) {
  .wgf-obtain__grid {
    grid-template-columns: 1fr;
  }

  .wgf-obtain__k {
    padding-bottom: 0;
    background: var(--wgf-well, rgba(0, 0, 0, 0.28));
  }

  .wgf-obtain__v {
    padding-top: 2px;
  }
}