/* News frontend — matches the news-design/ mockups (news-index, news-category, news-details). */

:root {
  --blue: #0b63d6;
  --red: #d8202f;
  --ink: #1c2430;
  --mute: #6b7685;
  --line: #e4e8ee;
  --bg: #f3f5f8;
  --card: #fff;
  --w: 1080px;
  --font: "Hind Siliguri", "Noto Sans Bengali", "Nirmala UI", "Segoe UI", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e8ecf2; --mute: #9aa6b6; --line: #2b3442; --bg: #11161d; --card: #182029;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  font-size: 15px;
}
img { display: block; max-width: 100%; width: 100%; height: 100%; object-fit: cover; background: #dfe6ee; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--blue); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
ul { list-style: none; margin: 0; padding: 0; }

.wrap { max-width: var(--w); margin: 0 auto; padding: 0 12px; }

/* Topbar */
.topbar { background: var(--card); border-bottom: 1px solid var(--line); font-size: 12px; }
.topbar .wrap { display: flex; align-items: center; gap: 12px; height: 34px; }
.topbar .brk { background: var(--red); color: #fff; padding: 1px 8px; border-radius: 2px; font-weight: 600; white-space: nowrap; }
.ticker { flex: 1; overflow-x: auto; scrollbar-width: none; }
.ticker::-webkit-scrollbar { display: none; }
.ticker-items { display: flex; gap: 22px; white-space: nowrap; color: var(--mute); }
.ticker-items a:hover { color: var(--blue); }
.topbar .search-form { display: flex; align-items: center; gap: 4px; flex: none; }
.topbar .search-form input {
  background: transparent; border: 1px solid var(--line); border-radius: 3px;
  padding: 3px 8px; color: var(--ink); font-family: inherit; font-size: 12px; width: 120px;
}
.topbar .search-form button { background: transparent; border: 0; color: var(--mute); cursor: pointer; font-size: 14px; }

/* Brand + nav */
.brand { background: var(--card); text-align: center; padding: 26px 0 18px; }
.logo { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.logo b {
  font-family: Arial Black, Impact, sans-serif; font-size: 40px; letter-spacing: -1px;
  color: #fff; background: linear-gradient(90deg, var(--red) 0 46%, #0d2f6b 46%);
  padding: 2px 14px; border-radius: 3px; font-style: italic;
}
.logo span { font-weight: 700; letter-spacing: 3px; background: #0d2f6b; color: #fff; font-size: 12px; padding: 1px 22px; margin-top: 2px; }

.nav { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.nav ul { display: flex; justify-content: center; gap: 26px; padding: 10px 12px; font-weight: 600; font-size: 13px; overflow-x: auto; white-space: nowrap; }
.nav ul::-webkit-scrollbar { display: none; }
.nav a:hover { color: var(--blue); }

main { max-width: var(--w); margin: 18px auto; padding: 0 12px; }

/* Section card */
.sec { background: var(--card); border: 1px solid var(--line); padding: 14px; margin-bottom: 18px; }
.sec-title, .page-title { font-size: 13px; color: var(--blue); font-weight: 700; margin: 0 0 12px; display: flex; align-items: center; gap: 6px; }
.page-title { font-size: 15px; }
.sec-title .ic, .page-title .ic { font-size: 12px; }

/* Primitives */
.thumb { display: block; position: relative; overflow: hidden; background: #dfe6ee; }
.thumb.sm { width: 64px; height: 50px; flex: none; }
.r-16x9 { aspect-ratio: 16/9; }
.badge { position: absolute; right: 6px; bottom: 6px; background: var(--blue); color: #fff; font-size: 10px; padding: 1px 8px; border-radius: 2px; }
.meta { font-size: 11.5px; color: var(--mute); }

/* Category grid card: image, title, excerpt, read more */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card h3 { font-size: 15px; line-height: 1.35; margin: 8px 0 4px; font-weight: 700; }
.card .ex { font-size: 12.5px; color: var(--mute); margin-top: 4px; }
.card .more { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--blue); }

/* Hero */
.hero { position: relative; display: block; aspect-ratio: 16/8.4; background: linear-gradient(#5a7fa8, #2a4468); overflow: hidden; }
.hero .cap { position: absolute; inset: auto 0 0 0; padding: 40px 16px 14px; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; }
.hero .cap h1 { font-size: 22px; line-height: 1.3; margin: 4px 0 0; }
.hero .badge { position: static; display: inline-block; }
.minis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.mini .thumb { aspect-ratio: 16/10; }
.mini h4 { font-size: 12px; font-weight: 600; line-height: 1.35; margin: 5px 0 0; }

/* Simple list (sidebar popular / related) */
.list li { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.list li:first-child { border-top: 0; }
.list h4 { font-size: 13px; font-weight: 600; line-height: 1.35; margin: 0; }

/* Strips (scroll-snap carousel): বিশেষ, অন্য খবর, মিডিয়াওয়াচ, মুক্তকথা */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 5); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip > * { scroll-snap-align: start; }
.strip-card .thumb { aspect-ratio: 16/10; }
.strip-card h4 { font-size: 12px; font-weight: 600; line-height: 1.35; margin: 5px 0 0; }
.dots { display: flex; justify-content: center; gap: 5px; margin-top: 10px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); display: block; }
.dots i.on { background: var(--blue); }

/* Overlay tiles: NNB English, কলাম/মতামত */
.ov { position: relative; display: block; overflow: hidden; background: #333; color: #fff; }
.ov-txt { position: absolute; inset: auto 0 0 0; padding: 30px 12px 10px; background: linear-gradient(transparent, rgba(0,0,0,.8)); }
.ov-txt time { font-size: 11px; opacity: .85; }
.ov-txt h3 { font-size: 15px; line-height: 1.3; margin: 0; }
.nnb { display: grid; grid-template-columns: 2fr 1fr; gap: 6px; min-height: 340px; }
.nnb .big { grid-row: 1 / 3; }
.nnb .ov { min-height: 165px; }
.nnb .ov img { position: absolute; inset: 0; }
.nnb .big h3 { font-size: 20px; }
.opinion { display: grid; grid-template-columns: 2fr 1fr; gap: 6px; min-height: 300px; }
.opinion .big { grid-row: 1 / 3; }
.opinion .ov { min-height: 145px; }
.opinion .ov img { position: absolute; inset: 0; }

/* Grid/split layouts: এনএনবি বিশেষ, স্পোর্টস, বাংলাদেশ, আন্তর্জাতিক, ইকোনমি/বিশ্ব */
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.split { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; }
.split .list li:first-child { border-top: 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.two-col .sec { margin: 0; }

/* Details page: image + title + description, right column = category list */
.detail-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }
.detail-main { background: var(--card); border: 1px solid var(--line); padding: 16px; }
.detail-main h1 { font-size: 24px; line-height: 1.35; margin: 14px 0 6px; }
.detail-main .thumb { aspect-ratio: 16/9; }
.article-cats { margin-bottom: 10px; }
.article-cats a { display: inline-block; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 3px; margin-right: 6px; }
.detail-body { margin-top: 16px; font-size: 15px; line-height: 1.85; }
.detail-body p { margin: 0 0 14px; }
.detail-body img { border-radius: 4px; margin: 10px 0; }
.article-tags { margin-top: 20px; display: flex; gap: 8px; flex-wrap: wrap; }
.article-tags span { background: var(--bg); padding: 4px 10px; border-radius: 20px; font-size: 12px; color: var(--mute); }

.detail-side { background: var(--card); border: 1px solid var(--line); padding: 14px; position: sticky; top: 70px; }
.side-cats li { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; font-weight: 600; }
.side-cats li:first-child { border-top: 0; }
.side-cats li span { font-weight: 400; color: var(--mute); font-size: 12px; }

/* Pagination */
.pagination-wrap { margin-top: 18px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.pager-nav {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 4px;
  font-size: 13px; font-weight: 700; color: var(--ink); background: var(--card);
}
.pager-nav:hover { border-color: var(--blue); color: var(--blue); }
.pager-nav.is-disabled { color: var(--mute); cursor: default; pointer-events: none; opacity: .6; }
.pager-nums { display: inline-flex; align-items: center; gap: 4px; margin: 0 4px; }
.pager-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 6px; border-radius: 4px;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.pager-num:hover { background: var(--bg); color: var(--blue); }
.pager-num.is-current { background: var(--blue); color: #fff; }
.pager-dots { color: var(--mute); padding: 0 2px; font-size: 13px; }
@media (max-width: 480px) {
  .pager-nav { padding: 6px 10px; font-size: 12px; }
  .pager-num { min-width: 28px; height: 28px; }
}

.empty-state { padding: 40px 0; text-align: center; color: var(--mute); }

/* Footer */
footer { background: #161b22; color: #c9d1db; margin-top: 30px; font-size: 12.5px; }
footer .wrap { max-width: var(--w); padding: 28px 12px; }
.copy { border-top: 1px solid #262e39; padding: 12px; display: flex; justify-content: space-between; max-width: var(--w); margin: 0 auto; color: #8a95a5; }

.totop { position: fixed; right: 16px; bottom: 16px; width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: #fff; border: 0; cursor: pointer; z-index: 30; }

@media (max-width: 820px) {
  .cat-grid, .minis, .detail-layout, .g3, .split, .two-col, .nnb, .opinion { grid-template-columns: 1fr; }
  .detail-side { position: static; }
  .nnb .big, .opinion .big { grid-row: auto; min-height: 220px; }
  .strip { grid-auto-columns: calc((100% - 10px) / 2); }
  .hero .cap h1 { font-size: 17px; }
  .nav ul { justify-content: flex-start; }
}