/* NOTE: 'LogoFont' (BF053HIN.TTF) ka @font-face yahan se HATA diya gaya.

   Wo legacy Kruti-Dev style NON-UNICODE remap font hai:
     - cmap me sirf ASCII (0x20-0x7E) codepoints hain, Devanagari
       (U+0900-097F) ka ek bhi glyph nahi
     - GSUB / GPOS / GDEF shaping tables ZERO bytes — isliye jodo
       akshar (conjunct) kabhi sahi nahi banenge
     - max codepoint U+2219
   Isliye Unicode "दिव्य शक्ति टाइम्स" usse render nahi ho sakta.

   Logo ab "Rozha One" (Google Fonts) me hai. Font file
   fonts/BF053HIN.TTF server par hai lekin CSS use nahi karta. */

/* ==========================================================================
   Divya Shakti Times  —  main stylesheet
   Layout / metrics modelled on divyahimachal.com (1080px mainbox,
   730px leftcol + 320px rightcol, white cards, black H2 with coloured rule)
   ========================================================================== */

/* ---------- 1. Variables & reset ---------- */
:root {
  --blue: #1955a5;
  --blue-dark: #123f7d;
  --blue-light: #2f74d0;
  --sky: #01a1df;
  --red: #e1261c;
  --red-dark: #b3000b;
  --line-red: #d80109;
  --line-blue: #0d38a0;
  --line-cyan: #00c3c4;
  --line-orange: #fc6200;
  --line-green: #00c428;
  --line-lime: #4a9400;
  --line-violet: #4a0094;
  --line-sky: #00a9e9;
  --line-navy: #005be9;
  --yellow: #ffe01b;
  --green: #07753c;
  --orange: #f58220;
  --pink: #eb0254;
  --ink: #2a2a2a;
  --ink-soft: #555;
  --muted: #7b7b7b;
  --line: #e5e5e5;
  --line-2: #d5d5d5;
  --line-3: #e9e9e9;
  --bg: #f7f7f7;
  --white: #fff;
  --grey: #f1f2f4;
  --max: 1100px;      /* 1080 content + 2 x 10 gutter */
  --leftcol: 730px;
  --rightcol: 320px;
  --gap: 30px;
  --radius: 4px;
  --font: "Mukta", "Noto Sans Devanagari", "Nirmala UI", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* masthead wordmark + display headings */
  /* Display font for headings/e-paper titles. Pehle "Rozha One" tha,
     par uske neeche Martel/Georgia LATIN-ONLY the — Rozha load na ho
     par Devanagari akshar alag-alag font se jud'te the, jisse "शक्ति"
     jaise shabd me "ि" matra "त" se detach ho jata tha.

     Ab "Noto Sans Devanagari" (400;700) PEHLE hai — Google Fonts me
     weight 400 aur 700 dono load karte hain (h1/h2 headings 700 use
     karte hain, e-paper titles bhi). Rozha One ab last-resort fallback
     ke roop me bachi hai (agar koi Rozha-khudakarna chahe to). */
  --font-display: "Noto Sans Devanagari", "Nirmala UI", "Rozha One", "Mukta", "Martel", Georgia, serif;
  /* theme-aware surfaces (dark mode in section 21 me override hota hai) */
  --card: #fff;
  --card-2: #fff;
  --head: #000;
}

/* ---------- 1b. Dark theme ---------- */
html[data-theme="dark"] {
  --bg: #0e1116;
  --white: #161a20;
  --card: #161a20;
  --card-2: #1c212a;
  --grey: #22272f;
  --ink: #d5d9e0;
  --ink-soft: #a7aeb9;
  --muted: #868d98;
  --line: #262c35;
  --line-2: #333b46;
  --line-3: #1f242c;
  --head: #ffffff;
  --yellow: #ffd633;
}
html[data-theme="dark"] body { background: var(--bg); }
html[data-theme="dark"] .masthead,
html[data-theme="dark"] .footer { background: var(--card); }
html[data-theme="dark"] img { filter: brightness(.88) contrast(1.04); }

* { box-sizing: border-box; }
/* browser ka default <figure> margin 1em 40px hota hai — wo width ke saath
   jud kar mobile pe horizontal overflow bana deta hai. */
