@charset "utf-8";

/* =====================================================================
   T News — Template 2 "Editorial"
   Mobile-first. Breakpoints: 480 / 768 / 1024 / 1280 / 1440.
   ===================================================================== */

/* ------------------------------- TOKENS ------------------------------- */
:root{
  --navy:#101A91;
  --navy-deep:#0B1270;
  --navy-ink:#070C4F;
  --red:#ED1018;
  --red-dark:#C70D14;

  --ink:#111827;
  --ink-2:#4B5563;
  --muted:#6B7280;
  --grey-3:#9CA3AF;

  --line:#E5E7EB;
  --line-2:#DDE1E7;
  --line-3:#EEF0F3;

  --page:#F8FCFC;
  --band:#EEF1F4;
  --tint:#EEF1F8;
  --ph-bg:#E2E7F0;
  --ph-ink:#8A93A6;
  --white:#FFFFFF;
  --lav:#C9CDF0;
  --lav-2:#B9BDE6;
  --foot-ink:#D7DAF2;

  --ad-bg:#EDEFF2;
  --ad-br:#B8BEC8;

  --topbar-h:56px;
  --chips-h:52px;
  --tabbar-h:56px;

  --sans:'Roboto',system-ui,-apple-system,'Segoe UI','Noto Sans Telugu',sans-serif;
  --cond:'Roboto Condensed','Roboto',system-ui,'Noto Sans Telugu',sans-serif;
  --serif:'Roboto Serif',Georgia,'Times New Roman','Noto Sans Telugu',serif;
}

/* -------------------------------- RESET ------------------------------- */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--topbar-h) + var(--chips-h) + 8px);
}

body{
  margin:0;
  width:100%;
  max-width:100%;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  color:var(--ink);
  background:var(--page);
  padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px));
  -webkit-font-smoothing:antialiased;
}

body.nav-open{overflow:hidden}

img,svg,video{max-width:100%;display:block}
img{height:auto}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}

:focus-visible{outline:3px solid var(--red);outline-offset:2px}

/* ------------------------------ UTILITIES ----------------------------- */
.wrap{
  width:100%;
  max-width:1280px;
  margin-inline:auto;
  padding-inline:16px;
}

.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.skip{
  position:absolute;left:8px;top:-60px;z-index:200;
  background:var(--navy);color:var(--white);
  padding:12px 16px;border-radius:4px;font-weight:700;
  transition:top .15s ease;
}
.skip:focus{top:8px}

.hl{
  font-family:var(--cond);
  font-weight:700;
  line-height:1.2;
  color:var(--ink);
  overflow-wrap:anywhere;
}

.story{display:block;min-width:0}
.story:hover .hl{color:var(--navy);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.story:hover .ph img{filter:brightness(.94)}

.meta{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin-top:8px;font-size:13px;color:var(--muted);min-width:0;
}
.meta svg{width:14px;height:14px;flex:none}
.meta strong{color:var(--ink);font-weight:500}
.meta-tight{margin-top:4px}

.kicker{
  display:inline-block;
  font-size:12px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--navy);margin-bottom:6px;
}

.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 8px;border-radius:2px;line-height:1.2;
}
.b-blue{background:var(--navy);color:var(--white)}
.b-red{background:var(--red);color:var(--white)}
.b-spon{background:var(--white);color:var(--ink-2);border:1px solid var(--grey-3);font-weight:500}
.b-spon-xs{font-size:10px;padding:2px 6px}
.b-excl{border-color:var(--navy);color:var(--navy)}

.dot{
  width:8px;height:8px;border-radius:50%;background:var(--white);flex:none;
  animation:tn-pulse 1.4s ease-in-out infinite;
}
@keyframes tn-pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* --------------------------- IMAGE CONTAINERS -------------------------- */
.ph{
  position:relative;
  background:var(--ph-bg);
  color:var(--ph-ink);
  overflow:hidden;
  border-radius:2px;
  min-width:0;
}
.ph img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  transition:filter .15s ease;
}
.ph.sq{border-radius:0}

.r169{aspect-ratio:16/9}
.r43{aspect-ratio:4/3}
.r11{aspect-ratio:1/1}

/* gradient scrim so overlay text stays readable over a photo */
.scrim-b::after{
  content:"";position:absolute;inset:auto 0 0 0;height:62%;
  background:linear-gradient(to top,rgba(7,12,79,.72),rgba(7,12,79,.28) 46%,rgba(7,12,79,0));
  pointer-events:none;
}

