:root{
  --paper:#EEEAE1;
  --paper-deep:#E4DFD3;
  --ink:#221F1B;
  --ink-soft:#5A5348;
  --red:#A31621;
  --red-deep:#7A0F19;
  --gold:#AE8A4C;
  --rule:#C9C1AF;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Hind Siliguri', sans-serif;
  line-height:1.6;
}
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:'Tiro Bangla', serif; margin:0; }
img{ max-width:100%; display:block; }

/* ---------- Utility bar ---------- */
.utility-bar{
  background:var(--ink);
  color:var(--paper);
  font-size:13px;
}
.utility-bar .wrap{
  max-width:1180px;
  margin:0 auto;
  padding:6px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.utility-bar a{ opacity:.85; }
.utility-bar a:hover{ opacity:1; text-decoration:underline; }

/* ---------- Masthead ---------- */
.masthead{
  max-width:1180px;
  margin:0 auto;
  padding:28px 20px 18px;
  text-align:center;
  border-bottom:3px double var(--ink);
}
.masthead h1{
  font-size:56px;
  letter-spacing:.5px;
}
.masthead h1 a{ color:inherit; }
.masthead .tagline{
  color:var(--ink-soft);
  font-size:14px;
  margin-top:6px;
}

/* ---------- Nav ---------- */
nav.main-nav{
  background:var(--red);
}
nav.main-nav ul{
  max-width:1180px;
  margin:0 auto;
  padding:0 20px;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
}
nav.main-nav li{ flex:1 1 auto; }
nav.main-nav a{
  display:block;
  padding:13px 16px;
  color:#fff;
  text-align:center;
  font-weight:600;
  font-size:15px;
  border-left:1px solid rgba(255,255,255,.18);
}
nav.main-nav li:first-child a{ border-left:none; }
nav.main-nav a:hover,
nav.main-nav a.active{ background:var(--red-deep); }

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  max-width:1180px;
  margin:0 auto;
  padding:14px 20px 0;
  font-size:13px;
  color:var(--ink-soft);
}
.breadcrumb a:hover{ color:var(--red); }

/* ---------- Layout wrapper ---------- */
main{
  max-width:1180px;
  margin:0 auto;
  padding:28px 20px 10px;
}

.page-title{
  padding-bottom:18px;
  margin-bottom:24px;
  border-bottom:1px solid var(--rule);
}
.page-title h2{
  font-size:30px;
  color:var(--red-deep);
}
.page-title p{
  color:var(--ink-soft);
  font-size:14px;
  margin-top:6px;
}

/* ---------- Hero (home page only) ---------- */
.hero{
  display:grid;
  grid-template-columns:1.7fr 1fr;
  gap:28px;
  padding-bottom:30px;
  border-bottom:1px solid var(--rule);
}
.lead-story .thumb{
  aspect-ratio:16/9;
  background:linear-gradient(135deg,#3B3229,#1c1815);
  position:relative;
  display:flex;
  align-items:flex-end;
}
.lead-story .thumb::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.65), transparent 60%);
}
.lead-story .thumb .play{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:56px; height:56px;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center;
}
.lead-story .thumb .play span{
  width:0; height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:16px solid var(--red);
  margin-left:4px;
}
.lead-story .thumb .cap{
  position:relative;
  color:#fff;
  padding:16px 18px;
  font-size:12px;
  letter-spacing:.3px;
}
.lead-story h2{
  font-size:30px;
  margin-top:16px;
  line-height:1.35;
}
.lead-story h2 a:hover{ color:var(--red); }
.lead-story p{
  color:var(--ink-soft);
  margin-top:8px;
  font-size:15px;
}
.meta{
  color:var(--gold);
  font-size:13px;
  margin-top:10px;
  font-weight:600;
}

