/* ============================================================
   Come Game — Blog Stylesheet  v1.0
   comegame.co | assets/css/blog.css
   Depends on: main.css (CSS variables) + animations.css
   Covers: blog listing page (blog.html) + article pages (blog/*.html)
   ============================================================ */

/* ── 1. BLOG-SCOPED TOKENS ── */
:root {
  --blog-max:        1200px;
  --article-max:     760px;
  --sidebar-w:       320px;
  --post-radius:     18px;
}

/* ── 2. READING PROGRESS BAR (article pages) ── */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  z-index: 1002;
  background: linear-gradient(90deg, #f59e0b, #fcd34d, #06b6d4);
  box-shadow: 0 0 12px rgba(245,158,11,0.65);
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ── 3. BLOG HERO ── */
.blog-hero {
  padding: 64px 0 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}
.blog-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 0%, rgba(245,158,11,0.10), transparent 70%),
    radial-gradient(ellipse 40% 40% at 85% 20%, rgba(6,182,212,0.07), transparent 70%);
  pointer-events: none;
}
.blog-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-hover), transparent);
}
.blog-hero > .container { position: relative; z-index: 1; }
.blog-hero h1 {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-weight: 900;
  line-height: 1.15;
  margin: 16px 0 14px;
  letter-spacing: -0.5px;
}
.blog-hero h1 span { color: var(--gold-light); }
.blog-hero p {
  color: var(--gray-light);
  font-size: 1.03rem;
  line-height: 1.75;
  max-width: 640px;
  margin: 0 auto;
}

/* Hero stat strip */
.blog-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}
.blog-stat {
  background: rgba(12,29,60,0.65);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 22px;
  min-width: 130px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: var(--transition);
}
.blog-stat:hover { border-color: rgba(245,158,11,0.40); transform: translateY(-2px); }
.blog-stat b {
  display: block;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1.2;
}
.blog-stat span { font-size: .74rem; color: var(--gray); letter-spacing: .3px; }

/* ── 4. TOOLBAR / CATEGORY FILTER ── */
.blog-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 26px 0 30px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 36px;
}
.cat-tab {
  padding: 9px 18px;
  border-radius: 30px;
  border: 1px solid var(--border);
  background: var(--bg-card2);
  color: var(--gray-light);
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  white-space: nowrap;
}
.cat-tab:hover {
  color: var(--gold-light);
  border-color: rgba(245,158,11,0.45);
  background: rgba(245,158,11,0.07);
}
.cat-tab.active {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #0a0e1a;
  border-color: var(--gold);
  font-weight: 800;
  box-shadow: 0 4px 16px rgba(245,158,11,0.35);
}
.blog-count {
  margin-left: auto;
  font-size: .8rem;
  color: var(--gray);
  white-space: nowrap;
}
.blog-count span { color: var(--gold); font-weight: 700; }

/* Search box */
.blog-search {
  position: relative;
  flex: 0 1 240px;
  min-width: 180px;
}
.blog-search input {
  width: 100%;
  padding: 10px 14px 10px 36px;
  border-radius: 30px;
  border: 1px solid var(--border);
  background: var(--bg-card2);
  color: var(--white);
  font-size: .85rem;
  font-family: inherit;
  transition: var(--transition);
}
.blog-search input::placeholder { color: var(--gray); }
.blog-search input:focus {
  outline: none;
  border-color: rgba(245,158,11,0.50);
  box-shadow: 0 0 0 3px rgba(245,158,11,0.10);
}
.blog-search .search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .85rem;
  color: var(--gray);
  pointer-events: none;
}

/* ── 5. THUMBNAIL AREA (placeholder-ready) ──
   Drop a real image into assets/images/blog/ and set the <img src>.
   If the file is missing, the branded placeholder below shows instead. */
.post-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, #0c1d3c 0%, #091630 55%, #0a1428 100%);
  flex-shrink: 0;
}
.post-thumb img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.post-thumb img.thumb-missing { display: none; }

.thumb-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 16px;
  background-image:
    radial-gradient(ellipse 70% 70% at 50% 0%, rgba(245,158,11,0.10), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.022) 0 12px, transparent 12px 24px);
}
.thumb-placeholder .tp-logo {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(245,158,11,0.20), rgba(59,130,246,0.16));
  border: 1px solid rgba(245,158,11,0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.thumb-placeholder .tp-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(157,176,204,0.55);
}
.thumb-placeholder .tp-size {
  font-size: .64rem;
  color: rgba(107,127,160,0.60);
  letter-spacing: .4px;
}

