/* ===================================================================
   Ported from NewsDetails.cshtml @section Page_Level_Css (both <style>
   blocks) plus the <style> that shipped inside _TrendingNews.cshtml.

   ⚠️ EVERY RULE IS SCOPED UNDER `.page-article`. DO NOT REMOVE THE PREFIX.
   See the explanation at the top of home.css — unscoped, this file's
   `.news-title { font-size: 32px }` leaked onto the homepage after a
   client-side navigation and enlarged every headline there.

   `.page-article` is set on the root .cust-details-wrapper in ArticleView.tsx.
   =================================================================== */

/* Mobile/tablet gutter — match the homepage exactly (12px). The article page
   also nests `.container-fluid > .container`, so their paddings stacked and the
   content was inset further than the masthead + nav above it. Zero the outer
   fluid and pin the inner container to 12px, same as .page-home. */
@media (max-width: 1024px) {
  .page-article .container-fluid {
    padding-left: 0;
    padding-right: 0;
  }

  .page-article .container {
    padding-left: 12px;
    padding-right: 12px;
  }
}

.page-article .news-card {
  background: #fff;
  margin-top: 20px;
}

/* Article heading — shared typography. Font-size stays per-breakpoint below so
   the responsive behaviour is untouched; this only lifts the reading quality:
   a near-black ink, a true 700 weight, a roomier 1.4 line-height and a clear
   16–20px gap before the lead paragraph. */
.page-article .news-title {
  color: var(--sp-ink-head);
  font-weight: 700;
  /* No negative letter-spacing: on Devanagari, tracking pulls matras and
     conjuncts out of position and hurts readability — the very thing it is
     meant to fix on Latin display type. A Hindi masthead leaves it at 0. */
  margin-bottom: 22px;
}

@media (min-width: 767px) {
  .page-article .news-title {
    /* 34px, up from 32. A front-page headline has to out-weigh the 20px lead
       and the 20px body under it; at 32 it was only 1.6× the body and read as
       "slightly bigger text" rather than as the story's headline. */
    /* × --sp-read-scale: the reader's A−/A/A+ choice. Multiplying the whole
       ramp (headline, lead, body) keeps the hierarchy intact at every step
       instead of only growing the body until it collides with the headline.
       See components/TextSize.tsx. */
    font-size: calc(var(--sp-h1) * var(--sp-read-scale));
    line-height: var(--sp-lh-head);
  }
}

@media (max-width: 766px) {
  .page-article .news-title {
    /* 25px, up from 22. Most of this site's traffic is phones, and 22px was
       the same size as the lead — the hierarchy collapsed exactly where it
       matters most. */
    font-size: calc(25px * var(--sp-read-scale));
    line-height: 1.42;
  }
}

/* Lead / standfirst.
   19px at weight 500 — a step DOWN in size from the old 20px but a step UP in
   weight. At 20px/400 it was the same size as the body copy below it and only
   a shade darker, so the eye could not tell the summary from the story. The
   size gap plus the medium weight makes it read as a deck. */
.page-article .news-subtitle {
  font-size: calc(19px * var(--sp-read-scale));
  color: var(--sp-ink-lead);
  padding-right: 0;
  line-height: 1.68;
  font-weight: 500;
  margin-bottom: 18px;
  /* Avoid a lone trailing word on the lead's last line. */
  text-wrap: pretty;
}

@media (max-width: 766px) {
  .page-article .news-subtitle {
    font-size: calc(17px * var(--sp-read-scale));
    line-height: 1.65;
  }
}

.dark-mode .page-article .news-subtitle {
  color: var(--sp-ink-lead);
}

/* ---------------- byline row ----------------
   See the note in components/ArticleView.tsx for what this replaced. The row
   wraps as a unit rather than letting the name column collapse under the share
   buttons, and it is fenced by hairlines so the reader gets a clear break
   between "who wrote this / when" and the story itself. */
.page-article .sp-byline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  /* Tightened from 12px/38px-avatar/13.5px-text. A byline is furniture: it has
     to be readable and then get out of the way of the story. At the old size it
     occupied nearly as much vertical space as the lead paragraph. */
  padding: 9px 0;
  margin-bottom: 4px;
  border-top: 1px solid #e9ecf0;
  border-bottom: 1px solid #e9ecf0;
}

.dark-mode .page-article .sp-byline {
  border-top-color: #2b3138;
  border-bottom-color: #2b3138;
}

