/* =====================================================================
   Homepage layout (bb-*): green section tags with an arrow edge, grey cards,
   lead + two stories, "এখন যা আলোচনায়" ribbon, sidebar (মতামত, সর্বশেষ /
   সর্বাধিক পঠিত, জেলার খবর, a category box, poll), full-width sections and
   four small category boxes per row. Brand: green #0f8a3c · red #e3141c.
   ===================================================================== */
.bb-home {
  --bb-g: #0f8a3c; --bb-g2: #0b6e30; --bb-r: #e3141c;
  --bb-card: #f1f2f1; --bb-line: #dfe3e0; --bb-ink: #1b1d1f; --bb-muted: #5d6460; --bb-band: #e4e6e4;
}
html[data-theme="dark"] .bb-home {
  --bb-card: #1a1e1b; --bb-line: #2a312c; --bb-ink: #e8ebe9; --bb-muted: #a3aba6; --bb-band: #202622;
}
.bb-home a { color: inherit; }
.bb-main { margin-top: 18px; }
.bb-col { margin-bottom: 10px; }
.bb-t { margin: 0; color: var(--bb-ink); font-weight: 600; font-size: 17px; line-height: 1.5; }
.bb-t a:hover, .bb-op:hover span, .bb-tlist a:hover span, .bb-srow:hover span, .bb-mrow:hover span { color: var(--bb-g); }
.bb-t-md { font-size: 18px; }
.bb-t-lg { font-size: 22px; line-height: 1.45; }
.bb-t-xl { font-size: 27px; line-height: 1.4; font-weight: 700; }
.bb-sum { margin: 8px 0 0; color: var(--bb-muted); font-size: 15.5px; line-height: 1.6; }
.bb-clamp2, .bb-clamp3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.bb-clamp2 { -webkit-line-clamp: 2; line-clamp: 2; }
.bb-clamp3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* images: fixed 16:9 crop */
.bb-img { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--bb-card); }
.bb-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.bb-img:hover img, .bb-over a:hover img { transform: scale(1.04); }

/* ---------- শিরোনাম ticker: green label with an arrow, thin green frame ---------- */
.bb-ticker { margin-top: 14px; border: 1px solid var(--bb-g); background: var(--tk-bg, #fff); }
.bb-ticker .jd-br-in { padding: 0; }
.bb-home .bb-ticker-lbl { background: var(--bb-g) !important; box-shadow: none !important; border-radius: 0; font-size: 18px; padding: 0 22px 0 16px; }
.bb-home .bb-ticker-lbl::after { border-left-color: var(--bb-g) !important; }

/* ---------- section heading: green tag with an arrow edge · links · আরও খবর ---------- */
.bb-head, .bb-box-head { display: flex; align-items: center; gap: 14px; border-bottom: 2px solid var(--bb-g); margin-bottom: 14px; flex-wrap: wrap; }
.bb-tag { margin: 0; flex: none; }
.bb-tag a { display: inline-block; background: var(--bb-g); color: #fff !important; font-size: 21px; font-weight: 700; line-height: 1; padding: 11px 34px 11px 18px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); }
.bb-tag a:hover { background: var(--bb-g2); }
.bb-sub { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-left: auto; font-size: 15.5px; }
.bb-sub a { color: var(--bb-ink); padding: 3px 0; }
.bb-sub a:hover { color: var(--bb-g); }
.bb-sub a.on { color: var(--bb-g); font-weight: 600; }
.bb-more { margin-left: auto; color: var(--bb-g) !important; font-weight: 600; font-size: 15px; white-space: nowrap; }
.bb-more i { margin-left: 4px; }
.bb-sub + .bb-more { margin-left: 18px; }
.bb-sec { margin: 26px 0 8px; }

/* ---------- top: lead story · two stories ---------- */
.bb-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
.bb-lead-title { margin: 12px 0 0; font-size: 28px; line-height: 1.4; font-weight: 700; color: var(--bb-ink); }
.bb-lead-title a:hover { color: var(--bb-g); }
.bb-top-side { display: grid; gap: 16px; align-content: start; }
.bb-card .bb-t { margin-top: 9px; }
.bb-card-grey { background: var(--bb-card); padding: 12px 12px 14px; }
.bb-card-grey .bb-t { margin-top: 10px; }

/* ---------- "এখন যা আলোচনায়": grey band, green label with arrows on both ends ---------- */
.bb-ribbon { position: relative; text-align: center; margin: 22px 0 14px; }
.bb-ribbon::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 40px; transform: translateY(-50%); background: var(--bb-band); }
.bb-ribbon span { position: relative; display: inline-block; background: var(--bb-g); color: #fff; font-size: 20px; font-weight: 700; padding: 10px 40px;
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0 50%); }
.bb-ribbon-sm { margin: 0 0 14px; }
.bb-ribbon-sm span { font-size: 18px; padding: 8px 34px; }
.bb-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* ---------- সারাদেশ / জাতীয়: big grey card · list of four ---------- */
.bb-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 16px; }
.bb-list { display: grid; gap: 10px; align-content: start; }
.bb-row { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 12px; align-items: center; }
.bb-row-grey { background: var(--bb-card); padding: 8px; }
.bb-row .bb-t { font-size: 16px; font-weight: 500; }

