/* ===============================================================
   SINGLE BLOG POST  ·  pages/blog-post.css
   ---------------------------------------------------------------
   Sudhu single blog post e load hoy. Ar kothao na.
   Prefix: .bp

   Layout (wireframe onujayi)
     Phone   < 768    ek column. Left rail hidden, TOC article er bhitore
     Tablet  768+     duita column: article + dan sidebar (280px)
     Laptop  1200+    tinta column: 250 | article | 300
     Boro    1600+    270 | article | 320

   SOB CONTROL EI FILE ER SOB UPORE "CONTROL PANEL" BLOCK E.
   =============================================================== */

/* ===============================================================
   CONTROL PANEL  <- 90% design change ekhane kore fela jay
   =============================================================== */
body.lbg-blog-post,
.bp{
  --bp-left:250px;          /* bam rail er chowra */
  --bp-right:300px;         /* dan sidebar er chowra */
  --bp-gap:32px;            /* column er majhe fak */
  --bp-pad:24px;            /* upore niche jayga */

  --bp-card-bg:var(--white);
  --bp-card-border:var(--border-subtle);
  --bp-card-radius:var(--radius-lg);
  --bp-card-pad:18px;
  --bp-rule:1px solid var(--border-subtle);   /* column er majher line */

  --bp-title:34px;          /* article title, desktop */
  --bp-body:17px;           /* article er lekha */
  --bp-line:1.7;            /* line height */
  --bp-measure:74ch;        /* ek line e sorbocho koto character */

  --bp-h2:27px;
  --bp-h3:20px;
  --bp-block-radius:var(--radius-md);
}
@media (min-width:768px){  body.lbg-blog-post,.bp{--bp-title:36px;--bp-pad:32px;--bp-right:270px;--bp-gap:28px} }
@media (min-width:1024px){ body.lbg-blog-post,.bp{--bp-title:38px;--bp-right:300px;--bp-gap:32px} }
@media (min-width:1200px){ body.lbg-blog-post,.bp{--bp-title:42px;--bp-h2:31px;--bp-h3:22px;--bp-body:17.5px} }
@media (min-width:1600px){ body.lbg-blog-post,.bp{--bp-left:270px;--bp-right:320px;--bp-gap:40px;--bp-title:46px} }


/* ===============================================================
   1. GRID  +  DUIPASHER SEPARATOR LINE
   ---------------------------------------------------------------
   JORULI: line duita soman lomba rakhar niyom.

   Age .bp__left ar .bp__right nijera e position:sticky chilo.
   Sticky box er ucchota tar nijer content er soman, tai DAN
   pasher line ta sudhu sidebar er card gulo joto tuku, totukui
   lomba hoto. Ar bam pasher line 100vh chilo. Duita line er
   lomba mil khe to na, tai dan pashe "adha line" dekhato.

   Ekhon:
     .bp__left / .bp__right = puro column, stretch kora, NON sticky.
                              Ei duitar upore border. Grid row er
                              ucchota = sob theke lomba column
                              (article). Tai duita line hubohu ek
                              lomba, header er niche theke footer
                              porjonto.
     .bp__rail              = bhitorer sticky box. Scroll er sathe
                              atke thake, ager moto e.

   Line mota ba rong bodlate: --bp-rule (CONTROL PANEL).
   =============================================================== */
.bp{
  display:grid;gap:var(--bp-gap);
  grid-template-columns:1fr;
  align-items:stretch;          /* <- line soman lomba hoyar chabi */
}
.bp__left{display:none}
.bp__main{order:2;min-width:0;padding:var(--bp-pad) 0 8px}
.bp__right{order:3;min-width:0;padding:0 0 var(--bp-pad)}
.bp__rail{display:flex;flex-direction:column;min-height:0}
.bp__stack{display:flex;flex-direction:column;gap:16px}

