/* wgf-expansions.css - the expansion / patch encyclopedia pages (expansion_app).
   Owned by the page:expansions lane. Linked through the module's extra_css seam.

   Palette: tokens only (static/css/_tokens.css - the Blizzard palette, docs/ui-ux/17).
   Slate panels, bronze rules, gold headings, parchment text. No green chrome; the only
   colour that varies per row is the item-quality class (.q-poor .. .q-legendary), which
   comes from wgf-seo-pages.css / wgf-item-tooltip.css - both always linked by the shell.
   No gradients, no glows, no art except the client textures the markup already carries
   (assets/ui/auctionhouse-itemicon-border-gray.png through .wgf-qborder). */

/* ── The crest: the client's round metal item frame around an expansionicon ── */
.wgf-exp-crest {
  flex: 0 0 auto;
  vertical-align: middle;
}
.wgf-exp-hero__crest {
  width: 64px;
  height: 64px;
}
.wgf-exp-hero__crest > img,
.wgf-exp-hero__crest .wgf-qborder__icon {
  width: 46px;
  height: 46px;
}

/* Crest beside the title. The h1 keeps its own type from wgf-seo-pages.css; this only
   sets the row, so the hero stays one component with the rest of the site. */
.wgf-exp-hero__id {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.wgf-exp-hero__id .wgf-seo-h1 {
  margin: 0;
}

/* ── Facts table ───────────────────────────────────────────────────────────── */
.wgf-exp-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px;
  background: var(--wgf-metal, #6e5a2a);
  border: 1px solid var(--wgf-metal, #6e5a2a);
}
.wgf-exp-fact {
  background: var(--wgf-panel-1, #14161c);
  padding: 10px 12px;
  min-width: 0;
}
.wgf-exp-fact dt {
  margin: 0 0 3px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wgf-neutral-text, #9b9384);
}
.wgf-exp-fact dd {
  margin: 0;
  color: var(--wgf-text, #f4ecd8);
  font-size: 0.98rem;
  overflow-wrap: anywhere;
}
.wgf-exp-fact dd a {
  color: var(--wgf-gold-link, #ffe375);
}

/* ── Item lines (icon + quality-coloured name + tooltip hook) ───────────────── */
.wgf-exp-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2px;
}
.wgf-exp-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 5px 8px;
  background: var(--wgf-well, #08090c);
  border: 1px solid var(--wgf-border-neutral-soft, #202229);
}
.wgf-exp-item__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.wgf-exp-item__link:hover,
.wgf-exp-item__link:focus-visible {
  text-decoration: underline;
}
/* The inline icon seo_links.item_icon_img emits. wgf-item-tooltip.css already sizes
   .wgf-icon; this only pins it inside the denser expansion row. */
.wgf-exp-item__link .wgf-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 1px solid var(--wgf-metal-soft, #3a3120);
}
.wgf-exp-item__meta {
  margin-left: auto;
  padding-left: 8px;
  flex: 0 0 auto;
  font-size: 0.8rem;
  color: var(--wgf-neutral-text, #9b9384);
  font-variant-numeric: tabular-nums;
}

/* ── The hub's crest strip ──────────────────────────────────────────────────── */
.wgf-exp-crestrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 10px 12px;
  background: var(--wgf-panel-1, #14161c);
  border: 1px solid var(--wgf-metal, #6e5a2a);
}
.wgf-exp-crestrow__note {
  margin: 0;
  color: var(--wgf-muted, #b3a88f);
  font-size: 0.9rem;
  flex: 1 1 240px;
  min-width: 0;
}

/* ── Art credit line (the in-content half of the owner's art-credit law) ────── */
.wgf-exp-artnote {
  margin: 6px 0 0;
  color: var(--wgf-neutral-text, #9b9384);
  font-size: 0.85rem;
}

/* ── Cohort subheads ───────────────────────────────────────────────────────────
   Two callers: the change groups on a patch page (New / Changed / Removed items) and the
   Raids / Dungeons split on an expansion page, added 2026-09-03 so an era's thirty
   Adventure Guide tiles read as two labelled cohorts instead of one undifferentiated
   block of cards. */
.wgf-exp-subhead {
  margin: 16px 0 8px;
  color: var(--wgf-gold, #ffd100);
  font-size: 1.02rem;
  border-bottom: 1px solid var(--wgf-metal-soft, #3a3120);
  padding-bottom: 4px;
}
.wgf-exp-subhead:first-of-type { margin-top: 6px; }
.wgf-exp-subhead + .wgf-ag-grid { margin-top: 0; }

@media (max-width: 600px) {
  .wgf-exp-items { grid-template-columns: 1fr; }
  .wgf-exp-hero__crest { width: 52px; height: 52px; }
  .wgf-exp-hero__crest > img,
  .wgf-exp-hero__crest .wgf-qborder__icon { width: 38px; height: 38px; }
}