figure { margin: 0; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* a wide photo must never widen its column */
img { max-width: 100%; display: block; border: 0; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--blue); }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; line-height: 1.3; }
p { margin: 0 0 12px; }
button { font-family: inherit; }
.clear { clear: both; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 2. Utilities ---------- */
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }
.mt-30 { margin-top: 30px; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-25 { margin-bottom: 25px; }
.mb-30 { margin-bottom: 30px; }
.text-c { text-align: center; }
.bg-white { background: var(--card); }

/* ---------- 3. Top black bar ----------
   left = din/date/time, beech = search box + ई-पेपर, right = social/theme ---------- */
.topbar { background: #111; color: #e9e9e9; }
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 42px; gap: 10px; flex-wrap: nowrap; padding-top: 4px; padding-bottom: 4px;
}
.topbar a { color: #e9e9e9; font-weight: 600; }
.topbar a:hover { color: var(--yellow); }
.top-menu { display: flex; flex-wrap: wrap; }
.top-menu a { display: block; padding: 8px 12px; }
.topbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }

/* ---- search box — pehle alag blue patti mein tha, ab top bar ke beech mein ---- */
/* flex-basis chhota + min-width chhota, taaki box bache hui jagah me
   shrink ho sake. nowrap ke saath ye hi top bar ko 1 line par rokta hai. */
.top-search { display: flex; align-items: stretch; flex: 1 1 140px; max-width: 420px; min-width: 64px; }
.top-search input {
  flex: 1; min-width: 0; border: 1px solid #3a3a3a; border-right: 0;
  background: #1c1c1c; color: #f2f2f2; font-family: inherit; font-size: 13.5px;
  padding: 6px 12px; border-radius: 4px 0 0 4px;
}
.top-search input::placeholder { color: #8b8b8b; }
.top-search input:focus { outline: none; border-color: var(--yellow); }
.top-search button {
  border: 0; cursor: pointer; background: var(--yellow); color: #111;
  padding: 0 13px; border-radius: 0 4px 4px 0; display: inline-flex; align-items: center;
}
.top-search button svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.top-search button:hover { background: #ffc400; }

/* ---- ई-पेपर — पीला बटन, हमेशा दिखता है ---- */
.epaper-chip {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  background: var(--yellow); color: #111; border-radius: 4px;
  padding: 5px 12px; line-height: 1.25; font-weight: 800;
}
.epaper-chip:hover { background: #ffc400; color: #111; transform: translateY(-1px); }
.epaper-chip .ep-d { font-size: 13.5px; white-space: nowrap; }
.epaper-chip .ep-sub {
  font-size: 10.5px; font-weight: 600; opacity: .78;
  border-left: 1px solid rgba(0, 0, 0, .25); padding-left: 7px;
}

/* ---- शहर चुनें (हाइपरलोकल) ---- */
.city-chip {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  background: #262626; color: #e9e9e9; border: 1px solid #3a3a3a;
  border-radius: 999px; padding: 5px 11px; cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 700; line-height: 1.3; white-space: nowrap;
}
.city-chip:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.city-chip .cc-pin { font-size: 12px; }
.city-chip svg.caret-d { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid rgba(255, 255, 255, .7); }
.city-panel {
  position: absolute; right: 10px; top: 100%; z-index: 420; width: 268px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line-2);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .3); border-radius: 0 0 6px 6px; padding: 12px;
}
.city-panel[hidden] { display: none; }
.city-panel h4 { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 9px; }
.city-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.city-grid button {
  border: 1px solid var(--line); background: var(--card-2); color: var(--ink);
  border-radius: 3px; padding: 7px 4px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.city-grid button:hover { border-color: var(--blue); color: var(--blue); }
.city-grid button.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.city-panel .cp-auto {
  margin-top: 10px; width: 100%; border: 1px dashed var(--line-2); background: none;
  color: var(--muted); border-radius: 3px; padding: 7px; font: inherit; font-size: 12px; cursor: pointer;
}
.city-panel .cp-auto:hover { color: var(--blue); border-color: var(--blue); }
.topbar { position: relative; }

/* ---- फ़ॉन्ट आकार (अ− / अ / अ+) ---- */
.font-size { display: inline-flex; align-items: center; border: 1px solid #3a3a3a; border-radius: 4px; overflow: hidden; flex-shrink: 0; }
.font-size button {
  border: 0; background: #262626; color: #d6d6d6; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap;
  padding: 6px 8px; min-width: 27px;
}
.font-size button + button { border-left: 1px solid #3a3a3a; }
.font-size button:hover { background: var(--blue); color: #fff; }
.font-size button.on { background: var(--yellow); color: #111; }

/* left side — day + date + live clock.
   nowrap + ellipsis: teeno ek hi line me rahein, kam-jyada jagah par
   date chup jaye (media query dekho) — kabhi 2 line me na toote. */
.top-date {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: #d3d3d3; line-height: 1.5;
  min-width: 0; flex-shrink: 1; white-space: nowrap; overflow: hidden;
}
.top-date .td-day { color: #fff; font-weight: 700; }
.top-date .td-date { color: #d3d3d3; }
.top-date .td-sep { color: #5c5c5c; }
.top-clock {
  display: inline-flex; align-items: center; gap: 5px;
  background: #262626; border: 1px solid #3a3a3a; border-radius: 999px;
  padding: 2px 10px; color: #fff; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: .3px;
}

/* right side — dark / light theme switch */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  background: #262626; color: #fff; border: 1px solid #3a3a3a;
  border-radius: 999px; padding: 5px 13px; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1.4;
}
.theme-toggle:hover { background: var(--blue); border-color: var(--blue); }
.theme-toggle:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.theme-toggle .tt-ico { font-size: 14px; line-height: 1; }
/* Social icons — inline SVG (Font Awesome nahi). Glyph-code approach hataya
   gaya tha kyunki Font Awesome ka CDN link load nahi hota tha, isliye icons
   blank/tofu render hote the. Ab har icon apna <svg> carry karta hai. */
.top-social { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.top-social a {
  width: 27px; height: 27px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #262626; border: 1px solid #363636; color: #d6d6d6;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.top-social a svg { display: block; width: 15px; height: 15px; fill: currentColor; }
/* har icon ka apna brand colour — hover par uthta hai */
.top-social .icon-fb:hover { background: #1877f2; border-color: #1877f2; color: #fff; }
.top-social .icon-x:hover  { background: #000;    border-color: #3a3a3a; color: #fff; }
.top-social .icon-yt:hover  { background: #ff0000; border-color: #ff0000; color: #fff; }
.top-social .icon-wa:hover  { background: #25d366; border-color: #25d366; color: #fff; }
.top-social .icon-ig:hover  { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); border-color: #dc2743; color: #fff; }
.top-social a:active { transform: scale(.92); }
.top-social a:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
/* channel abhi nahi hai — app.js 'soon' class laga deta hai. Link bekaar
   click na ho, halka grey dikhe, tooltip se pata chale kab aayega. */
.top-social a.soon { opacity: .42; cursor: default; pointer-events: auto; }
.top-social a.soon:hover { background: #262626; border-color: #363636; color: #d6d6d6; }
.footer-social a.soon { opacity: .42; cursor: default; }

/* ---------- 4. Masthead ---------- */
.masthead { background: var(--card); }
/* masthead 50% bada — padding 10px se 16px */
.masthead .wrap { padding: 16px 10px; }
.brand { text-align: center; }
/* masthead wordmark — pehle 'Rozha One' serif tha, jo image jaisa NAHI tha.
   Ab 'Mukta' 800 (ExtraBold) use kar rahe hain: image me bhi bhaari,
   tight, sans-serif Devanagari strokes hain. Mukta already site font hai,
   isliye koi naya font request nahi lag raha. */
.brand .logo { margin: 8px auto; }
.brand .logo a { display: block; text-decoration: none; }
.brand .logo-img {
  /* logo image (user attachment, 974x136) — text wordmark
     ke jagah ab asli logo image dikh rahi hai. */
  display: block;
  margin: 8px auto 0;
  max-width: min(630px, 80vw);
  width: auto;
  height: auto;
}
/* purana image-based logo ab use nahi hota, magar rakha hai taaki
   footer ya koi purana markup na toote */
.brand img.logo { display: block; width: 100%; height: auto; margin: 0 auto; }

/* ---------- 5. Navbar ---------- */
.nav {
  position: sticky; top: 0; z-index: 300; background: var(--blue);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.nav .wrap { display: flex; align-items: center; padding: 0 10px; }
/* Saari top categories (home se "anya" tak) ek hi line me aayengi —
   wrap hota to blue bar 2 line ho jaati thi. nowrap + compact
   padding/font se 12 items ~1200px ke andar aa jaate hain. */
.nav-list { display: flex; flex-wrap: nowrap; }
.nav-list > li { position: relative; flex: 0 0 auto; }
.nav-list > li > a {
  display: block; color: #fff; font-size: 14.5px; font-weight: 700;
  line-height: 44px; padding: 0 6px; white-space: nowrap;
}
.nav-list > li > a:hover { color: #ffa500; }
.nav-list > li.current > a { background: var(--blue-dark); color: var(--yellow); }
.nav-list .home > a { font-size: 16px; }

/* 1366px se chhoti screen par 12 items ek line me nahi samate —
   font/padding ko proportionally chhota karte hain, wrap nahi karte. */
@media (max-width: 1366px) {
  .nav-list > li > a { font-size: 13.5px; padding: 0 5px; }
}
@media (max-width: 1180px) {
  .nav .wrap { padding: 0 4px; }
  .nav-list > li > a { font-size: 12.5px; padding: 0 4px; }
  .nav-list .home > a { font-size: 14px; }
}
/* desktop par nav-brand chhupa hai — sirf mobile sticky bar me dikhta hai */
.nav-brand { display: none; }
.caret {
  display: inline-block; width: 0; height: 0; margin-left: 4px; vertical-align: middle;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid rgba(255, 255, 255, .85);
}
.submenu {
  position: absolute; top: 44px; left: 0; min-width: 180px; max-width: 88vw;
  background: var(--card);
  box-shadow: 0 0 3px #ccc; padding: 0 10px; z-index: 99;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: .16s;
  /* lambi list (जिले — 18 items) ko 3-column mega-menu banao, warna
     dropdown screen se bahut lamba ho jata hai */
  display: grid; grid-template-columns: repeat(3, minmax(104px, 1fr));
  column-gap: 6px;
}
/* "जिले" jaisa label poori chaudai le */
.submenu .sub-head { grid-column: 1 / -1; }
/* aakhri menu items (अन्य, विचार-विमर्श …) dropdown ko right-align karo,
   warna wo screen se bahar nikal kar poori page par horizontal scrollbar
   la dete hain */
.nav-list > li:nth-last-child(-n+3) > .submenu,
.nav-list > li:nth-child(n+11) > .submenu { left: auto; right: 0; }
.has-drop:hover > .submenu, .has-drop:focus-within > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu li { border-bottom: 1px solid #eee; }
.submenu li:last-child { border-bottom: 0; }
.submenu li a { display: block; color: var(--head); line-height: 34px; font-size: 14.5px; font-weight: 600; }
.submenu li a:hover { color: #0000cd; }
.submenu .sub-head { color: var(--muted); font-size: 12px; font-weight: 700; line-height: 30px; text-transform: uppercase; }
.nav-right { margin-left: auto; display: flex; align-items: center; }
.nav-right > li, .nav-sep { list-style: none; }
/* nav ka magnifier icon hata diya gaya — search bar nav ke upar hamesha
   dikhta hai, isliye icon redundant tha */
.nav-burger {
  display: none; background: none; border: 0; color: #fff; font-size: 20px; cursor: pointer;
  line-height: 44px; padding: 0 8px;
}

/* search bar — ab top bar ke andar hai (nav se pehle wali blue patti hata di).
   .searchbar sirf wahi markup handle karta hai jo abhi bhi kisi purane
   page par pada rahe — naye design me nahi dikhta. */
.searchbar { display: none; }
.searchbar.open { display: none; }

/* ---------- 6. Breaking news box (news-breaking-new) ---------- */
.breaking {
  max-width: 1041px; margin: 20px auto 30px; background: var(--card);
  border: 1px solid #d3d3d3; overflow: hidden;
}
.breaking .wrap { padding: 0; }
.breaking-row { display: flex; align-items: stretch; min-height: 56px; }
.breaking-label {
  flex-shrink: 0; background: var(--red); color: #fff; font-weight: 700; font-size: 15px;
  display: flex; align-items: center; gap: 7px; padding: 12px 16px; white-space: nowrap;
}
.breaking-label .dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: pulse 1.2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.7); } }
.breaking-track { flex: 1; overflow: hidden; display: flex; align-items: center; }
.breaking-move { display: flex; gap: 46px; white-space: nowrap; padding-left: 14px; animation: tick 44s linear infinite; }
.breaking:hover .breaking-move { animation-play-state: paused; }
.breaking-move a { font-size: 15.5px; font-weight: 600; color: var(--ink); }

/* ---------- 9z. market strip (sensex / nifty horizontal ticker) ---------- */
.market-strip {
  background: #0f1e38; color: #cfd9e6;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.market-strip .wrap { padding: 0 10px; }
.mkt-row { display: flex; align-items: stretch; min-height: 38px; }
.mkt-label {
  flex-shrink: 0; display: flex; align-items: center; gap: 7px; padding: 0 13px;
  font-size: 13.5px; font-weight: 700; color: #fff;
  background: rgba(255, 255, 255, .07);
}
.mkt-label .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #24a148;
  animation: pulse 1.6s infinite;
}
.mkt-track { flex: 1; overflow: hidden; display: flex; align-items: center; padding-left: 16px; }
.mkt-move {
  display: flex; gap: 30px; white-space: nowrap;
  animation: mktTick 40s linear infinite;
}
.market-strip:hover .mkt-move { animation-play-state: paused; }
/* content double karke seamless loop banate hain */
.mkt-move.is-loop { animation-name: mktTickLoop; }
@keyframes mktTick    { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes mktTickLoop { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.mkt-item { display: inline-flex; align-items: baseline; gap: 5px; }
.mkt-item b { font-size: 13.5px; font-weight: 700; color: #fff; white-space: nowrap; }
.mkt-item .v { font-size: 13.5px; font-weight: 600; color: #dbe4f0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mkt-item .c { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mkt-item.up   .c { color: #35c26a; }
.mkt-item.down .c { color: #ff5f5f; }
.mkt-item.na   .c { color: #8494ab; }
.mkt-loading, .mkt-error { font-size: 13px; color: #8494ab; }
.mkt-time {
  flex-shrink: 0; display: flex; align-items: center; padding-left: 12px;
  font-size: 12px; color: #8494ab; font-variant-numeric: tabular-nums;
}
.breaking-move a::before { content: "\25CF"; color: var(--red); margin-right: 9px; font-size: 9px; vertical-align: middle; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 7. Ad slots ---------- */
.ad-strip { display: flex; justify-content: center; padding: 15px 0; }
.ad-box {
  width: 100%; max-width: 970px; height: 90px; border: 1px dashed #ccc;
  background: var(--card); display: grid; place-items: center; color: #a5a5a5; font-size: 13px;
  letter-spacing: 1.4px; text-transform: uppercase;
}
.ad-box.mid { height: 120px; }
.ad-box.side { height: 600px; max-width: 300px; }

/* ---------- 8. Section heading — black H2 + coloured 2px rule ---------- */
.sec-head { position: relative; border-bottom: 2px solid var(--line); margin-bottom: 15px; }
.sec-head h2 {
  display: inline-block; font-size: 21px; font-weight: 700; line-height: 27px; color: var(--head);
  padding-bottom: 5px; margin-bottom: -2px; border-bottom: 2px solid var(--line-blue);
}
.sec-head h2 a { color: var(--head); }
.sec-head h2 a:hover { color: var(--blue); }
.sec-head .more { float: right; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--red); padding-top: 6px; }
.sec-head .more:hover { color: var(--head); }
.sec-head.red h2 { border-bottom-color: var(--line-red); }
.sec-head.green h2 { border-bottom-color: var(--line-green); }
.sec-head.cyan h2 { border-bottom-color: var(--line-cyan); }
.sec-head.orange h2 { border-bottom-color: var(--line-orange); }
.sec-head.lime h2 { border-bottom-color: var(--line-lime); }
.sec-head.violet h2 { border-bottom-color: var(--line-violet); }
.sec-head.sky h2 { border-bottom-color: var(--line-sky); }
.sec-head.navy h2 { border-bottom-color: var(--line-navy); }

/* ---------- 9. Cards ---------- */
.card { background: var(--card); }
.card-img { position: relative; overflow: hidden; display: block; background: #eee; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.card:hover .card-img img { transform: scale(1.05); }
.card-cat {
  position: absolute; left: 0; top: 0; background: var(--blue); color: #fff; font-size: 12px;
  font-weight: 700; padding: 3px 9px; text-transform: uppercase;
}
.card-cat.green { background: var(--green); }
.card-cat.orange { background: var(--orange); }
.card-cat.red { background: var(--red); }
.card-body { padding-top: 10px; }
.card-title { font-size: 16.5px; line-height: 23px; }
.card-excerpt { font-size: 14px; color: var(--ink-soft); margin: 6px 0 0; line-height: 20px; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); margin-top: 7px; }
.meta .author { color: var(--pink); font-weight: 700; }
.meta .sep { width: 3px; height: 3px; border-radius: 50%; background: #c9c9c9; }
.meta .live { color: var(--red); font-weight: 700; }

.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

/* thumb-left list row */
.list-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.list-item:last-child { border-bottom: 0; }
.list-item .thumb { width: 116px; flex-shrink: 0; }
.list-item .thumb img { width: 116px; aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
.list-item h3 { font-size: 15px; line-height: 20px; }
.list-item .meta { margin-top: 4px; }

/* numbered list */
.rank-list { counter-reset: rk; }
.rank-list li {
  counter-increment: rk; display: flex; gap: 12px; padding: 10px 0;
  border-bottom: 1px dashed var(--line); align-items: flex-start;
}
.rank-list li:last-child { border-bottom: 0; }
.rank-list li::before {
  content: counter(rk); flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--grey); color: var(--ink-soft); font-weight: 700; font-size: 14px; display: grid; place-items: center;
}
.rank-list li:nth-child(-n+3)::before { background: var(--red); color: #fff; }
.rank-list h3 { font-size: 14.5px; line-height: 20px; }

/* bullets */
.bullet-list li {
  position: relative; padding: 9px 0 9px 18px; border-bottom: 1px dashed var(--line);
  font-size: 14.5px; line-height: 20px;
}
.bullet-list li:last-child { border-bottom: 0; }
.bullet-list li::before {
  content: ""; position: absolute; left: 2px; top: 15px; width: 7px; height: 7px;
  background: var(--red); border-radius: 50%;
}
.bullet-list a:hover { color: var(--red); }
.bullet-list .ago { color: var(--muted); font-size: 12px; }

/* ==========================================================================
   10. HOME GRID — divyahimachal leftcol 730 / rightcol 320
   ========================================================================== */
.home-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--leftcol)) minmax(0, var(--rightcol));
  column-gap: var(--gap);
  align-items: start;
  padding-bottom: 30px;
}
.span2 { grid-column: 1 / -1; }
/* har column ek lamba stack hai — isliye kahin bhi khali gap nahi banta */
.home-col { display: flex; flex-direction: column; gap: 25px; min-width: 0; }
.home-col > * { min-width: 0; margin: 0; }
.home-col .web-stories-list { margin: 0; }


/* ---------- 10a. tblockbox : lead 420 + right list 300 ---------- */
.tblockbox { margin-top: 30px; }
.tblockmain { display: flex; align-items: flex-start; }
/* Hero teen column ka hai: mukhya khabar + 5 chhoti khabrein + 'मौसम आज'.
   Wrap 1080px hai, isliye basis 440 + 300 + 250 = 990px rakha gaya hai. */
.tblock-mdd { flex: 2 1 380px; padding-right: 20px; min-width: 0; }
.tblock-right { flex: 1.35 1 260px; padding-left: 20px; border-left: 1px solid var(--line-2); min-width: 0; }
.tblock-rail { flex: 0 1 250px; padding-left: 20px; border-left: 1px solid var(--line-2); min-width: 0; }
.tblock-rail .widget { margin-bottom: 0; }
.rhsnbox { min-width: 0; }

.tnbox figure { padding-bottom: 10px; margin: 0; }
.tnbox figure img { width: 100%; }          /* natural ratio — never cropped */
.tnbox h1 { font-size: 24px; line-height: 30px; color: var(--head); margin-bottom: 15px; }
.tnbox h1 a:hover { color: var(--red); }
.tnbox .descrip { font-size: 14px; line-height: 20px; color: var(--ink-soft); margin-bottom: 20px; }
.tnbox .bylinehome2 { font-size: 13px; line-height: 16px; color: var(--pink); font-weight: 700; display: block; }

/* rhsnews1 — hero की 5 छोटी खबरें.
   पहले float + fixed width (168px) था, जिससे (a) container से 14px overflow,
   (b) mobile पर image और headline के बीच 35-117px का खाली gap.
   अब flex: image fixed, headline बाकी पूरी चौड़ाई लेती है. */
.rhsnews1 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-top: 1px solid var(--line-2);
  padding: 15px 0;
}
.rhsnews1:first-child { border-top: 0; padding-top: 5px; }
.rhsnews1 .newst-summ1 {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
  float: none;
  width: auto;
  padding-left: 0;
}
.rhsnews1 .ntitle { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--head); margin-bottom: 5px; }
.rhsnews1 .ntitle a:hover { color: var(--red); }
.rhsnews1 figure {
  order: 1;
  flex: 0 0 110px;
  width: 110px;
  float: none;
  margin: 0;
  min-width: 0;
}
.rhsnews1 figure img { display: block; width: 100%; height: 80px; object-fit: cover; }

/* ---------- 10b. topblockbox (white card) ---------- */
.topblockbox, .widget, .photogallery, .background-white {
  background: var(--card); padding: 15px;
  border: 1px solid var(--line-3); border-bottom: 2px solid var(--line-2);
  border-radius: var(--radius);
  min-width: 0;
}
.topblockmain { display: flex; margin-top: 12px; }
.topblock-midd { width: 55%; padding-right: 30px; min-width: 0; }
.topblock-right { width: 45%; min-width: 0; }
.topnbox figure { padding-bottom: 10px; margin: 0; }
.topnbox figure img { width: 100%; }        /* natural ratio */
.topnbox h3 { font-size: 20px; line-height: 27px; margin-bottom: 10px; }
.topnbox h3 a:hover { color: var(--red); }
.topnbox .byline { font-size: 12px; line-height: 16px; color: #7b7b7b; display: block; }
.topnbox .description { font-size: 14px; line-height: 20px; color: var(--ink-soft); margin-top: 10px; }

/* rhsnews */
.rhsnews { border-top: 1px solid var(--line); padding: 15px 0; display: flex; flex-wrap: wrap; }
.rhsnews:first-child { border-top: 0; padding-top: 0; }
.rhsnews .newst-summ { flex: 0 0 65%; max-width: 215px; margin-top: -3px; min-width: 0; }
.rhsnews .newstitle { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--head); }
.rhsnews .newstitle a:hover { color: var(--red); }
.rhsnews figure { flex: 0 0 35%; max-width: 115px; padding-right: 15px; margin: 0; }
.rhsnews figure img { width: 100%; height: 67px; object-fit: cover; }
.rhsnews .newst-summ .meta { margin-top: 4px; font-size: 12px; }

/* ---------- 10c. widget (sidebar card) ---------- */
.widget-title {
  font-size: 20px; line-height: 23px; border-bottom: 1px solid #ccc;
  padding-bottom: 7px; margin-bottom: 15px; color: var(--head);
}
.widget-title.red { color: var(--red); border-bottom-color: var(--red); }
.widget-title.blue { color: var(--blue); border-bottom-color: var(--blue); }
.widget-title.cyan { color: var(--cyan, #0e8f8f); border-bottom-color: var(--cyan, #0e8f8f); }
.widget-title.green { color: var(--green, #1a7f37); border-bottom-color: var(--green, #1a7f37); }
.widget-title.orange { color: var(--orange, #d97706); border-bottom-color: var(--orange, #d97706); }
/* ---------- 10d. sidebar: newsletter + app buttons ---------- */
.nl-form { display: flex; gap: 8px; flex-wrap: wrap; }
.nl-input {
  flex: 1 1 130px; min-width: 0; padding: 9px 11px; font-size: 14px;
  font-family: inherit; border: 1px solid var(--line); border-radius: 3px;
  background: #fff; color: var(--text);
}
.nl-input:focus { outline: 2px solid var(--blue); outline-offset: -1px; border-color: var(--blue); }
.nl-btn {
  flex: 0 0 auto; padding: 9px 18px; font-size: 14px; font-weight: 700;
  font-family: inherit; color: #fff; background: var(--red);
  border: 0; border-radius: 3px; cursor: pointer;
}
.nl-btn:hover { filter: brightness(1.1); }
.side-widget { margin-bottom: 30px; }

/* ---------- 10d. trending (teanding_bg) ---------- */
.teanding_bg {
  background: var(--blue); padding: 10px; border-radius: 0; max-height: 365px;
  overflow: hidden; min-width: 0;
}
.teanding_bg.cyan { background: var(--sky); }
.teanding_bg .teal-head { color: #fff; font-size: 20px; line-height: 26px; font-weight: 700; margin-bottom: 10px; }
.teanding_bg .teal-head::before { content: "\25B6"; color: var(--yellow); font-size: 15px; margin-right: 6px; }
.teanding_grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.teanding_grid img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.teanding_grid a { display: block; }
/* ek samay par ek hi slide — bilkul reference slider jaisa */
.teanding_grid .trend-item { display: none; }
.teanding_grid .trend-item.active { display: block; }
.teanding_bg .trend-dots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.teanding_bg .trend-dots button {
  width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(255, 255, 255, .45); cursor: pointer;
}
.teanding_bg .trend-dots button.active { background: #fff; }
.teanding_grid p {
  color: #fff; font-size: 14px; line-height: 20px; margin: 6px 0 0; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.teanding_grid a:hover p { color: var(--yellow); }

/* ---------- 10e. web-stories-sec (portrait story rail) ---------- */
.web-stories-sec { min-width: 0; }
.story_top { position: relative; margin: 15px 10px; }
.story_top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; border-bottom: 3px solid var(--red); }
.story_top .category_title {
  display: inline-block; position: relative; z-index: 1; background: var(--card); color: var(--red);
  text-transform: uppercase; font-size: 20px; font-weight: 700; line-height: 27px; padding-right: 5px;
}
.story_top .see_more {
  float: right; position: relative; z-index: 1; background: var(--card); color: var(--red);
  text-transform: uppercase; font-size: 12px; font-weight: 700; line-height: 21px; padding: 3px 5px 0;
}
.story_top .see_more:hover { color: var(--head); }
.web_stories_list { display: flex; gap: 20px; overflow-x: auto; padding: 15px 10px 8px; scrollbar-width: thin; }
.web_stories_list::-webkit-scrollbar { height: 6px; }
.web_stories_list::-webkit-scrollbar-thumb { background: #d5d5d5; }
.stroy_list_row { flex: 0 0 196px; }
.story_card { position: relative; margin: 0; }
.story_img { display: block; position: relative; width: 196px; aspect-ratio: 196 / 261; overflow: hidden; background: #eee; }
.story_img img { width: 100%; height: 100%; object-fit: cover; }
.over-wrap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 10px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .85) 100%);
}
.over-wrap .category_name { display: block; color: #f7655f; text-transform: uppercase; font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.over-wrap .story_title { color: #fff; font-size: 13px; line-height: 19px; font-weight: 700; }

/* ---------- 10f. topnewsbx (most viewed sidebar) ---------- */
.topnewsbx { min-width: 0; }
.topnewsbx li { display: block; padding: 15px 0; border-top: 1px solid #e2e2e2; overflow: hidden; }
.topnewsbx li:first-child { border-top: 0; padding-top: 0; }
.topnewsbx li img { float: left; width: 120px; height: 80px; object-fit: cover; margin-right: 15px; }
.topnewsbx li:first-child img { width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0 0 8px; float: none; }
.topnewsbx li h2 { font-size: 16px; line-height: 20px; color: var(--head); font-weight: 700; padding-left: 16px; position: relative; }
.topnewsbx li h2::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px;
  background: var(--red); border-radius: 50%;
}
.topnewsbx li:first-child h2 { padding-left: 0; }
.topnewsbx li:first-child h2::before { display: none; }
.topnewsbx li::after { content: ""; display: block; clear: both; }
.topnewsbx li .meta { margin-top: 5px; }
.topnewsbx .rank-no { float: right; font-size: 22px; font-weight: 700; color: #dcdcdc; line-height: 1; }

/* ---------- 10g. photogallery ---------- */
.photogallery { position: relative; }
.gallery-row { display: flex; gap: 15px; }
.photo { width: 64%; min-width: 0; }
.gradientimg { position: relative; width: 100%; aspect-ratio: 16 / 7; overflow: hidden; }
.gradientimg img { width: 100%; height: 100%; object-fit: cover; }
.gradientimg figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .85));
  font-size: 16px; line-height: 22px; font-weight: 700;
}
.photoitem { width: 36%; min-width: 0; }
.box1 { padding: 12px 0; border-bottom: 1px solid var(--line); overflow: hidden; }
.box1:last-child { border-bottom: 0; }
.box1 img { float: left; width: 100px; height: 67px; object-fit: cover; margin-right: 12px; }
.box1 h4 { font-size: 13.5px; line-height: 18px; }
.box1::after { content: ""; display: block; clear: both; }

/* ---------- 10h. dh-twocolbx ---------- */
.dh-twocolbx { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.dh-twocol { position: relative; min-width: 0; }
.dh-twocol-thumb { width: 100%; aspect-ratio: 3 / 2; overflow: hidden; }
.dh-twocol-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dh-twocol-summary {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 10px; color: #fff;
  font-size: 20px; line-height: 26px; font-weight: 600;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8));
}

/* ---------- 10i. video-list ---------- */
.video-list { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.video-list-item { width: 33.33%; padding: 0 10px; min-width: 0; }
.video-list-item .v-thumb { position: relative; width: 100%; aspect-ratio: 6 / 5; overflow: hidden; display: block; }
.video-list-item .v-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-list-item .v-summary { font-size: 16px; line-height: 22px; margin-top: 10px; color: var(--head); font-weight: 600; }
.play {
  position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(225, 38, 28, .92); display: grid; place-items: center;
}
.play::after { content: ""; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }
.play.small { width: 30px; height: 30px; }
.play.small::after { border-left-width: 9px; border-top-width: 6px; border-bottom-width: 6px; }
.v-card .dur { position: absolute; right: 6px; bottom: 6px; background: rgba(0, 0, 0, .78); color: #fff; font-size: 11.5px; padding: 1px 6px; }

/* ---------- 10j. small helpers used by JS blocks ---------- */
.side-widget {
  background: var(--card); padding: 15px; border: 1px solid var(--line-3);
  border-bottom: 2px solid var(--line-2); border-radius: var(--radius);
  margin-bottom: 30px; min-width: 0;
}
.w-head {
  font-size: 20px; line-height: 23px; border-bottom: 1px solid #ccc;
  padding-bottom: 7px; margin-bottom: 15px; color: var(--head);
}
.w-head .ic { display: none; }
.cat-strip { display: flex; gap: 10px; flex-wrap: wrap; padding: 4px 0 18px; }
.cat-strip a {
  padding: 6px 13px; border: 1px solid var(--line); font-size: 14px;
  font-weight: 600; background: var(--card);
}
.cat-strip a:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 250px; gap: 20px; overflow-x: auto; padding-bottom: 8px; }
.v-card .thumb { position: relative; display: block; }
.v-card .thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.v-card h3 { font-size: 15px; line-height: 21px; margin-top: 9px; }
.btn-epaper, .btn-sub {
  display: inline-block; background: var(--blue); color: #fff; padding: 9px 16px;
  font-weight: 700; font-size: 14px; border: 0; cursor: pointer;
}
.btn-epaper:hover { background: var(--blue-dark); color: #fff; }
.btn-sub { background: var(--red); }
.btn-sub:hover { background: var(--red-dark); color: #fff; }

.cat-main-title { font-size: 20px; line-height: 27px; margin: 0 0 10px; }
.thumbnews { padding: 12px 0; border-bottom: 1px dashed var(--line); }
.thumbnews:last-child { border-bottom: 0; }
.thumbnews a { display: flex; gap: 12px; align-items: flex-start; }
.thumbnews h3 { font-size: 14.5px; line-height: 20px; font-weight: 500; color: var(--head); flex: 1; min-width: 0; }
.thumbnews img { width: 100px; height: 67px; object-fit: cover; flex-shrink: 0; }
.vishesh {
  display: inline-block; background: #2a36c8; color: #fff; font-size: 11px; font-weight: 700;
  padding: 0 6px; margin-right: 5px; vertical-align: middle; text-transform: uppercase;
}
.exclusive {
  display: inline-block; background: var(--red); color: #fff; font-size: 11px; font-weight: 700;
  padding: 0 6px; margin-right: 5px; vertical-align: middle; text-transform: uppercase;
}

/* ==========================================================================
   11. Inner pages (category / latest / search / article)
   ========================================================================== */
.layout-main, .story-layout {
  display: grid; grid-template-columns: minmax(0, var(--leftcol)) minmax(0, var(--rightcol));
  column-gap: var(--gap); row-gap: 25px; align-items: start; padding-bottom: 30px;
}
.sidebar { min-width: 0; }

.breadcrumb { font-size: 13.5px; color: #666; padding: 12px 0; }
.breadcrumb a { color: var(--blue); font-weight: 600; }
.page-head { background: var(--card); border: 1px solid var(--line-3); border-bottom: 2px solid var(--line-2); padding: 18px; margin-bottom: 25px; }
.page-head h1 { font-size: 26px; color: var(--head); }
.page-head p { margin: 6px 0 0; color: var(--ink-soft); font-size: 14.5px; }

.list-block { background: var(--card); padding: 15px; border: 1px solid var(--line-3); border-bottom: 2px solid var(--line-2); border-radius: var(--radius); }

/* article */
.story { background: var(--card); padding: 20px; border: 1px solid var(--line-3); border-bottom: 2px solid var(--line-2); border-radius: var(--radius); min-width: 0; }
.story h1 { font-size: 28px; line-height: 1.4; margin-bottom: 12px; color: var(--head); }
.story-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 0; margin-bottom: 18px; }
.story-meta .author { color: var(--pink); font-weight: 700; font-size: 14px; }
.story-lead { margin-bottom: 18px; }
.story-lead img { width: 100%; }
.story-lead figcaption { font-size: 12.5px; color: var(--muted); padding: 7px 0; border-bottom: 1px solid var(--line); }
.story-body { font-size: 17.5px; line-height: 1.9; }
.story-body p { margin-bottom: 16px; }
.story-body h2 { font-size: 21px; color: var(--blue); margin: 24px 0 12px; padding-left: 12px; border-left: 4px solid var(--red); }
.story-body h3 { font-size: 18px; margin: 20px 0 10px; }
.story-body blockquote {
  margin: 22px 0; padding: 18px 20px; background: #f5f9ff; border-left: 4px solid var(--blue);
  font-size: 17px; font-style: italic; color: var(--blue-dark); border-radius: 0 4px 4px 0;
}
/* Editor toolbar ka horizontal-rule button (<hr>) */
.story-body hr {
  border: 0; border-top: 1px solid var(--line, #dfe6ef); margin: 26px 0; height: 0;
}
/* Editor toolbar ka strike-through button (<s> / <del>) */
.story-body s, .story-body del, .story-body strike {
  text-decoration: line-through; color: #7b8794;
}
.story-body ul { margin: 0 0 16px; }
.story-body ul li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.story-body ul li::before { content: "\25AA"; position: absolute; left: 6px; color: var(--red); font-size: 18px; }
.story-body a { color: var(--blue); text-decoration: underline; }
.story-body img { margin: 12px 0; }
.story-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }
.story-tags a { background: #f4f5f7; border: 1px solid var(--line); border-radius: 20px; padding: 5px 13px; font-size: 13.4px; font-weight: 600; }
.story-tags a:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.share { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 20px 0; }
.share span { font-weight: 700; font-size: 14px; }
.share a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 12px; text-decoration: none; }
.share a svg { display: block; width: 17px; height: 17px; fill: currentColor; }
.share a:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, .25); }
.share a:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.share .s-wa { background: #25d366; } .share .s-fb { background: #1877f2; }
.share .s-x { background: #000; } .share .s-in { background: #0a66c2; }
.share .s-tg { background: #229ed9; }
/* "स्रोत" text hai, icon nahi — isliye gol shape nahi, pill banaya */
.share .s-pr { background: var(--blue); width: auto; min-width: 0; padding: 0 15px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }

/* pagination */
.pagination { display: flex; justify-content: center; gap: 6px; padding: 24px 0 10px; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 38px; height: 38px; padding: 0 10px; display: grid; place-items: center;
  border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: 14.5px;
}
.pagination a:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.pagination .current { background: var(--blue); color: #fff; border-color: var(--blue); }
.pagination .dots { border: 0; background: none; }

/* forms */
.form-card { background: var(--card); padding: 20px; border: 1px solid var(--line-3); border-bottom: 2px solid var(--line-2); border-radius: var(--radius); }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 10px 12px; font-family: inherit; font-size: 15px; border: 1px solid #cfcfcf;
  background: #fbfcfd; color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 0; border-color: var(--blue); background: #fff; }
.field textarea { min-height: 130px; resize: vertical; }
.form-btn { background: var(--blue); color: #fff; border: 0; padding: 12px 30px; font-weight: 700; font-size: 15px; cursor: pointer; }
.form-btn:hover { background: var(--blue-dark); }
.form-note { font-size: 13px; color: var(--muted); margin-top: 10px; }
.ok-msg { background: #e8f8ee; border: 1px solid #a8e0bf; color: #136c3a; padding: 12px 14px; margin-bottom: 16px; font-size: 14.5px; }
.info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 25px; }
.info-box { background: var(--card); border: 1px solid var(--line-3); border-bottom: 2px solid var(--line-2); padding: 15px; }
.info-box h2 { font-size: 16px; color: var(--blue); margin-bottom: 7px; }
.info-box p, .info-box li { font-size: 14px; color: var(--ink-soft); margin: 0; }
.info-box ul li { padding: 3px 0; }

/* sidebar widgets */
.epaper-box { background: var(--blue); color: #fff; padding: 20px 16px; text-align: center; margin-bottom: 30px; }
.epaper-box h3 { font-size: 20px; margin-bottom: 6px; }
.epaper-box p { font-size: 13.5px; color: #d8e6fa; margin-bottom: 14px; }
.epaper-box .btn { background: var(--yellow); color: var(--blue-dark); font-weight: 700; padding: 10px 18px; display: inline-block; font-size: 14.5px; }
.epaper-box .btn:hover { background: #fff; color: var(--blue-dark); }
.w-head { font-size: 20px; line-height: 23px; border-bottom: 1px solid #ccc; padding-bottom: 7px; margin-bottom: 15px; color: var(--head); }
.w-head .ic { display: none; }
.weather-now { display: flex; align-items: center; gap: 12px; border-bottom: 1px dashed var(--line); padding: 9px 0; }
.weather-now:last-of-type { border-bottom: 0; }
.weather-now .temp { font-size: 26px; font-weight: 700; color: var(--blue); line-height: 1; }
.weather-now .city { font-size: 13.5px; color: var(--ink-soft); }
.weather-now .city b { display: block; color: var(--ink); font-size: 14.5px; }
.poll-opt { display: block; padding: 9px 12px; border: 1px solid var(--line); margin-bottom: 9px; cursor: pointer; font-size: 14.5px; }
.poll-opt:hover { border-color: var(--blue); background: #f6faff; }
.poll-opt input { margin-right: 8px; accent-color: var(--blue); }
.poll-btn { width: 100%; background: #0033ff; border: 0; color: #fff; padding: 10px; font-weight: 700; cursor: pointer; font-size: 15px; border-radius: 3px; }
.poll-result .row { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 14px; }
.bar { height: 8px; background: #ececec; overflow: hidden; margin-bottom: 12px; }
.bar i { display: block; height: 100%; background: #0d38a0; }
.bar.win i { background: #07753c; }
.nl-form { display: flex; gap: 6px; }
.nl-form input { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid #ddd; font-family: inherit; }
.nl-form button { background: var(--red); color: #fff; border: 0; padding: 0 14px; font-weight: 700; cursor: pointer; }
.g-card { position: relative; overflow: hidden; background: #eee; }
.g-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.g-card .zoom {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .45); color: #fff;
  display: grid; place-items: center; opacity: 0; transition: .25s; font-size: 13px; font-weight: 700; text-align: center; padding: 10px;
}
.g-card:hover .zoom { opacity: 1; }

/* 404 */
.nf { background: var(--card); padding: 60px 20px; text-align: center; border: 1px solid var(--line-3); }
.nf .code { font-size: 84px; font-weight: 700; color: var(--blue); line-height: 1; }
.nf h2 { font-size: 24px; margin: 12px 0 8px; }
.nf p { color: var(--ink-soft); }

/* back to top */
.totop {
  position: fixed; right: 18px; bottom: 18px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--blue); color: #fff; border: 0; cursor: pointer; font-size: 17px; display: none;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18); z-index: 250;
}
.totop.show { display: grid; place-items: center; }
.totop:hover { background: var(--red); }
.drawer-back { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 380; display: none; }
.drawer-back.open { display: block; }

/* ==========================================================================
   11b. Chat widget — bottom-right, hover par khulta hai
   FAB '.chatbot' ke andar hai, taaki pointer panel ke andar jaane par bhi
   hover bana rahe (sirf button par hover karne se panel turant band ho jaata).
   ========================================================================== */
.chatbot {
  position: fixed; right: 18px; bottom: 74px; z-index: 420;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}

/* ---- floating action button ---- */
.chat-fab {
  position: relative;
  width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .28);
  transition: transform .2s, box-shadow .2s, background .2s;
  order: 2;
}
.chat-fab svg { width: 26px; height: 26px; fill: currentColor; display: block; }
.chat-fab:hover { transform: scale(1.08); box-shadow: 0 10px 30px rgba(0, 0, 0, .34); }
.chat-fab:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.chatbot.open .chat-fab { background: linear-gradient(135deg, var(--red), var(--red-dark)); transform: rotate(90deg); }
/* halka pulse ring — attention ke liye; reduced-motion ka respect */
.chat-fab::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; border: 2px solid var(--blue);
  opacity: 0; pointer-events: none;
  animation: chatPulse 2.4s ease-out infinite;
}
.chatbot:hover .chat-fab::after, .chatbot.open .chat-fab::after { display: none; }
@keyframes chatPulse {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.5);  opacity: 0; }
  100% { transform: scale(1.5);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-fab::after { animation: none; }
  .chat-fab, .chat-panel, .chat-msg { transition: none !important; animation: none !important; }
}

/* ---- hover label (FAB ke upar, flow me) ---- */
.chat-tip {
  background: var(--card); color: var(--head);
  border: 1px solid var(--line-2); border-radius: 999px;
  padding: 6px 13px; font-size: 13px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
  opacity: 0; transform: translateX(8px); pointer-events: none;
  transition: opacity .18s, transform .18s;
  /* flex column me order: tip ko FAB ke UPAR rakhna hai. Pehle yahan
     order:2 tha aur FAB ka koi order nahi tha (default 0) — jisse tip
     button ke NEECHE aa gaya, container ki height badh gayi, aur panel
     (bottom:64px) button ke andar chadh gaya. */
  order: 1;
}
.chatbot:hover .chat-tip { opacity: 1; transform: none; }
/* panel khul gaya hai to label chhupana — sirf band state me dikhe */
.chatbot:hover .chat-panel:hover ~ .chat-tip,
.chatbot.open .chat-tip { opacity: 0; transform: translateX(8px); }

/* ---- panel (absolute — flow se bahar, taaki hidden state me
        container sirf FAB jitna bada rahe) ----
   bottom:64px = FAB ki height (54) + 10px gap. Isse panel ka bottom edge
   button ke UPAR se exactly 10px upar baithta hai, uske andar nahi. */
.chat-panel {
  position: absolute; right: 0; bottom: 64px;
  width: 330px; height: 460px; max-height: calc(100vh - 160px);
  background: var(--card); border: 1px solid var(--line-2); border-radius: 10px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .24);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.97);
  transform-origin: bottom right;
  transition: opacity .2s, transform .2s, visibility .2s;
}
/* HOVER se khulta hai (desktop). .open class click/tap se pin karta hai. */
.chatbot:hover .chat-panel,
.chatbot.open .chat-panel { opacity: 1; visibility: visible; transform: none; }

.chat-head {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark)); color: #fff;
}
.chat-head .ch-ava {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .18);
  display: grid; place-items: center; flex: 0 0 auto;
}
.chat-head .ch-ava svg { width: 19px; height: 19px; fill: #fff; }
.chat-head .ch-meta { flex: 1; min-width: 0; line-height: 1.3; }
.chat-head .ch-name { display: block; font-size: 14.5px; font-weight: 700; }
.chat-head .ch-on { display: flex; align-items: center; gap: 5px; font-size: 11.5px; opacity: .9; }
.chat-head .ch-on i {
  width: 7px; height: 7px; border-radius: 50%; background: #4ade80; display: block;
  box-shadow: 0 0 0 2px rgba(74, 222, 128, .3);
}
.chat-head .ch-min {
  width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .16); color: #fff; font-size: 17px; line-height: 1;
  display: grid; place-items: center; flex: 0 0 auto;
}
.chat-head .ch-min:hover { background: var(--red); }

/* ---- messages ---- */
.chat-log {
  flex: 1; overflow-y: auto; padding: 13px; background: var(--bg);
  display: flex; flex-direction: column; gap: 9px; scroll-behavior: smooth;
}
.chat-msg {
  max-width: 86%; padding: 8px 12px; border-radius: 12px;
  font-size: 14px; line-height: 1.55; word-wrap: break-word; overflow-wrap: anywhere;
}
.chat-msg.bot {
  align-self: flex-start; background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-bottom-left-radius: 3px;
}
.chat-msg.me {
  align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 3px;
}
.chat-msg a { color: var(--blue-light); font-weight: 600; }
html[data-theme="dark"] .chat-msg.bot a { color: #7fb0f0; }
.chat-msg.me a { color: #fff; text-decoration: underline; }
.chat-msg ul { margin: 6px 0 0; padding-left: 17px; }
.chat-msg li { margin-bottom: 4px; }
/* "typing…" dots */
.chat-msg.typing { display: flex; gap: 4px; padding: 11px 13px; }
.chat-msg.typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
  display: block; animation: chatDot 1.2s infinite;
}
.chat-msg.typing i:nth-child(2) { animation-delay: .18s; }
.chat-msg.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes chatDot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ---- quick reply chips ---- */
.chat-chips {
  display: flex; gap: 6px; padding: 8px 11px; overflow-x: auto;
  background: var(--card); border-top: 1px solid var(--line-3); flex: 0 0 auto;
}
.chat-chips::-webkit-scrollbar { height: 0; }
.chat-chips button {
  flex: 0 0 auto; border: 1px solid var(--line-2); background: var(--card-2);
  color: var(--ink); border-radius: 999px; padding: 5px 11px;
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.chat-chips button:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---- input row ---- */
.chat-form { display: flex; gap: 8px; padding: 10px 11px; background: var(--card); border-top: 1px solid var(--line-3); flex: 0 0 auto; }
.chat-form input {
  flex: 1; min-width: 0; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--bg); color: var(--ink); padding: 8px 14px;
  font: inherit; font-size: 14px;
}
.chat-form input:focus { outline: none; border-color: var(--blue); }
.chat-form button {
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; flex: 0 0 auto;
  background: var(--blue); color: #fff; display: grid; place-items: center;
}
.chat-form button:hover { background: var(--red); }
.chat-form button svg { width: 17px; height: 17px; fill: currentColor; }

/* ---- mobile: panel poori screen, tap se khulta hai (hover nahi hota) ---- */
@media (max-width: 640px) {
  .chatbot { right: 12px; bottom: 68px; }
  .chat-fab { width: 50px; height: 50px; }
  .chat-fab::after { width: 50px; height: 50px; }
  .chat-panel { bottom: 60px; }
  .chat-panel {
    width: calc(100vw - 24px); height: min(70vh, 440px);
    transform-origin: bottom right;
  }
  .chat-tip { display: none; }
}

/* ==========================================================================
   12. Footer — divyahimachal g-footer (light, 1020px inner)
   ========================================================================== */
/* ---------- premium compact footer (dark navy) ----------
   Pehle: light card bg, 4 grid tracks par 5 columns -> "संपर्क" column
   doosri row pe wrap ho jata tha, isliye footer lamba aur unbalanced
   dikhta tha. Ab 5 tracks, compact padding, chhoti type, accent rules. */
.footer {
  background: linear-gradient(180deg, #0f1e38 0%, #0a1626 100%);
  border-top: 3px solid var(--red);
  padding: 0;
  color: #cbd5e4;
}
.footer-top { padding: 24px 0 18px; }
/* 5 children = 5 tracks (brand + category + vibhag + humare baare me + contact) */
.footer-cols { display: grid; grid-template-columns: 1.55fr 1fr 1fr 1fr 1.25fr; gap: 24px; }
.footer-col { min-width: 0; }

.footer h3 {
  color: #fff; text-transform: uppercase; font-size: 13px; line-height: 18px;
  font-weight: 700; letter-spacing: .08em; margin: 0 0 10px;
  padding-left: 9px; position: relative;
}
/* chhoti si red accent bar — headings ke aage */
.footer h3::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 3px; height: 12px; border-radius: 2px; background: var(--red);
}
.footer li a {
  font-size: 13.5px; line-height: 22px; font-weight: 400; color: #b6c3d6;
  transition: color .16s, padding-left .16s;
}
.footer li a:hover { color: #fff; padding-left: 3px; }
.footer p { font-size: 12.8px; line-height: 20px; color: #98a6bb; margin: 0; }
/* footer logo image (user attachment) */
.footer-brand .footer-logo {
  display: block;
  margin-bottom: 10px;
  text-decoration: none;
  text-align: center;
}
.footer-brand .logo-img {
  display: block;
  max-width: 260px;
  width: auto;
  height: auto;
  margin: 0 auto;
}
/* purana image-based logo styles (ab use nahi, magar markup safe rahe) */
.footer-brand img.logo {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
  margin-bottom: 14px;
}
.footer-social { display: flex; gap: 8px; margin-top: 12px; }
.footer-social a {
  width: 30px; height: 30px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .07); color: #b6c3d6;
  border: 1px solid rgba(255, 255, 255, .1);
  transition: background .18s, color .18s, transform .18s, border-color .18s;
}
.footer-social a svg { display: block; width: 15px; height: 15px; fill: currentColor; }
.footer-social a:hover { color: #fff; transform: translateY(-2px); border-color: transparent; }
.footer-social .icon-fb:hover { background: #1877f2; }
.footer-social .icon-x:hover  { background: #000; }
.footer-social .icon-yt:hover  { background: #ff0000; }
.footer-social .icon-wa:hover  { background: #25d366; }
.footer-social .icon-ig:hover  { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
.footer-social a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.footer-contact li {
  font-size: 12.8px; line-height: 20px; color: #98a6bb; padding: 2px 0;
}
.footer-contact li span:first-child { color: #fff; font-weight: 600; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .09); margin-top: 4px;
  padding: 10px 10px 14px;
  font-size: 12.5px; color: #8494ab; text-align: center;
}
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 5px; }
.footer-links a { font-size: 12.5px; font-weight: 400; color: #98a6bb; transition: color .16s; }
.footer-links a:hover { color: #fff; }
.footer-admin { opacity: .75; }
.footer-admin:hover { opacity: 1; }

/* footer ab dark navy hai, isliye dark theme me bhi wahi gradient rakho
   (section 1b ka `html[data-theme="dark"] .footer{background:var(--card)}`
   specificity zyada hai, use yahan override kar rahe hain). */
html[data-theme="dark"] .footer {
  background: linear-gradient(180deg, #0c1729 0%, #080f1c 100%);
  border-top-color: var(--red);
}
/* ==========================================================================
   13. Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  :root { --leftcol: 1fr; --rightcol: 320px; }
  .topblock-midd { width: 60%; }
  .topblock-right { width: 40%; }
  .info-grid { grid-template-columns: repeat(2, 1fr); }
  /* 5 columns ko 3 tracks me ghislao; brand ko 2 row tak span kara dete hain,
     taaki 4 nav columns bagal me 2 row me pair ho jaayein. 3 row (574px)
     ke bajaye 2 row (~300px) me footer aa jaata hai. */
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; }
  .footer-brand { grid-column: 1; grid-row: 1 / span 2; }
  .footer-brand p { max-width: 100%; }
  /* top bar ko 1 line me rakhne ke liye yahan social icons hatane padte
     hain — nahi to page ko horizontal scrollbar aa jata tha */
  .top-social { display: none; }

}
@media (max-width: 900px) {
  .home-grid, .layout-main, .story-layout { grid-template-columns: minmax(0, 1fr); }
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .sidebar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; align-items: start; }
  .widget, .side-widget, .teanding_bg { margin-bottom: 0; }
  .tblock-right, .tblock-rail { flex: 1 1 100%; width: 100%; border-left: 0; border-top: 1px solid var(--line-2); padding-left: 0; margin-top: 15px; }
  .tblockmain { flex-wrap: wrap; }
  .video-list-item { width: 50%; }
}

@media (max-width: 768px) {
  body { font-size: 15.5px; }
  .top-menu li:nth-child(n+5) { display: none; }
  /* top bar compact: chhota text, toggle sirf icon.
     Sab kuch EK hi line me — isliye search ko poori line nahi, balki
     bache hui jagah me shrink hone diya gaya hai. */
  .topbar .wrap { min-height: 0; gap: 6px; padding-top: 6px; padding-bottom: 6px; }
  .top-date { font-size: 12px; gap: 6px; order: 1; flex: 0 1 auto; }
  .top-date .td-date { display: none; }
  .top-clock { padding: 1px 8px; font-size: 12px; }
  .theme-toggle { padding: 4px 10px; font-size: 12px; }
  .theme-toggle .tt-label { display: none; }
  .top-social { display: none; }
  .top-search { order: 2; flex: 1 1 40px; max-width: none; min-width: 46px; }
  .top-search input { padding: 7px 9px; font-size: 13px; }
  .top-search button { padding: 0 9px; }
  .topbar-right { order: 3; gap: 6px; flex: 0 0 auto; }
  .epaper-chip { padding: 4px 9px; }
  .epaper-chip .ep-sub { display: none; }
  .city-chip { padding: 4px 8px; gap: 3px; font-size: 11.5px; }
  .font-size button { padding: 5px 5px; min-width: 22px; font-size: 11px; }

  /* ---- mobile sticky bar me site ka naam ---- */
  .nav-brand {
    display: block; flex: 1; min-width: 0; color: #fff;
    font-family: var(--font); font-size: 19px; font-weight: 800;
    line-height: 44px; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; padding: 0 8px 0 2px;
  }
  .nav-list {
    position: fixed; top: 0; left: 0; bottom: 0; width: 280px; background: var(--card); z-index: 390;
    flex-direction: column; flex-wrap: nowrap; overflow-y: auto; padding: 8px 0 90px;
    transform: translateX(-100%); transition: transform .25s ease; box-shadow: 4px 0 20px rgba(0, 0, 0, .2);
  }
  .nav-list.open { transform: translateX(0); }
  .nav-list > li { width: 100%; border-bottom: 1px solid #f2f2f2; }
  .nav-list > li > a { color: var(--ink); padding: 11px 16px; line-height: 26px; }
  .nav-list > li > a:hover { background: #f4f5f7; color: var(--blue); }
  .nav-list .caret { border-top-color: #9aa4b1; margin-left: auto; }
  .submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0 10px; display: none; background: #fafbfc; }
  .has-drop.open > .submenu { display: block; }
  .nav-burger { display: block; }
  .g3, .g2, .info-grid, .sidebar { grid-template-columns: minmax(0, 1fr); }
  /* footer ko 1 col nahi — 2 col ke bajaye 3 col + brand 2-row span,
     isse 900px par bhi footer 2 row me hi rehta hai. */
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; }
  .footer-brand { grid-column: 1; grid-row: 1 / span 2; }
  .topblock-midd, .topblock-right { width: 100%; padding-right: 0; }
  .topblock-right { margin-top: 12px; }
  .gallery-row { flex-wrap: wrap; }
  .photo, .photoitem { width: 100%; }
  .dh-twocolbx { grid-template-columns: minmax(0, 1fr); }
  .video-list-item { width: 100%; }
  .story h1 { font-size: 23px; }
  .story-body { font-size: 16.5px; line-height: 1.85; }
  .story { padding: 16px; }
  .tnbox h1 { font-size: 21px; line-height: 28px; }
  .sec-head h2 { font-size: 19px; }
  .web_stories_list { gap: 12px; }
  .stroy_list_row { flex-basis: 160px; }
  .story_img { width: 160px; aspect-ratio: 196 / 261; }
  .footer-brand .logo-img { max-width: 220px; }
  .footer-brand img.logo { width: 240px; max-width: 100%; height: auto; margin: 0 auto 14px; }
  /* naye blocks mobile par ek column */
  .hl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .audio-bar { gap: 9px; padding: 9px 11px; }
  .audio-dock { padding: 8px 10px; gap: 8px; }
  .audio-dock .ad-title { font-size: 12.5px; }
  .hl-head h2 { font-size: 18px; }
}

@media (max-width: 560px) {
  /* phone par date/clock ki jagah nahi — top bar ab bhi ek hi line me hai,
     aur search ko zyada jagah milti hai. */
  .top-date { display: none; }
  .city-chip .cc-name { max-width: 62px; overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 380px) {
  /* sabse chhote phones: shahar ka naam chhupa do (pin + caret rahenge),
     font buttons aur chip aur chhote kar do — warna horizontal scroll. */
  .city-chip .cc-name { display: none; }
  .city-chip { padding: 4px 7px; }
  .font-size button { padding: 4px 4px; min-width: 19px; font-size: 10.5px; }
  .epaper-chip { padding: 4px 7px; }
  .epaper-chip .ep-d { font-size: 12px; }
  .theme-toggle { padding: 4px 7px; }
  .top-search input { padding: 6px 7px; font-size: 12px; }
}

@media (max-width: 420px) {
  .hl-grid, .ep-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 420px) {
  .g4 { grid-template-columns: minmax(0, 1fr); }
  /* image थोड़ा छोटा, बाकी चौड़ाई headline को — gap नहीं रहेगा */
  .rhsnews1 { gap: 10px; }
  .rhsnews1 figure { flex: 0 0 96px; width: 96px; }
  .rhsnews1 figure img { height: 70px; }
  .rhsnews1 .newst-summ1 { width: auto; }
}

/* ==========================================================================
   14. New features (2026-10) — audio news, read time, hyperlocal,
       font-size zoom, mobile sticky brand bar, epaper page
   ========================================================================== */

/* ---- 14a. फ़ॉन्ट आकार ----
   Poori site px par likhi hai, isliye root zoom sabse saaf tarika hai —
   ek value se text, images aur layout sab ek saath scale hote hain.
   Firefox 126+ `zoom` support karta hai; kahin support na ho to
   site theek chalegi, bas size nahi badlega. */
html { zoom: var(--fs-zoom, 1); }
html[data-fs="s"]  { --fs-zoom: .92; }
html[data-fs="m"]  { --fs-zoom: 1; }
html[data-fs="l"]  { --fs-zoom: 1.12; }
html[data-fs="xl"] { --fs-zoom: 1.26; }

/* ---- 14b. पढ़ने का अनुमानित समय ---- */
.readtime {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--muted); font-weight: 600; white-space: nowrap;
}
.readtime svg { width: 12px; height: 12px; fill: currentColor; flex-shrink: 0; }
.meta .readtime { font-size: inherit; }
.story-meta .readtime { background: var(--grey); color: var(--ink-soft); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; }

/* article page par kitna padha — progress bar */
.read-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--yellow); z-index: 500; transition: width .12s linear;
}

/* ---- 14b-2. कब छपी खबर (relative time) ---- */
.ago-live { color: var(--muted); white-space: nowrap; cursor: help; }
.bullet-list .ago-live { color: var(--muted); font-size: 12px; }

/* article page par body ke niche wali timing line */
.story-age {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin: 22px 0 0; padding: 12px 16px;
  background: var(--grey); border-radius: 12px;
  border-left: 4px solid var(--pink);
  font-size: 14px; color: var(--ink-soft); font-weight: 600;
}
.story-age svg { width: 15px; height: 15px; fill: var(--pink); flex-shrink: 0; }
.story-age b { color: var(--pink); font-weight: 800; }

/* ---- 14c. खबर सुनें (Web Speech API) ---- */
.audio-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--grey); border: 1px solid var(--line);
  border-left: 4px solid var(--yellow);
  border-radius: 4px; padding: 10px 14px; margin: 0 0 18px;
}
.audio-bar .ab-info { flex: 1; min-width: 170px; }
.audio-bar .ab-t { font-size: 13.5px; font-weight: 700; color: var(--head); }
.audio-bar .ab-s { font-size: 12px; color: var(--muted); }
.ab-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--blue); color: #fff; border: 0; border-radius: 999px;
  padding: 8px 18px; font: inherit; font-size: 14px; font-weight: 700;
}
.ab-btn:hover { background: var(--blue-dark); }
.ab-btn svg { width: 15px; height: 15px; fill: currentColor; }
.ab-btn.stop { background: var(--red); }
.ab-btn.stop:hover { background: var(--red-dark); }
.ab-rate { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); }
.ab-rate select {
  font: inherit; font-size: 12.5px; padding: 4px 6px; border-radius: 3px;
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink);
}
.ab-words { font-size: 12px; color: var(--muted); min-width: 74px; }

/* card par chhota 🔊 button */
.audio-mini {
  position: absolute; right: 8px; bottom: 8px; z-index: 3;
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  background: rgba(0, 0, 0, .62); color: #fff; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .18s, background .18s;
}
.audio-mini svg { width: 15px; height: 15px; fill: currentColor; }
/* button position:absolute hai, isliye uske photo-wale anchor ko
   position:relative banana zaroori hai — warna button page ke
   corner me bhaag jaata hai. Sirf `position` set kar rahe hain,
   `display`/`overflow` chhedne se float layout toot jaata hai. */
.rhsnews figure > a, .rhsnews1 figure > a, .tnbox figure > a,
.topnewsbx li > a, .thumbnews > a, .video-list-item > a {
  position: relative;
}
/* touch device par hover nahi hota — button hamesha dikhao */
@media (hover: none) {
  .audio-mini { opacity: 1; }
}
.card:hover .audio-mini, .list-item:hover .audio-mini, .rhsnews:hover .audio-mini,
.audio-mini:focus-visible, .audio-mini.playing { opacity: 1; }
.audio-mini:hover { background: var(--yellow); color: #111; }
.audio-mini.playing { background: var(--yellow); color: #111; animation: audio-pulse 1.4s infinite; }
@keyframes audio-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 224, 27, .6); }
  50% { box-shadow: 0 0 0 7px rgba(255, 224, 27, 0); }
}
/* touch device par hover nahi hota — hamesha dikhao */
@media (hover: none) { .audio-mini { opacity: 1; } }

/* bottom me latka hua mini player */
.audio-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 480;
  background: #141414; color: #fff; border-top: 3px solid var(--yellow);
  display: flex; align-items: center; gap: 12px; padding: 9px 14px;
}
.audio-dock[hidden] { display: none; }
.audio-dock .ad-txt { flex: 1; min-width: 0; }
.audio-dock .ad-cat { font-size: 11px; color: var(--yellow); font-weight: 700; }
.audio-dock .ad-title {
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.audio-dock .ad-bar { height: 3px; background: #333; margin-top: 5px; border-radius: 2px; overflow: hidden; }
.audio-dock .ad-bar i { display: block; height: 100%; width: 0; background: var(--yellow); transition: width .3s linear; }
.dock-btn {
  border: 1px solid #3f3f3f; background: #222; color: #fff; cursor: pointer;
  border-radius: 4px; width: 34px; height: 34px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.dock-btn:hover { background: var(--yellow); color: #111; border-color: var(--yellow); }
.dock-btn svg { width: 15px; height: 15px; fill: currentColor; }

/* ---- 14d. हाइपरलोकल / मेरा इलाका ---- */
.hyperlocal { background: var(--card); border: 1px solid var(--line-3); border-bottom: 2px solid var(--line-2); border-radius: var(--radius); padding: 16px 18px; margin: 0 0 20px; }
.hl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.hl-head h2 { font-size: 20px; color: var(--head); display: flex; align-items: center; gap: 8px; }
.hl-head .hl-city { color: var(--red); }
.hl-head .hl-note { margin-left: auto; font-size: 12px; color: var(--muted); }
.hl-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; scrollbar-width: thin; }
.hl-chips a {
  flex-shrink: 0; border: 1px solid var(--line-2); border-radius: 999px;
  padding: 5px 13px; font-size: 13px; font-weight: 600; color: var(--ink-soft); background: var(--card-2);
}
.hl-chips a:hover { border-color: var(--blue); color: var(--blue); }
.hl-chips a.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.hl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hl-empty { color: var(--muted); font-size: 14.5px; padding: 14px 0; }
.hl-empty a { color: var(--blue); font-weight: 700; text-decoration: underline; }
.hl-item { border-bottom: 1px solid var(--line-3); padding-bottom: 10px; }
.hl-item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 3px; }
.hl-item h4 { font-size: 14.5px; line-height: 1.4; margin-top: 7px; }
.hl-item .meta { margin-top: 4px; }
.dist-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: #eaf3ff; color: var(--blue); border-radius: 3px;
  padding: 2px 7px; font-size: 11.5px; font-weight: 700;
}
.dist-tag.gps { background: #fff4d6; color: #8a6100; }

/* ---- 14e. ई-पेपर page (The Pioneer jaisa page-wise अंक) ---- */

/* शीर्ष पट्टी */
.ep-mast {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; background: #111; color: #fff; border-radius: 4px;
  padding: 13px 18px; margin-bottom: 14px;
}
.ep-mast-l { display: flex; align-items: baseline; gap: 11px; }
.ep-mast-t { font-family: var(--font-display); font-size: 27px; font-weight: 800; line-height: 1; color: var(--yellow); }
.ep-mast-ed { font-size: 13px; color: #c9c9c9; font-weight: 600; }
.ep-mast-c { display: flex; align-items: center; gap: 6px; }
.ep-nav {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid #4a4a4a;
  background: #262626; color: #fff; font-size: 17px; line-height: 1; cursor: pointer;
}
.ep-nav:hover { background: var(--blue); border-color: var(--blue); }
#epDate {
  font: inherit; font-size: 13.5px; font-weight: 600; color: #fff;
  background: #1c1c1c; border: 1px solid #4a4a4a; border-radius: 4px; padding: 5px 9px;
}
/* date input ka native calendar icon dark background me na dikhe */
#epDate::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }
.ep-mast-r { display: flex; align-items: center; gap: 11px; }
.ep-pages { font-size: 12.5px; font-weight: 700; color: #fff; background: #333; border-radius: 3px; padding: 3px 9px; }
.ep-price { font-size: 13px; font-weight: 700; color: var(--yellow); }

/* उपलब्ध अंकों की पट्टी */
.ep-datestrip { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ep-tab {
  border: 1px solid var(--line-3); background: var(--card); cursor: pointer;
  font: inherit; border-radius: 4px; padding: 7px 13px; text-align: left; line-height: 1.35;
  display: flex; flex-direction: column; gap: 2px; color: var(--head); font-size: 13.5px; font-weight: 700;
}
.ep-tab b { font-size: 11px; color: var(--muted); font-weight: 600; }
.ep-tab:hover { border-color: var(--yellow); background: #fffdf2; }
.ep-tab.on { background: var(--yellow); border-color: var(--yellow); color: #111; }
.ep-tab.on b { color: #4a3b00; }

.ep-viewbar {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  border-bottom: 2px solid var(--red); padding-bottom: 8px; margin-bottom: 18px;
}
.ep-viewbar-t { font-family: var(--font-display); font-size: 21px; font-weight: 800; color: var(--head); }
.ep-viewbar-h { font-size: 13.5px; color: var(--ink-soft); }

/* PDF ankon ka grid */
.ep-issues { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.ep-note {
  margin-top: 22px; background: #fffdf2; border: 1px solid var(--yellow);
  border-left: 4px solid var(--yellow); border-radius: 4px; padding: 14px 16px;
  font-size: 14px; line-height: 1.7; color: var(--ink-soft);
}
.ep-note b { color: var(--head); }

/* ---- पूरा पृष्ठ खोलने वाला reader ---- */
.ep-reader {
  position: fixed; inset: 0; z-index: 900; background: #2b2b2b;
  display: flex; flex-direction: column;
}
.ep-reader[hidden] { display: none; }
.epr-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #111; color: #fff; padding: 9px 14px; flex: 0 0 auto;
}
.epr-brand { font-family: var(--font-display); font-weight: 800; color: var(--yellow); font-size: 16px; }
.epr-title { font-size: 15px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.epr-title em { font-style: normal; font-weight: 600; color: #bdbdbd; margin-left: 5px; text-transform: none; letter-spacing: 0; }
.epr-no { font-size: 12.5px; color: #bbb; background: #2c2c2c; border-radius: 3px; padding: 3px 8px; }
.epr-tools { margin-left: auto; display: flex; align-items: center; gap: 5px; }
.epr-tools button {
  min-width: 31px; height: 31px; border: 1px solid #4a4a4a; background: #262626; color: #fff;
  border-radius: 4px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.epr-tools button:hover:not(:disabled) { background: var(--blue); border-color: var(--blue); }
.epr-tools button:disabled { opacity: .38; cursor: default; }
.epr-tools .epr-x { background: #b00020; border-color: #b00020; margin-left: 7px; }
.epr-body { flex: 1 1 auto; overflow: auto; padding: 22px; display: flex; justify-content: center; align-items: flex-start; }
.epr-stage { transform: scale(var(--z, 1)); transform-origin: top center; }

@media (max-width: 900px) {
  .ep-issues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ep-issues { grid-template-columns: minmax(0, 1fr); }
  .ep-mast { justify-content: center; text-align: center; }
  .ep-viewbar-t { font-size: 18px; }
}

.btn-epaper2 {
  display: inline-flex; align-items: center; gap: 7px; background: var(--yellow);
  color: #000;                       /* पीले बटन पर text काला — साफ़ दिखे */
  border: 0; border-radius: 3px; padding: 8px 16px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.btn-epaper2:hover { background: #ffc400; color: #000; }
.btn-epaper2 * { color: #000; }

/* ई-पेपर chip ka text black. `.topbar a` ki specificity (0,1,1) is rule
   (0,1,0) se zyada hai, isliye yahan jaan-boojhkar upar specificity
   rakhni padti hai — warna text #e9e9e9 (light grey) hi rehta. */
.topbar a.epaper-chip,
.epaper-chip,
.epaper-chip .ep-d,
.epaper-chip .ep-sub { color: #000; }
.topbar a.epaper-chip:hover,
.epaper-chip:hover { color: #000; }

/* ---- 14f. छोटा toast ---- */
.dst-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(14px);
  background: #141414; color: #fff; padding: 9px 18px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; z-index: 600; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}
.dst-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media print {
  .topbar, .nav, .breaking, .ad-strip, .sidebar, .footer, .totop, .share, .teanding_bg { display: none !important; }
  .home-grid, .layout-main, .story-layout { display: block; }
  body { background: #fff; }
}

/* ============================================================ ई-पेपर (PDF)
   Asli Divya Shakti Times editions. Cards hold the rendered front page,
   the reader shows full-page JPEGs so no PDF plugin is needed.          */

.ep-issues { display: grid; gap: 16px; margin-top: 4px; }

.ep-card {
  display: grid; grid-template-columns: 168px 1fr; gap: 16px; align-items: start;
  background: var(--card, #fff); border: 1px solid var(--line, #e2e2e2);
  border-radius: 6px; padding: 12px; transition: border-color .15s, box-shadow .15s;
}
.ep-card:hover { border-color: var(--yellow); box-shadow: 0 3px 14px rgba(0, 0, 0, .08); }
.ep-card.on { border-color: var(--yellow); box-shadow: 0 0 0 2px rgba(255, 204, 0, .22); }

.ep-card-thumb {
  position: relative; display: block; width: 100%; padding: 0; cursor: pointer;
  background: #f4f4f4; border: 1px solid var(--line, #e2e2e2); border-radius: 3px;
  overflow: hidden; aspect-ratio: 1149 / 1546;
}
.ep-card-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.ep-card-no {
  position: absolute; right: 5px; bottom: 5px; background: rgba(0, 0, 0, .78); color: #fff;
  font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 2px;
}

.ep-card-body { min-width: 0; }
.ep-card-h { margin: 0 0 4px; font-size: 18px; line-height: 1.3; }
.ep-card-meta { font-size: 13px; color: var(--muted, #666); margin-bottom: 10px; }
.ep-card-cta { display: flex; gap: 9px; flex-wrap: wrap; }

.ep-btn, .ep-btn2 {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 13.5px; font-weight: 700; line-height: 1;
  padding: 9px 15px; border-radius: 3px; cursor: pointer; text-decoration: none;
}
.ep-btn { background: var(--yellow); color: #000; border: 1px solid var(--yellow); }
.ep-btn:hover { background: #ffc400; color: #000; }
.ep-btn2 { background: transparent; color: inherit; border: 1px solid var(--line, #cfcfcf); }
.ep-btn2:hover { border-color: var(--yellow); color: inherit; }

/* ---- reader ---- */
.epr-img {
  display: block; width: 100%; height: auto; background: #fff;
  box-shadow: 0 6px 30px rgba(0, 0, 0, .3);
}
.epr-stage { width: calc(100% * var(--z, 1)); max-width: none; margin: 0 auto; }

.epr-dl {
  display: inline-flex; align-items: center; height: 30px; padding: 0 11px;
  background: var(--yellow); color: #000; border-radius: 3px;
  font-size: 12px; font-weight: 800; text-decoration: none; letter-spacing: .3px;
}
.epr-dl:hover { background: #ffc400; color: #000; }

.epr-strip {
  display: flex; gap: 8px; overflow-x: auto; padding: 10px 12px;
  background: #141414; border-top: 1px solid #333;
}
.epr-pg {
  position: relative; flex: 0 0 auto; width: 54px; padding: 0; cursor: pointer;
  background: #222; border: 2px solid transparent; border-radius: 3px; overflow: hidden;
  aspect-ratio: 1149 / 1546;
}
.epr-pg img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.epr-pg b {
  position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .8);
  color: #fff; font-size: 11px; line-height: 1.5;
}
.epr-pg.on { border-color: var(--yellow); }

@media (max-width: 640px) {
  .ep-card { grid-template-columns: 116px 1fr; gap: 12px; padding: 10px; }
  .ep-card-h { font-size: 16px; }
  .ep-btn, .ep-btn2 { padding: 8px 12px; font-size: 12.5px; }
  .epr-title { display: none; }
}

/* Uniform home image sizes: keep all card/thumb images consistent across home */
/* Uniform home image sizes - enforced at end */
/* All home thumbnails in one uniform ratio */
/* uniform home thumbnails */
.card-img--fixed,
.rhsnews figure,
.topnbox figure,
.list-item .thumb,
.dh-twocol-thumb,
.story_card .story_img,
.video-list-item .v-thumb,
.photoitem .box1 a,
.photogallery .photo figure.gradientimg,
.card-img {
  aspect-ratio: 4 / 3 !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
}
.card-img--fixed img,
.rhsnews figure img,
.topnbox figure img,
.list-item .thumb img,
.trend-item img,
.dh-twocol-thumb img,
.story_card .story_img img,
.video-list-item .v-thumb img,
.photoitem .box1 a img,
.photogallery .photo figure.gradientimg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* trending rotator — upar wale blanket "display:block !important" list me
   .trend-item bhi tha, jiski wajah se saari 5 slides ek saath dikh rahi thi
   aur active class ka koi visual effect nahi hota tha (auto-rotate dikhai
   nahi deta tha). Yahan rotator ka asli rule wapas priority se set kar rahe hain. */
.teanding_grid .trend-item { display: none !important; }
.teanding_grid .trend-item.active { display: block !important; }
/* Upar wale blanket rule me .trend-item img ka "height:100% !important" hai,
   isliye image poori box height le rahi thi aur title + dots uske upar
   chadh jaate the. Rotator me image ko apne aspect-ratio par rakhte hain
   aur box ko flex column bana kar dots ko hamesha niche pin kar dete hain. */
.teanding_grid .trend-item img {
  height: auto !important;
  aspect-ratio: 16 / 10;
  min-height: 0;
}
.teanding_grid { display: flex; flex-direction: column; }
.teanding_grid .trend-dots { flex: 0 0 auto; margin-top: 10px; }
.teanding_bg .trend-dots { margin-top: 12px; padding-bottom: 2px; }

/* ---------- topnewsbx: float clear ----------
   120x80 thumbnail float:left hai, isliye title/meta ko uske bagal me
   fit karo warna text image ke upar chadh jaata hai. */
.topnewsbx li h2 { margin-left: 135px; }
.topnewsbx li .meta { margin-left: 135px; }
.topnewsbx li:first-child h2,
.topnewsbx li:first-child .meta { margin-left: 0; }

/* ---------- topnewsbx thumbnails (uniform block se bahar) ----------
   Pehli entry badi 16:9, baaki 120x80 floated thumb. */
.topnewsbx li > a { display: block; float: left; width: 120px; height: 80px; aspect-ratio: auto; overflow: hidden; }
.topnewsbx li > a img { width: 100%; height: 100%; object-fit: cover; display: block; }
.topnewsbx li:first-child > a { float: none; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0 0 8px; }

/* ======================================================== hero layout
   Hero do column ka hai: .tblock-mdd (mukhya khabar) + .tblock-right
   (5 chhoti khabrein). Pehle yahan teen column the aur teenon ke neeche
   widgets the - #leadExtras (वीडियो न्यूज़), #sideExtras (सबसे ज़्यादा पढ़ी
   गई) aur #heroRail (लाइव अपडेट / वेब स्टोरीज़ / ट्रेंडिंग टैग). Ye saare
   widgets ab neeche wale .home-col right column mein hain, isliye in
   teenon ke markup aur rules dono hataye gaye hain. */
.tblockmain { align-items: flex-start; }

/* ================================================ topbar overflow fix
   .topbar .wrap { flex-wrap: nowrap } + .topbar-right { flex-wrap: nowrap }
   + .font-size { flex-shrink: 0 } ka matlab: 900px par poora right group
   (font A- A A+ + theme toggle + social) shrink hi nahi hota, isliye
   topbar-right viewport se bahar nikal jaata tha aur page horizontally
   scroll ho jata tha (900px par 94px, 390px par 75px extra).

   Ye pehle se bug hai (hero widgets add karne se pehle bhi tha), par ab
   theek karna zaroori hai. Chhote screens par low-priority cheezein
   chhupate hain: font-size group, theme toggle ka label, aur social icons. */
@media (max-width: 1066px) {
  .topbar .wrap { flex-wrap: nowrap; }
  .topbar-right { flex-wrap: nowrap; overflow: hidden; }
  /* A- / A / A+ buttons: teenon ki jagah ek compact control */
  .font-size button { padding: 6px 6px; min-width: 22px; }
}

@media (max-width: 820px) {
  .font-size { display: none; }          /* font size toolbar hide */
  .theme-toggle .tt-label { display: none; }  /* sirf icon */
}

@media (max-width: 560px) {
  .top-social { display: none; }         /* social icons hide */
  .top-search { min-width: 40px; }
  .topbar .wrap { gap: 6px; }
}

/* .breaking { max-width: 1041px } sirf max hai, width nahi. 390px par
   .breaking-label ka white-space: nowrap + flex-shrink: 0 use 43px bahar
   dhakel deta tha, isliye page horizontally scroll hota tha.
   max-width ke saath width: 100% zaroori hai. */
.breaking { width: 100%; }
@media (max-width: 560px) {
  .breaking { margin: 16px auto 22px; }
  .breaking-label { font-size: 13px; padding: 10px 10px; }
  .breaking-row { min-height: 48px; }
}

/* logo-img mobile fix — image ka width chhoti screen par
   page se bahar na jaye (pehle .logo-text ke liye tha) */
.brand .logo-img { max-width: min(630px, 84vw); }

@media (max-width: 480px) {
  .brand .logo-img { max-width: 82vw; }
}

/* ---------- footer: chhoti screens (last me, taaki 900px rule override na kare) ---------- */
@media (max-width: 560px) {
  .footer-top { padding: 20px 0 14px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
  .footer-brand { grid-column: 1 / -1; grid-row: auto; }
  .footer-contact li, .footer p { font-size: 12.5px; }
  .footer-bottom { padding: 9px 8px 12px; }
}

@media (max-width: 400px) {
  .footer-cols { grid-template-columns: minmax(0, 1fr); }
}