.page-article .sp-byline-id {
  display: flex;
  align-items: center;
  gap: 9px;
  /* Lets the name column shrink instead of pushing the share control off the
     row — the overlap on phones came from this being unset. */
  min-width: 0;
  flex: 1 1 auto;
}

.page-article .sp-byline-avatar {
  border-radius: 50%;
  border: 1px solid #e2e6ea;
  padding: 1px;
  flex: 0 0 auto;
}

.dark-mode .page-article .sp-byline-avatar {
  border-color: #333a42;
}

/* Line 1: publisher + person. `nowrap` on each part is the actual fix for the
   ugly wrap — the name can drop to the next line, but it can never be split
   from the words that introduce it. `min-width: 0` + ellipsis handles a name
   too long for the column instead of forcing a third line. */
.page-article .sp-byline-line {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-article .sp-byline-by {
  color: var(--sp-accent);
  font-weight: 700;
}

/* The "·" is drawn by CSS rather than typed into the markup, so there is no
   stray separator when the CMS leaves the editor field empty. */
.page-article .sp-byline-editor {
  color: var(--sp-ink-head);
  font-weight: 600;
}

.page-article .sp-byline-editor::before {
  content: " · ";
  color: var(--sp-ink-meta);
  font-weight: 400;
}

/* Line 2: the dateline. Smaller and muted — it is the least important thing in
   the block, and it now reads "26 जुलाई 2026, 2:04 PM" instead of the card
   format's "Jul 26, 2026, 2:04:00 PM". */
.page-article .sp-byline-time {
  display: block;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--sp-ink-meta);
  letter-spacing: 0.01em;
}

@media (max-width: 480px) {
  /*
   * The share control STAYS ON THE ROW.
   *
   * It used to be given `flex: 1 1 100%` on the byline half, which pushed the
   * share button onto a line of its own — measured at 395px: the row grew to
   * 152px tall and the button sat alone at the far left under the date, with
   * empty space beside it. The share control is a single 40px circle; there is
   * room for it next to a two-line byline, and keeping it there is what makes
   * the block under the cover image read as one unit.
   */
  .page-article .sp-byline {
    gap: 10px;
    flex-wrap: nowrap;
  }

  .page-article .sp-byline-id {
    /* Shrinks instead of wrapping. min-width:0 (set above) lets the name
       ellipsise rather than forcing the row wider than the column. */
    flex: 1 1 auto;
  }

  .page-article .sp-byline-avatar {
    width: 34px;
    height: 34px;
  }
}

/* Byline / metadata — the quietest text on the page. Smaller and tracked out
   slightly, the way a dateline is set in print, so it reads as furniture
   rather than as a short paragraph. */
.page-article .news-meta {
  font-size: var(--sp-meta);
  color: var(--sp-ink-meta);
  margin-bottom: 0px;
  line-height: 1.65;
  letter-spacing: 0.01em;
}

.dark-mode .page-article .news-meta {
  color: var(--sp-ink-meta);
}

/* The red author name (Bootstrap .text-danger #dc3545) is only 3.81:1 on the
   dark card. A lighter tint of the same red clears AA — dark mode only, so the
   light-mode brand red is untouched, and scoped to the byline so no other
   .text-danger is affected. */
.dark-mode .page-article .news-meta .text-danger {
  /* Bootstrap's .text-danger utility is !important, so this override must be too. */
  color: #ff6b6b !important;
}

/* Dark mode: the reading card was hardcoded white, so on the dark page the body
   text (light) sat on white and vanished. Match it to the page background
   (var(--bg-primary), #121212) so the reading surface blends seamlessly into the
   black theme instead of showing as a lighter grey box. Light mode is unchanged. */
.dark-mode .page-article .news-card {
  background: var(--bg-primary);
}

.dark-mode .page-article .news-title {
  color: #f2f4f7;
}

/* Cover image — consistent breathing room above and below so it sits in the
   vertical rhythm rather than crowding the text. Radius unchanged. */
.page-article .news-images {
  margin: 20px 0 22px;
}

.page-article .news-images img {
  border-radius: 10px;
  margin-right: 10px;
}

.page-article.cust-details-wrapper,
.page-article .cust-details-wrapper {
  width: 100%;
  height: auto;
}

.page-article .share-container {
  position: relative;
  display: inline-block;
}