/* Category chip — rendered in the card BODY, never on top of the artwork.
   Article thumbnails are designed posters with their own baked-in text, so
   overlay labels always collide with them. Keeping the chip below the image
   means any poster drops in cleanly, at any size, forever. */
.thumb-badge,
.post-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  line-height: 1.5;
  white-space: nowrap;
}

/* Category colour system — reused on cards + article pages */
.cat-strategy { background: rgba(168,85,247,0.16); color: #c084fc; border: 1px solid rgba(168,85,247,0.35); }
.cat-guides   { background: rgba(59,130,246,0.16); color: #93c5fd; border: 1px solid rgba(59,130,246,0.35); }
.cat-games    { background: rgba(245,158,11,0.16); color: var(--gold-light); border: 1px solid rgba(245,158,11,0.35); }
.cat-payments { background: rgba(16,185,129,0.16); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.32); }
.cat-safety   { background: rgba(239,68,68,0.16);  color: #fca5a5; border: 1px solid rgba(239,68,68,0.30); }
.cat-news     { background: rgba(6,182,212,0.16);  color: #67e8f9; border: 1px solid rgba(6,182,212,0.32); }

/* ── 6. FEATURED POST ── */
/* Stacked hero card: the poster spans the full card width at its native 16:9,
   so nothing is cropped and there is no dead space beside a short text column. */
.featured-post {
  display: block;
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-card2));
  border: 1px solid rgba(245,158,11,0.28);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55), 0 0 50px rgba(245,158,11,0.05);
  transition: var(--transition);
}
.featured-post:hover {
  border-color: rgba(245,158,11,0.55);
  box-shadow: 0 22px 70px rgba(0,0,0,0.65), 0 0 60px rgba(245,158,11,0.10);
}
.featured-post:hover .post-thumb img { transform: scale(1.04); }

/* Full-bleed 16:9 media panel — poster thumbnails are never cropped */
.featured-media { display: block; }
.featured-post .post-thumb {
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
  border-bottom: 1px solid var(--border-soft);
}

.featured-body {
  padding: 30px 34px 34px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.feat-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.featured-body .featured-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
  width: fit-content;
}
.featured-body h2 {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.3px;
}
.featured-body h2 a { transition: color 0.2s; }
.featured-body h2 a:hover { color: var(--gold-light); }
.featured-body p {
  color: var(--gray-light);
  font-size: .95rem;
  line-height: 1.8;
}

/* ── 7. POST GRID + CARDS ── */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 26px;
}
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--post-radius);
  overflow: hidden;
  transition: var(--transition);
  position: relative;
}
.post-card:hover {
  transform: translateY(-6px);
  border-color: rgba(245,158,11,0.45);
  box-shadow: 0 18px 46px rgba(0,0,0,0.60), 0 0 34px rgba(245,158,11,0.07);
}
.post-card:hover .post-thumb img { transform: scale(1.05); }
.post-card.hidden { display: none; }

.post-body {
  padding: 20px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: .74rem;
  color: var(--gray);
}
.post-meta .dot { opacity: .45; }
.post-card h3, .post-card h2 {
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.38;
  letter-spacing: -0.2px;
}
.post-card h3 a, .post-card h2 a { transition: color 0.2s; }
.post-card h3 a:hover, .post-card h2 a:hover { color: var(--gold-light); }
.post-excerpt {
  color: var(--gray-light);
  font-size: .875rem;
  line-height: 1.75;
  flex: 1;
}

/* Tag chips */
.post-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.post-tag {
  font-size: .68rem;
  font-weight: 600;
  color: var(--gray-light);
  background: rgba(59,130,246,0.08);
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  padding: 3px 10px;
}

