/**
 * Bhinnobritto — responsive.css
 * Breakpoints, dark mode, print and reduced-motion. Loaded last so every
 * rule here can override main.css and components.css without !important.
 *
 * Breakpoint ladder (max-width, desktop-first to keep the mobile CSS small):
 *   1280px  wide desktop trims
 *   1120px  hero rail folds away
 *   1024px  tablet — sidebar drops under the article, burger appears
 *    860px  small tablet — two column grids
 *    640px  phone — single column
 *    420px  narrow phone
 */

/* ------------------------------------------------------------------ *
 * 1. Wide desktop
 * ------------------------------------------------------------------ */
@media (max-width: 1280px) {
	:root { --bb-gap-lg: 28px; }

	.bb-columns { grid-template-columns: minmax(0, 1fr) 300px; }
	.bb-layout--sidebar-left .bb-columns { grid-template-columns: 300px minmax(0, 1fr); }
	.bb-mostread__grid:not(.bb-mostread__grid--nosidebar) { grid-template-columns: minmax(0, 1fr) 300px; }
	.bb-hero-block__grid { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) 250px; }
}

/* ------------------------------------------------------------------ *
 * 2. Hero rail folds under the lead
 * Only the split composition folds here. The list composition is a two-column
 * shape by design and holds it down to 860px, and the overlay composition has
 * no rail at all — hence the --split qualifier rather than a bare class.
 * ------------------------------------------------------------------ */
@media (max-width: 1120px) {
	.bb-hero-block__grid {
		grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
	}

	/* The rail is a bordered box, not a bordered column, so folding it under the
	   lead is purely a matter of spanning both tracks — the box keeps its own
	   frame and the list inside it goes three across. */
	.bb-hero-block--split .bb-hero-block__rail {
		grid-column: 1 / -1;
	}

	.bb-hero-block--split .bb-rail__list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
	}

	.bb-videos__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
	.bb-socialstrip__grid { grid-template-columns: 330px minmax(0, 1fr); }
	.bb-grid--5 { --bb-cols: 4; }
}

