/* ==========================================================================
   THE NEWS FRONTLINE — custom additions (loaded LAST, after theme-jagran.css)

   UPDATED: card thumbnails restored to full/normal size (Jagran-style —
   same proportions as jagran.com/business-hindi.html). The previous
   version of this file force-shrank every thumbnail to ~half size and
   packed 2 cards per row on mobile; that has been removed so cards now
   use the original, larger image sizes baked into the compiled theme
   (hero: h-48 / 192px, grid cards: h-28 / 112px, side list: w-20 / 80px),
   and mobile goes back to the natural 1-card-per-row layout — same as
   Jagran shows on phones.
   ========================================================================== */

/* ---------- Defensive full-width fix — guards against content getting
   squeezed into a narrow column with blank space beside it (seen on some
   mobile browsers). 100% matches what these should already be, so this
   only kicks in if something else shrinks them.
   NOTE: overflow-x:hidden was removed from here — it broke position:sticky
   elements elsewhere on the page (e.g. the Gold/Silver live-rate widget on
   article pages started overlapping content below it), and the narrow-
   column issue it was meant to fix turned out to be a specific phone's
   display/zoom bug, not a site issue (confirmed: the same phone showed
   the identical squeeze on google.com and other apps). ---------- */
html, body, #root {
  width: 100% !important;
  max-width: 100% !important;
}
#root > div {
  width: 100% !important;
  max-width: 100% !important;
}

/* ---------- Cards: soft shadow + smooth hover, Jagran-like polish ----------
   NOTE: each card in this grid is rendered as an <a> directly (no wrapping
   <article> tag) — the selectors below target "> a" for that reason. An
   earlier version of this file used "article" here, which never matched
   anything, so none of these card-style rules (compact size, no image
   badge, no excerpt/footer) were actually taking effect. */
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-6 > a {
  transition: box-shadow .2s ease, transform .2s ease;
}
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-6 > a:hover {
  box-shadow: 0 10px 25px -5px rgba(26,26,26,.12), 0 8px 10px -6px rgba(26,26,26,.08);
}

/* ==========================================================================
   Jagran-style news card grid (matches jagran.com/business-hindi.html
   "Mutual Fund" style block): 4 cards per row on desktop, clean landscape
   thumbnail, title, and a plain red category label underneath — no
   excerpt text, no date/read-more footer, no badge overlay on the image.
   ========================================================================== */

