/* ============================================================================
 * field-guide-cards.css
 * Reusable widget styles for PokéScribe Field Guides and other Pokémon-Champions
 * articles. Each widget is a self-contained component:
 *
 *   .fg-stat-race      — stat spread bars (HP/Atk/Def/SpA/SpD/Spe)
 *   .fg-hero-dex       — sprite + dex number + types + role
 *   .fg-callout        — boxed note (signature ability, recommended item, etc.)
 *   .fg-move-card      — single-move detail card (name, type, BP/PP/ACC, blurb)
 *   .fg-comparison     — two-column synergy partners / hard counters
 *   .fg-matchup        — type-effectiveness summary (resists / weak vs)
 *   .fg-pull-quote     — large editorial pull quote
 *   .fg-takeaway       — final summary with bullet list
 *   .fg-type-pill      — colored type badge, reusable inline
 *
 * Color palette is wired to saavage.com's CSS variables (see styles.css).
 * Standalone widgets so any future Pokemon, item, stat, or combo can reuse them.
 * The original HTML files (in /Users/clawde/Desktop/articles/) used the
 * unprefixed class names .move-card / .callout / etc., so the rules below
 * also match those for backwards compatibility with already-imported articles.
 * ============================================================================ */

/* ---- Type colors (Pokémon canonical) ---- */
:root {
  --type-normal:   #a8a878;
  --type-fire:     #f08030;
  --type-water:    #6890f0;
  --type-electric: #f8d030;
  --type-grass:    #78c850;
  --type-ice:      #98d8d8;
  --type-fighting: #c03028;
  --type-poison:   #a040a0;
  --type-ground:   #e0c068;
  --type-flying:   #a890f0;
  --type-psychic:  #f95587;
  --type-bug:      #a8b820;
  --type-rock:     #b8a038;
  --type-ghost:    #705898;
  --type-dragon:   #7038f8;
  --type-dark:     #705848;
  --type-steel:    #b8b8d0;
  --type-fairy:    #ee99ac;
}

/* ============================================================================
 * Type pill — reusable inline badge for type/category labels
 * ============================================================================ */
.fg-type-pill,
.type-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent, #ff3b30);
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.fg-role-tag,
.role-tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #f8f9fc);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
}

/* ============================================================================
 * Hero dex — sprite + identity card (drop-in replacement for the
 * legacy .hero-dex container at the top of field guides)
 * ============================================================================ */
.fg-hero-dex,
.hero-dex {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  gap: 24px;
  align-items: center;
  padding: 24px;
  margin: 24px 0;
  background: linear-gradient(135deg, rgba(22,28,44,0.88) 0%, rgba(15,18,28,0.95) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
}
.fg-hero-dex .sprite,
.hero-dex .sprite {
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.04);
  border-radius: 16px;
  padding: 16px;
  aspect-ratio: 1;
}
.fg-hero-dex .sprite img,
.hero-dex .sprite img {
  width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}
.fg-hero-dex .dex-num,
.hero-dex .dex-num,
.fg-hero-dex .dex-meta .dex-num,
.hero-dex .dex-meta .dex-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #ff6a00;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.fg-hero-dex h2,
.hero-dex h2 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  margin: 0 0 12px 0;
  color: #f8f9fc;
}
.fg-hero-dex .types,
.hero-dex .types,
.fg-hero-dex .type-row,
.hero-dex .type-row,
.types,
.type-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.fg-hero-dex .subtitle,
.hero-dex .subtitle {
  margin: 8px 0 0;
  color: rgba(248,249,252,0.72);
  font-size: 14px;
  line-height: 1.5;
}

/* ============================================================================
 * Stat race — base-stat spread bars
 * ============================================================================ */