/* Card footer + READ NOW button */
.post-foot {
  padding: 16px 20px 20px;
  margin-top: 14px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.btn-read {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .3px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #0a0e1a;
  box-shadow: 0 4px 18px rgba(245,158,11,0.32);
  transition: var(--transition);
  white-space: nowrap;
}
.btn-read:hover {
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(245,158,11,0.58);
}
.btn-read:active { transform: translateY(0); }
.btn-read .arrow { transition: transform 0.25s ease; }
.btn-read:hover .arrow { transform: translateX(4px); }
.btn-read.btn-read-lg { padding: 14px 30px; font-size: .98rem; }

.post-author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .76rem;
  color: var(--gray);
  min-width: 0;
}
.post-author .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #0a0e1a;
  font-weight: 900;
  font-size: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── 8. UPCOMING / PLACEHOLDER CARDS ──
   Replace one of these with a real .post-card each time you publish. */
.post-card.upcoming {
  border-style: dashed;
  border-color: rgba(107,127,160,0.28);
  background: rgba(9,22,48,0.45);
}
.post-card.upcoming:hover {
  transform: none;
  border-color: rgba(245,158,11,0.30);
  box-shadow: none;
}
.post-card.upcoming .post-thumb { opacity: .55; }
.post-card.upcoming h3 { color: var(--gray-light); }
.btn-read.is-soon {
  background: rgba(107,127,160,0.14);
  border: 1px dashed rgba(107,127,160,0.40);
  color: var(--gray);
  box-shadow: none;
  cursor: not-allowed;
}
.btn-read.is-soon:hover { transform: none; box-shadow: none; background: rgba(107,127,160,0.18); }

/* Empty state (search / filter with no results) */
.blog-empty {
  display: none;
  text-align: center;
  padding: 60px 20px;
  border: 1px dashed rgba(107,127,160,0.30);
  border-radius: var(--radius-lg);
  color: var(--gray);
}
.blog-empty.show { display: block; }
.blog-empty .ee-icon { font-size: 2.4rem; display: block; margin-bottom: 12px; }
.blog-empty h3 { color: var(--white); font-size: 1.1rem; margin-bottom: 8px; font-weight: 700; }

/* ── 9. PUBLISHING SCHEDULE STRIP ── */
.schedule-box {
  background: linear-gradient(135deg, var(--bg-card), var(--bg-card2));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px 34px;
  position: relative;
  overflow: hidden;
}
.schedule-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 0% 0%, rgba(6,182,212,0.07), transparent 65%);
  pointer-events: none;
}
.schedule-box > * { position: relative; }
.schedule-list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.schedule-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  background: rgba(2,8,16,0.45);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  transition: var(--transition);
}
.schedule-item:hover { border-color: rgba(245,158,11,0.28); }
.schedule-item .si-day {
  flex-shrink: 0;
  width: 58px;
  text-align: center;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--gold-light);
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.22);
  border-radius: 8px;
  padding: 6px 4px;
}
.schedule-item .si-title { font-size: .88rem; font-weight: 600; color: var(--white); line-height: 1.5; }
.schedule-item .si-cat { font-size: .72rem; color: var(--gray); }

/* ── 10. BLOG CTA / SUBSCRIBE BAND ── */
.blog-cta-band {
  background: linear-gradient(135deg, var(--bg-card), var(--bg-card2));
  border: 1px solid rgba(245,158,11,0.30);
  border-radius: var(--radius-xl);
  padding: 46px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 50px rgba(245,158,11,0.06);
}
.blog-cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(245,158,11,0.09), transparent 65%);
  pointer-events: none;
}
.blog-cta-band > * { position: relative; }
.blog-cta-band h2 { font-size: clamp(1.35rem, 3vw, 1.95rem); font-weight: 900; margin-bottom: 12px; }
.blog-cta-band h2 span { color: var(--gold-light); }
.blog-cta-band p {
  color: var(--gray-light);
  max-width: 580px;
  margin: 0 auto 26px;
  line-height: 1.8;
  font-size: .95rem;
}
.cta-btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── 11. PAGINATION ── */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 44px;
}
.pagination a, .pagination span {
  min-width: 40px;
  height: 40px;
  padding: 0 13px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--gray-light);
  font-size: .87rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.pagination a:hover {
  border-color: rgba(245,158,11,0.45);
  color: var(--gold-light);
  background: rgba(245,158,11,0.06);
}
.pagination .current {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-color: var(--gold);
  color: #0a0e1a;
  font-weight: 800;
}
.pagination .disabled { opacity: .35; cursor: not-allowed; }