/* 4 columns on desktop, 2 on tablet, 1 on mobile */
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-6 {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
@media (min-width: 640px) {
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1024px) {
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-6 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Thumbnail: proper landscape ratio (~16:9) instead of the short fixed h-28 */
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-6 > a .relative.h-28 {
  height: auto !important;
  aspect-ratio: 16 / 9;
}

/* Hide the old category pill that sat on top of the image — replaced by
   the plain-text label under the title instead (see .tnf-cat-label) */
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-6 > a span.absolute.top-3.left-3.bg-amber-500 {
  display: none !important;
}

/* New category label, under the title — red, bold, uppercase, small,
   same look as Jagran's "BUSINESS" label */
.tnf-cat-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #D71920;
  margin-top: -0.25rem;
  margin-bottom: 0.5rem;
}

/* Hide excerpt + date/read-more footer row so the card matches the
   Jagran block exactly: image -> title -> category, nothing else */
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-6 > a p.text-gray-500.text-sm.line-clamp-2.mb-3,
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-6 > a > div.p-4 > div.flex.items-center.justify-between {
  display: none !important;
}

/* Trim the card padding a little now that the excerpt/footer are gone,
   so the card reads as compact as the reference (image -> title ->
   category, tightly stacked) instead of leaving tall empty padding
   where that removed text used to be. */
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-6 > a > div.p-4 {
  padding-bottom: 1rem !important;
}
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-6 > a h3 {
  margin-bottom: 0.35rem !important;
}

/* ==========================================================================
   Force every content section to a fixed, centered max-width (1280px),
   same as Jagran's desktop layout. On very wide monitors the site was
   stretching the hero/grid sections to the full browser width instead of
   staying capped — this is what made the hero image look oversized on
   desktop even though it was perfectly fine on mobile.
   ========================================================================== */
.max-w-7xl {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Hero image: fixed landscape box, full card width. Was briefly switched
   to object-fit: contain (see the "Thumbnails" note further down for why
   that was reverted everywhere else) — that left dark letterbox bars down
   both sides whenever the uploaded photo wasn't already 16:9, e.g. the
   portrait-leaning Trump/tariffs photo. Back to cover, same as every other
   image box on the site: fills the card completely, anchored to the top
   so faces/heads don't get cropped off. */
.grid.grid-cols-1.lg\:grid-cols-3.gap-4 > div:first-child .relative.w-full.h-48 {
  height: 12rem !important;
  width: 100% !important;
  background-color: #111827;
}
.grid.grid-cols-1.lg\:grid-cols-3.gap-4 > div:first-child .relative.w-full.h-48 img.object-cover {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top !important;
}

/* ==========================================================================
   Article page hero image: was stretching edge-to-edge (no side margin),
   which looks fine on desktop (capped by max-w-3xl) but reads as an
   oversized full-bleed banner on phones, where the article column itself
   isn't wide enough to cap it. Constrain it to line up with the same
   left/right padding as the title/text below it (px-4 on mobile, sm:px-8
   on desktop) and round its corners, so it reads as a normal contained
   photo instead of a wide banner. Selector is scoped to this exact class
   combo, which only exists on the article hero image.
   object-fit is cover (not contain) to match the site-wide "fill the box,
   no letterbox bars" policy — see the "Thumbnails" note further down. */
.relative.w-full.h-56.sm\:h-80.overflow-hidden {
  height: 14rem !important;
  width: calc(100% - 2rem) !important;
  margin: 0 auto 1.25rem !important;
  border-radius: 14px !important;
  background-color: #111827;
}
.relative.w-full.h-56.sm\:h-80.overflow-hidden img {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 14px !important;
  object-fit: cover !important;
  object-position: top !important;
}
@media (min-width: 640px) {
  .relative.w-full.h-56.sm\:h-80.overflow-hidden {
    height: 20rem !important;
  }
}
@media (min-width: 640px) {
  .relative.w-full.h-56.sm\:h-80.overflow-hidden {
    width: calc(100% - 4rem) !important;
  }
}

/* Hero headline: visible tap-highlight (color + underline flash) on the
   headline text itself, on top of the whole-card background flash that
   was already there — makes it obvious the tap registered before the
   article opens. Class-based (.tnf-pressed, set by tnf-tap-highlight.js)
   rather than CSS :active — :active is unreliable on tap for elements
   whose navigation is handled by JS (React's onClick here) on many
   mobile browsers, so a real touch listener is used instead. */
.tnf-pressed {
  background-color: #FDECEC !important;
}
.tnf-pressed h2 {
  color: #D71920 !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Side "top stories" thumbnails: this box has no fixed height in the
   compiled bundle — it's meant to stretch to match the row (title
   height) via the parent's items-stretch, so it shows as much of the
   photo as the row allows. An earlier version of this file forced it to
   a tight 1:1 square, which over-cropped photos (the oil price photo,
   RBI photo etc. all lost most of the frame) — removed, so it goes back
   to filling its natural stretched height instead of a hard square. */

/* ==========================================================================
   Link-share "blink" highlight
   Fires for a moment whenever someone taps the share icon on a news card
   or the article page, right when the shareable link is generated/copied,
   so it's obvious something happened.
   ========================================================================== */
@keyframes tnfLinkBlink {
  0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.65); transform: scale(1); }
  30%  { box-shadow: 0 0 0 9px rgba(245, 158, 11, 0);   transform: scale(1.22); }
  60%  { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5);   transform: scale(1); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);     transform: scale(1); }
}
.tnf-link-blink {
  animation: tnfLinkBlink 0.7s ease-in-out 2;
  background-color: #f59e0b !important;
}

/* ==========================================================================
   Mobile header fix
   On narrow phones (~360-400px wide) the top black bar was cramming the
   live clock + 6 social icons + language toggle into one row with no room
   to shrink, so the right-most icons got pushed off-screen and clipped.
   Social links are already available in the footer and on the Contact
   page, so on small screens we simply drop them from this top bar to
   stop the overflow/clipping.
   ========================================================================== */
@media (max-width: 480px) {
  .tnf-header-social-icons {
    display: none !important;
  }
}

/* ==========================================================================
   Tap-highlight for news headlines / cards
   Gives instant visual feedback (amber tint) the moment a card or headline
   is tapped, on top of the Tailwind active: classes already applied inline.
   -webkit-tap-highlight-color makes this reliable on iOS Safari, which
   otherwise ignores :active on plain anchor taps.
   ========================================================================== */
.tnf-tap-highlight {
  -webkit-tap-highlight-color: rgba(245, 158, 11, 0.25);
}
.tnf-tap-highlight:active {
  background-color: #fffbeb;
}

/* Scrollable category nav: fade the right edge so it's obvious there are
   more categories to swipe to, instead of the row looking like it just
   gets cut off mid-word. */