@media (min-width:768px){
  /* Tablet: article + dan sidebar. Dan pashe separator line. */
  .bp{grid-template-columns:minmax(0,1fr) var(--bp-right)}
  .bp__right{
    padding:var(--bp-pad) 0 var(--bp-pad) 24px;
    border-left:var(--bp-rule);          /* <- DAN pasher line, PURO lomba */
  }
  .bp__right .bp__rail{
    position:sticky;top:calc(var(--headH) + 16px);
    max-height:calc(100vh - var(--headH) - 32px);
    overflow-y:auto;overscroll-behavior:contain;
  }
}
@media (min-width:1200px){
  /* Laptop ar PC: tinta column */
  .bp{grid-template-columns:var(--bp-left) minmax(0,1fr) var(--bp-right)}
  .bp__left{
    display:block;order:1;
    padding:var(--bp-pad) 24px var(--bp-pad) 0;
    border-right:var(--bp-rule);         /* <- BAM pasher line, PURO lomba */
  }
  .bp__left .bp__rail{
    position:sticky;top:calc(var(--headH) + 16px);
    height:calc(100vh - var(--headH) - 32px);
    overflow-y:auto;overscroll-behavior:contain;
  }
  .bp__toc-inline{display:none !important}
  .bp__readm{display:none}
}

/* Sticky rail er scrollbar chikon ar chup chap */
.bp__rail{scrollbar-width:thin;scrollbar-color:var(--neutral-200) transparent}
.bp__rail::-webkit-scrollbar{width:6px}
.bp__rail::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:3px}
.bp__rail::-webkit-scrollbar-track{background:transparent}


/* ===============================================================
   2. CARD (tin ta column e ekoi card)
   =============================================================== */
.bp__card{
  background:var(--bp-card-bg);
  border:1px solid var(--bp-card-border);
  border-radius:var(--bp-card-radius);
  padding:var(--bp-card-pad);
}
.bp__h4{
  font-family:var(--font-body);font-weight:700;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--teal-700);
  margin:0 0 8px;
}
.bp__cap{display:block;font-size:12.5px;line-height:1.5;color:var(--text-muted)}


/* ===============================================================
   3. BAM RAIL
   =============================================================== */
.bp__readw{display:flex;align-items:center;gap:12px}
.bp__readi{
  width:40px;height:40px;flex:none;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:var(--teal-tint);color:var(--teal-700);
}
.bp__readn{display:block;font-family:var(--font-heading);font-weight:700;font-size:15px;color:var(--teal-700)}
.bp__progress{height:6px;background:var(--neutral-200);border-radius:4px;overflow:hidden;margin-top:12px}
.bp__progress i{display:block;height:100%;width:0;background:var(--teal-700);transition:width 120ms linear}
.bp__pct{margin-top:8px}

.bp__back{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:auto;padding-top:22px;
  font-size:14px;font-weight:700;color:var(--teal-700);
}
@media (hover:hover){ .bp__back:hover{color:var(--orange-700)} }
.bp__back:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:4px}

/* --- TOC --- */
.bp__toc{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:2px}
.bp__toc a{
  display:block;padding:6px 10px;border-radius:7px;
  border-left:2px solid transparent;
  font-size:13.5px;line-height:1.45;color:var(--text-body);
}
@media (hover:hover){ .bp__toc a:hover{background:var(--surface-alt)} }
.bp__toc a.is-here{color:var(--teal-700);font-weight:600;background:var(--teal-tint);border-left-color:var(--teal-700)}
.bp__toc .lvl3 a{padding-left:22px;font-size:12.5px;color:var(--text-muted)}
.bp__toc a:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-2px}

/* --- Share --- */
.bp__share{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.bp__sb{
  flex:1 1 70px;min-width:70px;min-height:40px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--border-subtle);border-radius:9px;
  background:var(--white);color:var(--teal-700);
  font-family:var(--font-body);font-size:12.5px;font-weight:600;cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease);
}
@media (hover:hover){ .bp__sb:hover{border-color:var(--teal-700);background:var(--teal-tint)} }
.bp__sb:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.bp__sb.is-done{border-color:var(--teal-700);background:var(--teal-tint)}