.page-article .share-btn {
  background: #bfbfbf;
  color: #000000;
  border: none;
  border-radius: 50%;
  padding: 8px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.page-article .share-btn:hover {
  background: #60d2ff;
}

.page-article .social-icons {
  position: absolute;
  top: 42%;
  left: 0;
  display: flex;
  gap: 10px;
  opacity: 0;
  transform: translateY(-50%) translateX(-75%);
  transition: all 0.4s ease;
  pointer-events: none;
}

@media (max-width: 768px) {
  .page-article .social-icons {
    top: 32%;
  }
}

.page-article .social-icons a {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  transition: transform 0.3s ease, background 0.3s ease;
}

.page-article .social-icons a:hover {
  transform: scale(1.2);
}

.page-article .facebook {
  background: #3b5998;
}

.page-article .twitter {
  background: #000;
}

.page-article .whatsapp {
  background: #25d366;
}

.page-article .youtube {
  background: #ff0000;
}

/* Article body copy — the main reading surface.
   Ink darkened from #444 to #26292f. #444 on white is ~9:1, perfectly legible,
   but it reads as *grey text*; the Hindi dailies this is modelled on all set
   body copy nearly black, and that single change is most of what makes a page
   feel like a newspaper rather than a blog. Line-height goes 1.8 → 1.85
   because Devanagari matras need the extra room once the real Noto face is
   loaded — Nirmala UI's are shorter, which is why 1.8 was enough before. */
.page-article p {
  color: var(--sp-ink-body);
  line-height: var(--sp-lh-body);
  margin-bottom: 20px;
  font-size: calc(20px * var(--sp-read-scale));
  font-weight: 400;
  /* Reduce widows/orphans so paragraphs end cleanly instead of on a single
     stranded word (ignored by browsers that don't support it). */
  text-wrap: pretty;
}

.dark-mode .page-article p {
  color: var(--sp-ink-body);
}

/* Phone reading size. 20px in a ~360px column runs to ~28 characters a line,
   which breaks the paragraph into a ladder; 18px lands nearer the 45–60 the
   eye tracks best, and the looser leading keeps the matras clear. */
@media (max-width: 766px) {
  .page-article p,
  .page-article .Css_dtlsTxt > p {
    font-size: calc(18px * var(--sp-read-scale)) !important;
    line-height: 1.88 !important;
  }
}

@media (max-width: 768px) {
  .page-article .fr-fic,
  .page-article .fr-fil,
  .page-article .fr-dib {
    width: 100%;
    max-width: 765px;
  }

  .page-article .social-share > li > a > img {
    width: 38px;
    padding: 2px;
  }

  .page-article .cust-repoter-desk p {
    padding-left: 8px;
    font-size: 11px !important;
  }

  .page-article .social-share {
    gap: 1px;
    margin-top: -10px;
  }

  .page-article .padding-left {
    padding-left: 8px !important;
  }

  .page-article .text-grey {
    font-size: 10px !important;
  }

  .page-article .icon-css {
    margin-right: 2px !important;
  }
}

.page-article .twitter-img {
  border-radius: 12px;
}

.page-article .icon-css {
  color: #757575 !important;
  font-size: 14px;
  vertical-align: middle;
  margin-right: 5px;
}

.page-article .text-grey {
  color: #6c6c6c;
  font-size: 11px;
  vertical-align: middle;
}

.page-article .date-time {
  display: flex;
  align-items: center;
}

/* ---------------- share widget ---------------- */
.page-article .socialShare {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  transition: all ease 0.5s;
}

.page-article .socialShare.active {
  padding-right: 40px;
}

.page-article .socialShare.active .trigger {
  background-color: transparent;
  box-shadow: none;
  width: 50px;
  height: 50px;
}

.page-article .socialShare.active .trigger::before,
.page-article .socialShare.active .trigger::after {
  content: "";
  position: absolute;
  height: 50%;
  width: 0;
  border-left: 4px solid #1a1a1a;
}

.page-article .socialShare.active .trigger::before {
  animation: rotateBefore 1s ease forwards;
}

.page-article .socialShare.active .trigger::after {
  transform: rotate(-45deg);
}

.page-article .socialShare.active .trigger i {
  visibility: hidden;
}

.page-article .socialShare.active .menu .icon a i {
  width: 28px;
  height: 28px;
  padding: 0.5rem;
  font-size: 13px;
  margin-right: 20px;
  animation: blow 0.5s ease forwards;
}

.page-article .trigger {
  background-color: #353535;
  color: #fff;
  font-size: 18px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  position: absolute;
  right: 0;
  border-radius: 500px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);
  transition: all 0.3s;
}

.page-article .trigger:hover {
  cursor: pointer;
  box-shadow: none;
}

