/* ============================================================
   আকাশ বাণী — Main Stylesheet
   Design: Editorial / Al Jazeera inspired
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Tiro+Bangla:ital@0;1&family=Noto+Serif+Bengali:wght@400;600;700&family=Hind+Siliguri:wght@300;400;500;600;700&display=swap');

:root {
  --red:       #e03a3e;
  --red-dark:  #b52d30;
  --navy:      #0a1628;
  --navy-mid:  #112240;
  --white:     #ffffff;
  --off-white: #f5f5f0;
  --gray-100:  #f0f0eb;
  --gray-200:  #e2e2db;
  --gray-400:  #9a9a90;
  --gray-600:  #555550;
  --gray-900:  #1a1a1a;
  --gold:      #c8a951;
  --font-sans: 'Hind Siliguri', sans-serif;
  --font-serif:'Tiro Bangla', serif;
  --font-eng:  'Tiro Bangla', serif;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --shadow-md: 0 4px 20px rgba(0,0,0,.14);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.2);
  --radius:    4px;
  --trans:     .22s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--font-sans); background: var(--off-white); color: var(--gray-900); line-height: 1.65; }
a { text-decoration: none; color: inherit; transition: color var(--trans); }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* ── Utility ─────────────────────────────────────────────── */
.container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.badge { display:inline-block; background:var(--red); color:#fff; font-size:11px; font-weight:700; padding:3px 9px; border-radius:2px; text-transform:uppercase; letter-spacing:.5px; }
.badge-navy { background:var(--navy); }
.badge-gold  { background:var(--gold); }
.btn { display:inline-flex; align-items:center; gap:6px; padding:10px 22px; border-radius:var(--radius); font-weight:600; font-size:14px; cursor:pointer; transition:all var(--trans); border:none; }
.btn-red  { background:var(--red);  color:#fff; }
.btn-red:hover  { background:var(--red-dark); }
.btn-navy { background:var(--navy); color:#fff; }
.btn-outline { background:transparent; border:2px solid var(--red); color:var(--red); }
.section-title { font-size:20px; font-weight:700; color:var(--navy); border-left:4px solid var(--red); padding-left:12px; margin-bottom:20px; }
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.view-all { font-size:13px; color:var(--red); font-weight:600; }
.view-all:hover { text-decoration:underline; }

/* ── Top Bar ─────────────────────────────────────────────── */
.top-bar { background:var(--navy); color:rgba(255,255,255,.7); font-size:12px; padding:6px 0; }
.top-bar .container { display:flex; justify-content:space-between; align-items:center; }
.top-bar-date { display:flex; gap:16px; }
.top-bar-links a { color:rgba(255,255,255,.7); margin-left:14px; font-size:11px; }
.top-bar-links a:hover { color:#fff; }

/* ── Header ──────────────────────────────────────────────── */
.header { background:#fff; border-bottom:3px solid var(--red); position:sticky; top:0; z-index:1000; box-shadow:var(--shadow-md); }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.logo { display:flex; flex-direction:column; }
.logo-name { font-family:'Tiro Bangla', serif; font-size:34px; font-weight:400; color:var(--navy); line-height:1; letter-spacing:0.01em; }
.logo-name span { color:var(--red); }
.logo-tagline { font-size:11px; color:var(--gray-400); letter-spacing:1px; margin-top:2px; }
.header-search { display:flex; }
.header-search input { border:2px solid var(--gray-200); border-right:none; padding:9px 16px; border-radius:var(--radius) 0 0 var(--radius); font-family:var(--font-sans); font-size:14px; width:240px; outline:none; background:var(--gray-100); }
.header-search input:focus { border-color:var(--red); background:#fff; }
.header-search button { background:var(--red); color:#fff; border:none; padding:9px 16px; border-radius:0 var(--radius) var(--radius) 0; cursor:pointer; }
.header-social a { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--gray-100); color:var(--navy); font-size:14px; margin-left:6px; transition:all var(--trans); }
.header-social a:hover { background:var(--red); color:#fff; }

/* ── Nav ─────────────────────────────────────────────────── */
.nav { background:var(--navy); }
.nav-list { display:flex; align-items:stretch; overflow-x:auto; }
.nav-list::-webkit-scrollbar { display:none; }
.nav-item { position:relative; }
.nav-link { display:block; color:rgba(255,255,255,.85); font-size:13px; font-weight:600; padding:13px 18px; white-space:nowrap; transition:all var(--trans); letter-spacing:.3px; }
.nav-link:hover, .nav-link.active { background:var(--red); color:#fff; }
.nav-link-live { display:flex; align-items:center; gap:6px; }
.nav-link-live::before { content:''; width:7px; height:7px; background:#ff4444; border-radius:50%; animation:blink 1s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── Breaking News ───────────────────────────────────────── */
.breaking-bar { background:var(--red); color:#fff; display:flex; align-items:stretch; overflow:hidden; }
.breaking-label { background:rgba(0,0,0,.25); padding:9px 16px; font-size:12px; font-weight:800; letter-spacing:1px; white-space:nowrap; text-transform:uppercase; display:flex; align-items:center; gap:6px; }
.breaking-label::before { content:''; width:8px; height:8px; background:#fff; border-radius:50%; animation:blink 1s infinite; }
.breaking-ticker { flex:1; overflow:hidden; position:relative; padding:9px 0; }
.breaking-ticker-inner { display:flex; animation:ticker 35s linear infinite; width:max-content; }
.breaking-ticker-inner:hover { animation-play-state:paused; }
.breaking-ticker-item { padding:0 40px; font-size:13px; font-weight:500; white-space:nowrap; }
.breaking-ticker-item a { color:#fff; }
.breaking-ticker-item::after { content:'●'; margin-left:40px; opacity:.5; }
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ── Hero / Featured ─────────────────────────────────────── */
.hero { padding:24px 0; background:var(--off-white); }
.hero-grid { display:grid; grid-template-columns:1fr 380px; gap:24px; }
.hero-main { position:relative; overflow:hidden; border-radius:var(--radius); cursor:pointer; }
.hero-main img { width:100%; height:460px; object-fit:cover; transition:transform .5s ease; }
.hero-main:hover img { transform:scale(1.03); }
.hero-main-overlay { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(0,0,0,.92)); padding:32px 28px 28px; }
.hero-main-overlay .badge { margin-bottom:8px; }
.hero-main-title { font-size:26px; font-weight:700; color:#fff; line-height:1.35; margin-bottom:10px; font-family:var(--font-serif); }
.hero-main-meta { font-size:12px; color:rgba(255,255,255,.65); }
.hero-side { display:flex; flex-direction:column; gap:16px; }
.hero-card { display:flex; gap:12px; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); cursor:pointer; transition:box-shadow var(--trans); }
.hero-card:hover { box-shadow:var(--shadow-md); }
.hero-card img { width:110px; height:85px; object-fit:cover; flex-shrink:0; }
.hero-card-body { padding:10px; flex:1; }
.hero-card-body .badge { margin-bottom:5px; font-size:10px; }
.hero-card-title { font-size:14px; font-weight:600; line-height:1.4; color:var(--gray-900); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hero-card-time { font-size:11px; color:var(--gray-400); margin-top:5px; }

/* ── Section ─────────────────────────────────────────────── */
.section { padding:32px 0; }
.section-alt { background:#fff; }
.section-dark { background:var(--navy); }

/* ── News Grid ───────────────────────────────────────────── */
.news-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.news-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.news-card { background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:all var(--trans); cursor:pointer; }
.news-card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.news-card-thumb { position:relative; overflow:hidden; }
.news-card-thumb img { width:100%; height:185px; object-fit:cover; transition:transform .5s ease; }
.news-card:hover .news-card-thumb img { transform:scale(1.06); }
.news-card-body { padding:14px; }
.news-card-body .badge { margin-bottom:8px; }
.news-card-title { font-size:15px; font-weight:600; line-height:1.45; color:var(--gray-900); margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.news-card-title:hover { color:var(--red); }
.news-card-meta { display:flex; justify-content:space-between; font-size:11px; color:var(--gray-400); }
.news-card-views { display:flex; align-items:center; gap:3px; }

/* ── Large Article List ──────────────────────────────────── */
.article-list { display:flex; flex-direction:column; gap:0; }
.article-list-item { display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--gray-200); cursor:pointer; }
.article-list-item:last-child { border-bottom:none; }
.article-list-img { width:130px; height:95px; object-fit:cover; border-radius:var(--radius); flex-shrink:0; }
.article-list-body { flex:1; }
.article-list-body .badge { margin-bottom:6px; }
.article-list-title { font-size:16px; font-weight:600; line-height:1.4; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.article-list-title:hover { color:var(--red); }
.article-list-excerpt { font-size:13px; color:var(--gray-600); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.article-list-meta { margin-top:6px; font-size:11px; color:var(--gray-400); }

/* ── 3 Col with sidebar ──────────────────────────────────── */
.main-with-sidebar { display:grid; grid-template-columns:1fr 300px; gap:28px; }
.sidebar-widget { background:#fff; border-radius:var(--radius); padding:20px; margin-bottom:20px; box-shadow:var(--shadow-sm); }
.sidebar-widget-title { font-size:14px; font-weight:700; color:var(--navy); text-transform:uppercase; letter-spacing:.5px; border-bottom:2px solid var(--red); padding-bottom:8px; margin-bottom:14px; }
.sidebar-news-item { display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--gray-100); cursor:pointer; }
.sidebar-news-item:last-child { border-bottom:none; }
.sidebar-news-img { width:68px; height:52px; object-fit:cover; border-radius:2px; flex-shrink:0; }
.sidebar-news-title { font-size:13px; font-weight:500; line-height:1.4; }
.sidebar-news-title:hover { color:var(--red); }
.sidebar-news-time { font-size:11px; color:var(--gray-400); margin-top:3px; }

/* ── Video Grid ──────────────────────────────────────────── */
.video-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.video-card { background:#111; border-radius:var(--radius); overflow:hidden; cursor:pointer; position:relative; }
.video-card-thumb { position:relative; overflow:hidden; }
.video-card-thumb img { width:100%; height:175px; object-fit:cover; transition:transform .4s; opacity:.85; }
.video-card:hover .video-card-thumb img { transform:scale(1.05); opacity:1; }
.video-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px; background:rgba(224,58,62,.9); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all var(--trans); }
.video-play::after { content:''; border-left:20px solid #fff; border-top:12px solid transparent; border-bottom:12px solid transparent; margin-left:4px; }
.video-card:hover .video-play { transform:translate(-50%,-50%) scale(1.1); }
.video-card-body { padding:12px; background:#1a1a1a; }
.video-card-title { font-size:14px; color:#fff; line-height:1.4; font-weight:500; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.video-card-meta { font-size:11px; color:#666; margin-top:6px; }

/* ── Article Page ────────────────────────────────────────── */
.article-page { padding:32px 0; }
.article-header .badge { margin-bottom:12px; }
.article-title { font-size:32px; font-weight:700; line-height:1.35; color:var(--navy); margin-bottom:16px; font-family:var(--font-serif); }
.article-meta { display:flex; align-items:center; gap:20px; font-size:13px; color:var(--gray-400); margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--gray-200); }
.article-meta-author { display:flex; align-items:center; gap:6px; }
.article-meta-author strong { color:var(--gray-900); }
.article-featured-img { width:100%; max-height:480px; object-fit:cover; border-radius:var(--radius); margin-bottom:24px; }
.article-content { font-size:17px; line-height:1.85; color:#2a2a2a; }
.article-content p { margin-bottom:20px; }
.article-content h2 { font-size:22px; font-weight:700; color:var(--navy); margin:30px 0 12px; border-left:4px solid var(--red); padding-left:12px; }
.article-content h3 { font-size:18px; font-weight:700; margin:24px 0 10px; }
.article-content img { border-radius:var(--radius); margin:20px 0; box-shadow:var(--shadow-sm); }
.article-content blockquote { background:var(--gray-100); border-left:5px solid var(--red); padding:16px 20px; margin:24px 0; border-radius:0 var(--radius) var(--radius) 0; font-style:italic; font-size:18px; }
.article-content a { color:var(--red); text-decoration:underline; }
.article-share { display:flex; align-items:center; gap:10px; padding:20px 0; border-top:1px solid var(--gray-200); margin-top:24px; }
.article-share-label { font-size:13px; font-weight:700; color:var(--gray-600); }
.share-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:var(--radius); font-size:12px; font-weight:600; cursor:pointer; border:none; color:#fff; }
.share-fb { background:#1877f2; }
.share-tw { background:#1da1f2; }
.share-wa { background:#25d366; }
.article-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.tag-pill { background:var(--gray-100); color:var(--gray-600); padding:5px 12px; border-radius:20px; font-size:12px; cursor:pointer; }
.tag-pill:hover { background:var(--red); color:#fff; }

/* ── Pagination ──────────────────────────────────────────── */
.pagination { display:flex; justify-content:center; gap:6px; margin:32px 0; }
.page-btn { width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius); font-size:14px; cursor:pointer; transition:all var(--trans); }
.page-btn:hover, .page-btn.active { background:var(--red); color:#fff; border-color:var(--red); }

/* ── Footer ──────────────────────────────────────────────── */
.footer { background:var(--navy); color:rgba(255,255,255,.75); margin-top:40px; }
.footer-top { padding:48px 0 32px; border-bottom:1px solid rgba(255,255,255,.1); display:grid; grid-template-columns:280px 1fr 1fr 1fr; gap:40px; }
.footer-brand .logo-name { font-size:26px; color:#fff; }
.footer-brand .logo-name span { color:var(--red); }
.footer-tagline { font-size:13px; margin:8px 0 16px; color:rgba(255,255,255,.5); }
.footer-social a { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; background:rgba(255,255,255,.1); border-radius:50%; color:#fff; font-size:14px; margin-right:6px; transition:background var(--trans); }
.footer-social a:hover { background:var(--red); }
.footer-col-title { font-size:13px; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:1px; margin-bottom:16px; }
.footer-links a { display:block; font-size:13px; color:rgba(255,255,255,.6); margin-bottom:9px; }
.footer-links a:hover { color:var(--red); }
.footer-bottom { padding:16px 0; display:flex; justify-content:space-between; align-items:center; font-size:12px; color:rgba(255,255,255,.4); }
.footer-bottom a { color:rgba(255,255,255,.4); }
.footer-bottom a:hover { color:var(--red); }

/* ── Search Page ─────────────────────────────────────────── */
.search-hero { background:var(--navy); color:#fff; padding:40px 0; }
.search-hero h1 { font-size:28px; margin-bottom:20px; }
.search-form { display:flex; max-width:560px; }
.search-form input { flex:1; padding:12px 18px; font-size:16px; border:none; border-radius:var(--radius) 0 0 var(--radius); font-family:var(--font-sans); outline:none; }
.search-form button { background:var(--red); color:#fff; border:none; padding:12px 22px; border-radius:0 var(--radius) var(--radius) 0; cursor:pointer; font-size:15px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:1024px) {
  .news-grid { grid-template-columns:repeat(3,1fr); }
  .news-grid-3 { grid-template-columns:repeat(3,1fr); }
  .hero-grid { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .top-bar .container { flex-direction: column; gap: 10px; }
  .top-bar-links { justify-content: center; flex-wrap: wrap; }
  .header-inner { flex-direction: column; gap: 14px; }
  .news-grid { grid-template-columns:repeat(2,1fr); }
  .news-grid-3 { grid-template-columns:repeat(2,1fr); }
  .main-with-sidebar { grid-template-columns:1fr; }
  .video-grid { grid-template-columns:1fr 1fr; }
  .article-title { font-size:22px; }
  .logo-name { font-size:24px; text-align: center; }
  .logo-tagline { text-align: center; }
  .header-search { display:none; }
  .footer-top { grid-template-columns:1fr; text-align: center; }
  .footer-bottom { flex-direction: column; gap: 14px; text-align: center; }
  .footer-bottom span { flex-wrap: wrap; justify-content: center; }
}
@media (max-width:480px) {
  .news-grid { grid-template-columns:1fr; }
  .news-grid-3 { grid-template-columns:1fr; }
  .video-grid { grid-template-columns:1fr; }
  .hero-main img { height:260px; }
  .hero-main-overlay { padding: 20px 16px 16px; }
  .hero-main-title { font-size: 20px; }
}
/* ── Section Subsection Tabs ─────────────────────────────── */
.sec-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:0; flex-wrap:wrap; gap:8px; }
.sec-title { font-size:20px; font-weight:700; color:var(--navy); border-left:4px solid var(--red); padding-left:12px; white-space:nowrap; }
.sec-title-dark { color:#fff; }
.sec-tabs { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.sec-tab { font-size:12.5px; font-weight:600; padding:5px 13px; border-radius:20px; background:#f0f0eb; color:#555; cursor:pointer; transition:all .2s; border:none; text-decoration:none; white-space:nowrap; }
.sec-tab:hover { background:var(--red); color:#fff; }
.sec-tab.active { background:var(--red); color:#fff; }
.sec-tab-dark { background:rgba(255,255,255,.12); color:rgba(255,255,255,.8); }
.sec-tab-dark.active, .sec-tab-dark:hover { background:var(--red); color:#fff; }
.sec-divider { height:1px; background:var(--gray-200); margin:12px 0 20px; }
.sec-content { display:none; }
.sec-content.active { display:block; }
.sec-empty { color:#aaa; font-size:14px; padding:30px 0; text-align:center; }

/* ── Subsection grid fix ─── */
@media(max-width:1100px){
  .six-col-grid { grid-template-columns:repeat(3,1fr) !important; }
}
@media(max-width:700px){
  .six-col-grid { grid-template-columns:repeat(2,1fr) !important; }
  .two-col-grid { grid-template-columns:1fr !important; }
}