/* ============================================================
   ARTICLE PAGE
   ============================================================ */

/* ── 12. ARTICLE HEADER ── */
.article-head {
  padding: 46px 0 30px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}
.article-head::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(245,158,11,0.08), transparent 70%);
  pointer-events: none;
}
.article-head > .container { position: relative; z-index: 1; max-width: 900px; }
.article-head .cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.article-head h1 {
  font-size: clamp(1.75rem, 4.2vw, 2.85rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.6px;
  margin-bottom: 18px;
}
.article-head h1 span { color: var(--gold-light); }
.article-standfirst {
  font-size: 1.06rem;
  line-height: 1.85;
  color: var(--gray-light);
  margin-bottom: 26px;
}

.article-meta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.meta-author { display: flex; align-items: center; gap: 11px; }
.meta-author .avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #0a0e1a;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(245,158,11,0.28);
}
.meta-author .ma-name { font-size: .9rem; font-weight: 700; color: var(--white); line-height: 1.35; }
.meta-author .ma-role { font-size: .74rem; color: var(--gray); }
.meta-facts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: .8rem;
  color: var(--gray);
}
.meta-facts .dot { opacity: .45; }

/* Share buttons */
.share-row { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.share-row .share-label { font-size: .76rem; color: var(--gray); margin-right: 2px; }
.share-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--gray-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
  transition: var(--transition);
  cursor: pointer;
  font-family: inherit;
}
.share-btn:hover {
  border-color: rgba(245,158,11,0.50);
  color: var(--gold-light);
  background: rgba(245,158,11,0.08);
  transform: translateY(-2px);
}

/* ── 13. HERO IMAGE ── */
.article-hero-media {
  max-width: 1000px;
  margin: 0 auto 8px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
/* 16:9 so a full-bleed poster thumbnail is shown uncropped */
.article-hero-media .post-thumb { aspect-ratio: 16 / 9; }
.article-figcaption {
  max-width: 1000px;
  margin: 12px auto 0;
  font-size: .78rem;
  color: var(--gray);
  text-align: center;
  line-height: 1.6;
}

/* In-body rule diagrams (inline SVG) */
.article-diagram {
  margin: 26px 0;
  padding: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.article-diagram svg { display: block; width: 100%; height: auto; max-width: 640px; margin: 0 auto; }
.article-diagram figcaption {
  margin-top: 12px;
  font-size: .8rem;
  color: var(--gray-light);
  line-height: 1.6;
  text-align: center;
}

/* Source list at the end of an article */
.source-list { font-size: .85rem; color: var(--gray-light); line-height: 1.7; padding-left: 20px; }
.source-list li { margin-bottom: 6px; }

/* ── 14. ARTICLE LAYOUT ── */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
  gap: 56px;
  align-items: start;
  padding: 52px 0 70px;
}

/* ── 15. ARTICLE BODY TYPOGRAPHY ── */
.article-body { min-width: 0; font-size: 1.02rem; }
.article-body > p {
  color: #c3d2e8;
  line-height: 1.92;
  margin-bottom: 22px;
}
.article-body > p:first-of-type { font-size: 1.08rem; }
.article-body .lead {
  font-size: 1.1rem;
  color: var(--white);
  line-height: 1.85;
}

.article-body h2 {
  font-size: clamp(1.35rem, 2.8vw, 1.75rem);
  font-weight: 900;
  line-height: 1.3;
  margin: 52px 0 18px;
  padding-top: 8px;
  letter-spacing: -0.3px;
  scroll-margin-top: 96px;
  position: relative;
}
.article-body h2::before {
  content: '';
  display: block;
  width: 46px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  margin-bottom: 16px;
  box-shadow: 0 0 12px rgba(245,158,11,0.45);
}
.article-body h3 {
  font-size: 1.14rem;
  font-weight: 800;
  color: var(--gold-light);
  margin: 34px 0 12px;
  line-height: 1.4;
  scroll-margin-top: 96px;
}
.article-body h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  margin: 24px 0 10px;
}

.article-body a {
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(252,211,77,0.40);
  transition: var(--transition);
}
.article-body a:hover { text-decoration-color: var(--gold-light); }

