/* =========================================================
   T News — Template 4 "Hybrid Hub"
   Mobile-first. Breakpoints: 480 / 768 / 1024 / 1280 / 1440
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --navy-deep:#0B1366;
  --brand:#101A91;
  --red:#ED1018;
  --bg:#F8FCFC;
  --panel:#FFFFFF;
  --ink:#111827;
  --muted:#6B7280;
  --muted-d:#4B5563;
  --line:#E5E7EB;
  --line-2:#E1E5EA;
  --navy-soft:#D9DDF5;
  --navy-soft-2:#C9CEF2;
  --player-bg:#070C4D;
  --avatar:#E8EAF8;
  --rank-grey:#C7CCD6;
  --dashed:#C7CCD6;
  --spon-bg:#F1F3F5;
  --shell:1320px;
  --pad:16px;
  /* desktop grid - every column, gap and band is measured from these */
  --gutter:32px;     /* gap between grid columns */
  --rail-l:232px;    /* left rail, three-column layout (>=1280px) */
  --rail-r:320px;    /* right rail, whenever it is a sidebar (>=1024px) */
  --stack:32px;      /* vertical gap between blocks inside a column */
  --band:16px;       /* space above each full-width band (24px from tablet) */
  --panel-pad:16px;  /* inner padding of filled panels (24px from tablet) */
  --sans:Roboto,Arial,Helvetica,"Noto Sans Telugu",sans-serif;
  --cond:"Roboto Condensed",Roboto,Arial,"Noto Sans Telugu",sans-serif;
  --tab-h:56px;
}

/* ---------- Reset / guards ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px));
}
img,svg,video,iframe{max-width:100%}
img{display:block}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--brand);text-decoration:underline}
button{font:inherit;color:inherit}
input,button,select,textarea{font-family:inherit}
h1,h2,h3,p,a,li,span,div{overflow-wrap:anywhere}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

a:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid var(--brand);
  outline-offset:2px;
  border-radius:4px;
}

.sr-only{
  position:absolute!important;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-link{
  position:absolute;left:8px;top:-60px;z-index:200;
  background:var(--panel);color:var(--brand);font-weight:700;
  padding:12px 16px;border-radius:6px;border:2px solid var(--brand);
  transition:top .15s ease;
}
.skip-link:focus{top:8px;text-decoration:none}

.shell{
  width:100%;max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* hatched placeholders — ad inventory only */
