/* wgf-gold-guides.css - the wowgoldfarms.com /guides/ library (gold_guides_render /
   gold_guides_components). Guide-only LAYOUT on top of the shared kit: panels are the
   kit's .wgf-window (wgf-chrome.css), coins are wgf-coins.css, item chips wgf-item-card.css.
   Owner law (docs/ui-ux, OWNER_DIRECTIVES.md): squared journal chrome, no rounded pills,
   no frosted glass, art stays visible, text always legible over art. Tokens only. */

.gg-page { display: block; margin: 0 auto var(--space-6); max-width: 1120px; }
.gg-layout { display: block; }
.gg-main { min-width: 0; }

/* ── hero: a real loading screen under a stone plate ─────────────────────── */
.gg-hero {
  position: relative;
  margin: var(--space-3) 0 var(--space-4);
  border: 2px solid var(--wgf-metal);
  border-radius: 0;
  overflow: hidden;
  min-height: 300px;
  background: var(--wgf-plate);
}
.gg-hero__art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
}
.gg-hero__plate {
  position: relative;
  margin: 150px var(--space-4) var(--space-4);
  padding: var(--space-4) var(--space-5);
  max-width: 760px;
  border: 1px solid var(--wgf-metal);
  border-radius: 0;
  background:
    linear-gradient(rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.72)),
    url(/assets/ui/classhall-stone-tile.png) left top / 256px 256px repeat;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65), var(--shadow-2);
}
.gg-hero--hub .gg-hero__plate { margin-top: 120px; }
.gg-hero__eyebrow {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0 0 var(--space-2);
  color: var(--wgf-gold-dim); font-family: var(--font-game);
  font-size: var(--text-sm); letter-spacing: 0.04em; text-transform: uppercase;
}
.gg-hero__h1 {
  margin: 0 0 var(--space-2);
  color: var(--wgf-gold-bright); font-family: var(--font-game-display, var(--font-game));
  font-size: var(--text-2xl); line-height: 1.15; text-shadow: var(--text-ink-outline);
}
.gg-hero__sub { margin: 0 0 var(--space-2); color: var(--wgf-text); font-size: var(--text-md); }
.gg-hero__meta { margin: 0; color: var(--wgf-muted); font-size: var(--text-sm); }

/* ── icons ──────────────────────────────────────────────────────────────── */
.gg-icon {
  display: inline-block; flex: none; vertical-align: middle;
  border: 1px solid var(--wgf-metal); border-radius: 0;
  background: var(--wgf-well);
}
.gg-icon--empty { width: 36px; height: 36px; }
.gg-icon--inline { margin: 0 0.2em; }

/* ── materials row (auto, every guide with items) ───────────────────────── */
.gg-mats {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin: 0 0 var(--space-4); padding: var(--space-3);
  border: 1px solid var(--wgf-border-neutral); border-radius: 0;
  background: var(--wgf-panel-1);
}
.gg-mats__item {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--wgf-border-neutral-soft); border-radius: 0;
  color: var(--wgf-text); text-decoration: none; font-size: var(--text-sm);
}
.gg-mats__item:hover { border-color: var(--wgf-gold-dark); color: var(--wgf-gold-bright); }

/* ── live price strip ───────────────────────────────────────────────────── */
.gg-strip, .gg-req, .gg-route, .gg-toc { margin: 0 0 var(--space-4); }
.gg-strip__rows { display: grid; gap: 1px; background: rgba(0, 0, 0, 0.35); }
.gg-strip__row {
  display: grid; grid-template-columns: 40px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.3fr);
  align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--wgf-well);
}
.gg-strip__name a, .gg-strip__name span { font-family: var(--font-game); text-decoration: none; }
.gg-strip__extra { color: var(--wgf-muted); font-size: var(--text-sm); }
.gg-strip__src { margin: var(--space-3) 0 0; color: var(--wgf-muted); font-size: var(--text-xs); }
.gg-tier { margin-left: var(--space-1); color: var(--wgf-gold-dim); font-size: var(--text-xs); }
.gg-empty { color: var(--wgf-muted); }

/* ── item cards ─────────────────────────────────────────────────────────── */
.gg-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3); margin: var(--space-3) 0 var(--space-4);
}
.gg-card {
  display: flex; gap: var(--space-3); padding: var(--space-3);
  border: 1px solid var(--wgf-metal); border-radius: 0;
  background: var(--wgf-well);
}
.gg-card__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.gg-card__name { font-family: var(--font-game); text-decoration: none; }
.gg-card__fact { color: var(--wgf-muted); font-size: var(--text-sm); }