.side-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.side-list .item{
  display:grid;
  grid-template-columns:88px 1fr;
  gap:12px;
  padding-bottom:16px;
  border-bottom:1px solid var(--rule);
}
.side-list .item:last-child{ border-bottom:none; padding-bottom:0; }
.side-list .thumb-sm{
  width:88px; height:64px;
  background:linear-gradient(135deg,#8a7250,#5f4d33);
  object-fit:cover; /* এটা img এর জন্য — div এর ক্ষেত্রে কোনো প্রভাব ফেলে না */
  display:block;
}
.side-list h3{
  font-size:16px;
  line-height:1.4;
  font-weight:600;
  font-family:'Hind Siliguri',sans-serif;
}
.side-list h3 a:hover{ color:var(--red); }
.side-list .meta{ font-size:12px; margin-top:4px; }

/* ---------- Category sections ---------- */
.category{
  padding:30px 0;
  border-bottom:1px solid var(--rule);
}
.category-head{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:18px;
}
.category-head h2{
  font-size:24px;
  color:var(--red-deep);
}
.category-head .line{
  flex:1;
  height:1px;
  background:var(--rule);
}
.story-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.story-grid.wide{
  grid-template-columns:repeat(3,1fr);
}
.story-grid .card .thumb-md{
  aspect-ratio:4/3;
  background:linear-gradient(135deg,#6b5638,#3d3122);
  object-fit:cover;
  width:100%;
  display:block;
}
.story-grid .card h3{
  font-size:17px;
  margin-top:12px;
  line-height:1.4;
  font-weight:600;
  font-family:'Hind Siliguri',sans-serif;
}
.story-grid .card h3 a:hover{ color:var(--red); }
.story-grid .card .meta{ font-size:12px; margin-top:6px; }

/* ---------- Pagination ---------- */
.pagination{
  display:flex;
  justify-content:center;
  gap:8px;
  padding:30px 0 10px;
}
.pagination a{
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--rule);
  font-size:14px;
  font-weight:600;
}
.pagination a.active{ background:var(--red); border-color:var(--red); color:#fff; }
.pagination a:hover:not(.active){ border-color:var(--red); color:var(--red); }

/* ---------- Footer ---------- */
footer{
  background:var(--ink);
  color:var(--paper-deep);
  margin-top:20px;
}
footer .wrap{
  max-width:1180px;
  margin:0 auto;
  padding:34px 20px;
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:28px;
}
footer h4{
  font-family:'Tiro Bangla',serif;
  font-size:18px;
  margin:0 0 12px;
  color:#fff;
}
footer p{ color:#B9B2A2; font-size:14px; }
footer ul{ list-style:none; padding:0; margin:0; }
footer li{ margin-bottom:8px; }
footer a{ color:#B9B2A2; font-size:14px; }
footer a:hover{ color:#fff; }
.copyright{
  text-align:center;
  padding:14px 20px;
  font-size:13px;
  color:#8b8474;
  border-top:1px solid #38342c;
}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .masthead h1{ font-size:38px; }
  nav.main-nav ul{ flex-wrap:wrap; }
  nav.main-nav li{ flex:1 1 33%; }
  .hero{ grid-template-columns:1fr; }
  .story-grid{ grid-template-columns:1fr 1fr; }
  footer .wrap{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .story-grid{ grid-template-columns:1fr; }
  nav.main-nav li{ flex:1 1 50%; }
}

/* ---------- নিউজ ডিটেইল পেজের রিচ কনটেন্ট (TinyMCE থেকে আসা HTML) ---------- */
.news-content table{
  width:100%;
  border-collapse:collapse;
  margin:16px 0;
}
.news-content table td,
.news-content table th{
  border:1px solid var(--rule);
  padding:8px 10px;
}
.news-content table th{
  background:var(--paper-deep);
  font-weight:700;
}
.news-content img{
  max-width:100%;
  border-radius:4px;
  margin:12px 0;
}
.news-content p{
  margin:0 0 14px;
}
.news-content ul, .news-content ol{
  margin:0 0 14px;
  padding-left:24px;
}