/* =====================================================================
   T News — Template 3 "Magazine"
   Mobile-first. Breakpoints (min-width): 480 / 768 / 1024 / 1280 / 1440
   ===================================================================== */

/* ------------------------------ tokens ------------------------------ */
:root{
  /* brand */
  --red:#ED1018;
  --red-deep:#C70C13;
  --blue:#101A91;
  --blue-deep:#0A1166;
  --blue-mid:#1E2A6E;
  --blue-mid2:#27357F;

  /* ink + surfaces */
  --ink:#111827;
  --ink-2:#374151;
  --ink-3:#4B5563;
  --muted:#6B7280;
  --muted-2:#9CA3AF;
  --line:#E5E7EB;
  --line-2:#D1D5DB;
  --page:#F8FCFC;
  --card:#FFFFFF;

  /* pastel category tints */
  --t-blue:#DCE3F5;
  --t-pink:#FDE3E4;
  --t-lav:#E8EAFA;
  --t-mint:#D7F0EC;
  --t-grey:#E5E7EB;
  --t-sand:#F6E7C1;
  --t-sand2:#EFD9A0;
  --t-sand3:#F3E4BC;
  --t-dark:#1F2937;
  --t-slate:#374151;
  --t-maroon:#5A1418;
  --t-green:#0E5A4A;

  /* sponsored */
  --spon-bg:#FFF3D1;
  --spon-ink:#6B4400;
  --spon-ink-2:#3F2A00;
  --spon-line:#EBCB7A;
  --spon-card:#FFFBF0;

  /* ads */
  --ad-bg:#EEF1F4;
  --ad-line:#DCE1E7;
  --ad-dash:#A3ADB9;
  --ad-slot:#F7F9FB;

  /* breaking strip */
  --break-bg:#FFF1F1;
  --break-line:#F7C9CB;
  --on-blue:#C7CCF5;

  /* type */
  --sans:Roboto,"Helvetica Neue",Arial,"Noto Sans Telugu",sans-serif;
  --cond:"Roboto Condensed",Roboto,"Arial Narrow","Noto Sans Telugu",sans-serif;
  --serif:"Roboto Serif",Georgia,"Times New Roman","Noto Sans Telugu",serif;

  /* metrics */
  --gap:16px;
  --pad:16px;
  --radius:10px;
  --appbar-h:56px;
  --chips-h:48px;
  --tabbar-h:58px;
}

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

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

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

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

a{color:inherit;text-decoration:none}
a:hover{color:var(--red-deep)}

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

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}

:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:4px}
.live-sec :focus-visible,
.site-foot :focus-visible,
.card--dark:focus-visible,
.drawer :focus-visible,
.catnav :focus-visible{outline-color:#FFFFFF}

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

.skip{
  position:fixed;left:8px;top:-80px;z-index:120;
  background:var(--red);color:#fff;font-weight:700;font-size:14px;
  padding:12px 18px;border-radius:0 0 8px 8px;transition:top .18s ease;
}
.skip:focus{top:0;color:#fff}

/* ----------------------------- layout ------------------------------- */
.wrap{
  width:100%;
  max-width:1320px;
  margin:0 auto;
  padding:0 var(--pad);
}

.sec{padding:28px 0 0}
.sec--first{padding-top:16px}

/* align-items:start, not flex-end: the "more" link carries a 44px tap
   target, so a header row that has one is taller than a row that does
   not. Bottom-aligning pushed the heading down by that difference, which
   left the left column's heading ~17px below the right column's in the
   split layout. Top-aligning makes every heading sit flush with the top
   of its row, so the two columns line up regardless of font size or
   whether a link is present. The link keeps its full 44px hit area. */
.sec-h{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;margin:0 0 16px;padding-bottom:10px;
  border-bottom:2px solid var(--ink);
  flex-wrap:wrap;
}
.sec-h--light{border-bottom-color:rgba(255,255,255,.35)}

.sec-t{
  font-family:var(--cond);font-weight:700;
  font-size:clamp(1.3125rem,1.17rem + .55vw,1.75rem);
  line-height:1;text-transform:uppercase;letter-spacing:.01em;
  display:flex;align-items:center;gap:10px;min-width:0;
}
.sec-t::before{content:"";width:8px;height:22px;background:var(--red);flex:none}
.sec-t--light{color:#FFFFFF}

.more{
  font-weight:500;font-size:14px;color:var(--blue);
  display:inline-flex;align-items:center;gap:4px;min-height:44px;
}
.more--light{color:#FFFFFF}
/* In a section-header row the "more" link sits level with the heading.
   Its 44px tap target used to be its own box height, which (with the row
   top-aligned) put the link text ~9px below the heading. The box is now its
   natural height and centred on the heading; the 44px hit area is kept by an
   invisible ::after that overlays it without affecting layout. */
.sec-h .more{min-height:0;align-self:center;position:relative}
.sec-h .more::after{content:"";position:absolute;left:0;right:0;top:50%;
  height:44px;transform:translateY(-50%)}

/* ------------------------------ labels ------------------------------ */
.lbl{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:500;font-size:11px;line-height:1;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 8px;border-radius:4px;width:max-content;
  max-width:100%;
}
.l-news{background:var(--t-lav);color:var(--blue)}
.l-opinion{background:var(--ink);color:#FFFFFF}
.l-break{background:var(--red-deep);color:#FFFFFF}
.l-video{background:var(--blue);color:#FFFFFF}
.l-spon{background:var(--spon-bg);color:var(--spon-ink);border:1px solid var(--spon-line)}
.l-photo{background:#FFFFFF;color:var(--ink);border:1px solid var(--line-2)}
.lbl--longread{background:var(--red);color:#FFFFFF}
.lbl--white{background:#FFFFFF}
.lbl--lg{font-size:12px}

.dot{width:8px;height:8px;border-radius:50%;background:#FFFFFF;display:inline-block;flex:none}

.meta{
  font-size:13px;color:var(--muted);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;
}
.meta--channel{font-weight:500;color:var(--blue)}
.meta--spon{color:var(--spon-ink)}

.dek{font-size:15px;color:var(--ink-2);overflow-wrap:anywhere}
.dek--light{color:#D1D5DB}
.dek--camp{color:var(--spon-ink-2)}

.hl{
  font-family:var(--cond);font-weight:700;color:var(--ink);
  line-height:1.15;letter-spacing:-.005em;
  overflow-wrap:anywhere;word-break:break-word;
}
.hl--light{color:#FFFFFF}
.hl--lead{font-size:clamp(1.5rem,1.12rem + 1.9vw,2.375rem)}
.hl--28{font-size:clamp(1.375rem,1.21rem + .72vw,1.75rem)}
.hl--24{font-size:clamp(1.1875rem,1.1rem + .4vw,1.5rem)}
.hl--21{font-size:clamp(1.125rem,1.07rem + .28vw,1.3125rem)}
.hl--19{font-size:clamp(1.0625rem,1.03rem + .18vw,1.1875rem)}
.hl--17{font-size:clamp(1rem,.98rem + .1vw,1.0625rem)}

/* ------------------------------- cards ------------------------------ */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;
  min-width:0;
  transition:box-shadow .2s ease,transform .2s ease;
}
.card:hover{box-shadow:0 10px 28px rgba(17,24,39,.10);transform:translateY(-2px)}
.card:hover .hl{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.card--spon{background:var(--spon-card);border-color:var(--spon-line)}
.card--dark{background:var(--ink);border-color:var(--ink)}
.card--dark:hover .hl{color:#FFFFFF}
.card--wide{margin-bottom:4px}

.body{
  padding:14px 16px 16px;
  display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;
}
.body--lead{padding:18px 18px 20px;gap:10px}
.body--blog{padding:22px;gap:12px}
.body--blog2{padding:20px;gap:10px}

/* --------------------------- photo frames --------------------------- */
.ph{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  flex:none;
  display:block;
  background:var(--t-lav);
}
.ph > img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.ph--16x10{aspect-ratio:16/10}
.ph--21x9{aspect-ratio:16/9}
.ph--thumb{width:104px;aspect-ratio:4/3;border-radius:8px}
.ph--sq140{aspect-ratio:1/1;flex:none}

/* gradient scrim so overlay text stays readable over any photo */
.shade::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(10,17,41,.55) 0%,rgba(10,17,41,0) 34%),
    linear-gradient(0deg,rgba(10,17,41,.68) 0%,rgba(10,17,41,.12) 38%,rgba(10,17,41,0) 62%);
}

.cap{
  position:absolute;left:10px;bottom:10px;z-index:2;
  font-size:11px;font-weight:500;letter-spacing:.02em;
  background:rgba(17,24,39,.78);color:#FFFFFF;
  padding:3px 8px;border-radius:4px;
  max-width:calc(100% - 20px);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cap--lg{left:14px;bottom:14px;font-size:12px}

.tag{position:absolute;left:12px;top:12px;z-index:2}
/* several labels on one image (e.g. Breaking + YouTube): one row at the same
   top-left spot a single .tag uses, instead of the labels stacking on top of
   each other */
.tags{position:absolute;left:12px;top:12px;z-index:3;
  display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100% - 24px)}

.dur{
  position:absolute;right:10px;bottom:10px;z-index:2;
  background:rgba(17,24,39,.85);color:#FFFFFF;
  font-size:12px;font-weight:500;padding:3px 7px;border-radius:4px;
}

.play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.95);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
}
.play--lg{width:64px;height:64px}

/* tint classes (pastel category colours behind every photo) */
.t-blue{background:var(--t-blue)}
.t-pink{background:var(--t-pink)}
.t-lav{background:var(--t-lav)}
.t-mint{background:var(--t-mint)}
.t-grey{background:var(--t-grey)}
.t-sand{background:var(--t-sand)}
.t-sand2{background:var(--t-sand2)}
.t-sand3{background:var(--t-sand3)}
.t-dark{background:var(--t-dark)}
.t-ink{background:var(--ink)}
.t-slate{background:var(--t-slate)}
.t-navy{background:var(--blue-mid)}
.t-navy2{background:var(--blue-mid2)}
.t-deep{background:var(--blue-deep)}
.t-indigo{background:var(--blue)}
.t-maroon{background:var(--t-maroon)}
.t-green{background:var(--t-green)}

/* ------------------------------- grids ------------------------------ */
.g-feat,.g4,.g3,.g2,.cat2,.camp,.live{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--gap);
}
.g-feat > *,.g4 > *,.g3 > *,.g2 > *,.cat2 > *,.camp > *,.live > *,
.split > *,.mosaic > *{min-width:0}

.g2--rows{gap:0 24px}
.g4--tight{margin-top:var(--gap)}

.split{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
.split-main{min-width:0}

.side{display:flex;flex-direction:column;gap:20px;min-width:0}

.mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

.cat-col{min-width:0}

/* -------------------------- compact / row --------------------------- */
.compact{flex-direction:row}
.compact .ph{width:120px;aspect-ratio:1/1}
.compact .body{padding:12px 14px;gap:6px}
.compact .dek{display:none}
.compact.compact--always{flex-direction:row}
.compact.compact--always .ph{width:112px;aspect-ratio:1/1}

.row{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 0;border-bottom:1px solid var(--line);min-width:0;
}
.row:hover .hl{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.row-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.row--last{border-bottom:0}

/* ----------------------------- ad slots ----------------------------- */
.ad{
  background:var(--ad-bg);
  border:1px solid var(--ad-line);
  border-radius:var(--radius);
  padding:8px 12px 12px;
}
.ad-l{
  font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:8px;
}
.ad-slot{
  border:1px dashed var(--ad-dash);border-radius:6px;background:var(--ad-slot);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:6px;color:var(--ink-3);font-size:13px;text-align:center;padding:12px;
}
.ad-strong{font-weight:700;color:var(--ink);font-size:15px}
.ad-slot--90{min-height:90px}
.ad-slot--100{min-height:100px}
.ad-slot--120{min-height:120px}
.ad--leader{max-width:970px;margin:0 auto}
.ad--feed{margin-top:28px}
.ad--bottom{margin-top:32px}
/* leaderboard band sitting between the breaking strip and the main content */
.topad{padding-block:16px}

/* ============================== HEADER ============================== */

/* The whole mobile shell (app bar + chip row) sticks as one unit, so the
   sticky children are never cut off by a short containing block. */
.site-head{background:#FFFFFF;position:sticky;top:0;z-index:40}

/* --- mobile app bar --- */
.appbar{
  height:var(--appbar-h);
  display:flex;align-items:center;gap:6px;
  padding:0 8px;
  background:#FFFFFF;
  border-bottom:1px solid var(--line);
}
.appbar-btn{
  width:44px;height:44px;flex:none;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink);
}
.appbar-btn:hover{background:#F3F4F6}
.appbar-live{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:6px;
  background:var(--red-deep);color:#FFFFFF;
  font-weight:700;font-size:12px;letter-spacing:.08em;
  height:34px;padding:0 12px;border-radius:999px;
}
.appbar-live:hover{color:#FFFFFF}

.brand{display:inline-flex;align-items:center;line-height:1;min-width:0}
.brand-t{
  font-family:var(--serif);font-weight:800;color:var(--red);
  font-size:clamp(2.125rem,1.8rem + 1.1vw,2.875rem);line-height:.9;padding-right:4px;
}
.brand-news{
  font-family:var(--sans);font-weight:700;color:#FFFFFF;background:var(--blue);
  font-size:clamp(1.125rem,.98rem + .6vw,1.625rem);
  padding:6px 10px 5px;letter-spacing:.06em;border-radius:3px;
}
.brand--sm .brand-t{font-size:1.875rem}
.brand--sm .brand-news{font-size:1.0625rem;padding:5px 8px 4px}
.brand--foot .brand-t{font-size:2.5rem}
.brand--foot .brand-news{font-size:1.375rem;padding:5px 9px 4px}
.brand:hover{color:inherit}

/* --- mobile inline search --- */
.msearch{
  display:flex;gap:8px;align-items:center;
  background:#FFFFFF;border-bottom:1px solid var(--line);
  padding:8px var(--pad);
}
.msearch[hidden]{display:none}
.msearch input{
  flex:1 1 auto;min-width:0;height:44px;
  border:1px solid var(--line-2);border-radius:8px;background:#FFFFFF;
  padding:0 12px;font-size:16px;color:var(--ink);
}
.msearch-go{
  flex:none;height:44px;padding:0 16px;border-radius:8px;
  background:var(--blue);color:#FFFFFF;font-weight:700;font-size:14px;
}

/* --- desktop masthead --- */
.masthead{display:none}
.masthead-in{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap;
}
.masthead-left{display:flex;align-items:center;gap:12px;min-width:0}
.masthead-right{display:flex;align-items:center;gap:10px;min-width:0}

.search{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--line-2);border-radius:8px;background:#FFFFFF;
  padding:0 6px 0 12px;height:44px;
}
.search input{
  border:0;outline:0;font-size:14px;width:min(200px,28vw);
  background:transparent;color:var(--ink);min-width:0;
}
.icon-btn{
  width:44px;height:44px;border-radius:8px;border:1px solid var(--line-2);
  background:#FFFFFF;display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);padding:0;flex:none;
}
.search-go{border:0;width:36px;height:36px}

.watch-live{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  background:var(--red-deep);color:#FFFFFF;font-weight:700;font-size:13px;
  letter-spacing:.08em;padding:0 14px;height:44px;border-radius:8px;
}
.watch-live:hover{color:#FFFFFF}

/* --- category nav: chip row on mobile, bar on desktop --- */
.catnav{background:var(--blue)}
.catnav-in{padding-left:0;padding-right:0}
.nav-list{
  display:flex;gap:8px;margin:0;padding:8px var(--pad);
  scroll-padding-left:var(--pad);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.nav-list::-webkit-scrollbar{display:none}
.nav-list li{flex:none;scroll-snap-align:start}
.nav-list a{
  display:flex;align-items:center;min-height:32px;
  padding:0 14px;border-radius:999px;
  font-weight:500;font-size:14px;color:#FFFFFF;letter-spacing:.02em;
  white-space:nowrap;background:rgba(255,255,255,.12);
}
.nav-list a:hover{background:rgba(255,255,255,.22);color:#FFFFFF}
.nav-list a.on{background:#FFFFFF;color:var(--blue)}

/* ---------------------------- nav drawer ---------------------------- */
.nav-scrim{
  position:fixed;inset:0;z-index:90;
  background:rgba(17,24,39,.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.nav-scrim[hidden]{display:none}

.drawer{
  position:fixed;top:0;bottom:0;left:0;z-index:95;
  width:min(84vw,340px);
  background:#FFFFFF;
  display:flex;flex-direction:column;
  transform:translateX(-102%);
  transition:transform .26s cubic-bezier(.22,.61,.36,1);
  box-shadow:0 0 40px rgba(17,24,39,.3);
  overflow-y:auto;overscroll-behavior:contain;
  padding-bottom:env(safe-area-inset-bottom,0px);
  /* visibility flips instantly (never transitioned) so the drawer can never be
     left on screen if transitions are throttled or disabled */
  visibility:hidden;
}
.nav-open .drawer{transform:translateX(0);visibility:visible}
.nav-open body,
html.nav-open body{position:fixed;width:100%;overflow:hidden}

.drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:8px 10px 8px 14px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:#FFFFFF;z-index:2;
}
.drawer-nav{padding:12px 8px 8px;flex:1}
.drawer-h{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding:10px 12px 6px;
}
.drawer-list{display:flex;flex-direction:column}
.drawer-list a{
  display:flex;align-items:center;min-height:48px;
  padding:0 12px;border-radius:8px;
  font-family:var(--cond);font-weight:700;font-size:18px;color:var(--ink);
}
.drawer-list a:hover{background:var(--t-lav);color:var(--blue)}
.drawer-list--sub a{font-family:var(--sans);font-weight:500;font-size:15px;color:var(--ink-2)}
.drawer-live{
  margin:8px 16px 20px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--red-deep);color:#FFFFFF;font-weight:700;font-size:13px;
  letter-spacing:.08em;height:48px;border-radius:8px;
}
.drawer-live:hover{color:#FFFFFF}

/* --------------------------- breaking strip -------------------------- */
.breaking-strip{background:var(--break-bg);border-bottom:1px solid var(--break-line)}
.breaking-in{
  display:flex;align-items:center;gap:10px;
  min-height:44px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px;
}
.breaking-main{font-weight:500;font-size:14px;color:var(--ink);min-width:0}
.breaking-sep{color:var(--muted-2);display:none}
.breaking-alt{font-size:14px;color:var(--ink-2);min-width:0}

/* ============================= LIVE TV ============================== */
.live-sec{
  background:var(--blue);color:#FFFFFF;
  margin-top:32px;padding:32px 0;
}
.live-sec a:hover{color:#FFFFFF}

.live-card{
  display:block;border-radius:12px;overflow:hidden;
  background:var(--blue-deep);color:#FFFFFF;
}
.live-foot{
  padding:16px 18px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
}
.live-foot-text{min-width:0}
.live-kicker{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-blue);font-weight:500;
}
.live-title{
  color:#FFFFFF;margin-top:4px;
  font-size:clamp(1.25rem,1.14rem + .45vw,1.5rem);
}
.live-cta{
  display:inline-flex;align-items:center;
  background:#FFFFFF;color:var(--blue);font-weight:700;font-size:14px;
  padding:0 18px;height:44px;border-radius:8px;flex:none;
}

.upnext{min-width:0}
.upnext-h{
  margin:0 0 6px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-blue);font-weight:500;
}
.upnext-list li{
  display:flex;gap:14px;padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.upnext-list li:last-child{border-bottom:0}
.upnext-time{font-weight:700;min-width:64px;flex:none}
.upnext-body{min-width:0}
.upnext-title{
  color:#FFFFFF;display:block;
  font-size:clamp(1.0625rem,1.02rem + .2vw,1.125rem);
}
.upnext-sub{font-size:13px;color:var(--on-blue)}

/* ============================== TRENDING ============================= */
.trend{min-width:0}
/* items are .row (thumbnail + text), which carries its own padding and rule */
.trend-list{display:flex;flex-direction:column}
/* rank sits on the thumbnail's corner; the <ol> already gives the order */
.trend-rank{
  position:absolute;left:6px;top:6px;z-index:2;
  min-width:22px;height:22px;padding:0 6px;border-radius:6px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--red-deep);color:#FFFFFF;
  font-family:var(--cond);font-weight:700;font-size:13px;line-height:1;
}

/* =============================== BLOGS =============================== */
.byline{display:flex;align-items:center;gap:10px;margin-top:auto;min-width:0}
.avatar{
  width:40px;height:40px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;font-weight:700;
}
.avatar--slate{background:var(--ink-2);color:#FFFFFF}
.avatar--lav{background:var(--t-lav);color:var(--blue)}
.avatar--pink{background:var(--t-pink);color:var(--red-deep)}
.byline-txt{font-size:13px;color:#D1D5DB;min-width:0}

/* ========================= SPONSORED CAMPAIGN ======================== */
.camp-ad{display:flex;flex-direction:column;padding:10px 12px 12px}
.camp-stage{
  flex:1;border-radius:8px;overflow:hidden;position:relative;
  background:var(--t-sand);border:1px dashed var(--spon-ink);
  min-height:240px;display:flex;align-items:flex-end;
}
.camp-body{
  position:relative;padding:20px;max-width:440px;
  display:flex;flex-direction:column;gap:10px;min-width:0;
}
.camp-title{font-size:clamp(1.375rem,1.1rem + 1.2vw,2.125rem)}
.camp-cta{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink);color:#FFFFFF;font-weight:700;font-size:14px;
  height:44px;padding:0 20px;border-radius:8px;width:max-content;max-width:100%;
}
.camp-cta:hover{color:#FFFFFF}
.camp-list{display:flex;flex-direction:column;gap:14px;min-width:0}

/* =========================== PHOTO STORIES =========================== */
.photo{
  position:relative;display:block;border-radius:var(--radius);overflow:hidden;
  min-width:0;background:var(--t-lav);
}
.photo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-big{grid-column:span 2;aspect-ratio:16/10}
.photo-sq{aspect-ratio:1/1}
.photo-ov{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:10px;background:rgba(17,24,39,.85);
  display:flex;flex-direction:column;gap:6px;
}
.photo-ov--big{padding:16px;background:rgba(10,17,102,.88);gap:8px}
.photo-title{color:#FFFFFF;font-size:.9375rem}
.photo-title--big{font-size:clamp(1.1875rem,1.03rem + .72vw,1.625rem)}
.photo:hover .photo-title{text-decoration:underline;text-underline-offset:3px}

/* ============================== FOOTER =============================== */
.site-foot{
  background:var(--ink);color:#D1D5DB;
  margin-top:36px;padding:32px 0 24px;
}
.foot-in{display:flex;flex-direction:column;gap:20px}
.foot-top{
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;flex-wrap:wrap;
}
.foot-nav{display:flex;gap:4px 20px;flex-wrap:wrap;font-size:14px}
.foot-nav a{min-height:44px;display:flex;align-items:center}
.foot-nav a:hover{color:#FFFFFF}
.foot-legal{
  font-size:13px;color:var(--muted-2);
  border-top:1px solid var(--ink-2);padding-top:18px;
}

/* =========================== BOTTOM TAB BAR ========================== */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;align-items:stretch;
  background:#FFFFFF;border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:0 -2px 12px rgba(17,24,39,.08);
}
.tab{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;min-height:var(--tabbar-h);padding:6px 2px;
  font-size:10px;font-weight:500;letter-spacing:.02em;color:var(--muted);
  text-align:center;
}
.tab svg{width:22px;height:22px;flex:none}
.tab--on{color:var(--blue)}
.tab--on svg{stroke:var(--blue)}
.tab:hover{color:var(--blue)}

/* =====================================================================
   >= 480px  — large phone
   ===================================================================== */
@media (min-width:480px){
  :root{--pad:20px;--gap:18px}

  /* 2-up for the small thumb grids; the compact (row-style) grid stays single
     column. Both selectors are single-class so later breakpoints can override. */
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g4-compact{grid-template-columns:minmax(0,1fr)}

  .mosaic{gap:12px}
  .compact .ph{width:138px}
  .compact.compact--always .ph{width:128px}
  .ph--thumb{width:118px}
  .breaking-sep{display:inline}
  .camp-body{padding:24px}
}

/* =====================================================================
   >= 768px  — tablet: desktop masthead returns, mobile shell retires
   ===================================================================== */
@media (min-width:768px){
  :root{--pad:24px;--gap:20px}

  html{scroll-padding-top:16px}
  body{padding-bottom:0}

  /* mobile shell off */
  .appbar,.msearch,.tabbar,.drawer,.nav-scrim{display:none !important}
  .masthead{display:block}
  .site-head{position:static}
  .catnav-in{padding-left:var(--pad);padding-right:var(--pad)}

  /* desktop nav bar */
  .nav-list{
    flex-wrap:wrap;gap:2px;padding:0;overflow:visible;
    scroll-snap-type:none;
  }
  .nav-list a{
    min-height:46px;padding:0 13px;border-radius:0;background:transparent;
  }
  .nav-list a:hover{background:rgba(255,255,255,.12)}
  .nav-list a.on{background:transparent;color:#FFFFFF;box-shadow:inset 0 -3px 0 var(--red)}

  .sec{padding:36px 0 0}
  .sec--first{padding-top:24px}
  .sec-h{margin-bottom:18px;padding-bottom:12px}
  .sec-t::before{width:10px;height:24px}

  /* compact cards become normal stacked cards again */
  .compact{flex-direction:column}
  .compact .ph{width:auto;aspect-ratio:16/9}
  .compact .body{padding:14px 16px 16px}
  .compact.compact--always{flex-direction:row}
  .compact.compact--always .ph{width:140px;aspect-ratio:1/1}

  .ph--21x9{aspect-ratio:21/9}
  .ph--thumb{width:132px}

  .body--lead{padding:20px 22px 22px;gap:12px}
  .body--blog{padding:26px;gap:14px}
  .body--blog2{padding:24px;gap:12px}

  .g-feat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-feat .lead{grid-column:span 2}
  .g4,.g4-compact{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g2--rows{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
  .g2--split{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g2--split .card--full{grid-column:1 / -1}
  .mosaic{grid-template-columns:repeat(4,minmax(0,1fr))}
  .photo-big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;min-height:260px}

  .live-sec{margin-top:40px;padding:40px 0}
  .live-foot{padding:18px 20px}


  .camp-stage{min-height:300px}
  .camp-body{padding:28px}

  .site-foot{margin-top:44px;padding:40px 0 28px}
}

/* =====================================================================
   >= 1024px — tablet landscape / small laptop: sidebar + 2-up categories
   ===================================================================== */
@media (min-width:1024px){
  .sec{padding:40px 0 0}

  .split{grid-template-columns:minmax(0,1fr) 300px;gap:28px}
  .side{display:flex;flex-direction:column;gap:24px}

  .cat2{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .camp{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
  .live{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:28px;align-items:start}
  .g3{grid-template-columns:repeat(3,minmax(0,1fr))}

  .photo-big{min-height:280px}
  .camp-stage{min-height:320px}
}

/* =====================================================================
   >= 1280px — full snapshot layout
   ===================================================================== */
@media (min-width:1280px){
  :root{--gap:20px}

  .sec{padding:44px 0 0}
  .sec--first{padding-top:28px}

  .g-feat{grid-template-columns:repeat(4,minmax(0,1fr))}
  .g-feat .lead{grid-column:span 2;grid-row:span 2}
  .g4,.g4-compact{grid-template-columns:repeat(4,minmax(0,1fr))}

  .split{grid-template-columns:minmax(0,1fr) 320px;gap:32px}
  .cat2{gap:32px}

  .body--lead{padding:22px 24px 24px}
  .live-sec{margin-top:48px;padding:44px 0}
  .ad--feed{margin-top:36px}
  .ad--bottom{margin-top:44px}
  .site-foot{margin-top:48px}
}

/* =====================================================================
   >= 1440px — centred container, a touch more air
   ===================================================================== */
@media (min-width:1440px){
  :root{--pad:28px}
  .wrap{max-width:1320px}
  .mosaic{gap:14px}
}

/* ============================ motion prefs =========================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .card:hover{transform: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}
}


/* ===== 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}


/* ===== live card: click-to-play embed ===== */
.live-card{display:block;cursor:pointer}
.live-card .ph{position:relative;overflow:hidden}
.live-poster{width:100%;height:100%;object-fit:cover;display:block}
.live-embed{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:5;background:#000}
.live-card .ph.is-playing .tag,
.live-card .ph.is-playing .play{display:none}
button.live-cta{font:inherit;border:0;cursor:pointer}
.live-play{cursor:pointer}


/* =========================================================================
   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 - including the drawer's own
   headings, which is why .drawer-h is excluded below.
   ========================================================================= */
/* headings */
.hl,
.sec-t,
.upnext-h,
.photo-title,
.upnext-title,
.live-title,
.camp-title,
/* body copy */
p:not(.drawer-h),
.dek{font-family:'Noto Sans Telugu',sans-serif}


/* =========================================================================
   TYPE SIZE - h5 headlines 16px, body copy 15px
   The .hl--17/19/21/24 size modifiers are superseded for h5 elements.
   ========================================================================= */
h5{margin:0;overflow-wrap:anywhere;font-size:16px!important}
p,
.dek{font-size:15px!important}


/* =========================================================================
   LEAD HEADLINE - 20px
   ========================================================================= */
.hl--lead{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}
}
/* template 3: one ticker row instead of headlines wrapping onto new lines */
.breaking-in{flex-wrap:nowrap}
.breaking-in > .lbl{flex:none}
.breaking-track{flex:1 1 auto;min-width:0}
.tn-tick > .breaking-main,
.tn-tick > .breaking-alt,
.tn-tick > .breaking-sep{margin-right:12px;white-space:nowrap}
.tn-tick > .breaking-sep{display:inline}

/* =========================================================================
   LATEST NEWS + TRENDING - one section, two columns
   Both headings share the same size, so the header rows - and their rules -
   line up. When the columns sit side by side, a hairline divider runs down
   the middle of the gap. It is the sidebar's own left border, pulled into the
   gap by a negative margin and padded back by the same amount, so the column
   widths and every piece of content stay exactly where they were.
   ========================================================================= */
@media (min-width:1024px){
  .split--unified > .side{
    align-self:stretch;                 /* divider runs the full section height */
    border-left:1px solid var(--line);
    margin-left:-14px;padding-left:13px; /* gap 28px -> divider at its centre */
  }
}
@media (min-width:1280px){
  .split--unified > .side{margin-left:-16px;padding-left:15px} /* gap 32px */
}

/* Parent panel for Latest News + Trending. Same surface as the cards on this
   page (--card, --line, --radius), so the two child sections read as parts of
   one section. margin-top replaces .sec's 28px top padding, which would
   otherwise land inside the panel. */
.news-pair{
  margin-top:28px;padding:16px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
}
@media (min-width:768px){ .news-pair{padding:24px} }

/* =========================================================================
   LATEST NEWS + TRENDING - wireframe layout
   Two equal columns, each a single list of thumbnail rows (.row): Latest
   News drops its 2-across grid, Trending reuses the same row component.
   ========================================================================= */
@media (min-width:1024px){
  .news-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.news-pair .g2--rows{grid-template-columns:minmax(0,1fr)}
/* no rule under the last row of either list - the panel edge closes it */
.news-pair .g2--rows > .row:last-child,
.news-pair .trend-list > li:last-child > .row{border-bottom:0}