/* ===================================================================
   Ported from Index.cshtml @section Page_Level_Css.

   ⚠️ EVERY RULE IS SCOPED UNDER `.page-home`. DO NOT REMOVE THE PREFIX.

   In Razor, `@section Page_Level_Css` rendered ONLY the current page's
   <style> block, so homepage CSS never existed on an article page and vice
   versa. Next.js App Router does NOT work that way: once a route's stylesheet
   is loaded during client-side navigation it STAYS in the document. Without
   scoping, `.news-title` from article.css (32px) leaked onto the homepage
   (15px) after navigating home → article → home, blowing up every headline.

   Scoping reproduces Razor's per-page isolation. The class is set on the
   page's root element in app/page.tsx.

   Shared component CSS (SliderAds) lives in globals.css, not here, because
   that component also renders inside article bodies.
   =================================================================== */

@media (max-width: 767px) {
  .page-home .cust-banner-img-height {
    height: 250px;
  }
}

@media (min-width: 768px) {
  .page-home .cust-banner-img-height {
    height: 353px;
  }
}

/* ---------------- breaking news ticker ---------------- */
.page-home .breaking-news {
  background-color: #114d8e;
  color: white;
  font-weight: bold;
  display: flex;
  align-items: center;
  padding-right: 15px;
  border-radius: 25px;
  overflow: hidden;
}

.page-home .breaking-news .breaking-title {
  background-color: var(--sp-accent);
  padding: 13px 15px;
}

.page-home .breaking-news .br-news-content {
  background-color: #114d8e;
  padding: 7px 15px;
  padding-bottom: 0px;
}

.page-home .breaking-title {
  font-style: italic;
  margin-right: 0px;
  white-space: nowrap;
}

.page-home .br-news-content {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.page-home .news-itemsbreakingnews {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-left 60s linear infinite;
}

.page-home .news-itemsbreakingnews:hover {
  animation-play-state: paused;
}

.page-home .news-text {
  display: inline-flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
  padding-right: 10px;
  margin-right: 10px;
  border-right: none;
}

.page-home .news-text:hover {
  color: #fff;
}

.page-home .news-icon {
  width: 30px;
  height: 30px;
  margin-right: 8px;
  object-fit: contain;
  flex-shrink: 0;
}

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

  100% {
    transform: translateX(-100%);
  }
}

.page-home .close-btn {
  cursor: pointer;
  margin-left: 15px;
  font-size: 18px;
}

/* ---------------- hero banner ---------------- */
.page-home .image-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* 🔴 THE HERO WAS BEING SQUASHED. Measured, not guessed:
     natural 636×424 (3:2 from the CDN)  →  box 636×353 (16:9)
     object-fit defaulted to `fill`      →  vertical scale 0.83
   Every face in the lead photo was 17% narrower than reality.

   The .NET markup set no object-fit, so the port faithfully reproduced the
   distortion. `cover` fills the same box by CROPPING instead of deforming,
   which is what every news site does with a fixed-ratio lead slot.

   Requesting the right pixels from the CDN is NOT an option here: probed live,
   `?width=636&height=353` returns 529×353 — it fits inside the box preserving
   aspect, it does not crop. So the crop has to happen in CSS. */
.page-home .image-container img {
  width: 100%;
  display: block;
  /* NO `height` here on purpose. The fixed height lives on
     `.cust-banner-img-height` (250px phone / 353px desktop), which is on the
     <img> itself; adding `height: 100%` here out-specifies it, resolves to
     `auto` against the auto-height container, and the hero grew to 477px —
     taller than the News Update column beside it. `cover` alone is what fixes
     the distortion; the height must stay where it was. */
  object-fit: cover;
  /* Faces and headlines in a news photo sit in the upper half far more often
     than the lower, so bias the crop upward rather than centring it. */
  object-position: center 40%;
}