/* ===============================================================
   4. ARTICLE HEAD
   =============================================================== */
/* --- Breadcrumb ar tar thik nicher meta line ---------------------
   MOBILE ER NIYOM (0-767px): ei duita line KOKHONO 2nd line e
   jabe na. Lekha screen er cheye boro hole bam theke dan e scroll
   hobe (touch e swipe). Layout bhangbe na, kichu wrap korbe na.

   768px theke upore: jayga ache, tai line duita normal bhabe
   wrap kore. Ekhane nowrap dile lomba date ba lomba title kete
   jeto ar "Last updated" ta adha dekhato. Tai upore wrap.
   Keno: kono obostha teo tottho HARANO jabe na.

   Ei duita niyom ek sathe = mobile e wrap nai, desktop e cut nai. */
.bp__crumb,
.bp__meta{display:flex;align-items:center}

.bp__crumb{flex-wrap:wrap;gap:8px;font-size:12.5px;color:var(--text-muted)}
.bp__crumb a{color:var(--text-muted)}
@media (hover:hover){ .bp__crumb a:hover{color:var(--orange-700)} }
.bp__crumb .sep{opacity:.5}
.bp__crumb > span:last-child{color:var(--text-body);font-weight:600}

.bp__meta{flex-wrap:wrap;gap:8px 10px;margin-top:14px;font-size:13px;color:var(--text-muted)}
.bp__meta .sep{opacity:.5}
.bp__readm{display:inline-flex;align-items:center;gap:6px}

/* LAST UPDATED: desktop, tablet ar mobile, TIN TA TEO dekhabe.
   Ei selector e kokhono display:none dibena. */
.bp__upd{display:inline-flex;align-items:center;gap:6px;color:var(--teal-700);font-weight:600}
.bp__upd .ico{opacity:.75}

/* ---------- MOBILE: ek line + horizontal scroll ---------- */
@media (max-width:767px){
  .bp__crumb,
  .bp__meta{
    flex-wrap:nowrap;                 /* <- 2nd line e jabe na */
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none;
    padding-bottom:2px;
  }
  .bp__crumb::-webkit-scrollbar,
  .bp__meta::-webkit-scrollbar{display:none;height:0}
  .bp__crumb > *,
  .bp__meta > *{flex:0 0 auto;white-space:nowrap}

  /* Dan pashe halka fade, sudhu lekha ate na gele.
     .is-over class ta blog.js boshay. */
  @supports (mask-image:linear-gradient(90deg,#000,#000)){
    .bp__crumb.is-over,.bp__meta.is-over{
      mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
      -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    }
  }
}

.bp__title{
  font-family:var(--font-heading);font-weight:800;
  font-size:var(--bp-title);line-height:1.12;letter-spacing:-.03em;
  color:var(--text-heading);margin:14px 0 0;
}

.bp__feat{margin:20px 0 0;border-radius:var(--radius-lg);overflow:hidden;background:var(--teal-tint)}
.bp__feat img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}

.bp__toc-inline{margin-top:22px}


/* ===============================================================
   5. ARTICLE PROSE
   ---------------------------------------------------------------
   Author ke kichu korte hoy na. Editor e list, table, quote, image,
   code ja e dik, ekhane oi gulo apna apni card er moto block hoy.
   =============================================================== */
.bp__prose{margin-top:24px;color:var(--text-body)}
.bp__prose p{font-size:var(--bp-body);line-height:var(--bp-line);margin:14px 0;max-width:var(--bp-measure)}
.bp__prose > p:first-child{font-size:calc(var(--bp-body) + 1.5px);color:var(--text-strong)}

