/* =====================================================================
   Naalaiya Theerpu News – PHONE layout (loaded only on screens <= 700px)
   Every size is a share of the screen width (vw), measured from the
   client's phone mock-up, so the page scales exactly like the design.
   --ms  = global text-size multiplier (1 = exact mock-up size; raise to 1.15 for larger text)
   ===================================================================== */
:root{--ms:1;--gold:#f5b400;--gold2:#ffd54a;--red:#d71920}

html body{background:#fff;padding-bottom:calc(12vw + env(safe-area-inset-bottom));font-size:3.4vw}
html body .topbar{display:none}
html body .wa-float{display:none}
html body .to-top{bottom:calc(14vw + env(safe-area-inset-bottom));right:3vw;width:9vw;height:9vw}
html body main{padding:0}
html body .container{padding:0 3vw}

/* ---------------------------------------------------------------- header */
html body .site-header{background:radial-gradient(circle at 90% 35%,rgba(245,180,0,.30),transparent 36%),#000;border:0;border-bottom:1px solid #4a3a0a}
html body .site-header::after{display:none}
html body .header-inner{display:flex;align-items:center;flex-wrap:nowrap;gap:0;height:16.6vw;padding:0 0 0 3.3vw}
html body .brand{flex:1 1 0;min-width:0;gap:2.4vw;overflow:hidden}
html body .brand img.logo{flex:0 0 auto;width:12.9vw;height:12.9vw;filter:none}
html body .brand .name{min-width:0;gap:.6vw}
html body .brand .name-row{display:flex;align-items:center;flex-wrap:nowrap;gap:1.2vw;min-width:0}
html body .brand h1,html body .brand .t{font-size:max(16px,4.79vw);line-height:1.2;white-space:nowrap;flex:0 1 auto;min-width:0}
html body .badge-news{flex:0 0 auto;font-size:max(10px,3.2vw);padding:.5vw 1.5vw;border-radius:.6vw;line-height:1.3;letter-spacing:.04em}
html body .tagline{font-size:max(9px,2.45vw);font-weight:600;gap:1.4vw;white-space:nowrap}
html body .tagline::before,html body .tagline::after{flex:0 0 auto;width:4vw}
html body .header-tools{flex:0 0 auto;gap:0;margin:0;height:100%}
html body .header-cta,html body .header-mid,html body .search,html body .lang-mini{display:none!important}
html body .m-icon{display:grid;place-items:center;width:9.4vw;height:100%;color:var(--gold)}
html body .m-icon svg{width:4.7vw;height:4.7vw}
html body .m-icon svg path{fill:var(--gold)}
html body .menu-btn{display:grid;place-items:center;width:7.6vw;height:8.6vw;margin:0;border-radius:.8vw 0 0 .8vw;background:rgba(255,255,255,.09);border:0}
html body .menu-btn svg{width:5vw;height:5vw}

/* ------------------------------------------------------------------- nav */
html body .mainnav{box-shadow:none;border-bottom:1px solid #2a2a2a}
html body .mainnav .container{padding:0;position:relative}
html body .mainnav ul{justify-content:flex-start;overflow-x:auto;padding-right:8vw}
html body .mainnav li{flex:none}
html body .mainnav li a{height:8vw;min-height:28px;padding:0 2.9vw;font-size:max(8.6px,calc(2.2vw*var(--ms)));font-weight:600;gap:1vw}
html body .mainnav li a .i{width:3.4vw;height:3.4vw;min-width:13px;min-height:13px}
html body .mainnav li a.active{padding:0 4.2vw 0 3.6vw;font-weight:700;clip-path:polygon(0 0,100% 0,calc(100% - 2vw) 100%,0 100%)}
html body .mainnav li a.live{display:none}
html body .nav-next{display:grid;position:absolute;right:0;top:0;bottom:0;width:8vw;place-items:center;background:linear-gradient(90deg,rgba(0,0,0,0),#000 55%);color:#fff;font-size:max(15px,4.4vw);line-height:1;padding-bottom:.4vw}

/* -------------------------------------------------------------- breaking */
html body .breaking{border-bottom:1px solid #eee}
html body .breaking .container{padding:0;height:6.4vw;min-height:24px;gap:0}
html body .breaking .lbl{font-size:max(8.6px,2.55vw);padding:0 4vw 0 3vw;gap:1.2vw;clip-path:polygon(0 0,100% 0,calc(100% - 2vw) 100%,0 100%);min-width:33vw}
html body .breaking .lbl .i{width:3.2vw;height:3.2vw}
html body .breaking .ticker{margin:0 1.5vw}
html body .ticker-track a{font-size:max(8.4px,calc(2.3vw*var(--ms)));padding:0 4vw;color:#111;font-weight:600;border-right:1px solid #ccc}
html body .b-next{display:grid;place-items:center;flex:0 0 5vw;width:5vw;color:var(--red)}
html body .b-next .i{width:2.8vw;height:2.8vw;stroke-width:2.6}

/* ------------------------------------------------------------ home wrap */
html body .m-home{display:block;padding:1.4vw 1.9vw 3vw}
html body .m-home>*{margin-left:0;margin-right:0}

/* ------------------------------------------------------------------ hero */
html body .m-home .hero{min-height:0;height:46.3vw;border-radius:1.1vw;background:#000}
html body .m-home .hero .slide{align-items:flex-end}
html body .m-home .hero .txt{padding:0 7vw 3.2vw 2.6vw;max-width:none}
html body .m-home .hero .tag{font-size:max(8.2px,calc(2.11vw*var(--ms)));padding:0 1.7vw;height:4.7vw;min-height:20px;display:inline-flex;align-items:center;border-radius:.5vw;font-weight:700}
html body .m-home .hero h2{font-size:max(12.4px,calc(3.51vw*var(--ms)));line-height:1.5;margin:1vw 0 .6vw;font-weight:800}
html body .m-home .hero p{display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:max(8.6px,calc(2.4vw*var(--ms)));line-height:1.42;margin:0 0 1vw;color:#eee}
html body .m-home .hero .txt .meta{font-size:max(7.4px,calc(1.92vw*var(--ms)));color:#eee;gap:1vw}
html body .m-home .hero .txt .meta .i{width:2.8vw;height:2.8vw;min-width:11px;min-height:11px}
html body .m-home .hero .slide::before{background:linear-gradient(0deg,rgba(0,0,0,.95) 8%,rgba(0,0,0,.55) 52%,rgba(0,0,0,.05))}
html body .m-home .hero .dots{left:auto;right:21.5vw;bottom:3.4vw;gap:1.2vw}
html body .m-home .hero .dots i{width:1.7vw;height:1.7vw;background:#777}
html body .m-home .hero .dots i.on{width:3.2vw;background:var(--gold)}
html body .m-home .hero .ctrl{right:2.1vw;bottom:2.4vw;gap:.8vw}
html body .m-home .hero .ctrl button{width:4.9vw;height:4.9vw;min-width:22px;min-height:22px;border-radius:.6vw;background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.85);font-size:max(13px,3.4vw);line-height:1;padding-bottom:.3vw}

/* ------------------------------------------------------------ icon strip */
html body .m-home .iconstrip{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:.5vw;margin:2.1vw 0 0;background:none;border-radius:0;overflow:visible}
html body .m-home .iconstrip a{min-width:0;flex:none;gap:1.1vw;padding:2.4vw .4vw 1.8vw;background:#0a0a0a;border:1px solid #3d3109;border-radius:1.1vw;font-size:max(7.8px,calc(2vw*var(--ms)));font-weight:600;line-height:1.3;position:relative}
html body .m-home .iconstrip a::after{display:none}
html body .m-home .iconstrip a .ic .i{width:5.7vw;height:5.7vw;min-width:20px;min-height:20px;stroke-width:1.7;color:var(--gold)}

/* -------------------------------------------------------- section header */
html body .m-sec{display:flex;align-items:center;justify-content:space-between;gap:1.5vw;margin:2.6vw 0 .8vw}
html body .m-sec h2{font-size:max(12px,calc(3.04vw*var(--ms)));font-weight:800;line-height:1.25;padding-left:1.8vw;border-left:.6vw solid var(--gold)}
html body .m-sec a{font-size:max(8px,calc(2.04vw*var(--ms)));font-weight:500;display:inline-flex;align-items:center;gap:.8vw;white-space:nowrap}
html body .m-sec a .i{width:2.4vw;height:2.4vw;min-width:10px;min-height:10px}

/* ------------------------------------------------------------ news rows */
html body .mrow{display:flex;gap:2.9vw;padding:1.4vw 0;border-bottom:1px solid #e4e4e4;align-items:stretch}
html body .mim{position:relative;flex:0 0 31.7vw;width:31.7vw;aspect-ratio:2.18/1;border-radius:.6vw;overflow:hidden;align-self:flex-start}
html body .mim img{width:100%;height:100%;object-fit:cover}
html body .mim .tag{position:absolute;left:.5vw;bottom:0;font-size:max(7.6px,calc(1.9vw*var(--ms)));padding:.5vw 1.5vw;border-radius:.5vw .5vw 0 0;font-weight:700}
html body .mtx{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:.6vw;padding:.1vw 0}
html body .mtx h3{font-size:max(8.8px,calc(2.24vw*var(--ms)));line-height:1.45;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html body .mtx p{font-size:max(7.4px,calc(1.8vw*var(--ms)));line-height:1.45;color:#666;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .mtx .meta{font-size:max(7.4px,calc(1.79vw*var(--ms)));color:#555;margin-top:auto;gap:1vw;flex-wrap:nowrap;white-space:nowrap}
html body .mtx .meta .i{width:2.6vw;height:2.6vw;min-width:10px;min-height:10px;color:#555;margin:0}

/* ------------------------------------- two columns: districts | YouTube */
html body .m-two{display:grid;grid-template-columns:53fr 47fr;margin-top:1vw}
html body .m-two>section:first-child{padding-right:1.8vw}
html body .m-two>section:last-child{padding-left:1.8vw;border-left:1px solid #e6e6e6}
html body .m-two .m-sec{margin-top:1.8vw}
html body .m-two .m-sec h2{font-size:max(8.6px,calc(2.18vw*var(--ms)))}
html body .m-two .m-sec a{font-size:max(7.6px,calc(1.9vw*var(--ms)))}
html body .m2-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:1.9vw}
html body .m2t{position:relative;display:block;aspect-ratio:1.6/1;border-radius:.6vw;overflow:hidden}
html body .m2t img{width:100%;height:100%;object-fit:cover}
html body .m2t .tag{position:absolute;left:.5vw;bottom:0;font-size:max(8px,calc(1.8vw*var(--ms)));padding:.4vw 1.3vw;border-radius:.5vw .5vw 0 0;font-weight:700}
html body .m2v{position:relative;display:block;aspect-ratio:2.6/1;border-radius:.6vw;overflow:hidden;background:#111}
html body .m2v img{width:100%;height:100%;object-fit:cover;opacity:.9}
html body .m2cap{position:absolute;left:1.2vw;top:50%;transform:translateY(-50%);max-width:58%;padding:1.1vw 1.5vw;background:rgba(0,0,0,.55);border-radius:.8vw;color:#fff;font-weight:800;font-size:max(7.6px,calc(1.9vw*var(--ms)));line-height:1.4}
html body .m2play{position:absolute;right:21%;top:50%;width:6.3vw;height:6.3vw;min-width:24px;min-height:24px;border-radius:50%;background:rgba(0,0,0,.78);transform:translateY(-8%);border:1px solid rgba(255,255,255,.6)}
html body .m2play::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-35%,-50%);border-left:1.9vw solid #fff;border-top:1.2vw solid transparent;border-bottom:1.2vw solid transparent}
html body .m2v .dur{position:absolute;right:1vw;bottom:1vw;background:rgba(0,0,0,.82);color:#fff;font-size:max(8px,calc(1.8vw*var(--ms)));padding:.2vw 1vw;border-radius:.5vw}

/* ---------------------------------------------- remaining home sections */
html body .m-home .card{box-shadow:none;border:1px solid #eee;border-radius:1vw}
html body .m-home .gal{padding:1.5vw;gap:1.5vw}
html body .m-home .adbox,html body .m-home .yt-card{margin-top:3vw;padding:4vw;border-radius:1.4vw}
html body .m-home .adbox h4,html body .m-home .yt-card h4{font-size:max(13px,3.4vw)}
html body .m-home .adbox .num{font-size:max(15px,4.4vw)}
html body .m-home .yt-card p,html body .m-home .adbox div{font-size:max(11px,2.9vw)}
html body .m-home .btn{font-size:max(11px,3vw);padding:2vw 5vw}

/* ------------------------------------------------------------ bottom bar */
html body .bottom-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:95;background:#08080a;border-top:1px solid #26262a;padding-bottom:env(safe-area-inset-bottom)}
html body .bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7vw;height:12vw;min-height:44px;padding:0;color:#eee;font-size:max(8px,calc(1.9vw*var(--ms)));font-weight:600;text-align:center}
html body .bottom-nav a .ic{position:relative;display:grid;place-items:center;height:5.6vw;min-height:20px}
html body .bottom-nav a .ic .i,html body .bottom-nav a .ic svg{width:5.4vw;height:5.4vw;min-width:20px;min-height:20px}
html body .bottom-nav a.wa .ic svg path{fill:#25d366}
html body .bottom-nav a.active{color:var(--gold)}
html body .bottom-nav a.active .ic .i{fill:var(--gold);fill-opacity:.2}
html body .bottom-nav a .ic .dot{display:grid;place-items:center;position:absolute;top:-.8vw;right:-1.8vw;min-width:3.3vw;height:3.3vw;min-height:13px;padding:0 .5vw;border-radius:50%;background:var(--red);color:#fff;font-size:max(8px,1.9vw);font-style:normal;font-weight:700;line-height:1}

/* --------------------------------------------- inner pages on the phone */
html body .page-head{padding:4.6vw 0}
html body .page-head h1{font-size:max(19px,5.2vw)}
html body .crumbs{font-size:max(11px,2.9vw)}
html body .cols,html body .cols.home{grid-template-columns:1fr;gap:3vw}
html body .container>.cols{margin-top:0}
html body .row-item.big{flex-direction:row;gap:2.9vw;padding:1.8vw 2.4vw}
html body .row-item.big img{width:31.7vw;height:auto;aspect-ratio:2.18/1;flex-shrink:0;border-radius:.6vw}
html body .row-item.big h4{font-size:max(12px,2.9vw);line-height:1.45}
html body .row-item.big p{font-size:max(10px,2.4vw);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:.6vw 0}
html body .row-item .tag{font-size:max(9px,2vw)}
html body .row-item .meta{font-size:max(9.5px,2.2vw)}
html body .row-item{padding:2vw 2.4vw;gap:2.9vw}
html body .row-item img{width:26vw;height:auto;aspect-ratio:1.5/1}
html body .row-item h4{font-size:max(11.5px,2.8vw)}
html body .sec-title{font-size:max(13px,3.6vw);padding:2.6vw 3vw}
html body .recent li{font-size:max(11.5px,2.9vw);padding:2.4vw 3vw}
html body .cards.c3,html body .cards.c4,html body .cards.c2{grid-template-columns:1fr 1fr;gap:2.6vw}
html body .ncard h3{font-size:max(11.5px,2.9vw)}
html body .ncard .meta{font-size:max(9px,2.2vw)}
html body .ncard .bd{padding:2vw 2.2vw 2.4vw}
html body .article{padding:4vw}
html body .article h1{font-size:max(19px,5.2vw)}
html body .article .body p{font-size:max(15px,4vw);line-height:1.85}
html body .prose{padding:4.4vw}
html body .prose h2{font-size:max(16px,4.4vw)}
html body .prose p,html body .prose li{font-size:max(13px,3.5vw)}
html body .form label{font-size:max(12px,3.2vw)}
html body .gal.full{grid-template-columns:1fr 1fr;gap:2.6vw;padding:3vw}
html body .stats{grid-template-columns:1fr 1fr}
html body .pagination a{min-width:9vw;height:9vw}

/* ---------------------------------------------------------------- footer */
html body .footer-grid{grid-template-columns:1fr 1fr;padding:6vw 4vw;gap:5vw}
html body .footer-grid>:first-child,html body .footer-grid>.contact{grid-column:1/-1}
html body .footer .flogo img{width:18vw;height:18vw}
html body .footer .flogo .t{font-size:max(17px,5vw)}
html body .footer .flogo small{font-size:max(11px,3vw)}
html body .footer h5{font-size:max(13px,3.6vw)}
html body .footer li{font-size:max(11.5px,3vw)}
html body .footer-bar .container{flex-direction:column;gap:1vw;text-align:center;padding:3vw}
html body .footer-bar{font-size:max(10px,2.7vw)}

/* ---------------------------------------------------------------- drawer */
html body .drawer nav{width:76vw}
html body .drawer nav a{font-size:max(14px,3.8vw);padding:3.2vw 1vw}
html body .promo{flex-direction:column;background:#0a0a0a;color:#fff;text-align:center}

/* placeholder art sits top-right, away from the headline (real photos fill the whole slide) */
html body .m-home .hero .slide img[src$=".svg"]{left:auto;right:0;width:50%;height:46%;top:0;-webkit-mask-image:linear-gradient(#000 50%,transparent);mask-image:linear-gradient(#000 50%,transparent);opacity:.8}
html body .m-home .hero .slide{background:radial-gradient(circle at 70% 20%,#2a2008,#050505 70%)}

/* two-column block: keep both headings on one line like the mock-up */
html body .m-two>section:last-child{padding-left:1.4vw}
html body .m-two>section:first-child{padding-right:1.4vw}
html body .m-two .m-sec{gap:.8vw}
html body .m-two .m-sec h2{font-size:max(8px,calc(2.05vw*var(--ms)));padding-left:1.4vw;white-space:nowrap}
html body .m-two .m-sec a{font-size:max(7.4px,calc(1.8vw*var(--ms)));gap:.5vw}
html body .m-two .m-sec a .i{width:2vw;height:2vw;min-width:8px;min-height:8px}

/* inner-page rows: thumbnails keep their 2.18:1 / 1.5:1 shape (no stretching) */
html body .row-item img,html body .row-item.big img{align-self:flex-start}
html body .row-item.big{align-items:flex-start}