/* Scrim behind the hero caption.
   A single 70%→0 ramp across the WHOLE image both greyed the top of the photo
   and still left the caption sitting on whatever was behind it. This is a
   three-stop ramp confined to the lower half: opaque enough at the very bottom
   to guarantee white text is legible over a bright sky or a white shirt, and
   fully clear by the midpoint so the picture is not dulled. */
.page-home .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.55) 28%,
    rgba(0, 0, 0, 0) 62%
  );
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  pointer-events: none;
}

/* Hero caption — the single biggest headline on the front page.

   What was wrong: 20px/bold white text pinned to `left: 20px` with no right
   bound, so a long Hindi headline ran the full 636px and its last line could
   end one word short of the edge; it had no shadow, so over a pale part of the
   photo the strokes disappeared into the picture.

   Now: bounded measure, a real shadow under the gradient, clamped to two lines
   so the hero can never be swallowed by a very long headline, and a red rule
   above it that ties the slot to the section heads further down the page. */
.page-home .overlay-text {
  position: absolute;
  bottom: 18px;
  left: 22px;
  /* Stops ~1/5 short of the right edge — a caption that runs the entire width
     of a photo reads as a subtitle track, not as a headline. */
  right: 20%;
  color: #fff;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.42;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  text-wrap: pretty;
  z-index: 2;
}

.page-home .overlay-text p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The brand rule. Small, but it is what makes the hero read as part of the
   same system as the section heads rather than as a stock photo caption. */
.page-home .overlay-text::before {
  content: "";
  display: block;
  width: 42px;
  height: 4px;
  border-radius: 2px;
  background: var(--sp-accent);
  margin-bottom: 12px;
}

@media (max-width: 768px) {
  .page-home .overlay-text {
    /* Phone hero: smaller than desktop, and the leading is set as a RATIO now.
       The old fixed `28px` was a 1.4 ratio against the previous 20px size —
       against the new size it would have clamped the matras. */
    font-size: 19px;
    line-height: 1.4;
    bottom: 14px;
    left: 16px;
    /* On a 390px phone there is no room to hold back a fifth of the width — the
       caption would wrap every two or three words. */
    right: 16px;
  }

  .page-home .overlay-text::before {
    width: 34px;
    height: 3px;
    margin-bottom: 9px;
  }

  .page-home .cust-news-card {
    margin-bottom: 7px;
  }
}

/* ===================================================================
   HERO ROW ALIGNMENT
   Bootstrap already stretches the three columns to the tallest one, but the
   content inside each column keeps its own height, so the panels finished at
   different heights — the News Update card stopped 83px above the hero image
   and the ad. Making each column a flex box and telling its single child to
   fill it lands all three on one baseline.
   Desktop only: below 768px the columns stack and there is nothing to align.
   =================================================================== */
@media (min-width: 768px) {
  /* The hero image is a fixed 353px (.cust-banner-img-height). That is the
     anchor: the two side panels are pinned to the same height so all three
     bottoms meet on one line, and the hero is never stretched (which would
     distort the photo). 353px is enough for the header plus the update rows
     at their clamped height; if the API ever returns more items than fit,
     the last rows clamp rather than push the row taller. */
  .page-home .sp-hero-col {
    display: flex;
    flex-direction: column;
    height: 353px;
  }

  .page-home .sp-hero-col > * {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
  }

  /* ...EXCEPT the ad. Stretching the News Update panel to 353px is right — its
     rows share out the spare height and the panel finishes level with the hero.
     Stretching the AD is not: a creative is a fixed-ratio image, so the extra
     height became dead space inside a shadowed card. (It used to be dead BLACK
     space — see .ads-carousel-slide in globals.css.) The card now ends where
     the creative ends, and the column's remaining height is simply empty. */
  .page-home .sp-hero-col > .ads-carousel-container {
    flex: 0 0 auto;
    height: auto;
  }
}