/* ------------------------------------------------------------------ *
 * 3. Tablet — burger nav, stacked columns
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	:root {
		--bb-gap-lg: 26px;
		--bb-header-h: 70px;
	}
	.bb-drawer-open .bb-header__menu-toggle {
		transform: rotate(90deg);
	}

	.bb-drawer-open .bb-header__menu-toggle svg {
		transform: rotate(-90deg);
	}
    .bb-header {
    	padding-block: 6px;
    }
    
    .bb-header__inner {
    	border-radius: 0;
    }
    
    .bb-header__navbar {
    	display: none;
    }
    
    .bb-sidebar--sticky {
    	position: static;
    	max-height: none;
    	overflow: visible;
    }
	.bb-nav-toggle { display: inline-grid; }
	.bb-header__nav { display: none; }

	/* The drawer replaces the menu below this width, so the dark nav strip and
	   the masthead ad would both be empty furniture. */
	
	.bb-header__navbar,
	.bb-header--left .bb-header__promo { display: none; }

	.bb-header--centered .bb-logo { font-size: 1.3em; }
	.bb-header--centered .bb-logo-img { max-height: 44px; }

	.bb-header__inner { gap: 10px; }
	.bb-drawer {
    	z-index: 998;
    }
    
    .bb-drawer__panel {
    	top: var(--bb-drawer-top, calc(var(--bb-header-h) + 12px));
    	height: calc(100vh - var(--bb-drawer-top, calc(var(--bb-header-h) + 12px)));
    }
    
    body.bb-drawer-open .bb-header {
    	z-index: 999;
    }

	.bb-topbar__nav,
	.bb-topbar__links { display: none; }

	.bb-columns,
	.bb-layout--sidebar-left .bb-columns { grid-template-columns: minmax(0, 1fr); }

	.bb-layout--sidebar-left .bb-columns__main,
	.bb-layout--sidebar-left .bb-columns__side { order: 0; }

	/* A sticky column makes no sense once it is full width. */
	.bb-sidebar--sticky {
		position: static;
		max-height: none;
		overflow: visible;
	}

	.bb-sidebar {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
	}

	.bb-mostread__grid,
	.bb-opinion__grid { grid-template-columns: minmax(0, 1fr); }

	.bb-mostread__side {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		display: grid;
		gap: 18px;
	}

	.bb-videos__grid { grid-template-columns: minmax(0, 1fr); }
	.bb-videos__list {
		max-height: none;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.bb-socialstrip__grid { grid-template-columns: minmax(0, 1fr); }

	/* মোবাইলে পুরো প্রস্থ জুড়ে, মাঝখানে বসানো — এবং উচ্চতা অটুট, যাতে
	   পোস্টগুলো দেখা যায়। */
	.bb-socialstrip__page {
    	width: 380px;
    	max-width: 100%;
    	margin-inline: auto;
    	min-height: 640px;
    	min-width: 0;
    }

	.bb-socialstrip__page iframe { height: 640px; }

	.bb-grid--4 { --bb-cols: 3; }
	.bb-grid--5 { --bb-cols: 3; }

	.bb-catsection__grid { grid-template-columns: minmax(0, 1fr); }
	.bb-catsection__rest { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.bb-authorhero { grid-template-columns: 88px minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ *
 * 4. Small tablet
 * ------------------------------------------------------------------ */
@media (max-width: 860px) {
	:root {
		--bb-gap: 16px;
		--bb-gap-lg: 22px;
		--bb-pad: 14px;
	}

	.bb-grid--3,
	.bb-grid--4,
	.bb-grid--5 { --bb-cols: 2; }

	.bb-hero-block__grid {
    	grid-template-columns: minmax(0, 1fr);
    	gap: 26px;
    }
    .bb-hero-block__side {
    	display: grid;
    	grid-template-columns: repeat(2, minmax(0, 1fr));
    	gap: 20px;
    }
    
    .bb-hero-block__rail {
    	margin-top: 4px;
    }

	/* The two modifier compositions defend their shape with two-class rules, so
	   they have to be collapsed by name here rather than by the bare class. */
	.bb-hero-block--list .bb-hero-block__grid { grid-template-columns: minmax(0, 1fr); }
	.bb-hero-block--overlay .bb-hero-block__side { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.bb-rail__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bb-catsection__rest { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.bb-card--wide {
		grid-template-columns: minmax(0, 1fr);
	}

	.bb-card--wide .bb-card__media { border-radius: var(--bb-radius) var(--bb-radius) 0 0; }

	.bb-postnav { grid-template-columns: minmax(0, 1fr); }
	.bb-postnav__item--next { grid-column: 1; text-align: start; }

	.bb-single__bar {
		flex-wrap: wrap;
		gap: 10px;
	}

	.bb-share__name { display: none; }
	.bb-share__btn { padding: 8px; }

	.bb-photogrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ *
 * 5. Phone
 * ------------------------------------------------------------------ */
@media (max-width: 640px) {
	:root {
		--bb-fs-base: 16px;
		--bb-gap: 14px;
		--bb-gap-lg: 20px;
	}
	
    .bb-container {
    	padding-inline: 14px;
    }
    
    .bb-header {
    	padding-block: 5px;
    }
    
    .bb-header__inner {
    	min-height: 54px;
    	border-radius: 16px;
    	gap: 8px;
    }
    
    .bb-header__tools {
    	gap: 5px;
    }
    
    .bb-hero-block {
    	padding-top: 18px;
    }
    
    .bb-hero-block__side {
    	grid-template-columns: 1fr;
    	gap: 16px;
    }
    
    .bb-section {
    	padding-block: 44px;
    }
    
    .bb-section__head {
    	margin-bottom: 18px;
    }
    
    .bb-section__title {
    	font-size: 1.15em;
    }
    
    .bb-card--hero .bb-card__media {
    	border-radius: 20px;
    }
    
    .bb-card--hero .bb-card__title {
    	font-size: clamp(1.45rem, 6vw, 2rem);
    	line-height: 1.3;
    }

	.bb-topbar__date { font-size: .78em; }
	.bb-topbar__right { margin-inline-start: auto; }

	.bb-grid,
	.bb-grid--2,
	.bb-grid--3,
	.bb-grid--4,
	.bb-grid--5 { --bb-cols: 1; }

	.bb-hero-block__side,
	.bb-rail__list,
	.bb-catsection__rest,
	.bb-videos__list,
	.bb-sidebar,
	.bb-mostread__side,
	.bb-photogrid { grid-template-columns: minmax(0, 1fr); }

	.bb-hero-block--overlay .bb-hero-block__side { grid-template-columns: minmax(0, 1fr); }

	/* A 21:9 crop leaves a headline nowhere to go on a phone, so the overlay
	   lead switches to a portrait frame and the text gets more room. */
	.bb-card--overlay .bb-card__media { aspect-ratio: 4 / 3; }
	.bb-card--overlay .bb-card__body { padding: 16px 15px; gap: 8px; }
	.bb-card--overlay .bb-card__title { font-size: 1.3em; }

	/* Compact and list cards keep their side-by-side shape — it reads
	   better than a stack on a phone and matches how people scan feeds.
	   Both are flex rows, so the thumbnail is sized with flex-basis. */
	.bb-card--list .bb-card__media { flex-basis: 118px; width: 118px; }
	.bb-card--compact .bb-card__media { flex-basis: 96px; width: 96px; }

	.bb-hero .bb-card__title,
	.bb-card--hero .bb-card__title { font-size: 1.32em; }

	.bb-section__head {
		flex-wrap: wrap;
		gap: 6px;
	}

	.bb-single__title { font-size: 1.42em; }

	.bb-single__body p {
		text-align: justify;
		-webkit-hyphens: auto;
		hyphens: auto;
	}

	.bb-single__figure { margin-inline: calc(var(--bb-pad) * -1); border-radius: 0; }
	.bb-single__figure img { border-radius: 0; }

	.bb-authorbox,
	.bb-authorhero {
		grid-template-columns: minmax(0, 1fr);
		text-align: center;
	}

	.bb-authorbox__avatar,
	.bb-authorhero__avatar {
		width: 76px;
		margin-inline: auto;
	}

	.bb-authorbox__links,
	.bb-authorhero__stats { justify-content: center; }

	.bb-voice { gap: 8px; }
	.bb-voice__rate { width: 74px; }

	.bb-factbox__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }

	.bb-liveblog { padding-inline-start: 20px; }
	.bb-liveblog > h2::before,
	.bb-liveblog > h3::before { inset-inline-start: -20px; }

	.bb-totop { inset-inline-end: 12px; bottom: 12px; }

	.bb-footer__brandbar-inner,
	.bb-footer__bottom-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}

/* ------------------------------------------------------------------ *
 * 6. Narrow phone
 * ------------------------------------------------------------------ */
@media (max-width: 420px) {
    .bb-header__brand .bb-logo-img {
    	max-height: 38px;
    }
    
    .bb-header__tools .bb-btn--live {
    	display: none;
    }
    
    .bb-card--list {
    	padding-block: 12px;
    }
    
    .bb-card--list .bb-card__media {
    	border-radius: 12px;
    }
	.bb-header__tools .bb-fontsize { display: none; }
	.bb-card--list .bb-card__media { flex-basis: 104px; width: 104px; }
	.bb-widget-thumb { flex-basis: 74px; width: 74px; }
	.bb-widget-thumb img { height: 52px; }
	.bb-404__code { font-size: 4.6rem; }
	.bb-drawer__panel {
    	width: min(88vw, 340px);
    	top: var(--bb-drawer-top, calc(var(--bb-header-h) + 12px));
    	height: calc(100vh - var(--bb-drawer-top, calc(var(--bb-header-h) + 12px)));
    }
}

/* ------------------------------------------------------------------ *
 * 7. Dark mode
 * Three entry points, all landing on the same token block:
 *   html.bb-dark          — reader turned it on (assets/js/main.js)
 *   body.bb-prefers-dark  — site default from the Customizer
 *   prefers-color-scheme  — deliberately NOT an entry point; see the note
 *                           below the token block
 * Selectors are two-part on purpose so they outrank the :root token block
 * that bb_inline_tokens() prints from the Customizer.
 * ------------------------------------------------------------------ */
html.bb-dark,
html.bb-dark body,
html:not(.bb-light) body.bb-prefers-dark {
	color-scheme: dark;

	--bb-ink: #e9ebf0;
	--bb-muted: #a6adbb;
	--bb-faint: #7d8493;
	--bb-line: #262b34;
	--bb-line-soft: #1d222a;
	--bb-bg: #0f1217;
	--bb-bg-alt: #161a21;
	--bb-bg-deep: #07090c;
	--bb-primary-soft: #2b2412;
	--bb-link: #7ab6ff;
	--bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
	--bb-shadow: 0 4px 18px rgba(0, 0, 0, .55);
	--bb-shadow-lg: 0 14px 44px rgba(0, 0, 0, .6);
	--bb-surface: rgba(15,17,21,.78);
	--bb-surface-strong: rgba(15,17,21,.92);
	--bb-glass-border: rgba(255,255,255,.09);
	--bb-glass-shadow: 0 14px 40px rgba(0,0,0,.4);
}

/*
 * The operating system does not get a vote. `prefers-color-scheme: dark` used
 * to switch the palette here, which meant every reader whose phone is in
 * system-wide dark mode landed on a dark news site they never asked for.
 * Dark is now opt-in only: the reader's switch (html.bb-dark) or the
 * Customizer default (body.bb-prefers-dark). assets/js/main.js:initTheme()
 * mirrors this decision.
 */

/* Surface tweaks that tokens alone cannot express. */
html.bb-dark body,
html:not(.bb-light) body.bb-prefers-dark { background: var(--bb-bg); color: var(--bb-ink); }

html.bb-dark .bb-header,
html:not(.bb-light) body.bb-prefers-dark .bb-header { border-bottom-color: var(--bb-line); }

html.bb-dark .bb-videos,
html:not(.bb-light) body.bb-prefers-dark .bb-videos { background: #0a0d11; }

html.bb-dark .bb-thumb-placeholder,
html:not(.bb-light) body.bb-prefers-dark .bb-thumb-placeholder { background: #1b2027; }

html.bb-dark .bb-card__media,
html:not(.bb-light) body.bb-prefers-dark .bb-card__media { background: #1b2027; }

/* The moon/sun swap in main.css keys off .bb-dark only, so main.js mirrors the
   Customizer default onto <html> at boot. This rule is the belt to that
   braces: if scripting is off, the icon still matches the palette. */
html:not(.bb-light) body.bb-prefers-dark .bb-dark-toggle .bb-icon-sun { display: block; }
html:not(.bb-light) body.bb-prefers-dark .bb-dark-toggle .bb-icon-moon { display: none; }

/* ------------------------------------------------------------------ *
 * 8. Reduced motion
 * The ticker keeps its transform (it is how items are positioned at all) —
 * assets/js/main.js reads the same media query and simply stops
 * auto-advancing instead.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	.bb-card:hover .bb-card__media img { transform: none; }
}

/* ------------------------------------------------------------------ *
 * 9. Print — readers and archivists still print news pages
 * ------------------------------------------------------------------ */
@media print {
	.bb-topbar,
	.bb-header,
	.bb-ticker,
	.bb-drawer,
	.bb-searchbar,
	.bb-share,
	.bb-voice,
	.bb-socialstrip,
	.bb-videos,
	.bb-related,
	.bb-postnav,
	.bb-sidebar,
	.bb-footer,
	.bb-totop,
	.bb-progress,
	.bb-ad,
	.bb-loadmore-wrap,
	.bb-pagination-wrap,
	.bb-commentform,
	.bb-socialembed,
	.bb-embed,
	.bb-aftercontent { display: none !important; }

	html, body {
		background: #fff !important;
		color: #000 !important;
		font-size: 12pt;
	}

	.bb-columns { display: block !important; }

	.bb-single__title { font-size: 20pt; }

	.bb-prose { max-width: none; }

	.bb-single__body a::after {
		content: " (" attr(href) ")";
		font-size: .8em;
		word-break: break-all;
	}

	.bb-tldr,
	.bb-factbox {
		border: 1px solid #999 !important;
		background: #fff !important;
		page-break-inside: avoid;
	}

	figure,
	img { page-break-inside: avoid; }
}

/* ------------------------------------------------------------------ *
 * 10. Corrections
 * Appended at the very end on purpose. responsive.css is the last
 * stylesheet in the queue, so at equal specificity every rule below wins
 * on source order and none of them needs !important.
 * ------------------------------------------------------------------ */

/* 10.1 Chrome that has to stay dark in both palettes.
 * --bb-ink is the body-text token: #12141a in light, #e9ebf0 in dark. These
 * surfaces used it as a *background* while keeping hardcoded white text, so
 * the moment the dark palette loaded they became white-on-white. They are
 * chrome, not content, so the light-mode value is pinned. Light mode is
 * therefore pixel-identical to before; only dark mode changes.
 * (.bb-flag is fixed in main.css instead — appending it here would outrank
 * its nine --breaking/--live/--lead… modifiers on source order.)
 * ------------------------------------------------------------------ */
.bb-topbar {
	background: #12141a;
	color: rgba(255, 255, 255, .86);
}

.bb-header__navbar {
	background: rgba(18,20,26,.92);
}

.bb-totop {
	background: #12141a;
	color: #fff;
}

.bb-ticker__btn.is-paused {
	background: #12141a;
	border-color: #12141a;
	color: #fff;
}

.bb-social--lg .bb-social__link:hover {
	background: #12141a;
	color: #fff;
}

/* :not(.is-copied) keeps the green "copied" confirmation visible while the
   pointer is still on the button. */
.bb-share__btn--copy:not(.is-copied):hover {
	background: #12141a;
	border-color: #12141a;
	color: #fff;
}

.bb-voice__play[aria-pressed="true"] {
	background: #12141a;
	border-color: #12141a;
	color: #fff;
}

/* 10.2 Footer social buttons.
 * .bb-footer a { color: inherit } is (0,1,1) and beat .bb-sociallink's
 * (0,1,0) colour, so the pills inherited the footer's white text on top of
 * a --bb-bg-alt (near-white) background. Two classes = (0,2,0) wins, and the
 * pill is restyled for the dark footer it actually sits in.
 * ------------------------------------------------------------------ */
.bb-footer .bb-sociallink {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .16);
	color: #fff;
}

.bb-footer .bb-sociallink:hover {
	background: rgba(255, 255, 255, .16);
	border-color: rgba(255, 255, 255, .28);
	color: #fff;
}

/* The brand tints stay — they are the point of the buttons. */
.bb-footer .bb-sociallink--facebook:hover  { background: #1877f2; border-color: #1877f2; }
.bb-footer .bb-sociallink--youtube:hover   { background: #ff0000; border-color: #ff0000; }
.bb-footer .bb-sociallink--instagram:hover { background: #c13584; border-color: #c13584; }
.bb-footer .bb-sociallink--x:hover         { background: #0f1419; border-color: #3a3f45; }
.bb-footer .bb-sociallink--tiktok:hover    { background: #010101; border-color: #3a3f45; }
.bb-footer .bb-sociallink--linkedin:hover  { background: #0a66c2; border-color: #0a66c2; }
.bb-footer .bb-sociallink--whatsapp:hover  { background: #25d366; border-color: #25d366; }
.bb-footer .bb-sociallink--telegram:hover  { background: #229ed9; border-color: #229ed9; }

/* 10.3 Grids that never collapsed.
 * Three separate specificity accidents, all with the same shape: a rule
 * written at a wide breakpoint carried more weight than the narrow-breakpoint
 * rule meant to override it, so the wide layout survived down to phone width.
 * Each is restated here at its own specificity or higher.
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	/* :not() donates its argument's weight, so the 1280px rule
	   `.bb-mostread__grid:not(.bb-mostread__grid--nosidebar)` is (0,2,0) and
	   outranked the (0,1,0) collapse in section 3 — the most-read block kept a
	   1fr + 300px split on phones and pushed the page sideways. */
	.bb-mostread__grid:not(.bb-mostread__grid--nosidebar) {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 860px) {
	/* The 1120px rule `.bb-hero-block--split .bb-rail__list` is (0,2,0) and beat
	   the bare `.bb-rail__list` collapses, which is why সর্বশেষ সংবাদ stayed
	   three across on a phone. Restated with the modifier named. */
	.bb-hero-block--split .bb-rail__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* --3 and --4 are fixed track lists, so the auto-fit base could never take
	   over: the footer widget columns stayed 3 or 4 wide at every width. */
	.bb-footer__cols--3,
	.bb-footer__cols--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* .bb-footer__brandbar-inner is display:grid, so the flex-direction:column
	   in section 5 was inert — a grid has to be collapsed with its tracks. */
	.bb-footer__brandbar-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}
}

@media (max-width: 640px) {
	.bb-hero-block--split .bb-rail__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.bb-footer__cols--2,
	.bb-footer__cols--3,
	.bb-footer__cols--4 {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}
}

/* 10.4 Mobile polish
 * Most readers arrive from the Facebook and YouTube in-app browsers, so the
 * phone layout is the primary layout, not a fallback.
 * ------------------------------------------------------------------ */
@media (max-width: 860px) {
	/* A wide table is the one thing left that can push the whole page
	   sideways. Scroll it inside its own box instead. */
	.bb-prose table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Long Latin URLs and Bangla compounds in a headline have nowhere to break
	   on a narrow column; break-word alone leaves them overflowing. */
	.bb-card__title,
	.bb-single__title,
	.bb-videos__title,
	.bb-widget-title { overflow-wrap: anywhere; }
}

@media (max-width: 640px) {
	/* 38px is under every touch-target guideline; 42px clears it without
	   changing the desktop header. */
	.bb-icon-btn {
		width: 42px;
		height: 42px;
	}

	.bb-topbar__link,
	.bb-pagination a,
	.bb-pagination span,
	.bb-loadmore { min-height: 42px; }

	.bb-pagination a,
	.bb-pagination span {
		display: inline-grid;
		place-items: center;
		min-width: 42px;
	}

	/* Keeps the highlight from flashing grey on the brand colour. */
	a,
	button { -webkit-tap-highlight-color: rgba(250, 191, 36, .22); }

	/* The rank digit must not shrink away when the row goes full width. */
	.bb-rank { flex: none; }

	/* Full-bleed lead image reads better than a 14px gutter on a phone. */
	.bb-hero-block { padding-top: 14px; }
}