/* ── banners and maps (loading screens + zone map composites) ───────────── */
.gg-banner, .gg-map { margin: var(--space-3) 0 var(--space-4); }
.gg-banner img, .gg-map img {
  display: block; width: 100%; height: auto;
  border: 2px solid var(--wgf-metal); border-radius: 0;
}
.gg-banner img { aspect-ratio: 1200 / 460; object-fit: cover; }
.gg-banner figcaption, .gg-map figcaption {
  margin-top: var(--space-1); color: var(--wgf-muted); font-size: var(--text-sm);
}
.gg-zone__facts { margin: calc(-1 * var(--space-3)) 0 var(--space-4); color: var(--wgf-gold-dim); font-size: var(--text-sm); }

/* ── requirements + walked route ────────────────────────────────────────── */
.gg-req__list { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.gg-req__list dt { color: var(--wgf-gold); font-family: var(--font-game); }
.gg-req__list dd { margin: 0; }
.gg-route__name { margin: 0 0 var(--space-2); font-family: var(--font-game); color: var(--wgf-gold-bright); }
.gg-route__badge {
  display: inline-block; padding: var(--space-1) var(--space-3);
  border: 1px solid var(--wgf-gold-dark); border-radius: 0;
  background: var(--wgf-well); color: var(--wgf-gold); font-family: var(--font-game);
  text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--text-sm);
}
.gg-route__note { margin: var(--space-2) 0 0; color: var(--wgf-muted); font-size: var(--text-sm); }

/* ── callouts ───────────────────────────────────────────────────────────── */
.gg-callout {
  display: flex; gap: var(--space-3); align-items: flex-start;
  margin: var(--space-3) 0 var(--space-4); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--wgf-border-neutral); border-left: 4px solid var(--wgf-gold-dark);
  border-radius: 0; background: var(--wgf-panel-1);
}
.gg-callout--warning { border-left-color: var(--wgf-down); }
.gg-callout--data { border-left-color: var(--wgf-up); }
.gg-callout p { margin: 0; }
.gg-callout__label { color: var(--wgf-gold); font-family: var(--font-game); margin-bottom: var(--space-1) !important; }

/* ── body copy + tables ─────────────────────────────────────────────────── */
.gg-body { line-height: 1.65; }
.gg-body p, .gg-list { margin: 0 0 var(--space-3); }
.gg-h2 { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-6); }
.gg-body h3 { color: var(--wgf-gold); font-family: var(--font-game); margin: var(--space-4) 0 var(--space-2); }
.gg-table-wrap { overflow-x: auto; margin: var(--space-3) 0 var(--space-4); border: 1px solid var(--wgf-border-neutral); border-radius: 0; }
.gg-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); background: var(--wgf-panel-1); }
.gg-table th {
  padding: var(--space-2) var(--space-3); text-align: left;
  background: var(--wgf-panel-2); color: var(--wgf-gold); font-family: var(--font-game);
  border-bottom: 1px solid var(--wgf-border-neutral);
}
.gg-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--wgf-border-neutral-soft); vertical-align: middle; }
.gg-toc ol { margin: 0; padding-left: var(--space-5); columns: 2; column-gap: var(--space-5); }
.gg-toc a { color: var(--wgf-gold-link); }

/* ── guide cards (hubs + related rail) ──────────────────────────────────── */
.gg-gcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-3); }
.gg-gcard {
  display: flex; flex-direction: column;
  border: 2px solid var(--wgf-metal); border-radius: 0;
  background: var(--wgf-well); color: var(--wgf-text); text-decoration: none;
}
.gg-gcard:hover { border-color: var(--wgf-gold-dark); }
.gg-gcard__art { display: block; width: 100%; height: 120px; object-fit: cover; }
.gg-gcard__body { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-1) var(--space-2); padding: var(--space-3); }
.gg-gcard__cat { align-self: center; color: var(--wgf-gold-dim); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; }
.gg-gcard__title { grid-column: 1 / -1; color: var(--wgf-gold-bright); font-family: var(--font-game); }
.gg-gcard__desc { grid-column: 1 / -1; color: var(--wgf-muted); font-size: var(--text-sm); }
.gg-hubsec { margin-bottom: var(--space-6); }
.gg-more { margin-left: var(--space-2); color: var(--wgf-gold-link); }
.gg-catnav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-5) 0; }
.gg-catnav a {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--wgf-border-neutral); border-radius: 0;
  color: var(--wgf-text); text-decoration: none;
}
.gg-related, .gg-method { margin-top: var(--space-6); }
.gg-method p { color: var(--wgf-muted); font-size: var(--text-sm); }

@media (max-width: 700px) {
  .gg-hero { min-height: 0; }
  .gg-hero__plate { margin: 110px var(--space-2) var(--space-2); padding: var(--space-3); }
  .gg-hero__h1 { font-size: var(--text-xl); }
  .gg-strip__row { grid-template-columns: 40px 1fr; }
  .gg-strip__now, .gg-strip__extra { grid-column: 2; }
  .gg-toc ol { columns: 1; }
}