/*
Theme Name: Sudin News
Theme URI: https://example.com/
Author: Daily Sudin
Description: দৈনিক সুদিন (The Daily Sudin) এর জন্য তৈরি বাংলা অনলাইন নিউজ পোর্টাল থিম। ডায়নামিক হোমপেজ, ব্রেকিং নিউজ, বিজ্ঞাপন ব্যবস্থাপনা, NewsArticle স্কিমা ও নিউজরুম ওয়ার্কফ্লো সহ।
Version: 1.0.0
Requires at least: 6.2
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sudin-news
Tags: news, blog, two-columns, custom-colors, custom-logo, custom-menu, featured-images, translation-ready, rtl-language-support
*/

/* ===== Design tokens (overridden from Customizer) ===== */
:root{
  --c-primary:#0a9a14;
  --c-primary-dark:#066b0d;
  --c-accent:#c8102e;
  --c-ink:#14181a;
  --c-muted:#5c6770;
  --c-line:#e3e7e5;
  --c-soft:#f3f6f4;
  --c-bg:#ffffff;
  --font-bn:'Hind Siliguri','Noto Sans Bengali','Kalpurush','SolaimanLipi',Vrinda,system-ui,-apple-system,'Segoe UI',sans-serif;
  --container:1260px;
  --gap:20px;
  --radius:4px;
}

