/* =========================================================
   article-modern.css — Wheels Gaming article page
   Loaded by single-article.php. Scoped to .wg-article so it
   cannot disturb the header, comments or related-articles.
   ========================================================= */

.wg-article{
  --wg-ink:#15131c;
  --wg-soft:#5f5a72;
  --wg-line:#e9e6f1;
  --wg-brand:#7b2ff7;
  --wg-brand2:#f107a3;
  --wg-paper:#ffffff;

  max-width:820px;
  margin:0 auto 44px;
  padding:34px 22px 10px;
  background:var(--wg-paper);
  color:var(--wg-ink);
  font-family:"Source Serif 4","Georgia",serif;
  font-size:19px;
  line-height:1.75;
  border-radius:18px;
  box-shadow:0 2px 30px rgba(21,19,28,.06);
}

/* ---------- breadcrumb ---------- */
.wg-article__crumbs{
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--wg-soft); margin-bottom:16px;
}
.wg-article__crumbs a{color:var(--wg-soft); text-decoration:none}
.wg-article__crumbs a:hover{color:var(--wg-brand)}
.wg-article__crumbs span{opacity:.45; margin:0 7px}

/* ---------- category pill ---------- */
.wg-pill{
  display:inline-block; font-family:"Chakra Petch",system-ui,sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; padding:5px 14px; border-radius:999px; text-decoration:none;
  background:linear-gradient(90deg,var(--wg-brand),var(--wg-brand2));
}
.wg-pill:hover{color:#fff; filter:brightness(1.08); text-decoration:none}

/* ---------- headline ---------- */
.wg-article__title{
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-size:clamp(30px,4.6vw,46px);
  line-height:1.14; font-weight:700; letter-spacing:-.015em;
  margin:16px 0 14px; color:var(--wg-ink);
  background:none;
}
.wg-article__deck{
  font-size:20px; line-height:1.55; color:var(--wg-soft);
  margin:0 0 22px; font-style:italic;
}

/* ---------- byline ---------- */
.wg-byline{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 0; margin-bottom:26px;
  border-top:1px solid var(--wg-line); border-bottom:1px solid var(--wg-line);
  font-family:"Chakra Petch",system-ui,sans-serif; font-size:13.5px; color:var(--wg-soft);
}
.wg-byline__avatar{
  width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--wg-brand),var(--wg-brand2));
  color:#fff; font-weight:700; font-size:15px; letter-spacing:.02em;
}
.wg-byline__who{font-weight:700; color:var(--wg-ink)}
.wg-byline__dot{opacity:.4}
.wg-byline__meta{display:flex; align-items:center; gap:9px; flex-wrap:wrap}

/* ---------- hero image ---------- */
.wg-hero{margin:0 0 30px}
.wg-hero img{
  display:block; width:100%; max-height:460px; object-fit:cover;
  border-radius:16px; border:0;
}
.wg-hero figcaption{
  font-family:"Chakra Petch",system-ui,sans-serif; font-size:12.5px;
  color:var(--wg-soft); text-align:center; padding-top:9px;
}