.article-body strong { color: var(--white); font-weight: 700; }
.article-body em { color: var(--gold-light); font-style: italic; }

/* Lists */
.article-body ul, .article-body ol {
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-left: 0;
}
.article-body ul li,
.article-body ol li {
  position: relative;
  padding-left: 28px;
  color: #c3d2e8;
  line-height: 1.85;
  font-size: .99rem;
}
.article-body ul li::before {
  content: '';
  position: absolute;
  left: 8px;
  top: .72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(245,158,11,0.55);
}
.article-body ol { counter-reset: cg-ol; }
.article-body ol li { counter-increment: cg-ol; padding-left: 40px; }
.article-body ol li::before {
  content: counter(cg-ol);
  position: absolute;
  left: 0;
  top: .18em;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.32);
  color: var(--gold-light);
  font-size: .76rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.article-body li strong { color: var(--white); }

/* ── 16. CALLOUT BLOCKS ── */
.callout {
  display: flex;
  gap: 14px;
  padding: 20px 22px;
  border-radius: 14px;
  margin: 28px 0;
  line-height: 1.8;
  font-size: .93rem;
  color: var(--gray-light);
  border: 1px solid;
}
.callout .co-icon { font-size: 1.25rem; flex-shrink: 0; line-height: 1.4; }
.callout .co-body strong { display: block; margin-bottom: 5px; font-size: .95rem; }
.callout p { margin: 0 0 8px; line-height: 1.8; }
.callout p:last-child { margin-bottom: 0; }

.callout-tip   { background: rgba(245,158,11,0.06); border-color: rgba(245,158,11,0.28); }
.callout-tip .co-body strong   { color: var(--gold-light); }
.callout-info  { background: rgba(59,130,246,0.06); border-color: rgba(59,130,246,0.28); }
.callout-info .co-body strong  { color: #93c5fd; }
.callout-warn  { background: rgba(239,68,68,0.06);  border-color: rgba(239,68,68,0.28); }
.callout-warn .co-body strong  { color: #fca5a5; }
.callout-good  { background: rgba(16,185,129,0.06); border-color: rgba(16,185,129,0.26); }
.callout-good .co-body strong  { color: #6ee7b7; }

/* Key takeaways */
.key-takeaways {
  background: linear-gradient(135deg, rgba(12,29,60,0.95), rgba(9,22,48,0.95));
  border: 1px solid rgba(245,158,11,0.30);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  margin: 0 0 36px;
  box-shadow: 0 0 40px rgba(245,158,11,0.05);
}
.key-takeaways h2 {
  font-size: 1.02rem !important;
  margin: 0 0 16px !important;
  padding-top: 0 !important;
  color: var(--gold-light);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800 !important;
}
.key-takeaways h2::before { display: none !important; }
.key-takeaways ul { margin-bottom: 0 !important; gap: 10px !important; }
.key-takeaways ul li { font-size: .93rem !important; padding-left: 26px !important; }
.key-takeaways ul li::before {
  content: '✓' !important;
  background: none !important;
  box-shadow: none !important;
  left: 2px !important;
  top: 0 !important;
  width: auto !important;
  height: auto !important;
  color: var(--green) !important;
  font-weight: 900;
  font-size: .9rem;
}

/* Pull quote */
.pull-quote {
  margin: 34px 0;
  padding: 24px 26px 24px 30px;
  border-left: 3px solid var(--gold);
  background: rgba(245,158,11,0.045);
  border-radius: 0 14px 14px 0;
  font-size: 1.06rem;
  line-height: 1.8;
  color: var(--white);
  font-weight: 500;
}
.pull-quote cite {
  display: block;
  margin-top: 12px;
  font-size: .8rem;
  color: var(--gray);
  font-style: normal;
  font-weight: 600;
}

/* ── 17. TABLES ── */
.table-wrap {
  overflow-x: auto;
  margin: 28px 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card2);
  -webkit-overflow-scrolling: touch;
}
.article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .89rem;
  min-width: 520px;
}
.article-table thead th {
  background: rgba(245,158,11,0.09);
  color: var(--gold-light);
  font-weight: 800;
  text-align: left;
  padding: 14px 16px;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .6px;
  white-space: nowrap;
  border-bottom: 1px solid rgba(245,158,11,0.22);
}
.article-table tbody td {
  padding: 13px 16px;
  color: var(--gray-light);
  border-bottom: 1px solid var(--border-soft);
  line-height: 1.65;
  vertical-align: top;
}
.article-table tbody tr:last-child td { border-bottom: none; }
.article-table tbody tr:hover td { background: rgba(245,158,11,0.035); }
.article-table td strong { color: var(--white); }
.article-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-caption { font-size: .76rem; color: var(--gray); margin-top: -18px; margin-bottom: 28px; line-height: 1.6; }

/* ── 18. STEP CARDS ── */
.step-cards { display: flex; flex-direction: column; gap: 14px; margin: 26px 0 30px; }
.step-card {
  display: flex;
  gap: 16px;
  padding: 20px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: var(--transition);
}
.step-card:hover { border-color: rgba(245,158,11,0.35); transform: translateX(3px); }
.step-card .sc-num {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #0a0e1a;
  font-weight: 900;
  font-size: .92rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-card h4 { margin: 0 0 6px; font-size: 1rem; font-weight: 700; color: var(--white); }
.step-card p { margin: 0; font-size: .9rem; color: var(--gray-light); line-height: 1.75; }

/* ── 19. INLINE CTA (mid-article) ── */
.inline-cta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-card2));
  border: 1px solid rgba(245,158,11,0.32);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  margin: 38px 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(245,158,11,0.06);
}
.inline-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 100% at 100% 50%, rgba(245,158,11,0.10), transparent 70%);
  pointer-events: none;
}
.inline-cta > * { position: relative; }
.inline-cta .ic-text { flex: 1; min-width: 240px; }
.inline-cta h4 { margin: 0 0 6px; font-size: 1.1rem; font-weight: 800; color: var(--white); }
.inline-cta p { margin: 0; font-size: .88rem; color: var(--gray-light); line-height: 1.7; }