.fg-stat-race,
.stat-race {
  margin: 24px 0;
  padding: 22px;
  background: rgba(18,24,38,0.72);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
}
.fg-stat-race .stat-title,
.stat-race .stat-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ff6a00;
  margin-bottom: 14px;
}
.fg-stat-race .stat-row,
.stat-race .stat-row {
  display: grid;
  grid-template-columns: 48px 1fr 44px;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.fg-stat-race .stat-label,
.stat-race .stat-label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(248,249,252,0.72);
  letter-spacing: 0.04em;
}
.fg-stat-race .stat-bar,
.stat-race .stat-bar {
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.fg-stat-race .stat-fill,
.stat-race .stat-fill {
  height: 100%;
  border-radius: inherit;
}
.fg-stat-race .stat-num,
.stat-race .stat-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  color: #f8f9fc;
  text-align: right;
}
.fg-stat-race .stat-total,
.stat-race .stat-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248,249,252,0.52);
}
.fg-stat-race .stat-total b,
.stat-race .stat-total b {
  color: #f8f9fc;
  font-size: 16px;
}
.fg-stat-race .stat-note,
.stat-race .stat-note {
  margin: 14px 0 0;
  color: rgba(248,249,252,0.72);
  font-size: 14px;
  line-height: 1.5;
}

/* ============================================================================
 * Callout — boxed note (Signature Ability, Recommended Item, etc.)
 * ============================================================================ */
.fg-callout,
.callout {
  margin: 24px 0;
  padding: 22px;
  background: rgba(255,106,0,0.06);
  border: 1px solid rgba(255,106,0,0.3);
  border-left: 4px solid #ff6a00;
  border-radius: 12px;
}
.fg-callout .callout-tag,
.callout .callout-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ff6a00;
  font-weight: 700;
  margin-bottom: 8px;
}
.fg-callout h3,
.callout h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #f8f9fc;
}
.fg-callout p,
.callout p {
  margin: 0;
  color: rgba(248,249,252,0.85);
  font-size: 15px;
  line-height: 1.6;
}

/* ============================================================================
 * Move card — single-move detail card (name + type pill, BP/PP/ACC, blurb)
 * ============================================================================ */
.fg-move-card,
.move-card {
  margin: 24px 0;
  padding: 20px;
  background: rgba(18,24,38,0.85);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 4px solid #ff6a00;
  border-radius: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: start;
}
.fg-move-card .move-name,
.move-card .move-name {
  font-size: 19px;
  font-weight: 700;
  color: #f8f9fc;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.fg-move-card .move-name .type-pill,
.move-card .move-name .type-pill {
  font-size: 10px;
  padding: 3px 8px;
  vertical-align: middle;
}
.fg-move-card .move-blurb,
.move-card .move-blurb {
  color: rgba(248,249,252,0.85);
  font-size: 14px;
  line-height: 1.6;
}
.fg-move-card .move-stats,
.move-card .move-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 88px;
}
.fg-move-card .stat-block,
.move-card .stat-block {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  font-size: 12px;
}
.fg-move-card .stat-block .lbl,
.move-card .stat-block .lbl {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: rgba(248,249,252,0.52);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.fg-move-card .stat-block .val,
.move-card .stat-block .val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  color: #f8f9fc;
}

/* ============================================================================
 * Comparison — synergy partners / hard counters two-column
 * ============================================================================ */
.fg-comparison,
.comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0;
}
@media (max-width: 720px) {
  .fg-comparison,
  .comparison {
    grid-template-columns: 1fr;
  }
}
.fg-comparison .col,
.comparison .col {
  padding: 20px;
  background: rgba(18,24,38,0.72);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}
.fg-comparison .col.left,
.comparison .col.left {
  border-top: 3px solid #adff2f;
}
.fg-comparison .col.right,
.comparison .col.right {
  border-top: 3px solid #ff3b30;
}
.fg-comparison .col-title,
.comparison .col-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248,249,252,0.52);
  margin-bottom: 12px;
}
.fg-comparison ul,
.comparison ul {
  margin: 0;
  padding-left: 18px;
}
.fg-comparison li,
.comparison li {
  color: rgba(248,249,252,0.85);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 10px;
}
.fg-comparison li b,
.comparison li b {
  color: #f8f9fc;
}

/* ============================================================================
 * Matchup — Resists / Weak vs type effectiveness rows
 * ============================================================================ */
.fg-matchup,
.matchup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
  padding: 20px;
  background: rgba(18,24,38,0.72);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}
@media (max-width: 540px) {
  .fg-matchup,
  .matchup {
    grid-template-columns: 1fr;
  }
}
.fg-matchup .col,
.matchup .col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fg-matchup .col-title,
.matchup .col-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248,249,252,0.52);
}
.fg-matchup .col.strong .col-title,
.matchup .col.strong .col-title {
  color: #adff2f;
}
.fg-matchup .col.weak .col-title,
.matchup .col.weak .col-title {
  color: #ff3b30;
}