/* ===================================================================
   NEWS UPDATE PANEL — redesigned. See components/NewsUpdate.tsx for the
   reasoning behind each part. The original .news-header / .cust-news-card
   rules below are left intact but are no longer referenced by any markup.
   =================================================================== */
.page-home .sp-upd {
  /* The panel used to hard-code its own ink (#161b21) and muted grey
     (#616a75), so it drifted a shade away from the cards sitting right next to
     it. These now POINT AT the global tokens in globals.css — same headline
     ink, same meta grey, and dark mode is inherited instead of re-declared
     below.

     `--sp-red` stays a literal: it paints the header BAR, and the global
     --sp-accent lightens to var(--sp-red) in dark mode, which is a text colour for a
     dark background, not a background colour. */
  --sp-red: #d90000;
  --sp-ink: var(--sp-ink-head);
  --sp-muted: var(--sp-ink-meta);
  --sp-line: #e8ebef;

  display: flex;
  flex-direction: column;
  border: 1px solid var(--sp-line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(17, 26, 36, 0.05);
}

/* ---- header ---- */
.page-home .sp-upd-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  background: var(--sp-red);
  color: #fff;
  flex: 0 0 auto;
}

.page-home .sp-upd-head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.18);
  flex: 0 0 auto;
}

.page-home .sp-upd-head-text {
  font-size: 16px;
  font-weight: 700;
  /* Slightly wider tracking than the body: white-on-red closes up optically,
     so the same spacing that looks right in black ink looks cramped here. */
  letter-spacing: 0.3px;
  /* Pushes the LIVE chip to the far edge. */
  margin-right: auto;
}

/* The panel has to announce itself before it is read. A pulsing chip is
   pre-attentive — it is registered as "arriving now" without effort. */
.page-home .sp-upd-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  flex: 0 0 auto;
}

.page-home .sp-upd-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: sp-upd-pulse 1.8s ease-in-out infinite;
}

@keyframes sp-upd-pulse {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  70% {
    opacity: 0.6;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0);
  }
}