.ph{background:repeating-linear-gradient(135deg,#E3E8EF 0 12px,#ECEFF4 12px 24px)}
.phdark{background:repeating-linear-gradient(135deg,#0C1470 0 14px,#111B85 14px 28px)}

.dot{width:8px;height:8px;border-radius:999px;background:#FFF;flex:0 0 auto}
.dot--red{background:var(--red);width:7px;height:7px}

/* ---------- Aspect-ratio media boxes ---------- */
.media{
  position:relative;display:block;overflow:hidden;
  background:#E9EDF2;min-width:0;
}
.media>img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
.r-16x8{aspect-ratio:16/8}
.r-16x9{aspect-ratio:16/9}
.r-16x10{aspect-ratio:16/10}
.r-4x3{aspect-ratio:4/3}
.round{border-radius:6px}

/* =========================================================
   UTILITY BAR
   ========================================================= */
.utility{background:var(--navy-deep);color:var(--navy-soft);font-size:13px}
.utility__inner{
  display:flex;flex-wrap:wrap;gap:6px 24px;
  align-items:center;justify-content:space-between;
  padding-block:8px;
}
.utility__date{min-width:0}
.utility__links{display:flex;gap:16px;flex-wrap:wrap}
.utility__links a{color:#FFF}
.utility__links a:hover{color:#FFF}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--panel);
  border-bottom:1px solid var(--line);
}
.header__inner{
  display:flex;align-items:center;gap:8px;
  min-height:56px;
}
.icon-btn{
  flex:0 0 auto;
  width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:6px;
  background:var(--panel);color:var(--ink);cursor:pointer;
}
.icon-btn:hover{background:#F3F5F9}

.brand{
  flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:134px;height:40px;
  border:2px dashed var(--dashed);border-radius:6px;
  color:var(--muted);font-size:11px;font-weight:500;line-height:1.2;
  text-align:center;
}
.brand:hover{color:var(--muted);text-decoration:none}
.brand__note{display:none}
.header__spacer{flex:1 1 auto;min-width:0}

.header__search{
  position:absolute;left:0;right:0;top:100%;
  display:none;
  background:var(--panel);
  border-bottom:1px solid var(--line);
  padding:10px var(--pad);
  box-shadow:0 10px 18px rgba(17,24,39,.08);
}
.site-header.search-open .header__search{display:block}

.searchbox{
  display:flex;align-items:center;gap:8px;
  border:1px solid #D1D5DB;border-radius:999px;
  padding:0 6px 0 16px;height:44px;
  background:var(--bg);
  min-width:0;
}
.searchbox input{
  border:0;background:transparent;
  font-size:14px;flex:1 1 auto;min-width:0;
  color:var(--ink);outline:none;
}
.searchbox__go{
  flex:0 0 auto;
  width:34px;height:34px;border-radius:999px;border:0;
  background:var(--brand);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.search-toggle{display:inline-flex}

.livebtn{
  display:none;
  align-items:center;gap:8px;
  height:44px;padding:0 18px;border-radius:6px;
  background:var(--red);color:#FFF;
  font-weight:700;font-size:14px;letter-spacing:.04em;
  white-space:nowrap;
}
.livebtn:hover{color:#FFF;text-decoration:none;filter:brightness(.92)}

/* =========================================================
   CATEGORY NAV  → chips on mobile
   ========================================================= */
.catnav{background:var(--brand)}
.catnav__inner{
  display:flex;gap:8px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-block:6px;
}
.catnav__inner::-webkit-scrollbar{display:none}
.catnav__link{
  flex:0 0 auto;
  scroll-snap-align:start;
  display:inline-flex;align-items:center;
  min-height:44px;padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.38);
  color:#FFF;font-size:14px;font-weight:500;
  white-space:nowrap;
}
.catnav__link:hover{color:#FFF;text-decoration:none;border-color:#FFF}
.catnav__link.is-active{background:#FFF;color:var(--brand);border-color:#FFF;font-weight:700}

/* =========================================================
   DRAWER
   ========================================================= */
.scrim{
  position:fixed;inset:0;z-index:60;
  background:rgba(11,19,102,.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.drawer{
  position:fixed;z-index:70;left:0;top:0;
  width:min(86vw,320px);height:100%;
  background:var(--panel);
  display:flex;flex-direction:column;
  transform:translateX(-102%);
  transition:transform .26s ease;
  box-shadow:0 0 40px rgba(11,19,102,.28);
  overflow-y:auto;
  overscroll-behavior:contain;
}
body.nav-open{overflow:hidden}
body.nav-open .drawer{transform:translateX(0)}
.drawer__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px 10px 16px;
  background:var(--brand);color:#FFF;
  position:sticky;top:0;
}
.drawer__brand{font-family:var(--cond);font-size:22px;font-weight:700;letter-spacing:.04em}
.drawer__close{border-color:rgba(255,255,255,.45);background:transparent;color:#FFF}
.drawer__close:hover{background:rgba(255,255,255,.14)}
.drawer__nav{display:flex;flex-direction:column;padding:6px 0}
.drawer__nav a{
  display:flex;align-items:center;
  min-height:48px;padding:0 16px;
  border-bottom:1px solid var(--line);
  font-size:16px;font-weight:500;
}
.drawer__nav a:hover{background:#F3F5F9;text-decoration:none}
.drawer__foot{padding:16px;display:flex;flex-direction:column;gap:14px;margin-top:auto}
.drawer__live{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;border-radius:6px;
  background:var(--red);color:#FFF;font-weight:700;letter-spacing:.04em;font-size:14px;
}
.drawer__live:hover{color:#FFF;text-decoration:none}
.drawer__utility{display:flex;flex-wrap:wrap;gap:8px 16px}
.drawer__utility a{font-size:13px;color:var(--muted-d);min-height:28px;display:inline-flex;align-items:center}

/* =========================================================
   BREAKING
   ========================================================= */
.breaking{background:var(--red);color:#FFF}
.breaking__inner{
  display:flex;align-items:center;gap:12px;
  min-height:44px;
}
/* line-height:1 - the tag used to inherit the page's 1.5, adding 4px of empty
   line box above and below the label. Height now comes from the text plus
   padding only; inline-flex keeps the label optically centred. */
.breaking__tag{
  flex:0 0 auto;
  display:inline-flex;align-items:center;line-height:1;
  background:#FFF;color:var(--red);
  font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.06em;
  padding:5px 10px;border-radius:3px;
}
.breaking__track{
  display:flex;gap:0;
  min-width:0;overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.breaking__track::-webkit-scrollbar{display:none}
.breaking__track a{
  flex:0 0 auto;
  scroll-snap-align:start;
  display:inline-flex;align-items:center;gap:28px;
  color:#FFF;font-weight:700;font-size:14px;white-space:nowrap;
  padding:10px 0;
}
.breaking__track a:hover{color:#FFF}
.breaking__sep{opacity:.6;margin-right:28px}

/* =========================================================
   AD PLACEHOLDERS
   ========================================================= */
.ad__label{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:4px;
}
.ad__box{
  min-height:var(--ad-h,90px);
  border:1px solid var(--line-2);border-radius:4px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:10px 12px;
  color:var(--muted-d);font-size:13px;font-weight:500;line-height:1.45;
}
/* Ad slots fill the grid area they sit in, so the slot's edges match its
   label and every neighbouring block. A served creative (970, 300, 160 px)
   is centred inside the slot by the ad server. */
.leader-wrap{padding-top:var(--band)}
.ad__box--video{aspect-ratio:16/9;min-height:0}

/* =========================================================
   PAGE LAYOUT
   ========================================================= */
.layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"main" "lrail" "rrail";
  gap:var(--stack) var(--gutter);
  align-items:start;
  padding-top:var(--band);
  padding-bottom:40px;
}
.main{grid-area:main;min-width:0;display:flex;flex-direction:column;gap:var(--stack)}
.rail--left{grid-area:lrail}
.rail--right{grid-area:rrail}
.rail{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:var(--stack) var(--gutter);
  align-items:start;
}
.railbox{min-width:0}

/* =========================================================
   RAIL COMPONENTS
   ========================================================= */
.rail-h{
  margin:0 0 12px;
  font-family:var(--cond);
  font-size:18px;text-transform:uppercase;letter-spacing:.03em;
  padding-bottom:8px;
}
.rail-h--red{border-bottom:3px solid var(--red)}
.rail-h--blue{border-bottom:3px solid var(--brand)}

.ranklist{display:flex;flex-direction:column;gap:14px}
.ranklist li{display:flex;gap:10px;min-width:0}
.ranklist__n{
  font-family:var(--cond);font-weight:700;font-size:22px;
  color:var(--brand);line-height:1;min-width:20px;flex:0 0 auto;
}
.ranklist a{font-size:14px;font-weight:500;line-height:1.4;min-width:0}

.linklist li{padding:10px 0;border-bottom:1px solid var(--line)}
.linklist a{font-size:14px;line-height:1.4;display:block;min-height:24px}

.mostread li{
  display:flex;gap:12px;align-items:flex-start;
  padding:10px 0;border-bottom:1px solid var(--line);
}
.mostread__n{
  font-family:var(--cond);font-weight:700;font-size:26px;
  color:var(--rank-grey);line-height:1;min-width:22px;flex:0 0 auto;
}
.mostread a{font-size:14px;font-weight:500;line-height:1.4;min-width:0}

/* sponsored native card (keeps SPONSORED label, gets a photo) */
.spon{background:var(--panel);border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.spon__body{padding:14px 16px 16px}
.spon__meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.spon__tag{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted-d);border:1px solid #9CA3AF;padding:2px 6px;border-radius:3px;
}
.spon__by{font-size:12px;color:var(--muted)}
.spon__title{font-size:16px;font-weight:700;line-height:1.35}

/* live channels panel */
.channels{background:var(--brand);color:#FFF;border-radius:8px;padding:16px}
.channels__h{
  margin:0 0 10px;font-family:var(--cond);font-size:18px;text-transform:uppercase;
  display:flex;align-items:center;gap:8px;
}
.channels__list{display:flex;flex-direction:column;gap:6px}
.chanbtn{
  width:100%;min-height:44px;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:0 12px;border-radius:6px;border:0;
  background:rgba(255,255,255,.06);color:#FFF;
  font-size:14px;font-weight:500;cursor:pointer;text-align:left;
}
.chanbtn:hover{background:rgba(255,255,255,.14)}
.chanbtn--on{background:rgba(255,255,255,.18)}
.chanbtn__state{font-size:12px;color:var(--navy-soft-2);flex:0 0 auto}
.channels .chanbtn:focus-visible{outline-color:#FFF}

/* trending stories rows */
.trow{
  display:flex;gap:12px;align-items:flex-start;
  padding:10px 0;border-bottom:1px solid var(--line);
}
.trow__thumb{flex:0 0 84px;width:84px;border-radius:4px}
.trow__title{font-size:14px;font-weight:700;line-height:1.35;min-width:0}

/* =========================================================
   TOP HEADLINES
   ========================================================= */
.tophead{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:20px;
}
.lead{
  grid-column:1/-1;
  background:var(--panel);border:1px solid var(--line);
  border-radius:8px;overflow:hidden;min-width:0;
}
.lead__body{padding:18px}
.lead__meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;letter-spacing:.06em;
  padding:4px 8px;border-radius:3px;
}
.badge--red{background:var(--red);color:#FFF}
.badge--live{background:var(--red);color:#FFF;letter-spacing:.08em;font-size:13px;padding:5px 10px}
.meta-cat{font-size:13px;font-weight:500;color:var(--brand)}
.meta-time{font-size:13px;color:var(--muted)}
.lead__title{
  margin:0 0 10px;
  font-family:var(--cond);
  font-size:clamp(23px,5.4vw,34px);
  line-height:1.15;
}
.lead__stand{
  font-size:clamp(14px,1.6vw,16px);
  line-height:1.6;color:var(--muted-d);max-width:68ch;
}

.tcard{
  background:var(--panel);border:1px solid var(--line);
  border-radius:8px;overflow:hidden;
  display:flex;flex-direction:column;min-width:0;
}
.tcard__body{padding:14px 16px 18px}
.kicker{
  font-size:12px;font-weight:500;color:var(--brand);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;
}
.tcard__title{
  margin:0;font-family:var(--cond);
  font-size:clamp(18px,2.2vw,20px);line-height:1.25;
}

/* =========================================================
   LIVE TV
   ========================================================= */
.live{
  background:var(--brand);color:#FFF;
  border-radius:10px;padding:var(--panel-pad);
  scroll-margin-top:72px;
}
.live a{color:#FFF}
/* Live TV opens the page under the breaking strip and spans the same
   container edges as the header, bands and footer. */
.live-top{padding-top:var(--band)}
.live__head{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:10px;margin-bottom:14px;
}
.live__headleft{display:flex;align-items:center;gap:12px;min-width:0}
.live__h{margin:0;font-family:var(--cond);font-size:clamp(19px,2.3vw,22px)}
.live__now{font-size:13px;color:var(--navy-soft-2)}
.live__now strong{color:#FFF}

.player{
  position:relative;aspect-ratio:16/9;
  border-radius:6px;overflow:hidden;background:var(--player-bg);
}
.player__ph{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;padding:16px;
}
.player__ph svg{width:34px;height:34px}
.player__phtitle{font-size:clamp(14px,2.4vw,18px);font-weight:700}
.player__phtext{
  font-size:clamp(11px,1.8vw,14px);color:var(--navy-soft-2);max-width:44ch;
  display:none;
}
.player__phtext code{background:rgba(255,255,255,.12);padding:2px 6px;border-radius:3px}
.player__phtext strong{color:#FFF}
.player__top{
  position:absolute;left:0;right:0;top:0;
  padding:10px 12px;display:flex;justify-content:space-between;gap:10px;
  background:linear-gradient(rgba(7,12,77,.85),transparent);
}
.player__prog{font-weight:700;font-size:clamp(12px,1.7vw,15px)}
.player__chan{font-size:clamp(11px,1.5vw,13px);color:var(--navy-soft-2)}
.player__bar{
  position:absolute;left:0;right:0;bottom:0;
  padding:8px 6px;display:flex;align-items:center;gap:2px;
  background:linear-gradient(transparent,rgba(7,12,77,.92));
}
.pbtn{
  width:44px;height:44px;flex:0 0 auto;
  border:0;background:transparent;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.pbtn--play{background:#FFF;border-radius:999px}
.pbtn--cc{width:auto;min-width:44px;padding:0 8px;color:#FFF;font-weight:700;font-size:13px}
.pbtn--cc span{border:1.5px solid #FFF;border-radius:3px;padding:1px 5px}
.pbtn:focus-visible{outline-color:#FFF}
.player__livetag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;margin-left:4px;
}
.player__gap{flex:1 1 auto;min-width:0}

.chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{
  min-height:44px;padding:0 16px;border-radius:999px;
  font-size:14px;font-weight:500;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.35);
  background:transparent;color:#FFF;
}
.chip:hover{border-color:#FFF}
.chip--on{border-color:#FFF;background:#FFF;color:var(--brand)}
.chip:focus-visible{outline-color:#FFF}

.livesponsor{
  margin-top:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--panel);color:var(--ink);
  border-radius:6px;padding:10px 14px;
}
.livesponsor__label{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.livesponsor__text{font-size:14px;font-weight:500;min-width:0}
.livesponsor__gap{flex:1 1 0;min-width:0}
.livesponsor__banner{
  width:234px;max-width:100%;height:40px;border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--muted-d);text-align:center;
}

/* =========================================================
   SECTION HEADS
   ========================================================= */
.sec-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding-bottom:8px;margin-bottom:4px;
}
.sec-head--ink{border-bottom:3px solid var(--ink)}
.sec-head--gap{margin-bottom:16px}
.sec-h{
  margin:0;font-family:var(--cond);
  font-size:clamp(20px,2.6vw,24px);text-transform:uppercase;line-height:1.2;
}
.sec-more{font-size:14px;font-weight:500;color:var(--brand);flex:0 0 auto}

.sub-h{
  margin:0 0 12px;font-family:var(--cond);
  font-size:clamp(18px,2.4vw,22px);text-transform:uppercase;
  padding-bottom:8px;line-height:1.2;
}
.sub-h--red{border-bottom:3px solid var(--red)}
.sub-h--blue{border-bottom:3px solid var(--brand)}

/* =========================================================
   LATEST NEWS
   ========================================================= */
.latest{
  display:grid;
  grid-template-columns:minmax(0,1fr) 96px;
  grid-template-areas:"time thumb" "body thumb";
  column-gap:12px;row-gap:4px;
  align-items:start;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.latest__time{
  grid-area:time;
  font-size:13px;font-weight:500;color:var(--red);
}
.latest__body{grid-area:body;min-width:0}
.latest__thumb{
  grid-area:thumb;
  width:96px;border-radius:4px;
}
.latest__title{
  margin:0;font-size:clamp(15px,1.9vw,17px);font-weight:700;line-height:1.35;
}
.latest .kicker{margin-bottom:4px}

/* =========================================================
   DUO SECTION GRIDS
   ========================================================= */
.duo{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:28px;
}
.duo>section{min-width:0}
.sub-lead{
  margin:10px 0 12px;font-family:var(--cond);
  font-size:clamp(18px,2.2vw,20px);line-height:1.25;
}
.toplist li{padding:9px 0;border-top:1px solid var(--line)}
.toplist a{font-size:15px;line-height:1.4;display:block;min-height:24px}

.srow{
  display:flex;gap:12px;align-items:flex-start;
  padding:10px 0;border-bottom:1px solid var(--line);
}
.srow__thumb{flex:0 0 96px;width:96px;border-radius:4px}
.srow__title{margin:0;font-size:15px;font-weight:700;line-height:1.35;min-width:0}

/* =========================================================
   YOUTUBE
   ========================================================= */
.ytsec{
  background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:var(--panel-pad);
  scroll-margin-top:72px;
}
.ytsec__head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;flex-wrap:wrap;margin-bottom:14px;
}
.vgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));
  gap:18px;
}
.vcard{min-width:0}
.vthumb{border-radius:6px}
.vthumb:hover{text-decoration:none}
.vthumb__scrim{
  position:absolute;left:0;right:0;bottom:0;height:52%;
  background:linear-gradient(transparent,rgba(17,24,39,.72));
  pointer-events:none;
}
.play{
  position:absolute;left:50%;top:50%;margin:-22px 0 0 -22px;
  width:44px;height:44px;border-radius:999px;background:var(--red);
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease;
}
.vcard:hover .play{transform:scale(1.08)}
.dur{
  position:absolute;right:6px;bottom:6px;
  background:var(--ink);color:#FFF;
  font-size:12px;font-weight:500;padding:2px 6px;border-radius:3px;
}
.vcard__title{margin:8px 0 4px;font-size:15px;font-weight:700;line-height:1.35}
.vcard__by{font-size:13px;color:var(--muted)}
.ytsec__note{margin-top:14px;font-size:12px;color:var(--muted)}

/* =========================================================
   SPONSORED CAMPAIGN (ad)
   ========================================================= */
.campaign{
  border:1px solid var(--line-2);border-radius:8px;
  overflow:hidden;background:var(--spon-bg);
}
.campaign__head{
  display:flex;justify-content:space-between;gap:12px;
  padding:6px 12px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line-2);
}
.campaign__box{
  min-height:150px;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted-d);font-size:13px;font-weight:500;
  text-align:center;padding:12px;
}

/* =========================================================
   MINI CARD GRIDS
   ========================================================= */
.minigrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.mini{min-width:0}
.mini .kicker{margin:6px 0 0}
.mini__title{margin:2px 0 0;font-size:14px;font-weight:700;line-height:1.35}

/* =========================================================
   NEWS ANALYSIS
   ========================================================= */
.agrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:18px;
}
.acard{
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0;
}
.acard__kick{
  font-size:12px;font-weight:700;letter-spacing:.06em;
  color:var(--brand);text-transform:uppercase;
}
.acard__title{
  margin:0;font-family:var(--cond);
  font-size:clamp(18px,2.2vw,20px);line-height:1.25;
}
.acard__by{display:flex;align-items:center;gap:10px;margin-top:auto;min-width:0}
.avatar{
  flex:0 0 auto;width:36px;height:36px;border-radius:999px;
  background:var(--avatar);color:var(--brand);
  font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center;
}
.acard__name{font-size:14px;font-weight:500}
.acard__role{font-size:12px;color:var(--muted)}

/* =========================================================
   OPINION
   ========================================================= */
.opinion{
  background:var(--panel);
  border-top:4px solid var(--brand);
  border-radius:0 0 8px 8px;
  padding:var(--panel-pad);
}
.opinion__h{
  margin:0 0 6px;font-family:var(--cond);
  font-size:clamp(18px,2.4vw,22px);text-transform:uppercase;
}
.oprow{
  padding:12px 0;border-bottom:1px solid var(--line);
  display:flex;gap:6px 14px;align-items:baseline;flex-wrap:wrap;
}
.oprow__who{font-size:13px;font-weight:500;color:var(--muted);flex:0 0 auto}
.oprow__title{
  margin:0;flex:1 1 260px;min-width:0;
  font-size:clamp(15px,1.9vw,17px);font-weight:700;line-height:1.35;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--brand);color:var(--navy-soft)}
.footer__inner{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap:24px;font-size:14px;
  padding-block:28px;
}
.footer__logo{
  width:140px;max-width:100%;height:46px;
  border:2px dashed rgba(255,255,255,.45);border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:#FFF;margin-bottom:12px;
}
.footer__desc{line-height:1.6}
.footer__col{display:flex;flex-direction:column;gap:6px;min-width:0}
.footer__col strong{color:#FFF}
.footer__col a{color:var(--navy-soft);min-height:32px;display:flex;align-items:center}
.footer__col a:hover{color:#FFF}

/* =========================================================
   BOTTOM TAB BAR (mobile app chrome)
   ========================================================= */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:var(--panel);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:0 -6px 18px rgba(17,24,39,.08);
}
.tabbar__item{
  min-height:var(--tab-h);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:11px;font-weight:500;color:var(--muted-d);
  background:transparent;border:0;cursor:pointer;
  padding:6px 2px;
}
.tabbar__item:hover{text-decoration:none;color:var(--brand)}
.tabbar__item svg{width:22px;height:22px}
.tabbar__item.is-active{color:var(--brand)}

/* =========================================================
   ≥ 480px — large phone
   ========================================================= */
@media (min-width:480px){
  .lead__body{padding:20px}
  .latest{
    grid-template-columns:minmax(0,1fr) 120px;
    column-gap:16px;
  }
  .latest__thumb{width:120px}
  .player__ph svg{width:42px;height:42px}
  .player__phtext{display:block}
  .campaign__box{min-height:180px}
}

/* =========================================================
   ≥ 768px — tablet: full desktop chrome returns
   ========================================================= */
@media (min-width:768px){
  :root{--pad:24px;--band:24px;--panel-pad:24px}

  body{padding-bottom:0}
  .tabbar{display:none}

  /* header back to the desktop bar */
  .site-header{position:static}
  .header__inner{
    flex-wrap:wrap;gap:16px;
    padding-block:14px;min-height:0;
  }
  .hamburger{order:5}
  .brand{width:168px;height:56px;font-size:12px;line-height:1.3}
  .brand__note{display:block}
  .header__search{
    position:static;display:block;
    flex:0 1 300px;min-width:180px;
    padding:0;border:0;box-shadow:none;background:transparent;
  }
  .search-toggle{display:none}
  .livebtn{display:inline-flex}

  /* nav bar back to tabs */
  .catnav__inner{
    gap:0;padding-block:0;
    padding-inline:calc(var(--pad) - 12px);
    font-size:15px;
  }
  .catnav__link{
    height:48px;min-height:0;padding:0 14px;
    border:0;border-radius:0;font-size:15px;
  }
  .catnav__link:hover{background:rgba(255,255,255,.14);border:0}
  .catnav__link.is-active{
    background:transparent;color:#FFF;font-weight:500;
    box-shadow:inset 0 -4px 0 var(--red);
  }

  .breaking__inner{gap:16px;height:44px;overflow:hidden}
  .breaking__tag{font-size:14px}
  .breaking__track a{font-size:15px}


  .layout{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:"main main" "lrail rrail";
    padding-bottom:48px;
  }

  .lead__body{padding:20px 24px 24px}
  .campaign__box{min-height:200px}
  .player__bar{padding:10px 12px;gap:6px}
  .player__ph{gap:10px;padding:24px}
  .player__ph svg{width:48px;height:48px}

  .latest{
    grid-template-columns:64px minmax(0,1fr) 120px;
    grid-template-areas:"time body thumb";
    column-gap:16px;
  }
  .latest__time{padding-top:2px}

  .footer__inner{padding-block:36px;gap:28px}
}

/* =========================================================
   ≥ 1024px — small laptop: right sidebar returns
   ========================================================= */
@media (min-width:1024px){
  .layout{
    grid-template-columns:minmax(0,1fr) var(--rail-r);
    grid-template-areas:"main rrail" "lrail rrail";
  }
  .rail--right{grid-template-columns:minmax(0,1fr)}
}

/* =========================================================
   ≥ 1280px — full snapshot layout: three columns
   ========================================================= */
@media (min-width:1280px){
  .layout{
    grid-template-columns:var(--rail-l) minmax(0,1fr) var(--rail-r);
    grid-template-areas:"lrail main rrail";
  }
  .rail--left,.rail--right{grid-template-columns:minmax(0,1fr)}
  .minigrid{gap:14px}
}

/* =========================================================
   Motion / print
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .drawer{transition:none}
}

@media print{
  .tabbar,.catnav,.drawer,.scrim,.ad,.campaign,.breaking{display:none!important}
  body{padding-bottom:0}
}


/* ===== 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 WATCH
   LIVE TV button leaves the header (it is still in the bottom tab bar). */
@media (max-width: 767px){
  .site-header .livebtn{display:none}
  .langsw{margin-left:auto}
}

/* The logo placeholder box is fixed-width and was pushing the switcher off
   screen on small phones. Let it compress and drop its second line. */
@media (max-width: 767px){
  .site-header .brand{flex:0 1 auto;min-width:0;max-width:42vw;overflow:hidden;
    white-space:nowrap;text-overflow:ellipsis;font-size:12px;line-height:1.2}
  .site-header .brand__note{display:none}
}


/* ===== 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 player: click-to-play embed ===== */
.player__ph{position:relative;overflow:hidden;padding:0;display:block}
.live-poster{width:100%;height:100%;object-fit:cover;display:block}
.live-poster-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,12,77,.30) 0%,rgba(7,12,77,.10) 45%,rgba(7,12,77,.55) 100%)}
.player__bigplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:72px;height:72px;border:0;border-radius:50%;background:#ED1018;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  box-shadow:0 6px 24px rgba(0,0,0,.35)}
.player__bigplay:hover{filter:brightness(1.08)}
.player__bigplay:focus-visible{outline:3px solid #FFFFFF;outline-offset:3px}
.live-embed{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:5;background:#000}
.player__ph.is-playing .live-poster-scrim,
.player__ph.is-playing .player__bigplay{display:none}
/* once YouTube's own controls are on screen, the mock bar would just confuse */
body.live-playing .player__bar,
body.live-playing .player__top{display:none}
@media (prefers-reduced-motion:reduce){.player__bigplay{transition:none}}


/* =========================================================================
   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 */
.lead__title,
.sec-h,
.sub-h,
.sub-lead,
.rail-h,
.live__h,
.opinion__h,
.channels__h,
.mini__title,
.srow__title,
.latest__title,
.vcard__title,
.trow__title,
.oprow__title,
.acard__title,
.tcard__title,
.spon__title,
/* body copy */
p,
.lead__stand,
.footer__desc,
.ytsec__note{font-family:'Noto Sans Telugu',sans-serif}


/* =========================================================================
   TYPE SIZE - h5 headlines 16px, body copy 15px
   ========================================================================= */
h5{margin:0;overflow-wrap:anywhere;font-size:16px!important}
p,
.lead__stand,
.footer__desc,
.ytsec__note{font-size:15px!important}


/* =========================================================================
   LEAD HEADLINE - 20px
   ========================================================================= */
.lead__title{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 4: fill the bar (the track used to shrink to its content) and
   drop the old swipe snapping. Each item already ends with its own separator
   and 28px margin, so the loop spacing is uniform. */
.breaking__track.tn-tick-track{flex:1 1 auto;scroll-snap-type:none}