.page-article .menu {
  display: flex;
  justify-content: space-around;
  flex-grow: 1;
}

.page-article .icon a {
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
  text-decoration: none;
}

.page-article .icon a i {
  border-radius: 500px;
  background-color: #1a1a1a;
  width: 0;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transform: scale(0);
}

/* Keyframes must stay at the top level — names are global, not scoped. */
@keyframes blow {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1.5);
  }
}

@keyframes rotateBefore {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(225deg);
  }
}

.page-article .icon:nth-child(1) a i {
  background-color: #4267b2;
}

.page-article .icon:nth-child(2) a i {
  background-color: #1da1f2;
}

.page-article .icon:nth-child(3) a i {
  background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af);
}

.page-article .icon:nth-child(4) a i {
  background-color: #0077b5;
}

.page-article .icon:nth-child(5) a i {
  background-color: #25d366;
}

@media (max-width: 768px) {
  .page-article .socialShare.active {
    padding-right: 0px;
  }

  .page-article .socialShare {
    flex-direction: unset;
    align-items: flex-end;
  }

  .page-article .socialShare.active .trigger {
    width: 45px;
    height: 45px;
  }

  .page-article .socialShare.active .menu {
    position: absolute;
    bottom: 70px;
    right: 0;
    flex-direction: column;
    gap: 21px;
    z-index: 10;
  }

  .page-article .socialShare.active .menu .icon a i {
    margin-right: 10px !important;
    width: 28px;
    height: 28px;
    font-size: 14px;
    animation: blow 0.5s ease forwards;
    transition: transform 0.3s ease;
  }

  .page-article .trigger {
    position: relative;
    bottom: 0;
    z-index: 20;
  }
}

.page-article .entry-title {
  font-size: 32px !important;
  line-height: 1.4 !important;
}

/* This is the main reading surface of the whole site, so its weight is set
   here rather than left to the `*` rule in globals.css.
   .NET never declared one, which was harmless while the site fell back to
   Arial / Nirmala UI — neither ships a medium, so the inherited
   `font-weight: 500` was rendered as 400 anyway. Noto Sans DOES have a real
   500, so once it loaded the entire article body turned semi-bold and read
   like a stack of headlines. 400 is what a reader expects from body copy and
   is what production has always actually shown. */
.page-article .Css_dtlsTxt > p {
  font-size: calc(20px * var(--sp-read-scale)) !important;
  line-height: 1.85 !important;
  font-weight: 400;
  margin-bottom: 20px;
  color: var(--sp-ink-body);
}

.page-article .cust-text-color {
  color: #17aada;
}

.page-article .cust-credit-section {
  background: antiquewhite;
  padding: 1px;
  margin: 0px;
}

/* Article-page only — see the note in globals.css. */
.page-article .Cust-img-mb {
  margin-bottom: 15px;
}

.page-article .highlight,
.page-article .frstsegmnetbreadcrumb {
  text-transform: capitalize;
}

/* Breadcrumb — mobile + tablet (≤1024px): a modern "route" trail.
   `.highlight` (globals.css) paints the current crumb as a solid red chip. On
   an article that crumb is the whole TITLE, so on a phone it became a two-line
   reversed slab fighting the real <h1>. Instead this reads like an app's
   navigation path:
     line 1  →  [ Hindi News ] › [ Jharkhand ]     — the route as tappable pills
     line 2  →  ↳ current article title            — "you are here", muted
   All inside one soft rounded surface so it reads as a single route widget.
   Category pages keep the original red chip; this is scoped under .page-article
   and the desktop layout (≥1025px) is untouched. */