.ph-cap{
  position:absolute;left:8px;bottom:8px;z-index:2;
  font-size:11px;line-height:1.3;color:var(--white);
  background:rgba(7,12,79,.55);
  padding:2px 6px;border-radius:2px;
  max-width:calc(100% - 16px);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ------------------------------ AD SLOTS ------------------------------ */
.ad{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;min-width:0}
.ad-lab{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ad-box{
  width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;background:var(--ad-bg);border:1px dashed var(--ad-br);
  color:var(--muted);font-size:12px;text-align:center;border-radius:2px;padding:8px;
}
.ad-box strong{font-weight:500;color:var(--ink-2);font-size:14px}
.ad-band{padding-block:16px}
.ad-feed{padding-top:32px}
.ad-bottom{padding-top:40px}

.ad-lb{max-width:320px;height:50px}
.ad-lb strong{font-size:12px}
.ad-lb .ad-sub{display:none}
.ad-sub-sm{display:block;font-size:11px;letter-spacing:.04em}
.ad-mr{max-width:300px;height:250px}
.ad-hp{max-width:300px;height:600px}
.ad-hp-wrap{display:none}

/* ============================ UTILITY STRIP ============================ */
.util{display:none;background:var(--white);border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.util .wrap{display:flex;justify-content:space-between;align-items:center;min-height:36px;gap:16px}
.util-l{min-width:0}
.util-r{display:flex;gap:4px;align-items:center}
.util-r a{padding:6px 8px;border-radius:2px}
.util-r a:hover{color:var(--navy);background:var(--tint)}
.util-r .on{color:var(--navy);font-weight:500}

/* =============================== MASTHEAD =============================== */
.hdr{
  position:sticky;top:0;z-index:50;
  background:var(--white);
  box-shadow:0 1px 0 var(--line);
}
.hdr .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:4px;min-height:var(--topbar-h);
  padding-inline:8px;
}

.logo{display:inline-flex;align-items:baseline;gap:4px;line-height:1;min-width:0;min-height:44px;padding-block:7px}
.logo-t{font-family:var(--serif);font-weight:900;font-size:clamp(28px, 8vw, 34px);color:var(--red);letter-spacing:-.02em}
.logo-n{font-family:var(--sans);font-weight:900;font-size:clamp(16px, 4.4vw, 19px);color:var(--navy);letter-spacing:.05em}

.hdr-tools{display:flex;align-items:center;gap:0;min-width:0}

.ibtn{
  width:44px;height:44px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;background:transparent;color:var(--ink);
  border-radius:4px;cursor:pointer;padding:0;
}
.ibtn:hover{background:var(--tint);color:var(--navy)}
.ibtn svg{width:22px;height:22px}

.burger{display:inline-flex}
.account-ibtn,.sections-ibtn{display:none}
.search-ibtn{display:inline-flex}

.live-btn{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:0 10px;margin-right:2px;
  background:var(--red);color:var(--white);
  font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  border-radius:4px;white-space:nowrap;
}
.live-btn:hover{background:var(--red-dark);color:var(--white)}

.search{
  display:none;align-items:center;
  border:1px solid #D1D5DB;border-radius:4px;background:var(--page);
  height:44px;padding-left:12px;width:300px;max-width:100%;
}
.search input{
  border:0;background:transparent;font:inherit;font-size:15px;
  flex:1;min-width:0;height:100%;color:var(--ink);
}
.search input::placeholder{color:var(--muted)}
.search input:focus,.search input:focus-visible{outline:none}
.search:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px rgba(16,26,145,.18)}

/* mobile: the search icon reveals a full-width field under the bar */
.hdr.search-open .search{
  display:flex;
  position:absolute;left:12px;right:12px;top:calc(var(--topbar-h) + 4px);
  width:auto;z-index:51;background:var(--white);
  box-shadow:0 10px 24px rgba(17,24,39,.16);
}

/* ============================ SECTION CHIPS ============================ */
.nav{
  position:sticky;top:var(--topbar-h);z-index:45;
  background:var(--navy);
}
.nav .wrap{display:flex;align-items:stretch;padding-inline:8px}
.nav-list{
  display:flex;align-items:center;gap:8px;
  flex:1;min-width:0;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  padding:4px 0;
  min-height:var(--chips-h);
}
.nav-list::-webkit-scrollbar{display:none}
.nav-list li{flex:none;scroll-snap-align:start}
.nav-list a{
  display:inline-flex;align-items:center;
  min-height:44px;padding:0 14px;
  color:var(--white);font-weight:500;font-size:14px;white-space:nowrap;
  border:1px solid rgba(255,255,255,.32);border-radius:999px;
  background:transparent;
}
.nav-list a:hover{background:rgba(255,255,255,.14);color:var(--white)}
.nav-list a.active{background:var(--red);border-color:var(--red);color:var(--white);font-weight:700}
.nav-list a:focus-visible{outline:3px solid var(--white);outline-offset:2px}

/* ========================= DRAWER / MEGA MENU ========================== */
.scrim{
  position:fixed;inset:0;z-index:60;
  background:rgba(7,12,79,.55);
  opacity:0;visibility:hidden;
  transition:opacity .2s ease,visibility .2s ease;
}
.scrim.is-open{opacity:1;visibility:visible}

.drawer{
  position:fixed;z-index:70;top:0;left:0;bottom:0;
  width:min(86vw,340px);
  background:var(--white);
  box-shadow:4px 0 28px rgba(7,12,79,.22);
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(-100%);visibility:hidden;
  transition:transform .24s ease,visibility .24s ease;
  padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));
}
.drawer.is-open{transform:translateX(0);visibility:visible}
.drawer-inner{padding-inline:12px}

.drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;min-height:var(--topbar-h);
  border-bottom:1px solid var(--line);margin-bottom:8px;
}
.drawer-head .logo-t{font-size:30px}
.drawer-head .logo-n{font-size:17px}