.bp__prose h2,.bp__h2{
  font-family:var(--font-heading);font-weight:800;
  font-size:var(--bp-h2);line-height:1.18;letter-spacing:-.02em;
  color:var(--text-heading);
  margin:34px 0 8px;scroll-margin-top:calc(var(--headH) + 20px);
}
.bp__prose h3{
  font-family:var(--font-heading);font-weight:700;
  font-size:var(--bp-h3);line-height:1.25;letter-spacing:-.01em;
  color:var(--teal-600);
  margin:26px 0 6px;scroll-margin-top:calc(var(--headH) + 20px);
}
.bp__prose h4{font-family:var(--font-heading);font-weight:700;font-size:17px;color:var(--teal-700);margin:22px 0 6px}

.bp__prose a{color:var(--orange-700);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
@media (hover:hover){ .bp__prose a:hover{color:var(--orange-800);text-decoration-thickness:2.5px} }
.bp__prose strong,.bp__prose b{font-weight:600;color:var(--text-strong)}
.bp__prose em{font-style:italic}

/* --- Content block: list, table, quote, image, code --- */
.bp__prose ul,
.bp__prose ol,
.bp__prose blockquote,
.bp__prose figure,
.bp__prose pre,
.bp__prose table{
  margin:22px 0;
  border:1px solid var(--border-subtle);
  border-radius:var(--bp-block-radius);
  background:var(--white);
  padding:18px;
  max-width:100%;
}
.bp__prose ul,.bp__prose ol{padding-left:38px}
.bp__prose li{font-size:15.5px;line-height:1.6;color:var(--text-body);margin:9px 0}
.bp__prose ul li{list-style:disc}
.bp__prose ol li{list-style:decimal}
.bp__prose li::marker{color:var(--teal-700)}
.bp__prose li b,.bp__prose li strong{color:var(--text-strong)}

.bp__prose blockquote{
  border-left:3px solid var(--teal-700);
  border-radius:0 var(--bp-block-radius) var(--bp-block-radius) 0;
  padding:14px 0 14px 18px;background:var(--surface-alt);
}
.bp__prose blockquote p{margin:0;font-size:17px;font-weight:500;color:var(--teal-700);line-height:1.5;max-width:none}
.bp__prose blockquote cite{display:block;font-size:12.5px;color:var(--text-muted);margin-top:10px;font-style:normal}

.bp__prose figure{padding:14px}
.bp__prose img{width:100%;height:auto;border-radius:var(--radius-sm);display:block}
.bp__prose figcaption{font-size:12.5px;color:var(--text-muted);margin-top:10px}

.bp__prose pre{
  background:var(--surface-alt);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;line-height:1.7;color:var(--text-strong);
  overflow-x:auto;white-space:pre;
}
.bp__prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;background:var(--teal-tint);color:var(--teal-900);padding:2px 6px;border-radius:4px}
.bp__prose pre code{background:none;padding:0}

.bp__prose table{border-collapse:collapse;width:100%;padding:0;font-size:13.5px;font-variant-numeric:tabular-nums;overflow:hidden}
.bp__prose th,.bp__prose td{border:1px solid var(--border-subtle);padding:10px 12px;text-align:left}
.bp__prose th{background:var(--surface-alt);color:var(--teal-700);font-weight:700}
.bp__prose td{color:var(--text-body)}

.bp__prose hr{border:0;height:1px;background:var(--border-subtle);margin:34px 0}
.bp__pages{margin-top:28px;font-size:15px}


/* ===============================================================
   6. FAQ
   =============================================================== */
.bp__faq{margin-top:8px}
.bp__faqrow{
  background:var(--white);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);padding:2px 16px;margin-top:10px;
}
.bp__faqrow[open]{border-color:var(--teal-700)}
.bp__q{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 0;cursor:pointer;list-style:none;
  font-family:var(--font-body);font-weight:600;font-size:15px;color:var(--teal-700);
}
.bp__q::-webkit-details-marker{display:none}
.bp__q:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-sm)}
.bp__qi{flex:none;color:var(--orange-700);transition:transform var(--dur) var(--ease)}
.bp__faqrow[open] .bp__qi{transform:rotate(45deg)}
.bp__a{padding:0 0 16px}
.bp__a p{margin:0;font-size:14.5px;line-height:1.7;color:var(--text-body);max-width:var(--bp-measure)}