/* ---------- body copy ---------- */
.wg-article__body{font-size:19px; line-height:1.78; color:#221f2c; background:none}
.wg-article__body p{margin:0 0 1.15em}
.wg-article__body h2,
.wg-article__body h3,
.wg-article__body h4{
  font-family:"Chakra Petch",system-ui,sans-serif;
  line-height:1.24; letter-spacing:-.01em; color:var(--wg-ink); background:none;
}
.wg-article__body h2{font-size:29px; font-weight:700; margin:1.5em 0 .45em}
.wg-article__body h3{font-size:23px; font-weight:600; margin:1.35em 0 .4em}
.wg-article__body h4{font-size:20px; font-weight:600; margin:1.25em 0 .35em}
.wg-article__body h2 + p,
.wg-article__body h3 + p{margin-top:0}

.wg-article__body a{color:var(--wg-brand); text-decoration:underline; text-underline-offset:2px}
.wg-article__body a:hover{color:var(--wg-brand2)}
.wg-article__body strong,.wg-article__body b{font-weight:700; color:var(--wg-ink)}

.wg-article__body ul,
.wg-article__body ol{margin:0 0 1.2em; padding-left:1.5em}
.wg-article__body li{margin-bottom:.45em; list-style:disc}
.wg-article__body ol li{list-style:decimal}

.wg-article__body blockquote{
  margin:1.6em 0; padding:.2em 0 .2em 22px;
  border-left:4px solid var(--wg-brand);
  font-size:21px; font-style:italic; color:var(--wg-soft);
}
.wg-article__body hr{border:0; border-top:1px solid var(--wg-line); margin:2.2em 0}

/* pictures: centred, never oversized */
.wg-article__body img{
  display:block; margin:30px auto; max-width:100%; width:auto;
  max-height:520px; height:auto; border-radius:14px;
  box-shadow:0 6px 24px rgba(21,19,28,.10);
}
.wg-article__body figure{margin:30px auto; max-width:100%}
.wg-article__body figure img{margin:0 auto}
.wg-article__body figcaption{
  font-family:"Chakra Petch",system-ui,sans-serif; font-size:12.5px;
  color:var(--wg-soft); text-align:center; padding-top:8px;
}
.wg-article__body iframe,
.wg-article__body video,
.wg-article__body embed{display:block; margin:30px auto; max-width:100%; border-radius:14px}
.wg-article__body table{width:100%; border-collapse:collapse; margin:1.4em 0; font-size:16px}
.wg-article__body td,.wg-article__body th{border:1px solid var(--wg-line); padding:9px 12px}

/* legacy photouno / photoduo figures */
.wg-figure{margin:30px auto; max-width:100%}
.wg-figure img{
  display:block; margin:0 auto; max-width:100%; max-height:520px; height:auto;
  border-radius:14px; box-shadow:0 6px 24px rgba(21,19,28,.10);
}
.wg-figure figcaption{
  font-family:"Chakra Petch",system-ui,sans-serif; font-size:12.5px;
  color:var(--wg-soft); text-align:center; padding-top:9px;
}

/* ---------- source / tags / share ---------- */
.wg-source{
  margin:30px 0 0; padding:16px 18px; border-radius:12px;
  background:#f8f7fc; font-size:16.5px; color:var(--wg-soft);
}
.wg-tags{display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 0}
.wg-tags a{
  font-family:"Chakra Petch",system-ui,sans-serif; font-size:12.5px; font-weight:600;
  color:var(--wg-soft); background:#f4f2fa; border:1px solid var(--wg-line);
  padding:5px 12px; border-radius:999px; text-decoration:none;
}
.wg-tags a:hover{color:var(--wg-brand); border-color:var(--wg-brand); text-decoration:none}

.wg-share{
  margin-top:30px; padding-top:20px; border-top:1px solid var(--wg-line);
}
.wg-share__label{
  font-family:"Chakra Petch",system-ui,sans-serif; font-size:12.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--wg-soft); margin-bottom:10px;
}

/* ---------- reading progress ---------- */
.wg-progress{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:999;
  background:linear-gradient(90deg,#7b2ff7,#f107a3);
}

@media (max-width:640px){
  .wg-article{padding:22px 16px 6px; font-size:18px; border-radius:0; box-shadow:none}
  .wg-article__body{font-size:18px}
  .wg-article__deck{font-size:18px}
  .wg-hero img{max-height:280px; border-radius:12px}
}

/* =========================================================
   TWO-COLUMN SHELL — article left, sticky aside right
   ========================================================= */
.wg-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:26px;
  max-width:1240px;
  margin:0 auto;
  padding:0 18px;
  align-items:start;
}
.wg-shell__main{min-width:0}
.wg-shell .wg-article{max-width:none; margin:0 0 44px; padding:34px 40px 10px}

.wg-shell__side{min-width:0}
.wg-side-sticky{position:sticky; top:86px; display:flex; flex-direction:column; gap:18px}

.wg-panel{
  background:#fff; border:1px solid #e9e6f1; border-radius:16px;
  padding:16px 16px 18px; box-shadow:0 2px 22px rgba(21,19,28,.05);
  font-family:"Chakra Petch",system-ui,sans-serif;
}
.wg-panel__title{
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#15131c; margin:0 0 12px; padding-bottom:10px;
  border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg,#7b2ff7,#f107a3) 1;
  background:none;
}