.drawer-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
.drawer-grid a{
  display:flex;align-items:center;min-height:48px;
  padding:10px 12px;font-weight:500;border-radius:4px;
  border-bottom:1px solid var(--line-3);
}
.drawer-grid a:hover{background:var(--tint);color:var(--navy)}

.drawer-foot{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:16px;padding:16px 4px 4px;
  border-top:1px solid var(--line);
}
.drawer-foot a{
  display:inline-flex;align-items:center;min-height:44px;
  padding:0 14px;border:1px solid var(--line);border-radius:999px;
  font-size:14px;font-weight:500;color:var(--ink-2);
}
.drawer-foot a.on{border-color:var(--navy);color:var(--navy)}
.drawer-foot a:hover{background:var(--tint);color:var(--navy)}

/* ========================== BREAKING TICKER =========================== */
.ticker{background:var(--white);border-bottom:1px solid var(--line)}
.ticker .wrap{display:flex;align-items:center;gap:10px;min-height:52px}
.tk-badge{flex:none;font-size:12px;padding:6px 8px}
.tk-track{flex:1;min-width:0;overflow:hidden}
/* spacing is a trailing margin, not gap: with gap the -50% loop point fell
   half a gap short and the ticker jumped 16px every cycle */
.tk-move{display:flex;width:max-content}
.tk-move > .tk-item{margin-right:32px}
.tk-move.paused,.tk-track:hover .tk-move{animation-play-state:paused}
.tk-item{display:inline-flex;align-items:center;min-height:44px;gap:10px;white-space:nowrap;font-weight:500;font-size:14px;color:var(--ink)}
.tk-item:hover{color:var(--red)}
.tk-time{color:var(--red);font-weight:700;font-size:13px}
.tk-sep{width:6px;height:6px;background:var(--red);border-radius:50%;flex:none}
.tk-ctl{
  width:44px;height:44px;flex:none;
  border:1px solid var(--line);background:var(--white);border-radius:4px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);
}
.tk-ctl:hover{border-color:var(--navy);color:var(--navy)}
.tk-ctl svg{width:16px;height:16px}
.tk-ctl .ic-play{display:none}
.tk-ctl.is-paused .ic-play{display:block}
.tk-ctl.is-paused .ic-pause{display:none}

/* ============================== MAIN GRID ============================== */
.main{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"lead" "latest" "more" "side";
  gap:28px;
  align-items:start;
  padding-top:8px;
}
.g-lead{grid-area:lead;min-width:0}
.g-latest{grid-area:latest;min-width:0}
.g-side{grid-area:side;min-width:0;display:flex;flex-direction:column;gap:28px}

/* ------------------------------ LEAD STORY ---------------------------- */
.lead-tags{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap}
.lead-hl{
  font-size:clamp(1.5rem, 1.08rem + 2.1vw, 1.875rem);
  line-height:1.12;margin-top:12px;letter-spacing:-.01em;
}
.lead-sum{font-size:16px;line-height:1.55;margin-top:12px;color:var(--ink)}

.sub2{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:20px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line);
}
.sub2 .story{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:start}
.sub2 .hl{font-size:clamp(1rem, .9rem + .5vw, 1.125rem);margin-top:0}
.sub2 .kicker{margin-bottom:4px}
.sub2 p{display:none}
.sub2 .ph-cap{display:none}
.sub2-body{min-width:0}

/* ----------------------------- LATEST LIST ---------------------------- */
/* min-height equalises every section-header row. A row containing a "more"
   link is 46px tall (its 44px tap target plus the h2's -2px margin), while
   a row without one is only as tall as the heading - so in the two-column
   sections the left heading sat ~13px below the right one. Bottom
   alignment is kept deliberately: the h2's red underline is meant to land
   exactly on the row's navy rule, which top-aligning would break. */
.sec-h{
  display:flex;justify-content:space-between;align-items:flex-end;
  border-bottom:2px solid var(--navy);margin-bottom:18px;gap:12px;flex-wrap:wrap;
}
.sec-h h2{
  margin:0 0 -2px;padding-bottom:8px;
  border-bottom:4px solid var(--red);
  font-family:var(--cond);font-weight:700;
  font-size:clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
  letter-spacing:.03em;text-transform:uppercase;color:var(--navy);line-height:1.1;
}
.sec-h h2.h-grey{color:var(--ink-2);border-bottom-color:var(--grey-3)}
.sec-h a{
  font-size:14px;font-weight:500;color:var(--navy);
  display:inline-flex;align-items:center;gap:4px;padding:8px 0 10px;min-height:44px;
}
.sec-h a:hover{text-decoration:underline}
.sec-h svg{width:16px;height:16px;flex:none}

.sec{padding-top:36px}

.lst-i{border-bottom:1px solid var(--line)}
.lst-i .story{display:grid;grid-template-columns:minmax(0,1fr) 88px;gap:14px;padding:14px 0;align-items:start}
.lst-body{min-width:0}
.lst-i .hl{font-size:clamp(1rem, .95rem + .25vw, 1.0625rem);line-height:1.28}
.lst-top{display:flex;gap:8px;align-items:center;font-size:12px;margin-bottom:4px;flex-wrap:wrap}
.lst-time{color:var(--muted);font-weight:500}
.lst-cat{color:var(--navy);font-weight:500;text-transform:uppercase;letter-spacing:.06em}

