/* wgf-item-sets.css - the set-bonus meta desk (item_set_app).
   Top band on /item-sets/ = one card per class with its current tier set + 2pc/4pc bonuses;
   the same bonus-body markup renders on the /item-set/<id>/ detail page. Class identity color
   rides on --wgf-set-class (set inline per card, falls back to gold). Tokens only; the in-game
   parchment/plate idiom via existing --wgf-* tokens. Reduced-motion respected. */

.wgf-set-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.wgf-set-card {
  --wgf-set-class: var(--wgf-gold-accent);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--wgf-border-neutral);
  border-top: 3px solid var(--wgf-set-class);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, var(--wgf-panel-2), var(--wgf-panel-1));
  box-shadow: var(--shadow-1);
}

.wgf-set-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--wgf-border-neutral);
}
.wgf-set-card__icon {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 1px solid rgba(var(--wgf-gold-rgb), .45);
  border-radius: 3px;
  background: #000;
  object-fit: cover;
}
.wgf-set-card__class {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-md);
  letter-spacing: .04em;
  color: var(--wgf-set-class);
  line-height: 1.2;
}
.wgf-set-card__name {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--wgf-text);
  text-decoration: none;
}
.wgf-set-card__name:hover, .wgf-set-card__name:focus-visible { text-decoration: underline; }

.wgf-set-card__bonuses { display: flex; flex-direction: column; gap: var(--space-2); }

/* per-spec grouping inside a set's bonus list */
.wgf-set-spec { display: flex; flex-direction: column; gap: var(--space-1); }
.wgf-set-spec__head {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--wgf-muted);
}
.wgf-set-spec__icon {
  width: 20px; height: 20px; flex: 0 0 auto;
  border-radius: 3px; background: #000; object-fit: cover;
}

/* one 2pc / 4pc bonus row (shared by index cards + detail page) */
.wgf-set-bonuses { display: flex; flex-direction: column; gap: var(--space-2); }
.wgf-set-bonus {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-2);
  align-items: start;
}
.wgf-set-bonus__pieces {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--wgf-gold-bright);
  white-space: nowrap;
}
.wgf-set-bonus__text {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--wgf-text);
  line-height: 1.45;
}
.wgf-set-bonus__text--muted { color: var(--wgf-muted); font-style: italic; }

/* gated creator/editor notes slot (patch-day scrape system not built - honest copy) */
.wgf-set-notes {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border: 1px dashed var(--wgf-border-neutral);
  border-radius: var(--radius-card);
  background: rgba(0, 0, 0, .18);
}
.wgf-set-notes__tag {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wgf-muted);
}
.wgf-set-notes__copy { margin: 0; font-size: var(--text-sm); color: var(--wgf-muted); }

/* changes-by-patch list */
.wgf-set-changes { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.wgf-set-change {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--wgf-border-neutral);
  font-size: var(--text-sm);
}
.wgf-set-change__patch { font-weight: 600; color: var(--wgf-gold-bright); }
.wgf-set-change__kind { color: var(--wgf-muted); }

@media (max-width: 560px) {
  .wgf-set-grid { grid-template-columns: 1fr; }
  .wgf-set-bonus { grid-template-columns: 64px 1fr; }
}