.overflow-x-auto.no-scrollbar {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}

/* ==========================================================================
   Homepage "Video News" section — inline player + Aaj Tak style card row
   Tagged at runtime by tnf-video-showcase.js (see that file's comment for
   why: this section is rendered by the compiled bundle, which has no
   available source to edit directly, so a runtime tag + this CSS is how
   it gets restyled safely, without touching the bundle).

   Layout: the real embedded YouTube player stays on top (full width on
   mobile) so videos play right there — tapping a card below swaps what's
   playing without navigating away. The "More Videos" list below it becomes
   a horizontal-scrolling row of thumbnail-on-top cards, like Aaj Tak's
   "शॉर्ट वीडियो" row, and stays visible under the player at all times.
   ========================================================================== */

/* The "More Videos" label stays visible (fallback layer — JS also sets
   this directly, see tnf-video-showcase.js) */
.tnf-video-showcase > div.grid > div > p {
  display: block !important;
}
/* The video list wrapper becomes a vertical-scrolling column of compact
   horizontal cards (small thumbnail left, title right) — sits next to
   the big player and scrolls up/down within its own fixed height */
.tnf-video-showcase > div.grid > div.flex.flex-col {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  overflow-x: hidden !important;
  gap: 8px !important;
  padding-right: 4px;
}
.tnf-video-showcase > div.grid > div.flex.flex-col::-webkit-scrollbar { width: 6px; }
.tnf-video-showcase > div.grid > div.flex.flex-col::-webkit-scrollbar-thumb { background: #E5E5E5; border-radius: 99px; }

/* tnf-video-showcase.js measures the real layout on every pass and sets
   the exact max-height it needs inline (matching the player's height on
   desktop, "none" when stacked on mobile) — so no fixed guess belongs
   here any more. This media query is only a fallback for the instant
   before that script runs, so mobile never even briefly shows the old
   fixed-height box with empty space under the last card. */
@media (max-width: 767px) {
  .tnf-video-showcase > div.grid > div.flex.flex-col {
    max-height: none !important;
    overflow-y: visible !important;
  }
}
@media (min-width: 768px) {
  .tnf-video-showcase > div.grid > div.flex.flex-col {
    max-height: 420px;
    overflow-y: auto !important;
  }
}

/* The featured player's tap-to-play overlay (see tnf-video-showcase.js)
   lives directly under <body>, positioned to sit exactly on top of the
   real player box — kept as its own element specifically so it never
   has to touch that box's own DOM contents (that's what was crashing
   the page mid-playback). */
#tnf-video-overlay {
  cursor: pointer;
}

/* "Now playing" ring on whichever card is currently loaded in the player */
.tnf-video-showcase a.tnf-video-active {
  border-color: #D71920 !important;
  background: #FDECEC !important;
  box-shadow: 0 0 0 2px rgba(215, 25, 32, 0.25) !important;
}

/* Each video item: horizontal card — small thumbnail on the left, title
   + "Watch on YouTube" link on the right. NOTE: kept as a fallback/
   reinforcement layer only — the actual layout change is applied via
   direct inline styles in tnf-video-showcase.js (more reliable than
   relying on exact Tailwind class strings matching). */
.tnf-video-showcase a {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  cursor: pointer;
}

/* The injected "Video" nav link (added by tnf-video-showcase.js) should
   never wrap or shrink oddly inside the scrollable category row */
#tnf-nav-video-link {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ==========================================================================
   Copy-link share button — invisible fix
   The compiled bundle builds this button's background-color class
   dynamically in JS (gray by default, green after copying), which the
   production CSS build didn't generate/keep — so the button existed but
   had no visible background, making its white icon invisible on white
   article pages. Forcing the colors back in restores it.
   ========================================================================== */
button[aria-label="Copy link"] {
  background-color: #6B7280 !important;
}
button[aria-label="Copy link"]:hover {
  background-color: #4B5563 !important;
}
button[aria-label="Copy link"].bg-green-600,
button[aria-label="Copy link"].tnf-link-blink {
  background-color: #16A34A !important;
}

/* ==========================================================================
   Thumbnails: fill the box completely (object-fit: cover, the compiled
   bundle's own default) rather than leaving any empty space around the
   image. A "show the whole image, never crop" version was tried earlier
   and rejected — a filled box with a little cropping at the edges reads
   better than visible empty padding around a smaller image.

   object-position: top — object-fit: cover was cropping from the
   vertical center by default, which chops the top of the frame (heads
   in portrait/person photos) whenever the image is taller than the box
   it's squeezed into. Anchoring to the top keeps faces/heads intact and
   trims from the bottom instead, which reads better for news photos.
   ========================================================================== */