.spon-card{
  display:block;background:var(--white);border:1px solid var(--line);
  border-radius:4px;padding:14px;margin:14px 0;
}
.spon-card .hl{font-size:16px;margin-top:10px;font-weight:500}
.spon-by{font-size:12px;color:var(--muted);margin-top:6px}

/* -------------------------------- CARDS ------------------------------- */
.card{background:var(--white);border:1px solid var(--line);border-radius:4px;padding:18px}
.card .sec-h{margin-bottom:6px}
.card .sec-h h2{font-size:19px}

.num-list li{border-bottom:1px solid var(--line-3)}
.num-list li:last-child{border-bottom:0}
.num-list .story{display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px;padding:12px 0;align-items:start}
.num{font-family:var(--cond);font-weight:700;font-size:28px;line-height:1;color:var(--navy)}
.num-list .hl{font-size:16px;line-height:1.3}

.side-spon{display:flex;flex-direction:column;gap:16px;padding-top:8px}
.side-spon .story{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:start}
.side-spon .hl{font-size:15px;font-weight:500;line-height:1.3;margin-top:6px}

/* =============================== LIVE TV =============================== */
.live{background:var(--navy);color:var(--white);margin-top:40px;padding:32px 0 36px}
.live .sec-h{border-bottom-color:rgba(255,255,255,.35)}
.live .sec-h h2{color:var(--white)}
.live .sec-h a{color:var(--white)}

.live-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.ch-wrap{min-width:0}