/* ── 20. SIDEBAR ── */
.article-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + 20px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: calc(100vh - var(--nav-height) - 40px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(245,158,11,0.35) transparent;
  padding-right: 4px;
}
.article-sidebar::-webkit-scrollbar { width: 5px; }
.article-sidebar::-webkit-scrollbar-thumb { background: rgba(245,158,11,0.30); border-radius: 4px; }

.side-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
}
a.side-card { transition: var(--transition); }
a.side-card:hover {
  border-color: rgba(245,158,11,0.45);
  background: rgba(245,158,11,0.05);
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.5);
}
a.side-card:hover h4 { color: var(--gold-light) !important; }

.side-card h4 {
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gold-light);
  margin-bottom: 14px;
}

/* Table of contents */
.toc-list { display: flex; flex-direction: column; gap: 2px; }
.toc-list a {
  display: block;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--gray-light);
  padding: 8px 12px 8px 14px;
  border-left: 2px solid transparent;
  border-radius: 0 8px 8px 0;
  transition: var(--transition);
}
.toc-list a:hover { color: var(--gold-light); background: rgba(245,158,11,0.06); }
.toc-list a.active {
  color: var(--gold-light);
  border-left-color: var(--gold);
  background: rgba(245,158,11,0.08);
  font-weight: 600;
}

/* Sidebar CTA */
.side-cta {
  background: linear-gradient(160deg, var(--bg-card), var(--bg-card2));
  border: 1px solid rgba(245,158,11,0.35);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 36px rgba(245,158,11,0.07);
}
.side-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(245,158,11,0.13), transparent 70%);
  pointer-events: none;
}
.side-cta > * { position: relative; }
.side-cta .sc-emoji { font-size: 2rem; display: block; margin-bottom: 10px; }
.side-cta h4 {
  font-size: 1.05rem;
  text-transform: none;
  letter-spacing: -0.2px;
  color: var(--white);
  margin-bottom: 8px;
  font-weight: 800;
}
.side-cta p { font-size: .82rem; color: var(--gray-light); line-height: 1.7; margin-bottom: 18px; }
.side-cta .sc-note { font-size: .68rem; color: var(--gray); margin: 12px 0 0; line-height: 1.55; }