@media (max-width: 1024px) {
  .page-article nav[aria-label="breadcrumb"] {
    margin: 14px 0 8px;
  }

  .page-article .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 8px;
    margin: 0;
    padding: 10px 12px;
    background: #f4f5f7;
    border: 1px solid #eceef1;
    border-radius: 12px;
    line-height: 1.3;
  }

  .page-article .breadcrumb-item {
    display: inline-flex;
    align-items: center;
  }

  /* leading segments → tappable route pills */
  .page-article .breadcrumb-item a,
  .page-article .frstsegmnetbreadcrumb {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e5e8ed;
    box-shadow: 0 1px 2px rgba(20, 24, 29, 0.04);
    font-size: 12.5px;
    font-weight: 600;
    color: #48505b;
    text-decoration: none;
    white-space: nowrap;
  }

  /* the home link carries the brand accent */
  .page-article .breadcrumb-item:first-child a {
    color: var(--sp-accent);
  }

  .page-article .breadcrumb-item a:hover,
  .page-article .breadcrumb-item a:active {
    background: #fff5f5;
    border-color: #f3c6c6;
    color: var(--sp-accent);
  }

  /* chevron between pills instead of a slash */
  .page-article .breadcrumb-item + .breadcrumb-item::before {
    content: "\203A"; /* › */
    float: none;
    padding: 0 7px;
    color: #b3bbc6;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
  }

  /* current article → own second line, no pill, no chevron */
  .page-article .breadcrumb-item:last-child {
    flex-basis: 100%;
    align-items: flex-start;
    padding-left: 2px;
  }

  .page-article .breadcrumb-item:last-child::before {
    display: none;
  }

  .page-article .highlight {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    color: #2b313a;
    line-height: 1.45;
  }

  /* "you are here" marker leading the current line */
  .page-article .highlight::before {
    content: "\21B3"; /* ↳ */
    flex: 0 0 auto;
    color: var(--sp-accent);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
  }

  /* dark mode */
  .dark-mode .page-article .breadcrumb {
    background: #171b21;
    border-color: #262c34;
  }

  .dark-mode .page-article .breadcrumb-item a,
  .dark-mode .page-article .frstsegmnetbreadcrumb {
    background: #1f242b;
    border-color: #2d343c;
    color: #cdd3da;
  }

  .dark-mode .page-article .highlight {
    color: #e6e9ed;
  }
}

/* Breadcrumb — desktop (≥1025px): the SAME modern route look as mobile — pills
   with chevrons and the brand-red home link — but kept to ONE line. The two
   leading segments stay full-size pills; the current article title trails after
   the last chevron as muted text and truncates with an ellipsis so the trail
   never wraps. Replaces the old solid-red `.highlight` chip on the article
   page; category pages keep that chip (this is scoped under .page-article). */