/* ===== Reset / base ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--c-bg);color:var(--c-ink);font-family:var(--font-bn);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--c-primary)}
h1,h2,h3,h4{font-family:var(--font-bn);line-height:1.45;margin:0 0 .4em;font-weight:700}
p{margin:0 0 1em}
ul{margin:0;padding:0}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid #ffbf47;outline-offset:2px}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{clip:auto;clip-path:none;background:#fff;color:#000;height:auto;width:auto;padding:12px 18px;z-index:100000;left:8px;top:8px;box-shadow:0 0 6px rgba(0,0,0,.4)}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 16px}

/* ===== Top bar ===== */
.topbar{background:var(--c-primary-dark);color:#fff;font-size:14px}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:38px;flex-wrap:wrap}
.topbar a{color:#fff}
.topbar a:hover{color:#d6ffd9;text-decoration:underline}
.topbar-date{display:flex;gap:14px;flex-wrap:wrap}
.topbar-links{display:flex;gap:14px;align-items:center;list-style:none}
.social-link{display:inline-block;padding:0 2px}

/* ===== Masthead ===== */
.masthead{background:#fff;border-bottom:1px solid var(--c-line)}
.masthead .container{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:12px;padding-bottom:12px}
.site-logo img{width:auto;height:72px;max-width:100%}
.site-logo a{display:block}
.header-ad{flex:0 1 728px;min-height:0}

/* ===== Main nav ===== */
.mainnav{background:#fff;border-bottom:3px solid var(--c-primary);position:relative;z-index:50}
.mainnav.is-sticky{position:sticky;top:0;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.admin-bar .mainnav.is-sticky{top:32px}
.mainnav .container{display:flex;align-items:center;gap:8px}
.nav-menu{display:flex;list-style:none;flex:1;flex-wrap:wrap;margin:0}
.nav-menu>li{position:relative}
.nav-menu a{display:block;padding:10px 14px;font-weight:600;font-size:17px;white-space:nowrap}
.nav-menu>li>a:hover,.nav-menu>li.current-menu-item>a,.nav-menu>li.current-menu-ancestor>a,.nav-menu>li:focus-within>a{color:#fff;background:var(--c-primary)}
.nav-menu .sub-menu{display:none;position:absolute;top:100%;left:0;min-width:200px;background:#fff;border:1px solid var(--c-line);border-top:3px solid var(--c-primary);box-shadow:0 8px 20px rgba(0,0,0,.12);list-style:none;margin:0;padding:4px 0;z-index:60}
.nav-menu li:hover>.sub-menu,.nav-menu li:focus-within>.sub-menu{display:block}
.nav-menu .sub-menu a{padding:8px 16px;font-weight:500}
.nav-menu .sub-menu a:hover{background:var(--c-soft)}
.nav-home a{padding:10px 12px}
.icon-btn{background:none;border:0;padding:10px;color:var(--c-ink);display:inline-flex;align-items:center}
.icon-btn:hover{color:var(--c-primary)}
.icon-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.menu-toggle{display:none}

.search-panel{display:none;background:var(--c-soft);border-bottom:1px solid var(--c-line);padding:14px 0}
.search-panel.is-open{display:block}
.searchform{display:flex;gap:8px;flex-wrap:wrap}
.searchform input[type=search]{flex:1 1 220px;padding:11px 14px;border:1px solid #b7c2bd;border-radius:var(--radius);font:inherit}
.searchform select{padding:11px;border:1px solid #b7c2bd;border-radius:var(--radius);font:inherit;background:#fff}
.btn{display:inline-block;background:var(--c-primary);color:#fff;border:0;padding:10px 20px;border-radius:var(--radius);font-weight:600}
.btn:hover{background:var(--c-primary-dark);color:#fff}

/* ===== Breaking ticker ===== */
.ticker{background:#fff;border-bottom:1px solid var(--c-line)}
.ticker .container{display:flex;align-items:stretch;min-height:42px}
.ticker-label{background:var(--c-accent);color:#fff;font-weight:700;padding:0 16px;display:flex;align-items:center;white-space:nowrap}
.ticker-track{flex:1;overflow:hidden;position:relative;display:flex;align-items:center}
.ticker-list{display:flex;gap:40px;list-style:none;white-space:nowrap;padding-left:20px;animation:sudin-tick 40s linear infinite}
.ticker-track:hover .ticker-list,.ticker-track:focus-within .ticker-list,.ticker.is-paused .ticker-list{animation-play-state:paused}
.ticker-list a{font-weight:600}
.ticker-list a::before{content:"●";color:var(--c-primary);margin-right:8px;font-size:10px}
.ticker-pause{background:none;border:0;padding:0 12px;color:var(--c-muted)}
@keyframes sudin-tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-list{animation:none;overflow-x:auto}}

/* ===== Ads ===== */
.ad-slot{margin:18px auto;text-align:center;overflow:hidden}
.ad-slot .ad-label{display:block;font-size:11px;color:var(--c-muted);letter-spacing:.04em;margin-bottom:2px}
.ad-slot img{margin:0 auto}
.ad-leaderboard{max-width:970px;min-height:90px}
.ad-rect{max-width:336px;min-height:250px}
.ad-sidebar{min-height:250px}

/* ===== Section scaffolding ===== */
.site-main{padding:18px 0 30px}
.section{margin:30px 0}
.sec-head{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--c-line);margin-bottom:16px;position:relative}
.sec-head::after{content:"";position:absolute;left:0;bottom:-2px;width:70px;height:2px;background:var(--c-primary)}
.sec-title{font-size:22px;margin:0;padding:0 0 6px;border-left:6px solid var(--c-primary);padding-left:10px;line-height:1.3}
.sec-title a:hover{color:var(--c-primary)}
.sec-more{font-size:14px;color:var(--c-primary);font-weight:600}
.grid{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.layout-main{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:30px}
.layout-main>*{min-width:0}

/* ===== Cards ===== */
.card{position:relative;display:block}
.card-media{display:block;position:relative;overflow:hidden;background:var(--c-soft);aspect-ratio:16/9;border-radius:var(--radius)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.card:hover .card-media img{transform:scale(1.04)}
.card-media.is-empty{display:flex;align-items:center;justify-content:center;color:var(--c-primary);font-weight:700;font-size:20px;background:linear-gradient(135deg,#e9f7ea,#cfeed2)}
.card-title{font-size:19px;margin:10px 0 4px;line-height:1.5}
.card-title a:hover{color:var(--c-primary)}
.card-meta{font-size:13px;color:var(--c-muted)}
.card-excerpt{font-size:15px;color:#363f44;margin-top:4px}
.cat-label{display:inline-block;font-size:13px;font-weight:700;color:var(--c-primary);margin-bottom:2px}
.cat-label:hover{text-decoration:underline}
.card-h{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:start}
.card-h .card-title{font-size:16px;margin:0 0 3px}
.card-text{padding:10px 0;border-bottom:1px solid var(--c-line)}
.card-text:last-child{border-bottom:0}
.card-text .card-title{font-size:17px;margin:0}
.list-numbered{list-style:none;counter-reset:n}
.list-numbered li{counter-increment:n;display:grid;grid-template-columns:34px 1fr;gap:8px;padding:10px 0;border-bottom:1px solid var(--c-line)}
.list-numbered li::before{content:counter(n);font-weight:700;font-size:22px;color:var(--c-primary);line-height:1.3}
.list-numbered a{font-weight:600;line-height:1.5}

/* ===== Lead section ===== */
.lead{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.1fr) minmax(0,1fr);gap:var(--gap);padding-bottom:24px;border-bottom:1px solid var(--c-line)}
.lead-main .card-title{font-size:32px;line-height:1.4}
.lead-main .card-excerpt{font-size:17px}
.lead-mid{display:flex;flex-direction:column;gap:16px}
.lead-mid .card-title{font-size:19px;margin-top:8px}
.lead-side{border-left:1px solid var(--c-line);padding-left:var(--gap)}
.badge{display:inline-block;background:var(--c-accent);color:#fff;font-size:12px;padding:1px 8px;border-radius:2px;margin-right:6px;font-weight:700}

/* ===== Category blocks ===== */
.catblock{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--gap)}
.catblock-list .card-text:first-child{padding-top:0}
.blocks-2col{display:grid;grid-template-columns:1fr 1fr;gap:34px}

/* ===== Video / gallery ===== */
.video-wrap{background:#0d2a10;color:#fff;padding:24px 0;margin:30px 0}
.video-wrap .sec-title{color:#fff}
.video-wrap .sec-head{border-color:#2f5a33}
.video-wrap .card-title a{color:#fff}
.video-wrap .card-meta{color:#b8d6bb}
.play-ico{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.play-ico::after{content:"";width:54px;height:54px;border-radius:50%;background:rgba(10,154,20,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 6l10 6-10 6z'/%3E%3C/svg%3E") center/60% no-repeat}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gallery-grid .card-media{aspect-ratio:4/3}
.gallery-cap{font-size:14px;font-weight:600;margin-top:6px;line-height:1.5}

/* ===== Editor's choice / newsletter ===== */
.editors{background:var(--c-soft);padding:22px;border-radius:var(--radius)}
.newsletter{background:linear-gradient(135deg,var(--c-primary-dark),var(--c-primary));color:#fff;padding:26px;border-radius:var(--radius);text-align:center}
.newsletter form{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.newsletter input[type=email]{padding:11px 14px;border:0;border-radius:var(--radius);min-width:260px;font:inherit}
.newsletter .btn{background:#fff;color:var(--c-primary-dark)}

/* ===== Latest + load more ===== */
.latest-list .card{padding:14px 0;border-bottom:1px solid var(--c-line)}
.latest-list .card-h{grid-template-columns:200px 1fr;gap:16px}
.latest-list .card-title{font-size:20px}
.load-more-wrap{text-align:center;margin-top:18px}
.load-more-wrap .btn[disabled]{opacity:.6;cursor:wait}
.state-msg{padding:20px;text-align:center;color:var(--c-muted);background:var(--c-soft);border-radius:var(--radius)}
.state-error{color:#9b1c1c;background:#fdecec}
.skeleton{background:linear-gradient(90deg,#eceff0 25%,#f7f8f8 37%,#eceff0 63%);background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:var(--radius);min-height:70px;margin:8px 0}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ===== Sidebar ===== */
.sidebar .widget,.sidebar .side-box{margin-bottom:26px}
.side-box h2{font-size:20px;border-left:6px solid var(--c-primary);padding-left:10px;margin-bottom:10px}
.tabs-nav{display:flex;border-bottom:2px solid var(--c-line);margin-bottom:6px}
.tabs-nav button{flex:1;background:none;border:0;padding:8px;font-weight:700;color:var(--c-muted);border-bottom:3px solid transparent;margin-bottom:-2px}
.tabs-nav button[aria-selected=true]{color:var(--c-primary);border-color:var(--c-primary)}
.tab-panel[hidden]{display:none}

/* ===== Archive ===== */
.archive-head{border-bottom:3px solid var(--c-primary);margin-bottom:20px;padding-bottom:8px}
.archive-title{font-size:32px;margin:0}
.archive-desc{color:var(--c-muted);margin:4px 0 0}
.pagination,.nav-links{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:28px 0}
.page-numbers{display:inline-block;min-width:40px;text-align:center;padding:7px 12px;border:1px solid var(--c-line);border-radius:var(--radius);font-weight:600}
a.page-numbers:hover{background:var(--c-soft)}
.page-numbers.current{background:var(--c-primary);border-color:var(--c-primary);color:#fff}

/* ===== Single ===== */
.breadcrumb{font-size:14px;color:var(--c-muted);margin-bottom:10px}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.breadcrumb li+li::before{content:"›";margin-right:6px}
.article-title{font-size:38px;line-height:1.4;margin:6px 0}
.article-sub{font-size:20px;color:#3d474c;font-weight:500;margin:0 0 12px}
.byline{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:14px;color:var(--c-muted);border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);padding:10px 0;margin:12px 0}
.byline strong{color:var(--c-ink)}
.byline .avatar{border-radius:50%}
.byline-author{display:flex;align-items:center;gap:8px}
.article-figure{margin:0 0 18px}
.article-figure img{width:100%}
.article-figure figcaption{font-size:14px;color:var(--c-muted);padding-top:6px}
.article-figure .credit{font-style:italic}
.share{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.share a,.share button{border:1px solid var(--c-line);background:#fff;padding:6px 14px;border-radius:30px;font-size:14px;font-weight:600;color:var(--c-ink)}
.share a:hover,.share button:hover{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
.entry-content{font-size:19px;line-height:1.95}
.entry-content p{margin-bottom:1.15em}
.entry-content h2{font-size:26px;margin-top:1.4em}
.entry-content h3{font-size:22px;margin-top:1.2em}
.entry-content a{color:var(--c-primary-dark);text-decoration:underline}
.entry-content blockquote{margin:1.4em 0;padding:8px 20px;border-left:5px solid var(--c-primary);background:var(--c-soft);font-size:21px}
.entry-content img{margin:10px auto}
.entry-content figure{margin:1.2em 0}
.entry-content figcaption{font-size:14px;color:var(--c-muted)}
.correction{border:1px solid #f0c36d;background:#fff8e6;padding:10px 14px;border-radius:var(--radius);margin:16px 0;font-size:15px}
.video-embed{position:relative;aspect-ratio:16/9;margin:18px 0}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0;list-style:none}
.tag-list a{background:var(--c-soft);padding:4px 12px;border-radius:30px;font-size:14px}
.tag-list a:hover{background:var(--c-primary);color:#fff}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0;border-top:1px solid var(--c-line);padding-top:16px}
.post-nav a{display:block;font-weight:600}
.post-nav small{display:block;color:var(--c-muted);font-weight:400}
.post-nav .next{text-align:right}
.author-box{display:flex;gap:14px;background:var(--c-soft);padding:16px;border-radius:var(--radius);margin:20px 0}
.author-box .avatar{border-radius:50%}

/* ===== Comments ===== */
.comments-area{margin-top:30px}
.comment-list{list-style:none;padding:0}
.comment-body{border-bottom:1px solid var(--c-line);padding:12px 0}
.comment-respond input[type=text],.comment-respond input[type=email],.comment-respond input[type=url],.comment-respond textarea{width:100%;padding:10px;border:1px solid #b7c2bd;border-radius:var(--radius);font:inherit}

/* ===== Footer ===== */
.site-footer{background:#0b1f0e;color:#d8e6da;margin-top:30px;padding-top:34px}
.site-footer a{color:#d8e6da}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:30px}
.footer-grid h3{color:#fff;font-size:18px;border-bottom:2px solid var(--c-primary);padding-bottom:6px;display:inline-block}
.footer-grid ul{list-style:none}
.footer-grid li{padding:3px 0}
.footer-logo img{height:64px;width:auto;background:#fff;padding:6px 10px;border-radius:4px;margin-bottom:10px}
.footer-bottom{border-top:1px solid #234a28;margin-top:26px;padding:14px 0;font-size:14px;text-align:center}
.editorial-info{font-size:14px;line-height:1.8}

/* ===== 404 ===== */
.notfound{text-align:center;padding:60px 0}
.notfound h1{font-size:90px;color:var(--c-primary);margin:0}


/* ===== Homepage category sections: 13 selectable layouts ===== */
.catsec{--cs:var(--c-primary);margin:26px 0}
/* smart section header: coloured title tab on a coloured rule, sub-category links, "all news" link */
.catsec .sec-head{display:flex;align-items:flex-end;gap:14px;border-bottom:2px solid var(--cs);margin-bottom:14px;flex-wrap:nowrap}
.catsec .sec-head::after{display:none}
.catsec .sec-title{background:var(--cs);color:#fff;font-size:19px;line-height:1.25;padding:6px 18px 5px;border:0;position:relative;margin:0;flex:none;border-radius:3px 3px 0 0}
.catsec .sec-title a{color:#fff}
.catsec .sec-title a:hover{color:#fff;opacity:.9}
.catsec .sec-title::after{content:"";position:absolute;right:-9px;bottom:0;border-style:solid;border-width:0 0 9px 9px;border-color:transparent transparent var(--cs) transparent}
.cs-subs{display:flex;gap:4px 16px;overflow:hidden;padding-bottom:6px;font-size:15px;min-width:0;flex:1 1 auto;margin-left:6px}
.cs-subs a{white-space:nowrap;color:#333;font-weight:500}
.cs-subs a:hover{color:var(--cs)}
.cs-spacer{flex:1 1 0}
.catsec .sec-more{color:var(--cs);padding-bottom:6px;white-space:nowrap;font-size:14px}
.cs-nav{display:inline-flex;gap:4px;padding-bottom:5px}
.cs-nav[hidden]{display:none}
.cs-nav button{width:28px;height:28px;border:1px solid var(--c-line);background:#fff;border-radius:50%;font-size:18px;line-height:1;cursor:pointer;color:var(--cs)}
.cs-nav button:hover,.cs-nav button:focus-visible{background:var(--cs);color:#fff}

.catsec .cs-body{display:grid;gap:var(--gap)}
.catsec .card-title{font-size:17px;line-height:1.5;margin:8px 0 3px}
.catsec .card-title a:hover{color:var(--cs)}
.catsec .cs-lead .card-title,.catsec .cs-center .card-title{font-size:24px;line-height:1.45}
.catsec .card-media{aspect-ratio:3/2}
.catsec .cs-side .card-h,.catsec .cs-col .card-h{padding:10px 0;border-bottom:1px dashed var(--c-line)}
.catsec .cs-side .card-h:first-child,.catsec .cs-col .card-h:first-child{padding-top:0}
.catsec .cs-side .card-h:last-child,.catsec .cs-col .card-h:last-child{border-bottom:0}
.catsec .card-h{grid-template-columns:104px 1fr}
.catsec .card-h .card-media{aspect-ratio:4/3}
.catsec .card-h .card-title{font-size:16px;margin:0 0 3px}
/* headline-only rows get a coloured bullet */
.catsec .card-text:not(.card-h){padding:9px 0 9px 16px;position:relative;border-bottom:1px dashed var(--c-line)}
.catsec .card-text:not(.card-h)::before{content:"";position:absolute;left:0;top:19px;width:7px;height:7px;background:var(--cs);border-radius:1px}
.catsec .card-text:not(.card-h):last-child{border-bottom:0}
.catsec .card-text:not(.card-h) .card-title{font-size:16px;margin:0}

/* overlay card */
.card-overlay{position:relative;overflow:hidden;border-radius:var(--radius);background:#111;min-height:0}
.card-overlay .card-media{border-radius:0;aspect-ratio:16/10;height:100%;width:100%}
.card-overlay .overlay-body{position:absolute;left:0;right:0;bottom:0;padding:38px 14px 12px;background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,0))}
.catsec .card-overlay .card-title{margin:0 0 2px;font-size:16px;color:#fff}
.card-overlay .card-title a{color:#fff}
.card-overlay .card-title a::after{content:"";position:absolute;inset:0}
.catsec .card-overlay .card-title a:hover{color:#fff;text-decoration:underline}
.card-overlay .card-meta{color:#d3dbd5}
.card-overlay .play-ico{z-index:1}

/* 1: 4-column grid (8 stories) */
.lay-grid-4 .cs-body{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px var(--gap)}
.lay-grid-4 .card-title{font-size:16px}
.lay-grid-4 .card,.lay-grid-3 .card{border-bottom:3px solid transparent;transition:border-color .2s;padding-bottom:6px}
.lay-grid-4 .card:hover,.lay-grid-3 .card:hover{border-bottom-color:var(--cs)}

/* 2: 3-column grid */
.lay-grid-3 .cs-body{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px var(--gap)}
.lay-grid-3 .card-title{font-size:18px}

/* 3 & 14: big lead + small news / numbered headlines */
.lay-big-small .cs-body,.lay-lead-numbered .cs-body,.lay-one-text .cs-body{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start}
.lay-big-small .cs-side{border-left:1px solid var(--c-line);padding-left:var(--gap)}

/* 4: image list, 2 columns */
.lay-list-2 .cs-body{grid-template-columns:1fr 1fr;gap:0 30px}
.lay-list-2 .card-h{padding:12px 0;border-bottom:1px dashed var(--c-line)}
.lay-list-2 .card-h .card-title{font-size:17px}
.lay-list-2 .card-h{grid-template-columns:130px 1fr}

/* 5: 1 image + text list */
.lay-one-text .cs-side{border-left:1px solid var(--c-line);padding-left:var(--gap)}
.lay-one-text .cs-side .card-text:first-child{padding-top:0}

/* overlay card */
.card-overlay{position:relative;overflow:hidden;border-radius:var(--radius);background:#111;min-height:0}
.card-overlay .card-media{border-radius:0;aspect-ratio:16/10;height:100%;width:100%}
.card-overlay .overlay-body{position:absolute;left:0;right:0;bottom:0;padding:38px 14px 12px;background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,0))}
.catsec .card-overlay .card-title{margin:0 0 2px;font-size:16px;color:#fff}
.card-overlay .card-title a{color:#fff}
.card-overlay .card-title a::after{content:"";position:absolute;inset:0}
.catsec .card-overlay .card-title a:hover{color:#fff;text-decoration:underline}
.card-overlay .card-meta{color:#d3dbd5}
.card-overlay .play-ico{z-index:1}
.card-overlay::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--cs)}

/* 6: title over image, scroll strip */
.lay-strip .cs-body{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:8px;scroll-behavior:smooth;scrollbar-width:thin}
.lay-strip .cs-body>.card{flex:0 0 calc((100% - 3*12px)/4);min-width:200px;scroll-snap-align:start}
.lay-strip .card-overlay .card-media{aspect-ratio:3/4}
.lay-strip .card-overlay .card-title{font-size:16px}

/* 7: numbered headline list (2 columns) */
.lay-numbered .cs-ol{list-style:none;margin:0;padding:0;counter-reset:csn;grid-template-columns:1fr 1fr;gap:0 32px}
.lay-numbered .cs-ol li{counter-increment:csn;display:grid;grid-template-columns:46px 1fr;align-items:start;border-bottom:1px dashed var(--c-line)}
.lay-numbered .cs-ol li::before{content:counter(csn,bengali);font-size:30px;font-weight:700;color:var(--cs);line-height:1.2;padding-top:6px}

/* 14: lead + numbered */
.lay-lead-numbered .cs-side{list-style:none;margin:0;padding:0 0 0 var(--gap);border-left:1px solid var(--c-line);counter-reset:csn}
.lay-lead-numbered .cs-side li{counter-increment:csn;display:grid;grid-template-columns:44px 1fr;align-items:start;border-bottom:1px dashed var(--c-line)}
.lay-lead-numbered .cs-side li:last-child{border-bottom:0}
.lay-lead-numbered .cs-side li::before{content:counter(csn,bengali);font-size:30px;font-weight:700;color:var(--cs);line-height:1.2;padding-top:6px}
.lay-numbered .card-text,.lay-lead-numbered .card-text{border:0!important;padding-left:0!important}
.lay-numbered .card-text::before,.lay-lead-numbered .card-text::before{display:none!important}

/* 8: mosaic */
.lay-mosaic .cs-body{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:155px;gap:8px}
.lay-mosaic .card-overlay{height:100%}
.lay-mosaic .card-overlay .card-media{aspect-ratio:auto;height:100%}
.lay-mosaic .card-overlay.is-big{grid-column:span 2;grid-row:span 2}
.lay-mosaic .is-big .card-title{font-size:25px;line-height:1.4}
.lay-mosaic .card-overlay .card-title{font-size:15px}

/* 9: newspaper (small | big centre | small) */
.lay-newspaper .cs-body{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);align-items:start}
.lay-newspaper .cs-left{border-right:1px solid var(--c-line);padding-right:var(--gap)}
.lay-newspaper .cs-right{border-left:1px solid var(--c-line);padding-left:var(--gap)}
.lay-newspaper .card-h{grid-template-columns:1fr;gap:6px}
.lay-newspaper .card-h .card-media{aspect-ratio:16/9}
.lay-newspaper .cs-col .card-title{font-size:15.5px}

/* 10: image tiles, title overlay, 3 columns */
.lay-tiles .cs-body{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.lay-tiles .card-overlay .card-media{aspect-ratio:4/3}

/* 11: two big cards + text headlines */
.lay-two-big .cs-body{grid-template-columns:1fr 1fr;gap:28px}
.lay-two-big .cs-body .card-title{font-size:23px}
.lay-two-big .cs-heads{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin-top:10px;border-top:1px solid var(--c-line);padding-top:4px}

/* 12: wide rows with big image + excerpt */
.lay-wide-rows .cs-rows{display:grid;gap:0}
.card.is-row{display:grid;grid-template-columns:300px minmax(0,1fr);column-gap:22px;align-content:start;padding:16px 0;border-bottom:1px dashed var(--c-line)}
.card.is-row:first-child{padding-top:0}
.card.is-row:last-child{border-bottom:0}
.card.is-row .card-media{grid-column:1;grid-row:1/span 4;aspect-ratio:16/10}
.card.is-row>*:not(.card-media){grid-column:2}
.card.is-row .card-title{font-size:23px!important;margin-top:0}
.card.is-row .card-excerpt{font-size:16px}

/* 13: compact thumbnail list, 3 columns */
.lay-thumb-3 .cs-body{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 26px}
.lay-thumb-3 .card-h{grid-template-columns:84px 1fr;padding:10px 0;border-bottom:1px dashed var(--c-line)}
.lay-thumb-3 .card-h .card-title{font-size:15px}
.lay-thumb-3 .card-meta{font-size:12px}

@media (max-width:1100px){
  .lay-grid-4 .cs-body{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lay-strip .cs-body>.card{flex-basis:calc((100% - 2*12px)/3)}
  .lay-thumb-3 .cs-body{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .catsec .sec-head{flex-wrap:wrap;align-items:center}
  .cs-subs{order:3;flex-basis:100%;margin:6px 0 0;overflow-x:auto;padding-bottom:6px}
  .cs-spacer{display:none}
  .catsec .sec-title{font-size:17px}
  .catsec .sec-more{margin-left:auto}
  .lay-big-small .cs-body,.lay-lead-numbered .cs-body,.lay-one-text .cs-body,.lay-newspaper .cs-body{grid-template-columns:1fr}
  .lay-big-small .cs-side,.lay-one-text .cs-side,.lay-lead-numbered .cs-side{border-left:0;padding-left:0}
  .lay-newspaper .cs-center{order:-1}
  .lay-newspaper .cs-left,.lay-newspaper .cs-right{border:0;padding:0}
  .lay-newspaper .card-h{grid-template-columns:104px 1fr}
  .lay-grid-3 .cs-body,.lay-tiles .cs-body,.lay-mosaic .cs-body{grid-template-columns:1fr 1fr}
  .lay-mosaic .cs-body{grid-auto-rows:135px}
  .lay-mosaic .card-overlay.is-big{grid-column:span 2;grid-row:span 1}
  .lay-list-2 .cs-body,.lay-numbered .cs-ol,.lay-two-big .cs-body,.lay-two-big .cs-heads,.lay-thumb-3 .cs-body{grid-template-columns:1fr}
  .lay-list-2 .card-h{grid-template-columns:110px 1fr}
  .lay-strip .cs-body>.card{flex-basis:62%}
  .card.is-row{grid-template-columns:130px minmax(0,1fr);column-gap:12px}
  .card.is-row .card-title{font-size:17px!important}
  .card.is-row .card-excerpt{display:none}
  .card.is-row .card-media{grid-row:1/span 3}
}
@media (max-width:480px){
  .lay-grid-4 .cs-body,.lay-grid-3 .cs-body,.lay-tiles .cs-body{grid-template-columns:1fr}
}

/* ===== Responsive ===== */
@media (max-width:1100px){
  .lead{grid-template-columns:1.6fr 1fr}
  .lead-side{grid-column:1/-1;border-left:0;padding-left:0;border-top:1px solid var(--c-line);padding-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .layout-main{grid-template-columns:minmax(0,1fr)}
  .blocks-2col{grid-template-columns:1fr}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .article-title{font-size:32px}
}
@media (max-width:768px){
  body{font-size:16px}
  .menu-toggle{display:inline-flex}
  .nav-wrap{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:3px solid var(--c-primary);max-height:75vh;overflow:auto;box-shadow:0 10px 16px rgba(0,0,0,.12)}
  .nav-wrap.is-open{display:block}
  .mainnav .container{justify-content:space-between}
  .nav-menu{display:block}
  .nav-menu a{white-space:normal;padding:12px 16px;border-bottom:1px solid var(--c-line)}
  .nav-menu .sub-menu{position:static;display:none;box-shadow:none;border:0;border-left:3px solid var(--c-primary);margin-left:16px}
  .nav-menu li.is-open>.sub-menu{display:block}
  .nav-menu li:hover>.sub-menu{display:none}
  .nav-menu li.is-open:hover>.sub-menu{display:block}
  .submenu-toggle{position:absolute;right:0;top:0;height:46px;width:48px;background:none;border:0;font-size:20px}
  .masthead .container{justify-content:center}
  .header-ad{display:none}
  .site-logo img{height:56px}
  .lead{grid-template-columns:1fr}
  .lead-main .card-title{font-size:25px}
  .lead-side{grid-template-columns:1fr}
  .catblock{grid-template-columns:1fr}
  .latest-list .card-h{grid-template-columns:110px 1fr}
  .latest-list .card-title{font-size:17px}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr 1fr}
  .article-title{font-size:27px}
  .article-sub{font-size:17px}
  .entry-content{font-size:18px}
  .topbar-date span.greg{display:none}
}
@media (max-width:480px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .post-nav{grid-template-columns:1fr}
  .post-nav .next{text-align:left}
}

/* ===== Print ===== */
@media print{
  .topbar,.masthead .header-ad,.mainnav,.ticker,.search-panel,.sidebar,.share,.ad-slot,.site-footer,.post-nav,.related,.comments-area,.breadcrumb{display:none!important}
  body{font-size:12pt}
  .layout-main{display:block}
  a{color:#000;text-decoration:none}
  .entry-content a::after{content:" (" attr(href) ")";font-size:9pt}
}

/* Submenu toggle button: mobile only */
.submenu-toggle{display:none}
@media (max-width:768px){.nav-menu li{position:relative}.submenu-toggle{display:block;cursor:pointer}}