/* Sidebar mini post list */
.mini-post {
  display: flex;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-soft);
  transition: var(--transition);
}
.mini-post:last-child { border-bottom: none; padding-bottom: 0; }
.mini-post:first-child { padding-top: 0; }
.mini-post .mp-num {
  flex-shrink: 0;
  font-size: 1.05rem;
  font-weight: 900;
  color: rgba(245,158,11,0.35);
  line-height: 1.4;
  width: 20px;
}
.mini-post .mp-title { font-size: .84rem; font-weight: 600; color: var(--gray-light); line-height: 1.5; transition: color 0.2s; }
.mini-post:hover .mp-title { color: var(--gold-light); }
.mini-post .mp-meta { font-size: .7rem; color: var(--gray); margin-top: 3px; }

/* Sidebar tag cloud */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 7px; }
.tag-cloud a {
  font-size: .74rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-card2);
  color: var(--gray-light);
  transition: var(--transition);
}
.tag-cloud a:hover { color: var(--gold-light); border-color: rgba(245,158,11,0.42); background: rgba(245,158,11,0.07); }

/* ── 21. AUTHOR BOX ── */
.author-box {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-card2));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin: 46px 0 0;
}
.author-box .ab-avatar {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #0a0e1a;
  font-size: 1.6rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(245,158,11,0.30);
}
.author-box h4 { margin: 0 0 3px; font-size: 1.05rem; font-weight: 800; color: var(--white); }
.author-box .ab-role { font-size: .78rem; color: var(--gold); font-weight: 600; margin-bottom: 10px; }
.author-box p { margin: 0; font-size: .87rem; color: var(--gray-light); line-height: 1.8; }

/* ── 22. PREV / NEXT NAV ── */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 36px;
}
.post-nav a, .post-nav .pn-empty {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  transition: var(--transition);
  display: block;
}
.post-nav a:hover { border-color: rgba(245,158,11,0.42); transform: translateY(-3px); }
.post-nav .pn-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray);
  font-weight: 700;
  margin-bottom: 7px;
  display: block;
}
.post-nav .pn-title { font-size: .92rem; font-weight: 700; color: var(--white); line-height: 1.5; }
.post-nav a:hover .pn-title { color: var(--gold-light); }
.post-nav .pn-next { text-align: right; }
.post-nav .pn-empty { opacity: .5; border-style: dashed; }

/* ── 23. RELATED POSTS ── */
.related-section {
  padding: 60px 0 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
}

/* ── 24. RESPONSIVE ── */
@media (max-width: 1080px) {
  .article-layout { grid-template-columns: 1fr; gap: 40px; }
  .article-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .article-sidebar .side-toc { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .featured-body { padding: 24px 22px 26px; }
}

@media (max-width: 768px) {
  .blog-hero { padding: 46px 0 36px; }
  .blog-toolbar { padding: 20px 0 22px; margin-bottom: 26px; }
  .blog-count { width: 100%; margin-left: 0; }
  .blog-search { flex: 1 1 100%; order: -1; }
  .posts-grid { grid-template-columns: 1fr; gap: 20px; }
  .article-layout { padding: 36px 0 50px; }
  .article-sidebar { grid-template-columns: 1fr; }
  .share-row { margin-left: 0; width: 100%; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav .pn-next { text-align: left; }
  .author-box { flex-direction: column; gap: 16px; padding: 24px 20px; }
  .blog-cta-band { padding: 34px 22px; }
  .schedule-box { padding: 26px 20px; }
  .inline-cta { padding: 22px 20px; }
  .article-body { font-size: .99rem; }
  .article-body h2 { margin: 40px 0 14px; }
}

@media (max-width: 480px) {
  .post-foot { flex-direction: column; align-items: stretch; gap: 12px; }
  .btn-read { width: 100%; }
  .post-author { justify-content: center; }
  .featured-body { padding: 24px 18px; }
  .blog-stat { flex: 1 1 calc(50% - 14px); min-width: 0; padding: 10px 12px; }
  .schedule-item { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cta-btn-row .btn { width: 100%; }
}

/* Print — clean article output */
@media print {
  .navbar, .urgency-banner, .mobile-cta-bar, .article-sidebar, .share-row,
  .inline-cta, .side-cta, .related-section, .reading-progress, footer,
  .affiliate-disclaimer, .breadcrumb-bar { display: none !important; }
  body { background: #fff; color: #000; }
  .article-body > p, .article-body li { color: #222; }
}