@media (min-width: 1025px) {
  .page-article .breadcrumb {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 18px 0 4px;
  }

  .page-article .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
  }

  .page-article .breadcrumb-item a,
  .page-article .frstsegmnetbreadcrumb {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 8px;
    background: #f4f5f7;
    border: 1px solid #eceef1;
    font-size: 13px;
    font-weight: 600;
    color: #48505b;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  .page-article .breadcrumb-item:first-child a {
    color: var(--sp-accent);
  }

  .page-article .breadcrumb-item a:hover {
    background: #fff5f5;
    border-color: #f3c6c6;
    color: var(--sp-accent);
  }

  /* chevron separators instead of the default slash */
  .page-article .breadcrumb-item + .breadcrumb-item::before {
    content: "\203A"; /* › */
    float: none;
    padding: 0 9px;
    color: #b3bbc6;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
  }

  /* current title → muted text on the same line, truncated (no red chip) */
  .page-article .breadcrumb-item:last-child {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .page-article .highlight {
    display: block;
    max-width: 100%;
    background: none;
    padding: 0;
    border-radius: 0;
    color: #5a626d;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dark-mode .page-article .breadcrumb-item a,
  .dark-mode .page-article .frstsegmnetbreadcrumb {
    background: #1f242b;
    border-color: #2d343c;
    color: #cdd3da;
  }

  .dark-mode .page-article .breadcrumb-item:first-child a {
    color: #ff5a5a;
  }

  .dark-mode .page-article .highlight {
    color: #aab3bd;
  }
}

.page-article .trendingnewspartialdetailspagewsarajpost {
  margin-top: 30px;
  margin-left: 10px;
}

@media (max-width: 768px) {
  .page-article .trendingnewspartialdetailspagewsarajpost {
    margin-top: 0px;
    margin-left: 0px;
  }
}

/* Article body images from the CMS must never overflow */
.page-article .Css_dtlsTxt img {
  max-width: 100%;
  height: auto;
}

/* ---------------- trending news (was inline in _TrendingNews.cshtml) ---------------- */
.page-article .icontrendingtitledetails {
  margin-right: 8px;
  vertical-align: middle;
  flex-shrink: 0;
  margin-bottom: -6px;
}

.page-article .news-listswarajpost {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.page-article .swarajpost-heading {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  background: #d60000;
  color: #fff;
}

.page-article .swarajpost-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.page-article .swarajpost-title i {
  font-size: 18px;
  margin-right: 8px;
}

.page-article .news-itemswarajpost {
  display: flex;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid #f1f1f1;
  transition: 0.3s;
}

.page-article .news-itemswarajpost:last-child {
  border-bottom: none;
}

.page-article .news-itemswarajpost:hover {
  background: #fafafa;
  transform: translateX(5px);
}

.page-article .news-itemswarajpost img {
  width: 120px;
  height: 78px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.page-article .swarajpost-content {
  flex: 1;
}

.page-article .swarajpost-news-title {
  color: #111;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.page-article .swarajpost-news-time {
  /* #6d6d6d (~4.9:1), not #888 (3.54:1 — failed WCAG AA at 12px). */
  color: #6d6d6d;
  font-size: 12px;
}

.page-article .news-itemswarajpost:hover .swarajpost-news-title {
  color: #d60000;
}

/* Dark mode for the Trending card — same dark surface as the reading card so
   the white panel and its greys don't glare on the dark page (light mode
   unchanged). */
.dark-mode .page-article .news-listswarajpost {
  background: #171b21;
  border-color: #262c34;
}

.dark-mode .page-article .news-itemswarajpost {
  border-bottom-color: #262c34;
}

.dark-mode .page-article .news-itemswarajpost:hover {
  background: #1f242b;
}

.dark-mode .page-article .swarajpost-news-title {
  color: #e6e9ed;
}

.dark-mode .page-article .swarajpost-news-time {
  color: #9aa3ad;
}

@media (max-width: 767px) {
  .page-article .news-itemswarajpost img {
    width: 95px;
    height: 70px;
  }

  .page-article .swarajpost-news-title {
    font-size: 14px;
  }

  .page-article .swarajpost-title {
    font-size: 18px;
  }
}

.page-article .icontrendingtimeedetails {
  margin-right: 5px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Tablet & phone: the Trending News sidebar drops BELOW the article body rather
   than squeezing beside it. The col-md-7/col-md-5 split kicked in at 768px,
   which cramped both the article and the trending list on a ~700px-wide tablet.
   Forcing both columns to full width stacks them (article first, trending under
   it). Desktop (≥1025) keeps the two side by side. */
@media (max-width: 1024px) {
  .page-article .container > .row > .col-md-7,
  .page-article .container > .row > .col-12.col-md-5 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ---------------- sidebar ad (port of _SliderAds2.cshtml) ----------------
   NewsDetails.cshtml hangs this slot off the bottom of the col-md-5 inside a
   `<div style="padding: 30px 30px 0px 30px">`. That inline padding is dropped:
   60px of horizontal padding inside a ~450px column shrank the creative by a
   third AND pulled its edges out of line with the Trending News panel directly
   above it, so the sidebar read as two unrelated blocks. The card now takes the
   same width and the same 10px left offset as
   .trendingnewspartialdetailspagewsarajpost, which makes the column one stack
   of two aligned cards. */
.page-article .sp-side-ad {
  margin: 24px 0 0 10px;
}

/* The same shell as .news-listswarajpost above it — 1px hairline, 6px radius,
   the site's soft shadow — so the ad is visibly a sibling of the Trending News
   card rather than a bare image dropped onto the page background. */
.page-article .sp-side-ad-card {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

/* NOTE: there is deliberately NO heading rule here. A grey "विज्ञापन" strip was
   tried above the creative and removed on request — the card carries the
   creative alone, exactly like _SliderAds2. The card's own border and radius
   are what tie it to the Trending News panel; it does not need a label to read
   as a sibling. */

/* No fixed height and no black backing plate. The .NET slide is a hard
   `height: 550px` box painted #000 with the creative letterboxed inside by
   `object-fit: contain` — the same defect already fixed for .ads-carousel-slide
   in globals.css. The box follows the image instead. */
.page-article .sp-side-ad-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Below 1025px the sidebar stops sitting beside the article and becomes a
   full-width row (see the stacking rule above). This creative is a 2:3 PORTRAIT
   poster, so across a ~1000px tablet column it would render about 1500px tall
   and own the entire screen. Capping and centring keeps it a poster instead of
   a wall. On a phone the column is already ~360px, so the cap never bites and
   the card still spans the width like every other card down there. */
@media (max-width: 1024px) {
  .page-article .sp-side-ad {
    margin: 20px auto 0;
    max-width: 380px;
  }
}

/* Same dark palette as the Trending News panel (#171b21 / #262c34), so the two
   cards stay a matched pair in both themes. */
.dark-mode .page-article .sp-side-ad-card {
  background: #171b21;
  border-color: #262c34;
}