/* ============================================================================
 * Pull quote — large editorial quote callout
 * ============================================================================ */
.fg-pull-quote,
.pull-quote {
  margin: 28px 0;
  padding: 24px 28px;
  border-left: 4px solid #ff3b30;
  background: rgba(255,59,48,0.05);
  border-radius: 0 12px 12px 0;
}
.fg-pull-quote .quote,
.pull-quote .quote {
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 600;
  line-height: 1.4;
  color: #f8f9fc;
  font-style: italic;
}
.fg-pull-quote .attribution,
.pull-quote .attribution {
  margin-top: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248,249,252,0.52);
}

/* ============================================================================
 * Build template — Pokemon Showdown-style export card (mon @ item, ability,
 * EVs, nature, moveset). Monospace, dark card, terminal-feel.
 * ============================================================================ */
.fg-build-template,
.build-template {
  margin: 28px 0;
  padding: 22px 24px;
  background: rgba(8,9,14,0.92);
  border: 1px solid rgba(173,255,47,0.28);
  border-left: 4px solid #adff2f;
  border-radius: 12px;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(248,249,252,0.92);
  white-space: pre-wrap;
  position: relative;
}
.fg-build-template strong,
.build-template strong {
  color: #adff2f;
  font-weight: 700;
}
.fg-build-template .build-label,
.build-template .build-label {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #adff2f;
  background: rgba(173,255,47,0.1);
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* ============================================================================
 * Takeaway — final notebook entry / summary box
 * ============================================================================ */
.fg-takeaway,
.takeaway {
  margin: 36px 0;
  padding: 28px;
  background: linear-gradient(135deg, rgba(22,28,44,0.95) 0%, rgba(15,18,28,1) 100%);
  border: 1px solid rgba(255,106,0,0.35);
  border-radius: 18px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.45);
}
.fg-takeaway .label,
.takeaway .label {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ff6a00;
  background: rgba(255,106,0,0.14);
  padding: 5px 12px;
  border-radius: 6px;
  margin-bottom: 14px;
}
.fg-takeaway h3,
.takeaway h3 {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  line-height: 1.25;
  color: #f8f9fc;
  margin: 0 0 16px;
}
.fg-takeaway ul,
.takeaway ul {
  margin: 0;
  padding-left: 20px;
}
.fg-takeaway li,
.takeaway li {
  color: rgba(248,249,252,0.85);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 12px;
}
.fg-takeaway .footer,
.takeaway .footer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-style: italic;
  color: rgba(248,249,252,0.72);
  font-size: 14px;
}

/* ============================================================================
 * Powered-by-PokéScribe attribution — appears bottom-right on every major
 * card widget. Auto-injected via ::after so individual articles don't need
 * to add markup. Light, low-contrast, never the visual focus of the card.
 * ============================================================================ */
.fg-hero-dex,
.hero-dex,
.fg-stat-race,
.stat-race,
.fg-callout,
.callout,
.fg-move-card,
.move-card,
.fg-comparison,
.comparison,
.fg-matchup,
.matchup,
.fg-pull-quote,
.pull-quote,
.fg-takeaway,
.takeaway,
.fg-build-template,
.build-template {
  position: relative;
}
.fg-hero-dex::after,
.hero-dex::after,
.fg-stat-race::after,
.stat-race::after,
.fg-callout::after,
.callout::after,
.fg-move-card::after,
.move-card::after,
.fg-comparison::after,
.comparison::after,
.fg-matchup::after,
.matchup::after,
.fg-pull-quote::after,
.pull-quote::after,
.fg-takeaway::after,
.takeaway::after,
.fg-build-template::after,
.build-template::after {
  content: "Powered by PokéScribe";
  position: absolute;
  bottom: 8px;
  right: 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(248,249,252,0.32);
  pointer-events: none;
  user-select: none;
  font-weight: 500;
}
/* Add bottom padding on each card so the attribution doesn't overlap content */
.fg-hero-dex,
.hero-dex,
.fg-stat-race,
.stat-race,
.fg-callout,
.callout,
.fg-move-card,
.move-card,
.fg-comparison,
.comparison,
.fg-matchup,
.matchup,
.fg-pull-quote,
.pull-quote,
.fg-takeaway,
.takeaway,
.fg-build-template,
.build-template {
  padding-bottom: 32px;
}