/* ============================================================================
   guides.css — styling for the SEO guide / article pages
   ----------------------------------------------------------------------------
   Guide pages are real, crawlable content pages (not games): a hero, a "how to
   play" section, and a longer "about the topic" body packed with the relevant
   industry keywords. Their job is to give AdSense context and rank on Google,
   then funnel the reader into the game. Loaded after site.css for the tokens.
   ============================================================================ */

body.sg-guide { background: var(--bg); color: var(--tx); overflow-y: auto; }

.guide-wrap { max-width: 820px; margin: 0 auto; padding: 24px 18px 80px; }

/* Breadcrumb */
.guide-crumb { font-family: var(--fm); font-size: 12px; color: var(--mu); margin-bottom: 18px; }
.guide-crumb a { color: var(--bl); }
.guide-crumb a:hover { text-decoration: underline; }

/* Hero */
.guide-hero {
  display: flex; gap: 18px; align-items: center;
  background: linear-gradient(180deg, var(--s1), var(--s2));
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  padding: 22px;
  margin-bottom: 14px;
}
.guide-hero-ico {
  width: 76px; height: 76px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; background: var(--s2); border: 1px solid var(--bd); border-radius: var(--rl);
}
.guide-hero h1 { font-family: var(--ff); font-weight: 700; font-size: 32px; line-height: 1.05; color: var(--tx); text-transform: uppercase; letter-spacing: .5px; }
.guide-hero .guide-tagline { font-size: 14px; color: var(--mu); margin-top: 6px; }
.guide-hero-cta { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }

/* Article body */
.guide-body { font-size: 15px; line-height: 1.7; color: #c9cad6; }
.guide-body h2 {
  font-family: var(--ff); font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--tx); margin: 30px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--bd);
}
.guide-body h3 { font-family: var(--fc); font-weight: 600; font-size: 17px; color: var(--tx); margin: 20px 0 6px; }
.guide-body p { margin-bottom: 12px; }
.guide-body ul, .guide-body ol { margin: 0 0 12px 22px; }
.guide-body li { margin-bottom: 6px; }
.guide-body strong { color: var(--tx); }
.guide-body a { color: var(--bl); }
.guide-body a:hover { text-decoration: underline; }

/* Callout / key-terms box */
.guide-callout {
  background: var(--s1); border: 1px solid var(--bd); border-left: 3px solid var(--ac);
  border-radius: var(--r); padding: 14px 16px; margin: 16px 0;
}
.guide-callout .gc-label { font-family: var(--ff); font-weight: 700; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ac); margin-bottom: 6px; }

/* FAQ */
.guide-faq dt { font-family: var(--fc); font-weight: 600; font-size: 16px; color: var(--tx); margin-top: 14px; }
.guide-faq dd { margin: 4px 0 0; color: #c9cad6; }

/* In-article ad slot */
.guide-ad {
  display: flex; align-items: center; justify-content: center;
  min-height: 100px; margin: 24px 0;
  background: var(--s1); border: 1px dashed var(--bd); border-radius: var(--rl);
  color: var(--su); font-family: var(--fm); font-size: 11px; letter-spacing: 1px;
}

/* Learn hub — article cards */
.learn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 8px; }
.learn-card {
  display: block; background: var(--s1); border: 1px solid var(--bd);
  border-left: 3px solid var(--ac); border-radius: var(--rl); padding: 18px; color: inherit;
}
.learn-card:hover { box-shadow: 0 0 14px var(--glow1), 0 0 32px var(--glow2); border-color: var(--bdb); }
.learn-card .lc-tag { font-family: var(--ff); font-weight: 600; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ac); }
.learn-card h3 { font-family: var(--fc); font-weight: 600; font-size: 19px; color: var(--tx); margin: 6px 0 6px; line-height: 1.2; }
.learn-card p { font-size: 13px; color: var(--mu); line-height: 1.55; }
.learn-card .lc-more { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--bl); }

/* Bottom CTA */
.guide-cta-box {
  text-align: center; background: linear-gradient(180deg, var(--s1), var(--s2));
  border: 1px solid var(--bd); border-radius: var(--rl); padding: 24px; margin-top: 30px;
}
.guide-cta-box h2 { border: none; margin: 0 0 6px; }
.guide-cta-box p { color: var(--mu); margin-bottom: 14px; }