/* ============ সংবাদ টিউন — Frontend styles (Prothom Alo-style layout) ============ */
:root{
  --font-bn:'Noto Serif Bengali','Tiro Bangla',serif;
  --font-ui:'Noto Sans Bengali','Hind Siliguri',Arial,sans-serif;
  --black:#121212; --text:#2b2b2b; --muted:#6f6f6f; --light:#8b8b8b;
  --blue:#0573e6; --red:#d60000; --line:#e5e5e5; --line-2:#cfcfcf;
  --ad-bg:#f3f3f3; --soft-blue:#eaf4fd; --soft:#f7f7f7; --bg:#fff;
  --wrap:1248px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-bn);font-size:16px;line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.hide{display:none!important}

/* ---------- Top strip ---------- */
.topbar{background:var(--soft-blue);font-size:13px;color:var(--muted)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:34px;gap:12px}
.topbar .social{display:flex;gap:10px}
.topbar .social a{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--black)}
.topbar .social a:hover{color:var(--blue)}

/* ---------- Header ---------- */
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;min-height:84px;gap:16px}
.logo{display:inline-flex;align-items:center;gap:8px;line-height:1}
.logo-mark{width:44px;height:44px;flex:none}
.logo-text{font-family:var(--font-bn);font-weight:800;font-size:38px;color:var(--black);letter-spacing:-.5px}
.logo-text b{color:var(--red);font-weight:800}
.logo small{display:block;font-family:Arial,sans-serif;font-size:10px;letter-spacing:3.2px;color:var(--muted);margin-top:4px;font-weight:600}
.mast-right{display:flex;align-items:center;gap:6px}
.icon-btn{width:44px;height:44px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--black);border-radius:4px}
.icon-btn:hover{background:var(--soft)}
.mast-search{display:none;align-items:center;border:1px solid var(--line-2);border-radius:4px;overflow:hidden}
.mast-search.open{display:flex}
.mast-search input{border:0;outline:0;padding:9px 12px;font-family:var(--font-ui);font-size:15px;width:240px}
.mast-search button{border:0;background:var(--blue);color:#fff;padding:9px 14px;cursor:pointer;font-size:14px}

.navbar{border-top:1px solid var(--line);border-bottom:2px solid var(--line-2);background:#fff;position:sticky;top:0;z-index:50}
.navbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px}
.nav-links{display:flex;align-items:center;overflow-x:auto;scrollbar-width:none;flex:1}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{white-space:nowrap;padding:12px 9px;font-size:15px;font-weight:600;color:var(--black)}
.nav-links a:first-child{padding-left:0}
.nav-links a:hover,.nav-links a.active{color:var(--blue)}
.nav-tools{display:flex;align-items:center;gap:2px;flex:none}
.nav-tools a,.nav-tools button{display:flex;align-items:center;gap:6px;padding:8px 10px;font-size:14px;border:0;background:none;cursor:pointer;color:var(--black);border-left:1px solid var(--line)}
.nav-tools a:hover,.nav-tools button:hover{color:var(--blue)}

/* mega menu */
.mega{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line-2);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.mega.open{display:block}
.mega .wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:4px 24px;padding-top:20px;padding-bottom:24px}
.mega a{padding:8px 0;font-weight:600;border-bottom:1px solid var(--line)}
.mega a:hover{color:var(--blue)}
.mega a.sub{font-weight:400;color:var(--muted);padding-left:12px}

