/* ==========================================================================
   Blog post styling - shared by every post.

   Until now each of the 49 posts carried its own inline <style> block, and
   they had drifted into three different designs: 35 on one, the 10 newest on
   another, and the 4 GTA guides on a third. Same page type, three looks.

   This is one file for all of them, based on the GTA guides' version since it
   was the most developed, merged with what the other two had that it lacked.
   Editing a post's appearance now means editing this file, not 49 files.

   Depends on the tokens in styles.css. Note --radius-* are all 0 - the site
   uses sharp corners, so avoid hardcoded border-radius values.
   ========================================================================== */

/* --- article shell ------------------------------------------------------ */

.blog-article {
  max-width: 860px;
  margin: calc(var(--nav-h) + 3rem) auto 4rem;
  padding: 0 1.5rem;
}

.blog-header {
  text-align: center;
  margin-bottom: 3rem;
}

.blog-title {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  margin-bottom: 1rem;
  line-height: 1.15;
  color: var(--text);
  font-weight: 900;
}

.blog-meta {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.blog-thumbnail {
  width: 100%;
  max-width: 780px;
  height: auto;
  display: block;
  margin: 0 auto 2.5rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

/* --- body copy ---------------------------------------------------------- */

.blog-content h2 {
  font-size: 1.85rem;
  margin: 2.75rem 0 1.1rem;
  color: var(--text);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}

.blog-content h3 {
  font-size: 1.3rem;
  margin: 2rem 0 0.75rem;
  color: var(--accent);
  font-weight: 600;
}

.blog-content p {
  font-size: 1.1rem;
  line-height: 1.85;
  margin-bottom: 1.6rem;
  color: var(--text-soft);
}

.blog-content ul,
.blog-content ol {
  margin: 1.25rem 0 1.75rem 1.5rem;
  color: var(--text-soft);
  line-height: 1.85;
}

.blog-content li { margin-bottom: 0.6rem; }

/* Links are accent + underlined, except the filled CTA button - without the
   :not() the generic rule paints it accent-on-accent and the label vanishes. */
.blog-content a:not(.play-cta-btn):not(.cta-btn) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog-content a:not(.play-cta-btn):not(.cta-btn):hover { opacity: 0.8; }

.blog-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2rem auto;
  border: 1px solid var(--border);
}

.blog-content blockquote {
  border-left: 3px solid var(--accent);
  margin: 2rem 0;
  padding: 0.5rem 0 0.5rem 1.5rem;
  color: var(--text-soft);
  font-style: italic;
}

/* --- callout + inline link boxes ---------------------------------------- */

.key-box {
  background: var(--surface);
  border-left: 3px solid var(--accent);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}

.key-box p { margin: 0; }

.related-links {
  background: var(--surface);
  padding: 1.5rem;
  margin: 2.5rem 0;
  border: 1px solid var(--border);
}

.related-links h3 { margin-top: 0; }
.related-links ul { margin-bottom: 0; }

.faq-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  padding: 2rem;
  margin-top: 2rem;
}

/* --- tables -------------------------------------------------------------- */

.cheats-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 0.95rem;
  background: var(--surface);
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

@media (min-width: 720px) {
  .cheats-table { display: table; white-space: normal; }
}

.cheats-table th,
.cheats-table td {
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.85rem 1.1rem;
  text-align: left;
  color: var(--text-soft);
}

.cheats-table th {
  color: var(--accent);
  background: var(--accent-dim);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}

.cheats-table code {
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent);
  background: rgba(204, 255, 0, 0.12);
  padding: 2px 6px;
}

/* --- play CTA ------------------------------------------------------------ */

.play-cta-box {
  background: linear-gradient(135deg, rgba(204, 255, 0, 0.08) 0%, rgba(0, 0, 0, 0.8) 100%);
  border: 2px solid var(--border);
  padding: 3rem 2rem;
  text-align: center;
  margin: 4rem 0;
}

.play-cta-box h3 {
  font-size: 2rem;
  margin: 0 0 0.8rem;
  color: var(--text);
  font-weight: 800;
}

.play-cta-box p {
  color: var(--text-muted);
  margin-bottom: 1.8rem;
  font-size: 1.05rem;
}

.play-cta-btn,
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--accent);
  color: #000;
  padding: 1.25rem 3rem;
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 50px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.blog-content a.play-cta-btn,
.blog-content a.cta-btn { color: #000; text-decoration: none; }

.play-cta-btn:hover,
.cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(204, 255, 0, 0.3);
}

