/* wgf-about.css - /about/ only (2026-09-02 rewrite).
   Rides on wgf-info-pages.css (the info-page kit: .wgf-info, .wgf-info-section,
   .wgf-info__lead) and wgf-chrome.css (.wgf-qborder, the AH item-icon ring).
   Blizzard client art only: the hero is a loading screen from
   assets/loading-screens/, the section marks are item / achievement icons from
   assets/icons/ seated in the AH item-icon ring. No colour is declared here that
   static/css/_tokens.css does not already own (slate / bronze / gold / parchment),
   no gradients, no glows, no tinted chrome. */

/* Hero strip: one real loading screen in a bronze frame, cropped to a band.
   It sits AFTER the lead paragraph (sitewide rule 2026-08-11: nothing separates
   the title from the intro) and before the ad slot. */
.wgf-about__hero {
  margin: 0 0 var(--space-4);
  border: 2px solid var(--wgf-metal);
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.wgf-about__hero img {
  display: block;
  width: 100%;
  height: clamp(150px, 26vw, 300px);
  object-fit: cover;
  object-position: center 55%;
}
.wgf-about__hero figcaption {
  padding: var(--space-1) var(--space-2);
  border-top: 1px solid var(--wgf-well-edge);
  background: var(--wgf-well);
  color: var(--wgf-muted);
  font-family: var(--font-game);
  font-size: var(--text-sm);
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

/* Section heading = icon ring + title on one line. */
.wgf-about .wgf-info-section > h2 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.wgf-about .wgf-info-section > h2 .wgf-qborder { flex: 0 0 auto; }

/* "Where the data comes from": one row per source, icon ring + label + line. */
.wgf-about__sources {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
}
.wgf-about__sources li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--wgf-metal-soft);
  margin: 0;
}
.wgf-about__sources li:first-child { border-top: 0; padding-top: 0; }
.wgf-about__sources .wgf-qborder { flex: 0 0 auto; }
.wgf-about__sources strong {
  display: block;
  color: var(--wgf-gold);
  font-family: var(--font-game);
  font-variant: small-caps;
  letter-spacing: 0.02em;
}

/* Per-section "go there" links, small caps, separated by a middle dot. */
.wgf-about__links {
  margin: var(--space-2) 0 0;
  font-family: var(--font-game);
  font-size: var(--text-sm);
  font-variant: small-caps;
  letter-spacing: 0.03em;
}
.wgf-about__links a + a::before {
  content: "\00b7";
  margin: 0 var(--space-1);
  color: var(--wgf-muted);
}

/* Blizzard trademark line, muted, last thing in the window. */
.wgf-about__credit {
  margin: var(--space-4) 0 0;
  color: var(--wgf-muted);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: 1.45;
}

@media (max-width: 700px) {
  .wgf-about__hero img { height: 150px; }
  .wgf-about .wgf-info-section > h2 { align-items: flex-start; }
}