/* breaking */
.breaking{background:#fff;border-bottom:1px solid var(--line)}
.breaking .wrap{display:flex;align-items:stretch;gap:12px;min-height:38px}
.breaking .label{background:var(--red);color:#fff;font-weight:700;font-size:14px;padding:0 14px;display:flex;align-items:center;flex:none}
.ticker{overflow:hidden;flex:1;display:flex;align-items:center;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.ticker-track{display:flex;gap:48px;white-space:nowrap;animation:tick 60s linear infinite;font-size:15px}
.ticker-track a:hover{color:var(--blue)}
.ticker-track a::before{content:'●';color:var(--red);font-size:9px;margin-right:8px;vertical-align:middle}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ads */
.ad-zone{background:var(--ad-bg);padding:12px 0;text-align:center}
.ad-zone img{margin:0 auto;max-height:250px;width:auto}
.ad-label{font-size:11px;color:var(--light);text-align:center;margin-bottom:4px;font-family:var(--font-ui)}
.ad-box{text-align:center;margin-bottom:20px}
.ad-box img{margin:0 auto}

/* ---------- Story cards ---------- */
.kicker{color:var(--red)}
.kicker::after{content:' • ';color:var(--light)}
.headline{font-family:var(--font-bn);color:var(--black);font-weight:700;margin:0;line-height:1.38;transition:color .2s}
.card:hover .headline,.headline a:hover{color:var(--blue)}
.summary{color:var(--muted);font-size:14.5px;line-height:1.6;margin:6px 0 0}
.time{color:var(--light);font-size:12.5px;margin-top:8px;font-family:var(--font-ui)}
.card{display:block;position:relative}
.thumb{position:relative;overflow:hidden;background:var(--ad-bg);aspect-ratio:16/9}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.card:hover .thumb img{transform:scale(1.04)}
.play{position:absolute;left:10px;top:10px;width:30px;height:30px;border-radius:50%;background:var(--red);display:grid;place-items:center}
.play::after{content:'';border-left:10px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.play.big{width:54px;height:54px;left:50%;top:50%;transform:translate(-50%,-50%)}
.play.big::after{border-left-width:17px;border-top-width:10px;border-bottom-width:10px;margin-left:5px}

/* list item with small right image */
.li-card{display:grid;grid-template-columns:1fr 100px;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.li-card .headline{font-size:16.5px;font-weight:600}
.li-card .thumb{aspect-ratio:4/3}
.li-card.noimg{grid-template-columns:1fr}
.li-card:last-child{border-bottom:0}

/* ---------- Home: top 3 column grid ---------- */
.top-grid{display:grid;grid-template-columns:3fr 6.5fr 3fr;gap:0;margin-top:20px}
.top-grid>.col{padding:0 18px}
.top-grid>.col:first-child{padding-left:0;border-right:1px solid var(--line)}
.top-grid>.col:last-child{padding-right:0;border-left:1px solid var(--line)}
.col-left .li-card:first-child{padding-top:0}
.lead{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.lead .headline{font-size:27px;line-height:1.33}
.lead .thumb{aspect-ratio:4/3.1}
.lead .caption{font-size:11.5px;color:var(--light);margin-top:4px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--line)}
.pair .li-card{border:0;padding:0;grid-template-columns:1fr 92px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:16px 0;border-bottom:1px solid var(--line)}
.trio .headline{font-size:16.5px;margin-top:8px;font-weight:600}
.trio.noimg .headline{margin-top:0}
.feature-box{background:var(--soft-blue);padding:14px;margin:16px 0 0}
.feature-box h3{text-align:center;margin:0 0 10px;font-size:18px;color:var(--black)}
.feature-box .pair{border:0;padding:6px 0}
.col-right .li-card .headline{font-size:16.5px}
.col-right .li-card{grid-template-columns:1fr 100px}

/* tags strip */
.tags-strip{display:flex;align-items:center;gap:10px;padding:22px 0;overflow-x:auto;scrollbar-width:thin}
.tags-strip b{font-size:14px;white-space:nowrap}
.tags-strip a{white-space:nowrap;border:1px solid var(--line-2);border-radius:999px;padding:4px 14px;font-size:13.5px;color:var(--text)}
.tags-strip a:hover{border-color:var(--blue);color:var(--blue)}

/* section heading */
.sec{margin:28px 0}
.sec-title{display:flex;align-items:center;gap:8px;border-top:3px solid var(--blue);padding-top:12px;margin-bottom:16px}
.sec-title.plain{border-top:1px solid var(--line-2)}
.sec-title a,.sec-title span{font-size:22px;font-weight:700;color:var(--black);display:inline-flex;align-items:center;gap:8px}
.sec-title a:hover{color:var(--blue)}
.sec-title a::after{content:'›';color:var(--red);font-size:28px;line-height:1;margin-top:-4px}
.sec-title .dot{width:14px;height:14px;border-radius:50%;background:var(--blue);display:inline-block}
.sec-title .subs{margin-left:auto;display:flex;gap:14px;font-size:14px}
.sec-title .subs a{font-size:14px;font-weight:600;color:var(--muted)}
.sec-title .subs a::after{display:none}

/* video strip */
.video-sec{background:var(--soft-blue);padding:6px 0 26px;margin:28px 0}
.video-sec .sec{margin:16px 0 0}
.hscroll{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 72px)/5);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.hscroll>*{scroll-snap-align:start;background:#fff}
.hscroll .body{padding:10px 12px 14px;text-align:center}
.hscroll .headline{font-size:16px;font-weight:600}

/* category tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tile{position:relative;aspect-ratio:16/8;overflow:hidden;display:block}
.tile img{width:100%;height:100%;object-fit:cover}
.tile .ov{position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(0,0,0,.8));display:flex;flex-direction:column;justify-content:flex-end;padding:10px 12px;color:#fff}
.tile .ov .cat{background:var(--red);align-self:flex-start;padding:0 6px;font-size:12.5px;margin-bottom:4px}
.tile .ov h4{margin:0;font-size:15.5px;line-height:1.4}
.tiles-bg{background:#fdf0f0;padding:22px 0}

/* category block: big + list + side */
.block{display:grid;grid-template-columns:3fr 6fr 3fr;gap:24px}
.block .big .headline{font-size:24px;margin-top:10px}
.block .mid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.block .mid .headline{font-size:16.5px;margin-top:8px;font-weight:600}
.block.v2{grid-template-columns:6fr 3fr 3fr}
.block-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.block-4 .headline{font-size:17px;margin-top:8px;font-weight:600}
.block-4 .card{padding-bottom:12px}

/* popular tabs */
.tabs{display:flex;border-bottom:1px solid var(--line-2);margin-bottom:6px}
.tabs button{flex:1;border:0;background:none;padding:10px 0;font-size:16px;cursor:pointer;color:var(--text);border-bottom:3px solid transparent;margin-bottom:-2px}
.tabs button.on{border-color:var(--red);font-weight:700;color:var(--black)}
.ranked{counter-reset:r}
.ranked .item{display:grid;grid-template-columns:38px 1fr;gap:6px;padding:12px 0;border-bottom:1px solid var(--line)}
.ranked .item::before{counter-increment:r;content:counter(r,bengali);font-size:32px;color:var(--line-2);font-weight:700;line-height:1}
.ranked .headline{font-size:16px;font-weight:600}

/* opinion */
.opinion .card{border:1px solid var(--line);padding:14px;text-align:center}
.opinion .card .thumb{width:84px;height:84px;border-radius:50%;margin:0 auto 10px;aspect-ratio:1}
.opinion .author{color:var(--red);font-size:14px;margin-top:8px}

/* ---------- Category / list page ---------- */
.page-head{padding:24px 0 6px;border-bottom:1px solid var(--line-2);margin-bottom:20px}
.page-head h1{margin:0;font-size:30px;color:var(--black)}
.page-head .crumbs{font-size:13px;color:var(--muted);margin-bottom:6px;font-family:var(--font-ui)}
.page-head .crumbs a{color:var(--blue)}
.subnav{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.subnav a{border:1px solid var(--line-2);border-radius:999px;padding:3px 14px;font-size:14px}
.subnav a:hover{border-color:var(--blue);color:var(--blue)}
.cat-lead{display:grid;grid-template-columns:2fr 1fr;gap:24px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.cat-lead .main .headline{font-size:28px;margin-top:12px}
.cat-lead .side .card{padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.cat-lead .side .card:last-child{border:0}
.cat-lead .side .headline{font-size:17px;margin-top:8px;font-weight:600}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:20px 0}
.cat-grid .headline{font-size:17px;margin-top:8px;font-weight:600}
.list-rows .row{display:grid;grid-template-columns:1fr 220px;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.list-rows .row .headline{font-size:20px}
.btn-more{display:block;margin:20px auto 40px;border:1px solid var(--blue);color:var(--blue);background:#fff;border-radius:4px;padding:10px 40px;font-size:15px;cursor:pointer}
.btn-more:hover{background:var(--blue);color:#fff}
.btn-more[disabled]{opacity:.5;cursor:default}
.empty{padding:40px 0;text-align:center;color:var(--muted)}

/* ---------- Article ---------- */
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;padding-top:24px}
.art-cat{color:var(--blue);font-size:15px;font-weight:600;border-bottom:1px solid var(--blue);display:inline-block;margin-bottom:8px}
.art-kicker{color:var(--red);font-size:16px;margin-bottom:4px}
.art-title{font-size:36px;line-height:1.35;color:var(--black);margin:0 0 18px;font-weight:700}
.art-sub{font-size:18px;color:var(--muted);margin:-6px 0 18px}
.art-meta{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:12px}
.art-meta .by{border-top:3px solid var(--line-2);width:30px;margin-bottom:8px}
.art-meta .author{font-weight:600;font-size:15px;color:var(--black)}
.art-meta .date{font-size:13px;color:var(--muted);font-family:var(--font-ui);margin-top:4px}
.share{display:flex;gap:8px}
.share a,.share button{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;border:0;cursor:pointer;font-size:13px}
.share .fb{background:#1877f2}.share .x{background:#000}.share .wa{background:#25d366}.share .cp{background:#6f6f6f}.share .pr{background:#888}
.share .fs{background:var(--blue)}
.art-body-wrap{max-width:720px;margin:20px auto 0}
.art-figure{margin:0 0 20px}
.art-figure figcaption{font-size:13px;color:var(--muted);padding:8px 0;border-bottom:1px solid var(--line)}
.video-embed{position:relative;aspect-ratio:16/9;background:#000;margin-bottom:20px}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.art-body{font-size:var(--art-fs,19px);line-height:1.8;color:#222}
.art-body p{margin:0 0 20px}
.art-body img{margin:10px auto;height:auto}
.art-body a{color:var(--blue)}
.read-also{border:1px solid var(--line-2);padding:14px;margin:6px 0 24px}
.read-also .lbl{font-size:13px;color:var(--muted);margin:-4px 0 6px}
.read-also .li-card{padding:0;border:0}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.tags a{background:var(--soft);padding:4px 12px;font-size:14px;border-radius:3px}
.tags a:hover{color:var(--blue)}
.side-sticky{position:sticky;top:60px}
.side-list > h3{font-size:18px;margin:0 0 4px;padding-top:10px;border-top:3px solid var(--blue)}
.comments{margin:30px 0}
.comments h3{font-size:20px;border-top:1px solid var(--line-2);padding-top:14px}
.comment{padding:12px 0;border-bottom:1px solid var(--line)}
.comment b{font-size:15px}
.comment .time{margin:0 0 4px}
.cform{display:grid;gap:10px;margin-top:14px}
.cform input,.cform textarea{font-family:var(--font-ui);font-size:15px;padding:10px 12px;border:1px solid var(--line-2);border-radius:4px;width:100%}
.cform button{justify-self:start;background:var(--blue);color:#fff;border:0;padding:10px 24px;border-radius:4px;cursor:pointer;font-size:15px}
.note{font-size:14px;color:#0a7a3f;margin:6px 0}

/* ---------- Search page ---------- */
.search-box{display:flex;gap:0;margin:10px 0 24px;max-width:640px}
.search-box input{flex:1;border:1px solid var(--line-2);padding:12px 14px;font-size:16px;font-family:var(--font-ui);border-radius:4px 0 0 4px;outline:0}
.search-box input:focus{border-color:var(--blue)}
.search-box button{border:0;background:var(--blue);color:#fff;padding:0 22px;font-size:15px;border-radius:0 4px 4px 0;cursor:pointer}

/* ---------- Footer ---------- */
.footer{background:#f5f5f5;margin-top:40px;border-top:1px solid var(--line-2);font-family:var(--font-ui)}
.footer .top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:26px 0;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.footer .follow{display:flex;align-items:center;gap:10px;font-size:14px}
.footer .follow a{width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line-2);display:grid;place-items:center}
.footer .follow a:hover{color:var(--blue);border-color:var(--blue)}
.footer .links{display:grid;grid-template-columns:repeat(6,1fr);gap:8px 18px;padding:22px 0;border-bottom:1px solid var(--line-2);font-size:14.5px}
.footer .links a:hover{color:var(--blue)}
.footer .sub-form{display:flex;gap:0}
.footer .sub-form input{border:1px solid var(--line-2);padding:9px 12px;font-size:14px;border-radius:4px 0 0 4px;width:220px;outline:0}
.footer .sub-form button{border:0;background:var(--black);color:#fff;padding:0 16px;border-radius:0 4px 4px 0;cursor:pointer;font-size:14px}
.footer .bottom{display:flex;justify-content:space-between;gap:16px;padding:18px 0 26px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.footer .bottom p{margin:2px 0}

/* skeleton */
.sk{background:linear-gradient(90deg,#f0f0f0,#f8f8f8,#f0f0f0);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:2px}
@keyframes sk{to{background-position:-200% 0}}
.sk-line{height:14px;margin:8px 0}

.to-top{position:fixed;right:18px;bottom:18px;width:42px;height:42px;border-radius:50%;background:var(--black);color:#fff;border:0;cursor:pointer;display:none;z-index:60}
.to-top.show{display:grid;place-items:center}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .top-grid{grid-template-columns:1fr 2fr}
  .top-grid>.col-right{grid-column:1/-1;border-left:0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
  .top-grid>.col-center{padding-right:0}
  .hscroll{grid-auto-columns:calc((100% - 36px)/3)}
  .block,.block.v2{grid-template-columns:1fr 1fr}
  .block .side{grid-column:1/-1}
  .block-4,.cat-grid{grid-template-columns:repeat(3,1fr)}
  .footer .links{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:820px){
  .top-grid{grid-template-columns:1fr}
  .top-grid>.col{padding:0!important;border:0!important}
  .top-grid>.col-left{order:2;border-top:1px solid var(--line)!important;padding-top:10px!important}
  .top-grid>.col-right{order:3;grid-template-columns:1fr}
  .lead{grid-template-columns:1fr}
  .lead .headline{font-size:24px}
  .art-grid{grid-template-columns:1fr}
  .art-title{font-size:28px}
  .cat-lead{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr 1fr}
  .logo-text{font-size:30px}.logo-mark{width:36px;height:36px}
  .nav-tools .lbl{display:none}
  .mast-search input{width:150px}
  .topbar .social{display:none}
}
@media (max-width:560px){
  .pair,.trio,.block,.block.v2,.block .mid{grid-template-columns:1fr}
  .block-4,.cat-grid{grid-template-columns:1fr 1fr;gap:14px}
  .hscroll{grid-auto-columns:75%}
  .list-rows .row{grid-template-columns:1fr 110px}
  .list-rows .row .headline{font-size:17px}
  .footer .links{grid-template-columns:repeat(3,1fr)}
  .footer .sub-form input{width:100%}
  .mast-search{position:absolute;left:16px;right:16px;top:70px;background:#fff;z-index:70}
  .mast-search input{width:100%}
  .masthead .wrap{position:relative}
  .art-title{font-size:25px}
  .art-body{font-size:var(--art-fs,18px)}
}
@media print{.topbar,.navbar,.breaking,.ad-zone,.ad-box,.footer,aside,.share,.comments,.to-top{display:none!important}.art-grid{display:block}}