.player{
  position:relative;aspect-ratio:16/9;background:var(--navy-ink);
  border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.player-wm{
  position:absolute;right:14px;top:12px;
  font-family:var(--serif);font-weight:900;
  font-size:clamp(18px, 4vw, 28px);color:rgba(255,255,255,.18);
}
.player-top{position:absolute;top:12px;left:12px;display:flex;gap:8px;align-items:center;max-width:70%;min-width:0}
.player-ch{font-size:12px;color:var(--lav);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-bot{
  position:absolute;left:0;right:0;bottom:0;
  padding:10px 8px 10px 14px;
  background:rgba(7,12,79,.9);
  display:flex;align-items:center;gap:8px;
}
.player-bot .now{flex:1;min-width:0}
.player-bot .now strong{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-bot .now span{font-size:12px;color:var(--lav);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player .ibtn{color:var(--white)}
.player .ibtn:hover{background:rgba(255,255,255,.14);color:var(--white)}
.player .hide-sm{display:none}

.bigplay{
  width:64px;height:64px;border-radius:50%;
  background:var(--red);color:var(--white);border:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform .15s ease,background .15s ease;
}
.bigplay:hover{background:var(--red-dark);transform:scale(1.05)}
.bigplay svg{width:28px;height:28px;margin-left:3px}

.ch-head{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--lav);margin-bottom:12px}
.ch-list{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.ch{
  width:100%;display:grid;grid-template-columns:48px minmax(0,1fr) auto;
  gap:12px;align-items:center;padding:12px;border-radius:4px;
  border:1px solid rgba(255,255,255,.25);background:transparent;color:var(--white);
  text-align:left;cursor:pointer;min-height:72px;
}
.ch:hover{background:rgba(255,255,255,.1)}
.ch:focus-visible{outline:3px solid var(--white);outline-offset:2px}
.ch.on{background:var(--white);color:var(--ink);border-color:var(--white)}
.ch-logo{
  width:48px;height:48px;border-radius:4px;background:var(--red);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:900;font-size:26px;
}
.ch-txt{min-width:0}
.ch-name{font-weight:700;font-size:15px;display:block;overflow-wrap:anywhere}
.ch-show{font-size:13px;color:var(--lav);display:block;overflow-wrap:anywhere}
.ch.on .ch-show{color:var(--muted)}
.ch-state{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--lav)}
.ch.on .ch-state{color:var(--red)}

/* ============================ EDITOR'S PICKS =========================== */
.picks{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.picks .kicker{margin-top:14px;margin-bottom:4px}
.picks .hl{font-size:clamp(1.0625rem, 1rem + .4vw, 1.1875rem);margin-top:4px}

/* ====================== ANALYSIS / OPINION + MOST READ ================== */
.op-row{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
.ops li{border-bottom:1px solid var(--line)}
.ops li:first-child .story{padding-top:4px}
.ops .story{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;padding:18px 0;align-items:start}
.avatar{
  width:48px;height:48px;border-radius:50%;
  background:#E6E8F6;color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--cond);font-weight:700;font-size:17px;flex:none;
}
.ops .hl{font-size:clamp(1.0625rem, .98rem + .5vw, 1.1875rem);line-height:1.2;margin-top:4px}
.ops p{margin-top:8px;font-size:15px;color:var(--ink)}
.ops .by{font-size:13px;color:var(--muted);margin-top:10px}
.ops .by strong{color:var(--ink);font-weight:500}
.op-tag{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);font-style:italic}

/* ========================== SPONSORED ARTICLES ========================== */
.spon-wrap{
  background:var(--band);
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  margin-top:40px;padding:28px 0 32px;
}
.spon-wrap .sec-h{border-bottom-color:var(--grey-3)}
.spon-wrap .sec-h h2{color:var(--ink-2);border-bottom-color:var(--grey-3)}
.spon-note{font-size:13px;color:var(--muted);padding-bottom:10px}

.spon-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.spon-tile{
  display:block;background:var(--white);border:1px solid var(--line-2);
  border-radius:4px;overflow:hidden;height:100%;min-width:0;
}
.spon-tile .body{padding:16px}
.spon-tile .hl{font-size:clamp(1rem, .95rem + .35vw, 1.125rem);font-weight:500;margin-top:10px}
.spon-tile:hover .hl{color:var(--navy);text-decoration:underline}

/* ============================= NEWS VIDEOS ============================= */
.vids{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.vid-thumb{position:relative;min-width:0}
.vplay{
  position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;z-index:2;
  border-radius:50%;background:var(--red);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.3);transition:transform .15s ease;
}
.vplay svg{width:24px;height:24px;margin-left:3px}
.story:hover .vplay{transform:scale(1.08)}
.vdur{
  position:absolute;right:8px;bottom:8px;z-index:2;
  background:rgba(17,24,39,.88);color:var(--white);
  font-size:12px;font-weight:500;padding:2px 6px;border-radius:2px;
}
.vids .hl{font-size:clamp(1rem, .95rem + .3vw, 1.0625rem);margin-top:12px;line-height:1.28}
.vch{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;color:var(--muted);flex-wrap:wrap;min-width:0}
.vch-logo{
  width:24px;height:24px;border-radius:50%;background:var(--red);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:900;font-size:13px;flex:none;
}
.vch strong{color:var(--ink);font-weight:500}

/* ================================ FOOTER ================================ */
.foot{background:var(--navy-deep);color:var(--foot-ink);margin-top:40px;padding:36px 0 24px;font-size:14px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.foot-brand{min-width:0}
.foot .logo-t{font-size:clamp(38px, 9vw, 52px)}
.foot .logo-n{font-size:clamp(22px, 5vw, 30px);color:var(--white)}
.foot h3{margin-bottom:10px;font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--white)}
.foot li a{display:inline-flex;align-items:center;padding:10px 0;color:var(--foot-ink);min-height:44px}
.foot li a:hover{color:var(--white);text-decoration:underline}
.foot a:focus-visible{outline-color:var(--white)}
.foot p{margin-top:14px;max-width:360px;line-height:1.6}

.app-row{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.app-btn{
  display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  border:1px solid rgba(255,255,255,.4);border-radius:4px;color:var(--white);font-weight:500;
}
.app-btn:hover{background:rgba(255,255,255,.1)}

.foot-bot{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.18);
  margin-top:28px;padding-top:20px;font-size:13px;color:var(--lav-2);
}
.foot-bot a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.foot-bot a:hover{color:var(--white);text-decoration:underline}

/* =========================== MOBILE TAB BAR ============================ */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  background:var(--white);
  border-top:1px solid var(--line);
  box-shadow:0 -2px 14px rgba(17,24,39,.08);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:var(--tabbar-h);padding:6px 2px;
  border:0;background:transparent;cursor:pointer;
  font-size:11px;font-weight:500;color:var(--muted);
  letter-spacing:.01em;
}
.tab svg{width:22px;height:22px}
.tab span{line-height:1}
.tab:hover{color:var(--navy)}
.tab.active{color:var(--navy);font-weight:700}
.tab:focus-visible{outline:3px solid var(--red);outline-offset:-3px}

/* =====================================================================
   ≥ 480px — large phone
   ===================================================================== */
@media (min-width:480px){
  .wrap{padding-inline:20px}

  .ad-band{padding-block:20px}
  .lead-sum{font-size:17px}

  .sub2{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .sub2 .story{grid-template-columns:minmax(0,1fr);gap:10px}
  .sub2 .ph-cap{display:block}
  .sub2 .kicker{margin-top:10px}

  .picks,.vids,.spon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ch-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lst-i .story{grid-template-columns:minmax(0,1fr) 92px}
  .tab{font-size:12px}
}

/* =====================================================================
   ≥ 768px — tablet: desktop chrome returns, app shell retires
   ===================================================================== */
@media (min-width:768px){
  html{scroll-padding-top:16px}
  body{padding-bottom:0}
  body.nav-open{overflow:visible}

  .wrap{padding-inline:24px}

  /* utility strip + full masthead */
  .util{display:block}

  .hdr{position:static;box-shadow:none}
  .hdr .wrap{min-height:76px;gap:16px;padding-inline:24px}
  .logo{padding-block:0;min-height:0}
  .logo-t{font-size:clamp(44px, 5.4vw, 64px)}
  .logo-n{font-size:clamp(24px, 3vw, 36px)}

  .burger{display:none}
  .search-ibtn{display:none}
  .account-ibtn,.sections-ibtn{display:inline-flex}
  .hdr-tools{gap:8px}
  .search{display:flex;width:220px}
  .hdr.search-open .search{position:static;box-shadow:none;left:auto;right:auto;top:auto;width:220px}
  .live-btn{min-height:44px;padding:0 14px;font-size:13px;gap:8px;margin-right:4px}

  /* section nav back to a bar */
  .nav{position:static}
  .nav .wrap{padding-inline:24px}
  .nav-list{gap:0;padding:0;min-height:0;scroll-snap-type:none}
  .nav-list a{
    height:52px;min-height:52px;padding:0 14px;border-radius:0;
    border:0;border-top:4px solid transparent;border-bottom:4px solid transparent;
    font-size:15px;
  }
  .nav-list a.active{background:rgba(255,255,255,.1);border-bottom-color:var(--red);font-weight:500}
  .nav-list a:focus-visible{outline:3px solid var(--white);outline-offset:-4px}

  /* drawer becomes a mega-menu panel */
  .scrim{display:none}
  .drawer{
    position:static;width:auto;transform:none;visibility:visible;
    display:none;overflow:visible;box-shadow:0 8px 24px rgba(17,24,39,.08);
    background:var(--white);border-bottom:1px solid var(--line);
    padding-bottom:0;transition:none;
  }
  .drawer.is-open{display:block}
  .drawer-inner{padding-inline:24px}
  .drawer-head,.drawer-foot{display:none}
  .drawer-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 24px;padding:20px 0 24px}
  .drawer-grid a{min-height:44px;padding:10px 8px;border-bottom:0;border-radius:2px}

  .ticker .wrap{gap:12px}
  .tk-badge{font-size:13px;padding:6px 10px}
  .tk-item{font-size:15px}
  .tk-move > .tk-item{margin-right:40px}   /* trailing margin, not gap - keeps the loop seam exact */

  /* ads step up */
  .ad-lb{max-width:728px;height:90px}
  .ad-lb strong{font-size:14px}
  .ad-lb .ad-sub{display:block}
  .ad-sub-sm{display:none}
  .ad-band{padding-block:24px}
  .ad-feed{padding-top:48px}
  .ad-bottom{padding-top:56px}
  .ad-hp-wrap{display:flex}

  /* content */
  .main{gap:32px}
  .g-side{gap:32px}

  .lead-hl{font-size:2rem}
  .lead-sum{font-size:18px}
  .sub2{gap:28px;margin-top:28px;padding-top:24px}
  .sub2 p{display:block;margin-top:8px;font-size:15px;color:var(--muted)}
  .sub2 .hl{font-size:1.25rem;margin-top:12px}

  .sec{padding-top:44px}
  .sec-h{margin-bottom:20px}
  .card{padding:20px}

  .picks,.vids{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .spon-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .picks .hl{font-size:1.1875rem}

  .live{margin-top:48px;padding:40px 0 48px}
  .player-bot{padding:12px 12px 12px 20px;gap:12px}
  .player-bot .now strong{font-size:17px}
  .player-bot .now span{font-size:13px}
  .player .hide-sm{display:inline-flex}
  .bigplay{width:80px;height:80px}
  .bigplay svg{width:34px;height:34px;margin-left:4px}

  .ops .story{grid-template-columns:64px minmax(0,1fr);gap:18px;padding:20px 0}
  .avatar{width:64px;height:64px;font-size:22px}
  .ops .hl{font-size:1.375rem}

  .spon-wrap{margin-top:48px;padding:32px 0 40px}

  .foot{margin-top:48px;padding:48px 0 24px}
  .foot-grid{gap:32px}
  .foot li a{display:inline-block;padding:5px 0;min-height:0}
  .foot-bot{margin-top:36px}
  .foot-bot a{display:inline;min-height:0;padding:0}

  .tabbar{display:none}
}

/* =====================================================================
   ≥ 1024px — tablet landscape / small laptop: sidebar returns
   ===================================================================== */
@media (min-width:1024px){
  /* Side-by-side columns start here. A header row holding a "more" link is
     46px tall (44px tap target + the h2's -2px margin) while one without is
     only as tall as its heading, so the two columns' headings sat ~13px
     apart. Equalising the row height lines them up. Bottom alignment stays:
     the h2's red underline must land on the row's navy rule. Below this
     width the columns stack, so the rows keep their natural height. */
  .sec-h{min-height:46px}

  .main{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:"lead lead" "latest side";
    gap:32px;
  }

  .lead-hl{font-size:2.375rem}
  .sec{padding-top:56px}
  .spon-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .drawer-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .search{width:260px}
  .hdr.search-open .search{width:260px}
  .ad-lb{max-width:970px}
}

/* =====================================================================
   ≥ 1280px — full desktop snapshot layout
   ===================================================================== */
@media (min-width:1280px){
  .hdr .wrap{min-height:92px;gap:24px}
  .search,.hdr.search-open .search{width:300px}
  .nav-list a{padding:0 16px}

  .main{
    grid-template-columns:minmax(0,1.85fr) minmax(0,1fr) 300px;
    grid-template-areas:"lead latest side";
    gap:36px;
  }

  .lead-hl{font-size:2.625rem;margin-top:16px}
  .lead-sum{margin-top:14px}
  .lead-tags{margin-top:16px}

  .picks,.vids{grid-template-columns:repeat(4,minmax(0,1fr))}
  .vids{gap:24px}
  .picks{gap:28px}

  .op-row{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:40px}

  .live-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:28px}
  .ch-list{grid-template-columns:minmax(0,1fr)}

  .foot-grid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}
}

/* =====================================================================
   ≥ 1440px — centred container, roomier gutters
   ===================================================================== */
@media (min-width:1440px){
  .wrap{padding-inline:32px}
  .main{gap:36px}
  .sec{padding-top:56px}
}

/* ============================ MOTION / PRINT =========================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tk-move{animation:none}
  .tk-track{overflow-x:auto}
  .dot{animation:none}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .drawer,.scrim{transition:none}
}


/* ===== YouTube hover-preview cards (added) ===== */
[data-yt]{position:relative}
.yt-media{position:relative;overflow:hidden;isolation:isolate}
.yt-media > img{width:100%;height:100%;object-fit:cover;display:block}
.ytpreview{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1;
  pointer-events:none;background:#000;opacity:0;transition:opacity .18s ease}
.yt-playing .ytpreview{opacity:1}
/* let the duration badge and YouTube mark stay on top of the preview */
.yt-media .dur,.yt-media .vdur,.yt-media .tag,.yt-media .lbl{z-index:3}
/* fade the still-image furniture while the preview runs */
.yt-playing .thumb-scrim,.yt-playing .vthumb__scrim,.yt-playing .scrim-b::after,
.yt-playing .play,.yt-playing .vplay,.yt-playing .vthumb-play,
.yt-playing .vthumb-kick{opacity:0;transition:opacity .18s ease}
[data-yt] .play,[data-yt] .vplay,[data-yt] .vthumb-play,
[data-yt] .thumb-scrim,[data-yt] .vthumb__scrim{transition:opacity .18s ease}
/* hover affordance */
[data-yt]:hover .yt-media > img,[data-yt]:focus-visible .yt-media > img{transform:scale(1.02)}
.yt-media > img{transition:transform .25s ease}
[data-yt]:focus-visible{outline:3px solid currentColor;outline-offset:2px}
/* touch devices never autoplay a preview */
@media (hover:none),(pointer:coarse){.ytpreview{display:none}}
@media (prefers-reduced-motion:reduce){
  .ytpreview{display:none}
  .yt-media > img{transition:none}
  [data-yt]:hover .yt-media > img{transform:none}
}


/* ===== live badge on YouTube cards (added) ===== */
.dur.is-live,.vdur.is-live{
  background:#ED1018 !important;color:#fff !important;font-weight:700;
  letter-spacing:.06em;display:inline-flex;align-items:center;gap:5px}
.dur.is-live::before,.vdur.is-live::before{
  content:"";width:6px;height:6px;border-radius:50%;background:#fff;flex:0 0 auto}
@media (prefers-reduced-motion:no-preference){
  .dur.is-live::before,.vdur.is-live::before{animation:tn-live-pulse 1.6s ease-in-out infinite}
  @keyframes tn-live-pulse{0%,100%{opacity:1}50%{opacity:.35}}
}


/* ===== unavailable / non-embeddable YouTube cards (added) ===== */
.yt-unavailable .yt-media,.yt-unavailable.yt-media{background:#1F2937}
.yt-gone{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;
  padding:10px;text-align:center;color:#E5E7EB;background:#1F2937;
  font-size:13px;font-weight:500;line-height:1.35}
.yt-unavailable .play,.yt-unavailable .vplay,.yt-unavailable .vthumb-play,
.yt-unavailable .dur,.yt-unavailable .vdur{display:none}


/* ===== language switcher (added) ===== */
.langsw{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  height:40px;padding:0 9px 0 10px;border:1px solid rgba(128,128,128,.38);
  border-radius:20px;background:#FFFFFF;color:#101A91;box-sizing:border-box;
  line-height:1}
.langsw__globe{flex:0 0 auto;opacity:.85}
.langsw__sel{appearance:none;-webkit-appearance:none;border:0;background:transparent;
  font:inherit;font-size:14px;font-weight:500;color:#101A91;cursor:pointer;
  padding:0 17px 0 0;min-width:0;height:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23101A91' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1px center}
.langsw__sel:focus-visible{outline:3px solid #ED1018;outline-offset:3px;border-radius:4px}
.langsw__sel option{color:#111827;background:#FFFFFF}
.langsw__lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}
@media (max-width:400px){
  .langsw{padding:0 6px 0 7px;gap:4px}
  .langsw__sel{font-size:13px;padding-right:15px}
}
@media (max-width:359px){
  .langsw__globe{display:none}
  .langsw__sel{font-size:12px}
}


/* Header crowding once the language switcher is added: on phones the Live TV
   button leaves the header (it is still in the drawer and bottom bar). */
@media (max-width: 767px){
  .hdr .live-btn{display:none}
  .langsw{margin-left:auto}
}


/* ===== real T News logo (added) ===== */
.brand-img{display:block;height:48px;width:auto;flex:0 0 auto}
.brand--drawer .brand-img,.brand--sm .brand-img{height:40px}
.brand--footer .brand-img,.brand--foot .brand-img,.footer__logo .brand-img{height:56px}
footer .logo .brand-img{height:56px}
@media (max-width:767px){
  .brand-img{height:38px}
  .brand--footer .brand-img,.brand--foot .brand-img,.footer__logo .brand-img{height:46px}
  footer .logo .brand-img{height:46px}
}
/* the wrappers were sized for text; let the image set the box instead */
.brand,.logo,.footer__logo{text-decoration:none}
.site-header .brand{border:0;padding:0;max-width:none;font-size:0}
.footer__logo{font-size:0}



/* =========================================================================
   NOTO SANS TELUGU - headings and body copy
   Set as the primary family, so Latin renders in it too (the face carries
   full Latin and digits). Navigation, buttons, tags, bylines and other
   chrome are deliberately left on Roboto.
   ========================================================================= */
/* headings */
.hl,
.sec-h h2,
.h-grey,
.foot h3,
/* body copy */
p,
.lead-sum{font-family:'Noto Sans Telugu',sans-serif}


/* =========================================================================
   TYPE SIZE - h5 headlines 16px, body copy 15px
   !important is deliberate: .sub2 .hl, .picks .hl, .ops .hl, .vids .hl and
   their breakpoint variants all set font-size, and the brief is one size.
   ========================================================================= */
h5{margin:0;overflow-wrap:anywhere;font-size:16px!important}
p,
.lead-sum{font-size:15px!important}


/* =========================================================================
   LEAD HEADLINE - 20px
   .lead-hl is overridden at 768 / 1024 / 1280, hence !important.
   ========================================================================= */
.lead-hl{font-size:20px!important}


/* =========================================================================
   BREAKING TICKER - continuous right-to-left scroll
   Motion is pure CSS. assets/js/ticker.js repeats the headline set until it
   fills the bar, doubles it, and sets --tick-dur from the measured width so
   every site scrolls at the same reading speed. Translating by exactly -50%
   lands on an identical frame, so the loop has no visible jump.
   Pauses on hover and while a headline has keyboard focus.
   ========================================================================= */
.tn-tick-track{overflow:hidden}
.tn-tick{display:flex;flex-wrap:nowrap;width:max-content;gap:0}
.tn-tick > *{flex:0 0 auto}
.is-ticking .tn-tick{animation:tn-tick var(--tick-dur,40s) linear infinite;will-change:transform}
.is-ticking:hover .tn-tick,
.is-ticking:focus-within .tn-tick,
.tn-tick.paused{animation-play-state:paused}
@keyframes tn-tick{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* reduced motion: no animation, no copies - a static strip you can swipe */
@media (prefers-reduced-motion:reduce){
  .tn-tick-track{overflow-x:auto;scrollbar-width:none}
  .is-ticking .tn-tick{animation:none}
}

/* =====================================================================
   MORE STORIES - fills the space under the lead and latest columns.
   The sidebar (Trending, partner stories, 300 x 600 ad) runs much taller
   than both, so it now spans two grid rows; the second row (1fr) takes
   this section, which sits beside the ad instead of leaving it alone.
   Cards reuse the Editor's Picks story component.
   ===================================================================== */
.g-more{grid-area:more;min-width:0}
.more-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.more-grid .kicker{margin-top:14px;margin-bottom:4px}
.more-grid .hl{margin-top:4px}
@media (min-width:480px){
  .more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .main{grid-template-areas:"lead lead" "latest side" "more side";grid-template-rows:auto auto 1fr}
}
@media (min-width:1280px){
  .main{grid-template-areas:"lead latest side" "more more side";grid-template-rows:auto 1fr}
  .more-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
}


/* =========================================================================
   LIVE TV - real stream (assets/js/live.js)
   The player gets a poster (the 24/7 broadcast's thumbnail); pressing play
   swaps it for the official YouTube player in the same 16:9 box, and the mock
   overlays step aside so YouTube's own controls are usable.
   ========================================================================= */
.player-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.player .bigplay{position:relative;z-index:1}       /* stay above the poster */
.player .live-embed{position:absolute;inset:0;z-index:6;width:100%;height:100%;border:0;background:#000}
.player[data-live-state="loading"] .player-poster,
.player[data-live-state="loading"] .player-wm,
.player[data-live-state="loading"] .player-top,
.player[data-live-state="loading"] .bigplay,
.player[data-live-state="loading"] .player-bot,
.player[data-live-state="playing"] .player-poster,
.player[data-live-state="playing"] .player-wm,
.player[data-live-state="playing"] .player-top,
.player[data-live-state="playing"] .bigplay,
.player[data-live-state="playing"] .player-bot,
.player[data-live-state="unavailable"] .bigplay,
.player[data-live-state="unavailable"] .player-bot{display:none}
/* fallback when no source can play */
.player .live-unavailable{
  position:absolute;inset:0;z-index:7;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:24px;text-align:center;
  background:rgba(7,12,79,.9);color:var(--white);
}
.live-unavailable p{margin:0;font-weight:600;font-size:16px}
.live-unavailable a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 20px;
  border-radius:999px;background:var(--red);color:var(--white);
  font-weight:700;text-decoration:none;
}
.live-unavailable a:focus-visible{outline:3px solid var(--white);outline-offset:3px}