/* ===============================================================
   7. IN-ARTICLE CTA
   =============================================================== */
.bp__cta{
  background:var(--surface-inverse);
  border-radius:var(--radius-xl);
  padding:30px 24px;text-align:center;margin-top:32px;
}
.bp__ctah{font-family:var(--font-heading);font-weight:800;font-size:21px;line-height:1.2;color:var(--white);margin:0}
.bp__ctat{font-size:14.5px;line-height:1.6;color:var(--neutral-100);margin:8px auto 0;max-width:48ch}
.bp__cta .btn{margin-top:18px}
@media (min-width:768px){ .bp__cta{padding:36px 28px} .bp__ctah{font-size:24px} }


/* ===============================================================
   8. RELATED POSTS
   =============================================================== */
.bp__relt{font-family:var(--font-heading);font-weight:800;font-size:21px;color:var(--text-heading);margin:36px 0 0}
.bp__rel{display:grid;gap:16px;grid-template-columns:1fr;margin-top:16px}
@media (min-width:600px){  .bp__rel{grid-template-columns:1fr 1fr} }
@media (min-width:1200px){ .bp__rel{grid-template-columns:repeat(3,1fr)} }

.bp__relcard{
  display:block;background:var(--white);
  border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  overflow:hidden;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
@media (hover:hover){ .bp__relcard:hover{border-color:var(--teal-700);box-shadow:var(--shadow-card);transform:translateY(-2px)} }
.bp__relcard:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.bp__relimg{display:block;background:var(--teal-tint);aspect-ratio:16/10;overflow:hidden}
.bp__relimg img{width:100%;height:100%;object-fit:cover}
.bp__ph{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-muted)}
.bp__relbody{display:block;padding:16px}
.bp__relmeta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bp__relh{display:block;font-family:var(--font-heading);font-weight:700;font-size:15.5px;line-height:1.3;color:var(--teal-700);margin-top:10px}


/* ===============================================================
   9. DAN SIDEBAR
   =============================================================== */
/* --- AUTHOR BOX --------------------------------------------------
   Alignment er niyom:
     1. Chobi ar lekha ekta grid e. Chobi auto, lekha minmax(0,1fr).
        minmax(0,...) na dile lomba naam column ke thele beriye jeto.
     2. align-items:center, tai chobi r majh bindu ar lekha r majh
        bindu ek line e.
     3. Naam ar role er line-height fixed, tai duita line er majhe
        fak kokhono lafay na.
     4. Bio ar social icon puro chowra jure, bam theke ek e edge.
   Desktop, tablet ar mobile, tinta teo ek e alignment. */
.bp__acard{display:block}
.bp__author{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:12px;
  margin-top:10px;
}
.bp__avatar{
  width:56px;height:56px;flex:none;border-radius:50%;overflow:hidden;
  background:var(--teal-tint);border:1px solid var(--border-subtle);
  display:flex;align-items:center;justify-content:center;
}
.bp__avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.bp__ainfo{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0}
.bp__aname{
  display:block;font-family:var(--font-heading);font-weight:700;
  font-size:15.5px;line-height:1.25;color:var(--teal-700);
  overflow-wrap:anywhere;
}
.bp__arole{line-height:1.35}
.bp__abio{font-size:13px;line-height:1.6;color:var(--text-muted);margin-top:14px}

.bp__asocial{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.bp__so{
  width:34px;height:34px;flex:none;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border-subtle);color:var(--teal-700);
}
@media (hover:hover){ .bp__so:hover{background:var(--teal-tint);border-color:var(--teal-700)} }
.bp__so:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}