.object-cover {
  object-fit: cover !important;
  object-position: top !important;
}

/* Extra safety net: any image sitting inside a common fixed-ratio
   thumbnail box (by size/aspect utility class) always fills that box
   completely, even if the compiled bundle didn't also add its own
   "object-cover" class to that particular image. Prevents empty grey
   letterbox space around freshly-uploaded thumbnails of a different
   aspect ratio than the box they're placed in. */
.aspect-video img,
.relative.h-48 img,
.relative.h-56 img,
.relative.h-28 img,
.relative.h-20 img,
.relative.w-20 img,
.relative.w-24 img,
.tnf-ad-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top !important;
}

/* "More Articles" / "और खबरें" related-reads list at the bottom of an
   article page (native bundle component, no source to edit directly):
   its thumbnail box is a fixed 96x80px near-square crop, which is fine
   for YouTube thumbnails (already 16:9) but chops up regular article
   photos awkwardly. Give it the same widescreen 16:9 box used for every
   other thumbnail on the site (video cards, category cards, ...) so
   article photos show properly instead of getting cut. */
.relative.w-24.h-20.flex-shrink-0 {
  width: 132px !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
}

/* ==========================================================================
   Inline "Keep Reading" article suggestions (Tumnews-style)
   Injected mid-article by tnf-article-reader.js, splitting the single
   long article paragraph into normal-length paragraphs with a "Read
   Next" card dropped in between — so readers get pulled into another
   article instead of bouncing after one story.
   ========================================================================== */
.tnf-keep-reading {
  display: block;
  margin: 22px 0;
  padding: 0;
  background: #fff;
  border: 1px solid #ECECEC;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none !important;
  color: inherit;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.tnf-keep-reading:hover {
  border-color: #D71920;
  box-shadow: 0 6px 16px -4px rgba(0,0,0,.12);
}
.tnf-keep-reading-inner {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
}
.tnf-keep-reading-thumb {
  width: 132px;
  min-width: 132px;
  max-width: 132px;
  height: auto;
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
  overflow: hidden;
  background: #eee;
}
.tnf-keep-reading-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}
.tnf-keep-reading-body {
  min-width: 0;
  flex: 1 1 0;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tnf-keep-reading-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #D71920;
  margin-bottom: 4px;
}
.tnf-keep-reading-title {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #1A1A1A;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   Direct-link article loading screen (see the inline script right after
   #root in index.html for why this exists). Hidden by default; only
   shown for a URL that starts on an article page.
   ========================================================================== */
#tnf-route-loader {
  display: none;
}
#tnf-route-loader.active {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 999999;
  align-items: center;
  justify-content: center;
  background: #FAFAF8;
  opacity: 1;
  transition: opacity 0.35s ease;
}
#tnf-route-loader.tnf-route-loader-fade {
  opacity: 0;
  pointer-events: none;
}
.tnf-route-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.tnf-route-loader-inner img {
  width: 64px;
  height: 64px;
  border-radius: 16px;
}
.tnf-route-loader-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid #F0D9A0;
  border-top-color: #D71920;
  animation: tnf-route-loader-spin 0.8s linear infinite;
}
@keyframes tnf-route-loader-spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   Video News featured player: the compiled bundle renders a real, live
   YouTube <iframe> here on every page load. tnf-video-showcase.js swaps
   in a static, reliable thumbnail (see that file for why), but it does
   that swap in JS after the page has already painted — so for a brief
   moment on every load, visitors saw the raw YouTube player flash on
   screen before it got covered/replaced, which read as "a video opens,
   then the home page loads". Hiding this exact box at the stylesheet
   level means it's never visible even for that first frame; the JS
   swap still happens underneath, unaffected, once it can find the box
   for its own repositioned overlay. Class list copied exactly from the
   compiled bundle — confirmed to appear nowhere else on the page. */
.bg-black.aspect-video.relative.group {
  visibility: hidden !important;
}

/* ==========================================================================
   Sticky header + market ticker: force these onto their own GPU-composited
   layer while scrolling. Without this, some Android/Chrome builds fail to
   fully repaint the sticky header + live-updating ticker on scroll, leaving
   a faint "double image"/smeared-text ghost of the previous frame behind
   until the page settles. Cheap, safe fix that doesn't change layout.
   (Paired with removing a redundant nested `position:sticky` on the header
   itself, and scoping/debouncing market-ticker.js's DOM watcher — see that
   file — which were the two things actually causing the extra repaints.) */
#tnf-site-header,
.tnf-market-ticker-wrap {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}