/* ---- list ---- */
.page-home .sp-upd-list {
  /* Takes the leftover height of the column so the panel finishes level with
     the hero image and the ad beside it (they were 83px apart before). */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.page-home .sp-upd-item {
  /* Equal share each — the rows absorb the spare height evenly instead of
     leaving one gap at the bottom. */
  flex: 1 1 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 14px;
  text-decoration: none;
  position: relative;
  transition: background 0.18s ease;
}

.page-home .sp-upd-item + .sp-upd-item {
  border-top: 1px solid var(--sp-line);
}

.page-home .sp-upd-item:hover {
  background: #fff6f6;
}

/* ---- timeline rail ---- */
/* A dotted rail reads as chronology, which is what an update feed is. */
.page-home .sp-upd-mark {
  position: relative;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-radius: 50%;
  border: 2px solid #cfd6dd;
  background: #fff;
  transition: border-color 0.18s ease, background 0.18s ease;
}

/* The rail itself: a hairline dropped from each dot to the next. */
.page-home .sp-upd-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 11px;
  transform: translateX(-50%);
  width: 2px;
  height: calc(100% + 100px);
  background: linear-gradient(#e2e7ec, rgba(226, 231, 236, 0));
}

.page-home .sp-upd-item:last-child .sp-upd-mark::after {
  display: none;
}

/* Newest item — the only filled dot, so recency is visible at a glance. */
.page-home .sp-upd-mark.is-latest {
  border-color: var(--sp-red);
  background: var(--sp-red);
  box-shadow: 0 0 0 3px rgba(217, 0, 0, 0.13);
}

.page-home .sp-upd-item:hover .sp-upd-mark {
  border-color: var(--sp-red);
}

/* ---- item text ---- */
.page-home .sp-upd-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

/* Headline inside the feed. Deliberately a half-step LARGER than the category
   cards below (15.5 vs 16 is close, but this sits in a narrow 3-line clamp
   against a rail) and on the same 700 weight, so the panel reads as headlines
   rather than as a list of links. */
.page-home .sp-upd-title {
  font-size: 15.5px;
  font-weight: 700;
  /* Looser line so the clamped Devanagari matras aren't clipped. Noto's matras
     sit higher than the Nirmala UI this used to fall back to, so the old 1.45
     started cutting the top of ि/ी on the third line. */
  line-height: var(--sp-lh-card);
  color: var(--sp-ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.18s ease;
}

.page-home .sp-upd-item:hover .sp-upd-title {
  color: var(--sp-red);
}

/* Timestamp. Tracked out a touch and set in the shared meta ink so it matches
   the date under every other card on the page — it was a different grey from
   the section cards for no reason. Tabular numerals come from the body rule in
   globals.css, so the times line up column-wise down the feed. */
.page-home .sp-upd-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  /* var(--sp-muted) → --sp-ink-meta: #6a7280 light (~5.2:1), #98a2b0 dark —
     both clear WCAG AA at this 11.5px size. */
  color: var(--sp-muted);
}

/* ---- dark mode ---- */
/* --sp-ink / --sp-muted are NOT re-declared here any more: they resolve to the
   global --sp-ink-head / --sp-ink-meta, which the .dark-mode block in
   globals.css already lightens. One place to change the dark palette. */
.dark-mode .page-home .sp-upd {
  --sp-line: #2a3038;
  background: #161a1f;
}

.dark-mode .page-home .sp-upd-item:hover {
  background: #1f242b;
}

.dark-mode .page-home .sp-upd-mark {
  background: #161a1f;
  border-color: #3a424b;
}

.dark-mode .page-home .sp-upd-mark::after {
  background: linear-gradient(#2c333b, rgba(44, 51, 59, 0));
}

/* ---- responsive ---- */
@media (max-width: 767px) {
  /* Stacked on a phone, so there is no neighbouring column to match and the
     rows should size to their text rather than stretch. */
  .page-home .sp-upd {
    margin-bottom: 16px;
  }

  .page-home .sp-upd-item {
    flex: 0 0 auto;
  }

  /* On a phone the panel is full width, so the clamp has far more room per
     line — the title can hold its desktop size instead of shrinking. 14.5px
     was a workaround for the narrow desktop column, applied to the wrong
     breakpoint. */
  .page-home .sp-upd-title {
    font-size: 15.5px;
  }
}

/* ---------------- news update column (ORIGINAL — now unused) ---------------- */
.page-home .news-header {
  background-color: var(--sp-accent);
  color: #fff;
  padding: 10px 15px;
  font-weight: bold;
  border-radius: 4px 4px 0 0;
  font-size: 17px;
}

.page-home .cust-news-card {
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 6px 6px;
  overflow: hidden;
}

.page-home .cust-news-item {
  border-bottom: 1px solid #eee;
  padding: 6px;
  display: flex;
  gap: 10px;
  position: relative;
}

.page-home .cust-news-item:last-child {
  border-bottom: none;
}

.page-home .news-icon1 {
  width: 23px;
  height: 23px;
  margin-right: 0px;
  object-fit: contain;
  flex-shrink: 0;
  font-size: 19px;
}

.page-home .news-content {
  flex: 1;
}

.page-home .news-title1 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1.4;
  margin-top: 1px;
}

.page-home .news-desc {
  font-size: 14px;
  color: #333;
}

/* ---------------- tag scroller ---------------- */
.page-home .scroll-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-home .scroll-container {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  white-space: nowrap;
  padding: 10px;
  scrollbar-width: none;
  flex-grow: 1;
}

.page-home .scroll-container::-webkit-scrollbar {
  display: none;
}

.page-home .tag {
  display: inline-block;
  padding: 6px 14px;
  background: #f2f2f2;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid #ddd;
  transition: 0.3s;
  color: #000;
}

.page-home .tag:hover {
  background: #e6e6e6;
}

.page-home .arrow-btn {
  background: #f2f2f2;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s;
  flex-shrink: 0;
}

.page-home .arrow-btn:hover {
  background: #e6e6e6;
}

/* ---------------- category sections ---------------- */
.page-home .news-linknewssectionparial {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.page-home .news-section {
  margin-bottom: 30px;
}

.page-home .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.page-home .section-header {
  border-bottom: 1px solid #e6e9ee;
  padding-bottom: 7px;
}

.dark-mode .page-home .section-header {
  border-bottom-color: #2b3138;
}

/* Section label — the masthead furniture of the front page.
   The element is an <h2> now (see the note in components/NewsSection.tsx), so
   `font-size` is restated: Bootstrap sized the old <h5> at 1.25rem and sizes an
   <h2> at 2rem.

   The underline became a LEFT BAR plus a hairline across the whole row. A rule
   that stops at the end of the word made "देश" and "उत्तर प्रदेश" underline to
   different widths, so the three columns of a row never lined up. The bar is a
   fixed 4px regardless of label length, and the hairline runs the full column —
   the standard Hindi-daily section head, and the columns now scan as a grid. */
.page-home .section-header h2 {
  font-size: var(--sp-h2);
  line-height: 1.35;
  font-weight: 700;
  color: var(--sp-accent);
  margin: 0;
  padding-left: 10px;
  position: relative;
}

.page-home .section-header h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 4px;
  border-radius: 2px;
  background: var(--sp-accent);
}

.page-home .section-header a {
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--sp-ink-meta);
  letter-spacing: 0.01em;
  flex: 0 0 auto;
  transition: color 0.15s ease;
}