/* ==========================================================================
   Post footer: share, prev/next, related, comments
   ========================================================================== */

.post-footer {
  max-width: 860px;
  margin: 0 auto 5rem;
  padding: 0 1.5rem;
}

.post-section-title {
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  margin: 0 0 1.25rem;
  font-weight: 700;
}

/* --- share --------------------------------------------------------------- */

.post-share {
  border-top: 1px solid var(--border);
  padding-top: 2rem;
  margin-top: 3rem;
}

.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-soft);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.2s, color 0.2s;
}

.share-btn:hover { border-color: var(--accent); color: var(--accent); }
.share-btn svg { width: 17px; height: 17px; fill: currentColor; }
.share-btn.copied { border-color: var(--accent); color: var(--accent); }

/* --- previous / next ----------------------------------------------------- */

.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 3rem;
}

@media (max-width: 640px) {
  .post-nav { grid-template-columns: 1fr; }
}

.post-nav-link {
  display: block;
  padding: 1.25rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: border-color 0.2s;
}

.post-nav-link:hover { border-color: var(--accent); }
.post-nav-link.is-next { text-align: right; }

.post-nav-dir {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 0.4rem;
}

.post-nav-title {
  display: block;
  color: var(--text);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
}

.post-nav-link:hover .post-nav-title { color: var(--accent); }

/* --- related posts ------------------------------------------------------- */

.post-related { margin-top: 3.5rem; }

.related-blogs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.related-card {
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.2s;
  display: block;
  overflow: hidden;
}

.related-card:hover { border-color: var(--accent); }

.related-card img {
  width: 100%;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  display: block;
}

.related-card-body { padding: 1.1rem 1.25rem; }

.related-card h4 {
  margin: 0 0 0.5rem;
  color: var(--accent);
  font-size: 1rem;
  line-height: 1.35;
}

.related-card p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* --- comments ------------------------------------------------------------ */

.post-comments { margin-top: 3.5rem; }

.comment-form {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.comment-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 640px) {
  .comment-form-row { grid-template-columns: 1fr; }
}

.comment-form label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
  font-family: 'JetBrains Mono', monospace;
}

.comment-form input[type="text"],
.comment-form textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.75rem 0.9rem;
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.2s;
}

.comment-form input[type="text"]:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.comment-form textarea { resize: vertical; min-height: 110px; }

/* Honeypot: hidden from people, tempting to bots. */
.comment-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.comment-submit {
  background: var(--accent);
  color: #000;
  border: none;
  padding: 0.85rem 2rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.2s;
}

.comment-submit:hover:not(:disabled) { transform: translateY(-2px); }
.comment-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.comment-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0.9rem 0 0;
  line-height: 1.5;
}

.comment-status {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
  display: none;
}

.comment-status.is-ok {
  display: block;
  border: 1px solid var(--border);
  background: var(--accent-dim);
  color: var(--accent);
}

.comment-status.is-error {
  display: block;
  border: 1px solid rgba(255, 90, 90, 0.4);
  background: rgba(255, 90, 90, 0.08);
  color: #ff8a8a;
}

.comment-list { display: flex; flex-direction: column; gap: 1.25rem; }

.comment-item {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1.25rem 1.4rem;
}

.comment-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
}

.comment-author { color: var(--accent); font-weight: 700; font-size: 0.95rem; }

.comment-date {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-family: 'JetBrains Mono', monospace;
}

.comment-body {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.7;
  font-size: 0.98rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.comment-empty {
  color: var(--text-muted);
  font-size: 0.95rem;
  padding: 1.25rem 0;
  margin: 0;
}

/* --- Adsterra In-Content Banner Placements --- */

.adsterra-slot {
  margin: 2.5rem auto;
  display: flex;
  justify-content: center;
  align-items: center;
  clear: both;
  width: 100%;
  text-align: center;
}

.adsterra-300x250 {
  max-width: 300px;
  min-height: 250px;
  margin: 2.5rem auto;
}

.adsterra-728x90 {
  max-width: 728px;
  min-height: 90px;
  margin: 2.5rem auto;
}

@media (max-width: 768px) {
  .adsterra-728x90 {
    display: none !important;
  }
}

.adsterra-native-wrap {
  max-width: 860px;
  margin: 2.5rem auto;
  width: 100%;
  clear: both;
}