.bp__newst{margin-bottom:12px}
.bp__news{display:grid;gap:10px}
.bp__news input{
  width:100%;min-height:44px;padding:10px 12px;
  border:1px solid var(--border-interactive);border-radius:var(--radius-sm);
  background:var(--white);color:var(--text-strong);font-family:var(--font-body);font-size:16px;
}
.bp__news input:focus{outline:none;border-color:var(--teal-700);box-shadow:0 0 0 3px rgba(0,77,71,.25)}

.bp__pop{display:flex;gap:11px;align-items:center;padding:10px 0;border-top:1px solid var(--border-subtle)}
.bp__pop:first-of-type{border-top:0;padding-top:2px}
.bp__pthumb{
  width:56px;height:56px;flex:none;border-radius:9px;overflow:hidden;
  background:var(--teal-tint);border:1px solid var(--border-subtle);
  display:flex;align-items:center;justify-content:center;color:var(--text-muted);
}
.bp__pthumb img{width:100%;height:100%;object-fit:cover}
.bp__poph{display:block;font-weight:600;font-size:13.5px;line-height:1.4;color:var(--teal-700)}
@media (hover:hover){ .bp__pop:hover .bp__poph{color:var(--orange-700)} }
.bp__pop:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-sm)}

.bp__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.bp__chip{
  display:inline-block;font-size:12.5px;color:var(--teal-700);
  background:var(--white);border:1px solid var(--border-subtle);
  border-radius:20px;padding:5px 11px;
}
@media (hover:hover){ .bp__chip:hover{background:var(--teal-tint);border-color:var(--teal-700)} }
.bp__chip:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}


/* ===============================================================
   10. BACK TO TOP
   ---------------------------------------------------------------
   Duita jaygay: bam rail e "On this page" er niche, ar article er
   ekdom sesh e. Duitoi smooth scroll kore page er top e niye jay.
   =============================================================== */
.bp__totop{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;padding:0 16px;
  background:var(--white);color:var(--teal-700);
  border:1px solid var(--border-subtle);border-radius:var(--radius-sm);
  font-family:var(--font-body);font-weight:700;font-size:13px;cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease);
}
.bp__totop .ico{transform:rotate(180deg)}
@media (hover:hover){ .bp__totop:hover{border-color:var(--teal-700);background:var(--teal-tint)} }
.bp__totop:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}

.bp__endtop{
  margin-top:34px;padding-top:22px;
  border-top:1px solid var(--border-subtle);
  display:flex;justify-content:center;
}
.bp__totop--wide{min-height:48px;padding:0 26px;font-size:14px}


/* ===============================================================
   11. MOBILE  (0 - 767px)
   ---------------------------------------------------------------
   NIYOM: kono section overflow korbe na, kete jabe na, wrap kore
   bhangbe na. Lekha kokhono khub choto na, kothao boro faka gap na.

   CSS ER ORDER TA JORULI: age shorthand `padding`, tar PORE
   `padding-left`. Age ulto chilo, tai shorthand ta padding-left
   ke muche dito ar list er bullet/number card er border er upor
   ba bahire chole jeto. Ei duita line ULTO korben na.
   =============================================================== */