.page-home .section-header a:hover {
  color: var(--sp-accent);
}

.page-home .news-item {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.page-home .news-item img {
  width: 110px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 10px;
}

/* Card headline. 16px/700, up from 15px/600 — on a Hindi front page the card
   title IS the product, and at 600 it sat too close to the timestamp under it
   to lead the eye. The clamp still holds every card to three lines. */
.page-home .news-title {
  font-size: var(--sp-card);
  font-weight: 700;
  color: var(--sp-ink-head);
  margin-bottom: 5px;
  /* 1.5 gives Devanagari matras room inside the clamp — Noto's are taller than
     the Nirmala UI this used to fall back to, so 1.45 started clipping them. */
  line-height: var(--sp-lh-card);
  /* Clamp to 3 lines so every card is the same height. Without it, titles ran
     1–4 lines, so shorter columns left uneven trailing space before the next
     category row (Bootstrap stretches the columns to equal height, exposing
     that gap). Uniform titles → uniform sections → even spacing everywhere. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Desktop 3-column grid only: pin every card row to one height so all sections
   in a row end level and the space before the next category row is identical in
   every column. (Mobile/tablet is a single-column feed — no columns to align —
   so this is gated to ≥1025px.) Cards range 80–86px (thumbnail vs 3-line
   title); 86px fits the tallest, shorter ones pad out, thumbnail stays centred
   and undistorted. */
@media (min-width: 1025px) {
  .page-home .news-linknewssectionparial {
    min-height: 86px;
  }
}

.page-home .news-title:hover {
  color: var(--sp-accent);
  cursor: pointer;
}

/* Index.cshtml declares `.news-date` TWICE and the browser merges them:
     line 209  .news-date { font-size:12px; color:#888; margin-top:6px }
     line 363  .news-date { font-size:10px; color:#9f9f9f }
   font-size/color come from the later rule, but `margin-top:6px` survives
   from the first — dropping it made every .cust-news-item 2px shorter. */
/* Card timestamp. 10px/#9f9f9f was below the size at which Devanagari numerals
   stay crisp and only ~2.6:1 on white — under the WCAG AA floor. 11.5px on the
   shared meta ink clears AA and still reads as the quietest thing on the card. */
.page-home .news-date {
  font-size: 11.5px;
  color: var(--sp-ink-meta);
  margin-top: 6px;
  letter-spacing: 0.01em;
}

.page-home .news-card {
  background: var(--sp-blue-deep)00;
  border: none;
  margin-bottom: 15px;
  border-bottom: 1px solid #32568d;
  border-radius: 0px;
}

.page-home .news-card img {
  width: 100%;
  border: 1px solid #ffffff;
}

.page-home .news-card .time-badge {
  position: absolute;
  bottom: 5px;
  left: 5px;
  background: red;
  color: white;
  padding: 2px 6px;
  font-size: 12px;
  border-radius: 3px;
}

.page-home .main-news img {
  border-radius: 6px;
}

.page-home .play-btn {
  position: absolute;
  bottom: 15px;
  right: 15px;
  background: red;
  color: white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.page-home h5 {
  margin-top: 10px;
  font-size: 16px;
  line-height: 24px;
}

/* ---------------- election block ----------------
   Section was removed in .NET commit 4c317ac; CSS kept so the block renders
   correctly if it is restored. */
.page-home .election-card {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}

.page-home .election-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
}

.page-home .card-overlayelection {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
}

.page-home .card-titleelection {
  position: absolute;
  bottom: 15px;
  left: 15px;
  right: 15px;
  color: #fff;
  font-size: 20px;
  line-height: 1.4;
}

.page-home .election-list img {
  width: 110px;
  height: 75px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

.page-home .election-list h6 {
  color: #111;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  margin-bottom: 0px;
  margin-top: 4px;
}

.page-home .election-list small {
  font-size: 10px;
  color: #9f9f9f;
}

.page-home .hrelectionline {
  margin: 13px 0;
}

@media (max-width: 991px) {
  .page-home .election-card img {
    height: 220px;
  }
}

@media (max-width: 1399px) {
  .page-home .election-list h6 {
    font-size: 11px;
  }

  .page-home .card-titleelection {
    font-size: 14px;
  }

  .page-home .news-title1 {
    font-size: 13px;
  }
}

/* ---------------- side ads ---------------- */
.page-home .side-ad {
  position: fixed;
  top: 425px;
  width: 167px;
  z-index: 999;
}

.page-home .side-ad img {
  width: 100%;
}

.page-home .side-ad-left {
  left: 20px;
}

.page-home .side-ad-right {
  right: 20px;
}

/* ===================================================================
   MOBILE + TABLET — NEWS-APP LAYOUT  (≤1024px)
   -------------------------------------------------------------------
   Desktop and large desktop (≥1025px) are untouched — none of this exists
   there. Below 1024px the homepage stops looking like a shrunk desktop and
   reads like a modern news app: a soft grey feed with white, rounded, shadowed
   cards, an accent-bar section header, and clean list rows with a rounded
   thumbnail + headline + timestamp.

   NOTHING is hidden. Every section, every article, the hero, News Update and
   the ad all render exactly as on desktop — this only changes how they look.
   It is pure CSS: no JS, no new images (thumbnails use the same source), so it
   cannot move the performance score.
   =================================================================== */
@media (max-width: 1024px) {
  .page-home {
    --app-bg: #f3f4f6;
    --app-card: #ffffff;
    --app-line: #edeff2;
    --app-ink: #14181d;
    --app-sub: #6c757d;
    --app-red: var(--sp-accent);
    --app-radius: 16px;
    --app-shadow: 0 1px 3px rgba(20, 24, 29, 0.06),
      0 8px 24px rgba(20, 24, 29, 0.05);

    background: var(--app-bg);
    /* Fills the grey strip right below the nav's bottom border AND is the only
       gap above the breaking bar. Without a padding here the breaking bar's
       `mt-3` margin collapsed out through the top of .page-home, so the gap
       showed the transparent body (looked white) instead of the app grey.
       16px == the breaking bar's own bottom margin (`mb-3`), so the space above
       and below the breaking bar is equal. */
    padding-top: 16px;
  }

  /* Kill the breaking bar's Bootstrap top margin — `.mt-3` is `!important`, so
     the override needs `!important` too. Its spacing now comes entirely from
     .page-home's 16px padding-top above, matching the 16px gap below it. */
  .page-home .container.mt-3 {
    margin-top: 0 !important;
  }

  /* Body content must sit on the SAME 12px gutter as the masthead + nav above
     it. The page wraps its rows in `.container-fluid > .container`, so the two
     paddings stacked (12px + 14px = 26px) and the feed was inset further than
     the header. Zero the outer fluid and pin the inner container to 12px, so
     every block — breaking bar, hero, News Update, ad, cards — lines up with
     the logo and the nav items. */
  .page-home .container-fluid {
    padding-left: 0;
    padding-right: 0;
  }

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

  /* The breaking bar sits in a col-12 whose 12px Bootstrap gutter padding left
     it 24px narrower than the hero and category cards (their cols are zeroed
     further down). Zero the gutter on the breaking row too so it lines up flush
     with the rest of the feed instead of looking inset. */
  .page-home .row.justify-content-center {
    --bs-gutter-x: 0;
  }

  /* ---- centre the feed on tablets so cards are not stretched too wide ---- */
  @media (min-width: 700px) {
    .page-home .sp-hero-row,
    .page-home .sp-cat-row,
    .page-home section .row.justify-content-center {
      max-width: 760px;
      margin-left: auto;
      margin-right: auto;
    }
  }

  /* ---- HERO ROW: stack the three panels into the single-column feed ---- */
  .page-home .sp-hero-row {
    --bs-gutter-x: 0;
    row-gap: 14px;
  }

  .page-home .sp-hero-row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  /* undo the desktop equal-height pinning (needed only when the three sit
     side by side) so each panel sizes to its own content when stacked */
  .page-home .sp-hero-col,
  .page-home .sp-hero-col > * {
    height: auto;
  }

  .page-home .sp-hero-media .image-container,
  .page-home .sp-hero-media .cust-banner-img-height {
    border-radius: var(--app-radius);
  }

  .page-home .sp-hero-media .image-container {
    box-shadow: var(--app-shadow);
    overflow: hidden;
  }

  /* ---- CATEGORY SECTIONS AS APP CARDS ---- */
  .page-home .sp-cat-row {
    --bs-gutter-x: 0;
    margin-left: 0;
    margin-right: 0;
    row-gap: 14px;
  }

  .page-home .sp-cat-row .news-section {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 16px 16px 6px;
    margin-bottom: 0;
    background: var(--app-card);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
  }

  /* section header: red accent bar + strong dark title + pill "अधिक" */
  .page-home .sp-cat-row .section-header {
    margin-bottom: 14px;
  }

  .page-home .sp-cat-row .section-header h5 {
    position: relative;
    padding-left: 12px;
    border-bottom: none;
    color: var(--app-ink);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
  }

  .page-home .sp-cat-row .section-header h5::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    bottom: 1px;
    width: 4px;
    border-radius: 3px;
    background: var(--app-red);
  }

  .page-home .sp-cat-row .section-header a.news-text-more {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    /* SOLID, not rgba(217,0,0,0.08). The value is the exact composite of that
       tint over the white card, so it looks identical — but a semi-transparent
       background makes axe-core resolve the wrong ancestor colour (#27191e) and
       report a false 2.28:1. A solid colour lets it compute the real ratio. */
    background: #fdecec;
    /* var(--sp-accent) on this pill is only ~4.4:1 (fails AA for 12.5px). #b00000 is the
       same red to the eye and clears 4.5:1 comfortably (~6:1). */
    color: #b00000;
    font-size: 12.5px;
    font-weight: 600;
  }

  /* list rows */
  .page-home .sp-cat-row .news-item {
    margin-bottom: 0;
    border-top: 1px solid var(--app-line);
  }

  .page-home .sp-cat-row .news-item:first-of-type {
    border-top: none;
  }

  .page-home .sp-cat-row .news-linknewssectionparial {
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-radius: 10px;
    transition: background 0.15s ease;
  }

  .page-home .sp-cat-row .news-item:active .news-linknewssectionparial {
    background: #f6f7f9;
  }

  .page-home .sp-cat-row .news-item img {
    width: 116px;
    height: 84px;
    margin-right: 0;
    border-radius: 12px;
    object-fit: cover;
    flex: 0 0 auto;
  }

  .page-home .sp-cat-row .news-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-top: 1px;
  }

  .page-home .sp-cat-row .news-title {
    font-size: 15px;
    font-weight: 600;
    /* 1.5, not 1.42: with -webkit-line-clamp + overflow:hidden a tight line
       box clipped the Devanagari matras (top/bottom vowel signs). The looser
       line gives them room so nothing is cut. */
    line-height: 1.5;
    color: var(--app-ink);
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* timestamp with a small clock, muted — the standard app meta line */
  .page-home .sp-cat-row .news-date {
    margin-top: auto;
    padding-top: 7px;
    font-size: 11.5px;
    color: var(--app-sub);
  }

  .page-home .sp-cat-row .news-date::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    vertical-align: -2px;
    background-color: currentColor;
    -webkit-mask: var(--app-clock) center / contain no-repeat;
    mask: var(--app-clock) center / contain no-repeat;
  }

  /* ---- dark mode ---- */
  .dark-mode.page-home,
  .dark-mode .page-home {
    --app-bg: #0f1216;
    --app-card: #171b21;
    --app-line: #262c34;
    --app-ink: #e6e9ed;
    --app-sub: #97a1ac;
    --app-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }

  .dark-mode .page-home .sp-cat-row .news-item:active .news-linknewssectionparial {
    background: #1e242b;
  }
}

/* Inline clock icon used by the app timestamp above (masked, so it inherits
   the muted text colour). Declared at root so the custom property resolves. */
.page-home {
  --app-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Cpath d='M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z'/%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0'/%3E%3C/svg%3E");
}

/* ===================================================================
   OFF-SCREEN RENDERING SKIP
   Purely a rendering hint — no rule here changes a single painted pixel.

   WHY: the homepage is 6004px tall on a 412px phone and ships 31 images
   across 548 nodes. The browser was doing style, layout and paint for ALL of
   it before first paint, while the LCP hero was still arriving. Lighthouse
   (mobile, simulated): styleLayout 662ms + paintCompositeRender 1069ms of
   main-thread work, with LCP stuck at 3.8s.

   `content-visibility: auto` lets the browser skip that work for a subtree
   until it approaches the viewport. The three category rows are the bulk of
   the page and are ALWAYS below the fold, so nothing visible is deferred.

   `contain-intrinsic-size: auto <n>` — the `auto` keyword is what makes this
   safe: after a row has rendered once the browser remembers its REAL height
   and uses that, so scroll position never jumps. The literal is only the
   first-paint guess, measured from the live page (1271/1297/1297px stacked on
   a 412px phone, 426px in the 3-up desktop grid).

   Not applied to the hero row, the ticker or the News Update panel: those are
   above the fold, where skipping would delay the very paint we are chasing.

   Degrades safely — Firefox 78 and Safari 14 in the browserslist ignore the
   property entirely and simply render as before. */
@media (max-width: 767px) {
  .page-home .sp-cat-row {
    content-visibility: auto;
    contain-intrinsic-size: auto 1290px;
  }
}

@media (min-width: 768px) {
  .page-home .sp-cat-row {
    content-visibility: auto;
    contain-intrinsic-size: auto 426px;
  }
}