/* TriviaGreen single article page. */

.tg-article { padding-bottom: 8px; }

/* ---- Masthead (breadcrumb, series, title, dek, byline) ---- */
/* No max-width here: the .tg-shell wrapper sets the shared 1120 content column, so
   the masthead's left edge lines up with the hero and body. The title/dek cap their
   own width (left-aligned) instead. A max-width on this element would re-center it. */
.tg-article__head {
  display: flex; flex-direction: column; gap: 16px;
}
/* Generic pages (Privacy, Terms, Contact…) put the title at the very top, so it
   needs its own breathing room below the header (single posts get it from the
   breadcrumb row above). */
.tg-page .tg-article__head { padding-top: clamp(28px, 4vw, 48px); }
.tg-page .tg-article__layout { padding-top: 20px; }
.tg-article__meta-row { padding-top: 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tg-article__title {
  margin: 0; font: 900 34px/1.12 var(--tg-font-head); letter-spacing: -.015em; text-wrap: balance;
}
.tg-article__dek {
  margin: 0; font: 400 20px/1.4 var(--tg-font-body); color: var(--tg-text-2);
  max-width: 760px; text-wrap: pretty;
}
.tg-byline { display: flex; align-items: center; gap: 12px; }
.tg-byline__avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; object-fit: cover; background: repeating-linear-gradient(135deg, #DCD4C2 0 5px, #E9E3D4 5px 10px); }
.tg-byline__name { font: 700 17px/1.2 var(--tg-font-body); }
.tg-byline__detail { font: 400 16px/1.2 var(--tg-font-body); color: var(--tg-text-3); }

/* ---- Hero (lives inside the main column; spacing from .tg-article__main gap) ---- */
.tg-hero { margin: 0; }
.tg-hero__media { border-radius: var(--tg-r-card); overflow: hidden; }
.tg-hero__img, .tg-hero__ph {
  width: 100%; height: 240px; object-fit: cover; display: block;
}
.tg-hero__credit { padding-top: 10px; font: 400 15px/1.3 var(--tg-font-body); color: var(--tg-text-3); }

/* ---- Ad slots ---- */
.tg-ad--underhero { margin-top: 24px; }
.tg-ad--underhero .tg-ad__box { width: 320px; max-width: 100%; height: 100px; }
.tg-ad--incontent .tg-ad__box { width: 300px; height: 250px; }
.tg-ad--sidebar .tg-ad__box { width: 300px; height: 600px; }
.tg-ad--incontent, .tg-ad--aftercontent, .tg-ad--leaderboard { margin: 28px auto; }
.tg-ad--leaderboard .tg-ad__box, .tg-ad--aftercontent .tg-ad__box { width: 728px; max-width: 100%; height: 90px; }
.tg-ad__unit { width: 100%; display: flex; justify-content: center; align-items: center; }
.tg-ad__unit img, .tg-ad__unit iframe, .tg-ad__unit ins { max-width: 100%; }

/* ---- "Play trivia" CTA (links out to the n2n play site) ---- */
.tg-playcta {
  margin: 28px 0; padding: 20px 24px; border-radius: var(--tg-r-feature);
  background: var(--tg-leaf-tint); display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.tg-playcta__text { font: 400 17px/1.45 var(--tg-font-body); color: var(--tg-moss); max-width: 560px; }
.tg-playcta__kicker { display: block; font: 800 13px/1 var(--tg-font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--tg-forest); margin-bottom: 6px; }
.tg-playcta .tg-btn { flex: none; }

/* ---- Sidebar "Explore" module ---- */
.tg-explore { margin-top: 8px; }
.tg-explore__cats { display: flex; flex-wrap: wrap; gap: 8px; }
.tg-explore__cat {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
  border-radius: var(--tg-r-pill); font: 800 14px/1 var(--tg-font-head);
  background: var(--tg-white); border: 1px solid var(--tg-line);
  color: var(--tg-forest); text-decoration: none;
}
.tg-explore__cat.is-active { background: var(--tg-cat-bg); color: var(--tg-cat-fg); border-color: transparent; }
.tg-explore__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.tg-explore__subhead { margin: 18px 0 8px; font: 800 13px/1 var(--tg-font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--tg-text-3); }
.tg-explore__serieslist { display: flex; flex-direction: column; gap: 2px; }
.tg-explore__series { display: flex; align-items: center; gap: 9px; padding: 7px 0; font: 700 15px/1.25 var(--tg-font-body); color: var(--tg-moss); text-decoration: none; }
.tg-explore__series:hover { color: var(--tg-forest); }
.tg-explore__sdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* mobile sticky bottom ad bar */
.tg-sticky-ad {
  position: sticky; bottom: 0; z-index: 30;
  background: rgba(250, 246, 238, .96); border-top: 1px solid var(--tg-line);
  padding: 5px 0; display: flex; justify-content: center;
}
.tg-sticky-ad .tg-ad__box { width: 320px; height: 50px; }

/* ---- Body layout ---- */
.tg-article__layout { padding-top: 16px; }
.tg-article__body {
  display: flex; flex-direction: column; gap: 20px;
  font: 400 19px/1.6 var(--tg-font-body); color: var(--tg-moss);
}
.tg-article__body > p { margin: 0; text-wrap: pretty; }
.tg-article__body h2 { margin: 8px 0 0; font: 800 25px/1.2 var(--tg-font-head); }
.tg-article__body a { color: var(--tg-forest); }
.tg-article__body strong { font-weight: 700; }
.tg-article__body figure { margin: 0; }
.tg-article__body img { border-radius: var(--tg-r-card); }

/* Myth-or-fact verdict */
.tg-verdict {
  margin: 0; font: 800 20px/1.4 var(--tg-font-head); padding: 14px 18px;
  border-radius: var(--tg-r-sm); border-left: 6px solid var(--tg-forest); background: var(--tg-leaf-tint);
}
.tg-verdict--myth { border-left-color: var(--tg-wrong); background: var(--tg-wrong-tint); }
.tg-verdict--fact { border-left-color: var(--tg-correct); background: var(--tg-correct-tint); }
.tg-verdict--partly { border-left-color: var(--tg-amber); background: var(--tg-amber-tint); }

/* Sky This Month events */
.tg-sky-events { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }

/* ---- Keep exploring ---- */
.tg-keep { padding-top: 48px; display: flex; flex-direction: column; gap: 20px; }
.tg-keep__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tg-keep__title { margin: 0; font: 900 25px/1.2 var(--tg-font-head); }
.tg-keep__all { font: 700 17px/1 var(--tg-font-body); white-space: nowrap; }
.tg-keep__grid { display: grid; grid-template-columns: 1fr; gap: 14px; }

/* ---- Author box ---- */
.tg-author { display: flex; gap: 16px; align-items: center; }
.tg-author__avatar { width: 64px; height: 64px; border-radius: 50%; flex: none; object-fit: cover; background: repeating-linear-gradient(135deg, #DCD4C2 0 5px, #E9E3D4 5px 10px); }
.tg-author__bio { font: 400 17px/1.45 var(--tg-font-body); color: var(--tg-text-2); }
.tg-author__bio strong { color: var(--tg-moss); }

/* ---- Sidebar ---- */
.tg-sidebar { display: none; }
.tg-sidebar__related { background: var(--tg-white); border-radius: var(--tg-r-card); padding: 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--tg-shadow-card); }
.tg-sidebar__heading { font: 800 13px/1 var(--tg-font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--tg-forest); }

/* vertical rhythm between big blocks in the main column */
.tg-article__main > * { margin: 0; }
.tg-article__main { display: flex; flex-direction: column; gap: 24px; }

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  .tg-article__title { font-size: 46px; line-height: 1.1; letter-spacing: -.02em; }
  .tg-article__dek { font-size: 22px; }

  .tg-hero__img, .tg-hero__ph { height: 380px; }

  .tg-article__layout {
    padding-top: 16px;
    display: grid; grid-template-columns: minmax(0, var(--tg-body-max)) 300px;
    justify-content: space-between; align-items: start; gap: 40px;
  }
  .tg-article__body { font-size: 20px; line-height: 1.65; }
  .tg-article__body h2 { font-size: 31px; }

  .tg-sidebar { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 104px; }
  .tg-ad--sidebar { align-items: stretch; }

  .tg-keep { padding-top: 64px; }
  .tg-keep__title { font-size: 34px; }
  .tg-keep__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

  .tg-sticky-ad { display: none; }
}

/* hide the desktop-only sidebar ad gracefully on small screens is handled by .tg-sidebar display:none */