@media (max-width:767px){

  .bp{gap:20px}
  .bp__main{padding-top:18px}
  .bp__right{padding-bottom:8px}
  .bp__stack{gap:14px}

  /* --- 11.1 Table of contents mobile e HIDDEN --- */
  .bp__toc-inline{display:none !important}

  /* --- 11.2 Title ar meta --- */
  .bp__title{line-height:1.14}
  .bp__meta{margin-top:12px;font-size:12.5px}
  .bp__feat{margin-top:16px}

  /* --- 11.3 Prose: lekha ar block --- */
  .bp__prose{margin-top:20px}
  .bp__prose p{font-size:16.5px;line-height:1.68}
  .bp__prose li{font-size:16px;line-height:1.62}

  /* age shorthand... */
  .bp__prose ul,.bp__prose ol,.bp__prose blockquote,
  .bp__prose figure,.bp__prose pre,.bp__prose table{margin:18px 0;padding:14px}
  /* ...tar PORE list er bam pasher jayga. Ei ta e bullet ar number
     ke card er bhitore rakhe. Kokhono 26px er niche namaben na. */
  .bp__prose ul,
  .bp__prose ol{padding:14px 14px 14px 32px;list-style-position:outside}
  .bp__prose li{margin:8px 0;padding-left:2px}
  .bp__prose li::marker{font-size:.95em}

  .bp__prose blockquote{padding:14px 14px 14px 16px}
  .bp__prose h2,.bp__h2{margin-top:28px}
  .bp__prose h3{margin-top:22px}

  /* --- 11.4 Share button --- */
  .bp__share{gap:6px}
  .bp__sb{flex:1 1 calc(50% - 3px);min-width:0;font-size:12px}

  /* --- 11.5 Author mobile e o ek e alignment --- */
  .bp__author{gap:12px}
  .bp__avatar{width:52px;height:52px}
  .bp__aname{font-size:15px}

  /* --- 11.6 CTA --- */
  .bp__cta{padding:24px 18px;margin-top:28px;border-radius:var(--radius-lg)}
  .bp__ctah{font-size:19px}
  .bp__ctat{font-size:14px}
  .bp__cta .btn{width:100%;max-width:320px}

  /* --- 11.7 Related article ar back to top --- */
  .bp__relt{font-size:19px;margin-top:30px}
  .bp__endtop{margin-top:28px}
  .bp__totop--wide{width:100%;max-width:320px}

  /* --- 11.8 Sidebar card --- */
  .bp__card{padding:16px}
  .bp__pthumb{width:52px;height:52px}
}

/* Khub choto phone (360px ar tar niche) */
@media (max-width:400px){
  body.lbg-blog-post,.bp{--bp-title:29px}
  .bp__prose ul,.bp__prose ol{padding-left:29px}
  .bp__sb{flex:1 1 100%}
  .bp__chip{font-size:12px}
}

/* ===============================================================
   12. OVERFLOW GUARD  (sob width e)
   ---------------------------------------------------------------
   Kono lomba shobdo, URL, code ba table jate column theke beriye
   na jay. Ei block ta soraben na.
   =============================================================== */
.bp,.bp__main,.bp__left,.bp__right,.bp__rail,.bp__stack{min-width:0}
.bp__prose{overflow-wrap:break-word}
.bp__prose a,
.bp__prose code,
.bp__poph,
.bp__relh,
.bp__aname{overflow-wrap:anywhere}

/* Table: chowra hole card er bhitore bam-dan scroll hobe.
   Ei wrapper ta blog.js apna apni boshiye dey. */
.bp__tw{
  margin:22px 0;max-width:100%;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--border-subtle);
  border-radius:var(--bp-block-radius);
  background:var(--white);
}
.bp__tw table,
.bp__tw.bp__tw table{margin:0;border:0;border-radius:0;min-width:520px}
@media (max-width:767px){ .bp__tw table{min-width:460px;font-size:13px} }

/* Embed (YouTube, map) responsive */
.bp__prose iframe,
.bp__prose video,
.bp__prose embed,
.bp__prose object{max-width:100%;width:100%;border-radius:var(--radius-sm);display:block}
.bp__prose iframe{aspect-ratio:16/9;height:auto;border:0}

/* Feature image ar prose image kokhono kete jabe na */
.bp__feat img,.bp__prose img{max-width:100%;height:auto}

/* Boro screen e majher column jate khub soru na hoy */
@media (min-width:1400px){
  body.lbg-blog-post,.bp{--bp-left:240px;--bp-right:290px}
}