/* ---- numbered auto-scrolling top-news list ---- */
.wg-ticker{height:344px; overflow:hidden}
.wg-ticker__list{list-style:none; margin:0; padding:0; will-change:transform}
.wg-ticker__item{list-style:none; margin:0}
.wg-ticker__item a{
  display:grid; grid-template-columns:22px 62px 1fr; align-items:center; gap:9px;
  padding:9px 4px; border-bottom:1px solid #f0edf7; text-decoration:none; color:#15131c;
}
.wg-ticker__item a:hover{color:#7b2ff7; text-decoration:none}
.wg-ticker__item a:hover .wg-ticker__ttl{color:#7b2ff7}
.wg-rank{
  font-size:19px; font-weight:700; line-height:1; text-align:center;
  background:linear-gradient(180deg,#7b2ff7,#f107a3);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wg-ticker__item img{
  width:62px; height:44px; object-fit:cover; border-radius:8px; display:block;
}
.wg-ticker__txt{display:block; min-width:0}
.wg-ticker__ttl{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:13.5px; font-weight:600; line-height:1.32; color:#15131c;
}
.wg-ticker__meta{display:block; font-size:11.5px; color:#8b86a3; margin-top:3px}

/* ---- most-watched videos ---- */
.wg-vidlist{list-style:none; margin:0; padding:0}
.wg-vidlist li{list-style:none}
.wg-vidlist a{
  display:grid; grid-template-columns:78px 1fr; gap:10px; align-items:center;
  padding:9px 4px; border-bottom:1px solid #f0edf7; text-decoration:none; color:#15131c;
}
.wg-vidlist a:hover .wg-vidttl{color:#7b2ff7}
.wg-vidthumb{position:relative; display:block; border-radius:8px; overflow:hidden; background:#efecf7}
.wg-vidthumb img{width:78px; height:50px; object-fit:cover; display:block}
.wg-play{
  position:absolute; inset:0; margin:auto; width:0; height:0;
  border-left:13px solid rgba(255,255,255,.95);
  border-top:9px solid transparent; border-bottom:9px solid transparent;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
.wg-vidttl{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:13.5px; font-weight:600; line-height:1.32;
}

/* ---- category chips in the aside ---- */
.wg-catlinks{display:flex; flex-wrap:wrap; gap:7px}
.wg-catlinks a{
  font-size:12.5px; font-weight:600; color:#5f5a72; text-decoration:none;
  background:#f5f3fb; border:1px solid #e9e6f1; border-radius:999px; padding:5px 11px;
}
.wg-catlinks a:hover{color:#fff; text-decoration:none;
  background:linear-gradient(90deg,#7b2ff7,#f107a3); border-color:transparent}

@media (max-width:1024px){
  .wg-shell{grid-template-columns:minmax(0,1fr)}
  .wg-side-sticky{position:static}
  .wg-ticker{height:auto}
  .wg-shell .wg-article{padding:26px 22px 10px}
}
@media (max-width:640px){
  .wg-shell{padding:0}
  .wg-shell .wg-article{padding:22px 16px 6px}
}

/* =========================================================
   Legacy "Popular articles" panel (bottom-right of article page)
   Source markup hardcodes rank numbers as <font size="200">, and
   .img-circle at 100x80 distorts into an ellipse — both fixed here
   without touching the PHP. Scoped to ul.demo1, which only this
   widget uses, so the Related-articles panel next to it is untouched.
   ========================================================= */
.article-intro .panel.panel-default{ border:0 !important; box-shadow:none !important; background:transparent !important; }
.article-intro .panel-heading{
  background:linear-gradient(90deg,#7b2ff7,#f107a3) !important; color:#fff !important;
  border-radius:12px !important; border:0 !important; padding:12px 14px !important;
  font-family:"Chakra Petch",system-ui,sans-serif; letter-spacing:.04em; margin-bottom:14px !important;
}
.article-intro .panel-heading b{ font-weight:700; }

.article-intro ul.demo1{ list-style:none; margin:0 !important; padding:0; }
.article-intro ul.demo1 .news-item{
  border:0 !important; border-bottom:1px solid #e9e6f1 !important; padding:10px 2px !important; font-size:13px;
}
.article-intro ul.demo1 .news-item:last-child{ border-bottom:0 !important; }
.article-intro ul.demo1 table#tabula{ border-collapse:collapse; }

/* thumbnail: fixed-ratio crop instead of a stretched "circle" */
.article-intro ul.demo1 .containere{
  position:relative; display:block; width:78px; height:56px; border-radius:10px; overflow:hidden;
}
.article-intro ul.demo1 .containere a{ display:block; width:100%; height:100%; }
.article-intro ul.demo1 .img-circle{
  width:78px !important; height:56px !important; object-fit:cover;
  border-radius:10px !important; border:0 !important;
}

/* rank badge: small numbered pill in the corner, not a giant overlapping font */
.article-intro ul.demo1 .contente{
  position:absolute !important; top:4px !important; left:4px !important; right:auto !important;
  width:20px !important; height:20px !important; min-width:0 !important;
  border-radius:50% !important; background:linear-gradient(135deg,#7b2ff7,#f107a3) !important;
  display:flex !important; align-items:center; justify-content:center;
  padding:0 !important; margin:0 !important; line-height:1 !important;
}
.article-intro ul.demo1 .contente font{
  font-size:11px !important; font-weight:700 !important; color:#fff !important; line-height:1 !important;
}

/* title + meta column */
.article-intro ul.demo1 td[style*="padding:16px"]{ padding:0 0 0 12px !important; vertical-align:middle; }
.article-intro ul.demo1 a font[size="2.5px"]{
  font-size:13.5px !important; font-weight:600 !important; color:#15131c !important;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.32;
}
.article-intro ul.demo1 small{ font-size:11.5px !important; color:#8b86a3 !important; }
.article-intro ul.demo1 .badge{
  background:#f5f3fb !important; color:#5f5a72 !important; border-radius:999px !important;
  font-size:10.5px !important; font-weight:600 !important; padding:3px 9px !important;
  margin-top:4px; display:inline-block;
}