/* ---------- sidebar ---------- */
.bb-aside > * { margin-bottom: 18px; }
.bb-box { background: var(--bb-card); }
.bb-box .bb-box-head { background: var(--bb-band); margin: 0; border-bottom: 0; padding-right: 10px; }
.bb-box .bb-tag a { font-size: 18px; padding: 10px 30px 10px 14px; }
.bb-box-body { padding: 4px 12px 8px; }
.bb-op { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; }
.bb-op + .bb-op { border-top: 1px solid var(--bb-line); }
.bb-op img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--bb-line); }
.bb-op span { font-size: 18px; font-weight: 700; line-height: 1.45; color: var(--bb-ink); }

.bb-tabs-btn { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.bb-tabs-btn button { border: 0; padding: 9px 6px; font-size: 17px; font-weight: 700; color: #fff; background: var(--bb-g); cursor: pointer; border-radius: 4px 4px 0 0; opacity: .78; }
.bb-tabs-btn button[data-tab$="latest"] { background: var(--bb-r); }
.bb-tabs-btn button.active { opacity: 1; }
.bb-tlist { list-style: none; margin: 0; padding: 4px 0 0 !important; max-height: none !important; overflow: visible !important; }
.bb-tlist li { border-bottom: 1px solid var(--bb-line); }
.bb-tlist li.jd-more-item { display: none; }
.jd-open .bb-tlist li.jd-more-item { display: block; }
.bb-tlist a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 10px 0; align-items: start; }
.bb-tlist img { width: 96px; height: 62px; object-fit: cover; display: block; }
.bb-tlist span { font-size: 15.5px; line-height: 1.5; color: var(--bb-ink); }
.bb-allbtn { display: block; width: 100%; margin-top: 10px; border: 0; border-radius: 6px; padding: 9px; background: var(--bb-r); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
.bb-allbtn:hover { filter: brightness(1.07); }

.bb-box-area { padding: 0 0 14px; background: var(--bb-band); }
.bb-box-area .bb-ribbon-sm::before { display: none; }
.bb-box-area .bb-ribbon-sm { padding-top: 10px; }
.bb-box-area .jd-area { padding: 0 12px; }
.bb-srow { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; align-items: center; padding: 10px 0; }
.bb-srow + .bb-srow { border-top: 1px solid var(--bb-line); }
.bb-srow img { width: 96px; height: 62px; object-fit: cover; }
.bb-srow span { font-size: 15.5px; line-height: 1.5; color: var(--bb-ink); }
.bb-poll { background: var(--bb-band); padding: 10px 12px 12px; }
.bb-poll .bb-ribbon-sm::before { display: none; }
.bb-poll .tk-poll-q { font-weight: 700; font-size: 16px; }
.bb-poll-old { display: block; text-align: right; font-size: 14px; color: var(--bb-muted) !important; margin-top: 8px; }

/* ---------- আন্তর্জাতিক: big story · three with summaries ---------- */
.bb-world { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; }
.bb-world-lead .bb-t { margin-top: 14px; }
.bb-world-list { display: grid; align-content: start; }
.bb-wrow { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding: 0 0 14px; margin-bottom: 14px; border-bottom: 1px solid var(--bb-line); }
.bb-wrow:last-child { margin-bottom: 0; }
.bb-wrow .bb-sum { font-size: 14.5px; margin-top: 6px; }

/* ---------- বিনোদন / খেলা: cards · big photo with headline on it · cards ---------- */
.bb-wide3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.bb-wcol { display: grid; gap: 16px; }
.bb-over a { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 9.2; background: #222; }
.bb-over img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.bb-over h3 { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 60px 16px 14px; color: #fff; font-size: 22px; line-height: 1.45; font-weight: 600;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.78)); }

/* ---------- small boxes: four per row ---------- */
.bb-boxes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin: 26px 0 30px; }
.bb-mini { background: var(--bb-card); }
.bb-mini .bb-box-head { background: var(--bb-band); margin: 0; border-bottom: 0; padding-right: 10px; }
.bb-mini .bb-tag a { font-size: 18px; padding: 10px 30px 10px 14px; }
.bb-mini .bb-more { font-size: 14px; }
.bb-mini-body { padding: 4px 10px 8px; }
.bb-mrow { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 10px 0; align-items: start; }
.bb-mrow + .bb-mrow { border-top: 1px dashed var(--bb-line); }
.bb-mrow img { width: 88px; height: 58px; object-fit: cover; }
.bb-mrow span { font-size: 15px; line-height: 1.5; color: var(--bb-ink); }

/* ---------- tablet / phone ---------- */
@media (max-width: 1199px) {
  .bb-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .bb-wide3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bb-over { grid-column: 1 / -1; order: -1; }
  .bb-world { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .bb-top, .bb-split { grid-template-columns: 1fr; }
  .bb-top-side { grid-template-columns: 1fr 1fr; }
  .bb-grid3 { grid-template-columns: 1fr 1fr; }
  .bb-grid3 > :nth-child(3) { display: none; }
  .bb-lead-title { font-size: 23px; }
  .bb-t-xl { font-size: 22px; }
  .bb-tag a { font-size: 18px; padding: 9px 28px 9px 14px; }
  .bb-sub { margin-left: 0; width: 100%; overflow-x: auto; flex-wrap: nowrap; gap: 18px; padding-bottom: 6px; font-size: 15px; white-space: nowrap; }
  .bb-head { gap: 8px; }
  .bb-wrow { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
  .bb-wrow .bb-sum { display: none; }
  .bb-row { grid-template-columns: 112px minmax(0, 1fr); }
  .bb-over h3 { font-size: 18px; }
  .bb-boxes { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .bb-top-side, .bb-grid3 { grid-template-columns: 1fr; }
  .bb-grid3 > :nth-child(3) { display: block; }
  .bb-wide3 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .bb-img img, .bb-over img { transition: none; } }

/* =====================================================================
   Polish: time + category under every headline, rounded photos and cards,
   a gentle lift on hover, steadier type sizes and spacing, keyboard focus
   ===================================================================== */
.bb-home { --bb-card: #f4f5f4; --bb-radius: 8px; }
html[data-theme="dark"] .bb-home { --bb-card: #1a1e1b; }

/* category · how long ago */
.bb-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 7px; font-size: 13.5px; line-height: 1.3; color: var(--bb-muted); }
.bb-meta b { color: var(--bb-r); font-weight: 600; }
.bb-meta b::after { content: "•"; color: #b5bab7; margin-left: 8px; font-weight: 400; }
.bb-meta .fa { margin-right: 2px; opacity: .8; }

/* headlines: one weight, steady sizes, comfortable line height */
.bb-t { font-weight: 600; color: var(--bb-ink); letter-spacing: .1px; }
.bb-t a { transition: color .15s ease; }
.bb-lead-title { font-size: 30px; font-weight: 700; line-height: 1.38; margin-top: 14px; }
.bb-lead .bb-meta { font-size: 14.5px; margin-top: 8px; }
.bb-lead .bb-sum { font-size: 16px; }

/* photos: rounded, with the category chip on the lead photo */
.bb-img { border-radius: var(--bb-radius); }
.bb-card-grey .bb-img, .bb-row .bb-img { border-radius: 6px; }
.bb-chip { position: absolute; left: 14px; top: 14px; z-index: 2; background: var(--bb-r); color: #fff; font-size: 14px; font-weight: 600; line-height: 1; padding: 7px 11px 6px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.bb-over a { border-radius: var(--bb-radius); }
.bb-tlist img, .bb-srow img, .bb-mrow img, .bb-op img { border-radius: 5px; }
.bb-op img { border-radius: 50%; }

/* cards: rounded, lift a little on hover */
.bb-card-grey, .bb-row-grey, .bb-box, .bb-mini, .bb-tabs { border-radius: var(--bb-radius); }
.bb-box, .bb-mini { overflow: hidden; }
.bb-card-grey, .bb-row-grey { border: 1px solid transparent; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.bb-card-grey:hover, .bb-row-grey:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(10, 60, 30, .35); border-color: var(--bb-line); }
.bb-card-plain .bb-t, .bb-card-grey .bb-t { margin-top: 10px; }

/* rows with photo + headline + time */
.bb-row { align-items: start; }
.bb-row .bb-t { font-size: 16.5px; font-weight: 600; }
.bb-row .bb-meta { margin-top: 5px; }
.bb-tl-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bb-tl-ago { font-size: 12.5px; color: var(--bb-muted); }
.bb-tlist a:hover .bb-tl-ago { color: var(--bb-muted); }

/* sections: even rhythm */
.bb-sec { margin: 34px 0 6px; }
.bb-head { margin-bottom: 16px; }
.bb-ribbon { margin: 28px 0 16px; }
.bb-boxes { margin: 34px 0; }

/* the sidebar boxes read as one column */
.bb-aside > * { margin-bottom: 22px; }
.bb-tabs { background: var(--bb-card); padding: 0 12px 12px; }
.bb-tabs-btn { margin: 0 -12px; }
.bb-tabs-btn button:first-child { border-radius: var(--bb-radius) 0 0 0; }
.bb-tabs-btn button:last-child { border-radius: 0 var(--bb-radius) 0 0; }
.bb-tlist li:last-child { border-bottom: 0; }

/* keyboard users can see where they are */
.bb-home a:focus-visible, .bb-home button:focus-visible { outline: 3px solid rgba(15, 138, 60, .55); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 767px) {
  .bb-lead-title { font-size: 23px; }
  .bb-sec { margin-top: 26px; }
  .bb-meta { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .bb-card-grey, .bb-row-grey { transition: none; } .bb-card-grey:hover, .bb-row-grey:hover { transform: none; } }

/* =====================================================================
   News page (bbd-*): grey breadcrumb bar · big headline · byline with photo ·
   date + round share buttons · photo · justified text · "আরও পড়ুন" cards ·
   red/green tabs in the sidebar
   ===================================================================== */
.bbd { padding-top: 18px; }
.bbd.bb-home a { color: inherit; }
.bbd-crumb { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--bb-band); padding: 10px 16px; margin-bottom: 18px; font-size: 15.5px; }
.bbd-path { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; color: var(--bb-muted); }
.bbd-path a { color: var(--bb-ink) !important; white-space: nowrap; }
.bbd-path a:hover { color: var(--bb-g) !important; }
.bbd-path .fa-home { font-size: 18px; }
.bbd-path .sep { color: #a5aaa7; }
.bbd-path .cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bbd-crumb .np-crumb-admin { margin-left: auto; display: inline-flex; gap: 8px; }

.bbd-title { margin: 0 0 14px; font-size: 36px; line-height: 1.38; font-weight: 600; color: var(--bb-ink); }

.bbd-by { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.bbd-pic { flex: none; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; border: 2px solid var(--bb-line); background: #fff; display: block; }
.bbd-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bbd-who { display: flex; flex-direction: column; line-height: 1.35; }
.bbd-who strong { font-size: 17px; font-weight: 600; color: var(--bb-ink); }
.bbd-who strong a:hover { color: var(--bb-g); }
.bbd-who small { font-size: 14.5px; color: var(--bb-muted); }
.bbd-who small .fa { color: var(--bb-g); }

.bbd-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 6px 0 14px; margin-bottom: 18px; border-bottom: 1px solid var(--bb-line); }
.bbd-date { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 15.5px; color: var(--bb-muted); }
.bbd-date .fa { margin-right: 4px; }
.bbd-date .np-upd { color: var(--bb-g); }
.bbd-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bbd-share > a, .bbd-share > button { width: 40px; height: 40px; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center;
  color: #fff !important; font-size: 18px; cursor: pointer; transition: transform .15s, filter .15s; text-decoration: none !important; }
.bbd-share > a:hover, .bbd-share > button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.bbd-share .s-fb { background: #3b5998; }
.bbd-share .s-wa { background: #25d366; }
.bbd-share .s-x  { background: #111; }
.bbd-share .s-x b { font-size: 17px; line-height: 1; }
.bbd-share .s-in { background: #0a66c2; }
.bbd-share .s-cp { background: #6b7280; }
.bbd-share .s-pc { background: var(--bb-g); }
.bbd-share .s-pr { background: #222; }
.bbd-fs { display: inline-flex; margin-left: 4px; border: 1px solid var(--bb-line); border-radius: 20px; overflow: hidden; }
.bbd-fs button { border: 0; background: transparent; color: var(--bb-ink); padding: 7px 10px; font-weight: 700; cursor: pointer; font-size: 14px; }
.bbd-fs button + button { border-left: 1px solid var(--bb-line); }
.bbd-fs button:hover { color: var(--bb-g); }

/* photo full width of the column, text justified */
.bbd .np-figure { margin: 0 0 16px; }
.bbd .np-figure img { width: 100%; height: auto; display: block; }
.bbd .np-figure figcaption { font-size: 14.5px; color: var(--bb-muted); padding: 7px 2px 0; }
.bbd .np-body { text-align: justify; text-justify: inter-word; }
/* text pasted from other sites can carry its own background / font colours: the story keeps the page's look */
.bbd .np-body, .bbd .np-body * { background-color: transparent !important; }
.bbd .np-body p, .bbd .np-body span, .bbd .np-body div, .bbd .np-body font { color: inherit !important; }
.bbd .np-body p { margin-bottom: 14px; }
.bbd .jd-d-lede { text-align: justify; }

/* আরও পড়ুন under the story */
.bbd-ribbon { margin-top: 28px; }
.bbd-more { margin-bottom: 26px; }

/* sidebar */
.bbd-side .bb-tabs { margin-bottom: 20px; }
.bbd-side { position: sticky; top: 76px; }

@media (max-width: 991px) { .bbd-side { position: static; margin-top: 10px; } }
@media (max-width: 767px) {
  .bbd-title { font-size: 26px; }
  .bbd-crumb { font-size: 14.5px; padding: 8px 12px; }
  .bbd-share > a, .bbd-share > button { width: 36px; height: 36px; font-size: 16px; }
  .bbd .np-body { text-align: left; }
}