/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root {
	--bb-grad-a: #f97316;
	--bb-grad-b: #ec4899;
	--bb-grad-c: #8b5cf6;
	--bb-grad:   linear-gradient(135deg, var(--bb-grad-a) 0%, var(--bb-grad-b) 55%, var(--bb-grad-c) 100%);
	--bb-grad-h: linear-gradient(90deg,  var(--bb-grad-a) 0%, var(--bb-grad-b) 55%, var(--bb-grad-c) 100%);
	--bb-accent: var(--bb-grad-b);

	--bb-bg:      #fafaf8;
	--bb-surface: #ffffff;
	--bb-glass:   rgba(255, 255, 255, 0.85);
	--bb-soft:    #f4f4f5;

	--bb-ink:   #18181b;
	--bb-muted: #71717a;
	--bb-line:  #e4e4e7;

	--bb-dark: #0f0f14;

	--bb-shadow-sm:   0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
	--bb-shadow-md:   0 4px 20px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.05);
	--bb-shadow-lg:   0 20px 48px rgba(0,0,0,0.13), 0 8px 20px rgba(0,0,0,0.07);
	--bb-shadow-card: 0 2px 12px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.03);
	--bb-shadow-hover:0 12px 36px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.07);

	--bb-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--bb-dur:  0.22s;

	--bb-r-sm: 6px;
	--bb-r-md: 12px;
	--bb-r-lg: 18px;
}

/* =========================================================
   BASE
   ========================================================= */
html {
	scroll-behavior: smooth;
}

body {
	background: var(--bb-bg);
	color: var(--bb-ink);
	font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.65;
	margin: 0;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--bb-dur) var(--bb-ease);
}

a:hover,
a:focus {
	color: var(--bb-grad-b);
}

:focus-visible {
	box-shadow: 0 0 0 3px var(--bb-grad-b);
	outline: 2px solid transparent;
	outline-offset: 2px;
}

img {
	display: block;
	height: auto;
	max-width: 100%;
}

button,
input,
textarea,
select {
	font: inherit;
}

/* =========================================================
   SCREEN READER
   ========================================================= */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

.screen-reader-text:focus {
	background: var(--bb-surface);
	border-radius: var(--bb-r-sm);
	box-shadow: var(--bb-shadow-lg);
	clip: auto;
	clip-path: none;
	color: var(--bb-ink);
	display: block;
	font-weight: 700;
	height: auto;
	left: 16px;
	padding: 14px 20px;
	top: 16px;
	width: auto;
	z-index: 100000;
}

.skip-link {
	position: absolute;
}

/* =========================================================
   LAYOUT
   ========================================================= */
.bb-shell,
.bb-container {
	margin: 0 auto;
	max-width: 1240px;
	padding-left: 24px;
	padding-right: 24px;
	width: 100%;
}

.bb-narrow {
	max-width: 860px;
}

/* =========================================================
   TOPBAR
   ========================================================= */
.bb-topbar {
	background: var(--bb-ink);
	color: rgba(255, 255, 255, 0.6);
	font-size: 12px;
}

.bb-topbar-inner {
	align-items: center;
	display: flex;
	justify-content: space-between;
	min-height: 38px;
}

.bb-topbar p {
	margin: 0;
}

.bb-topbar nav {
	display: flex;
	gap: 20px;
}

.bb-topbar a {
	color: rgba(255, 255, 255, 0.6);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	transition: color var(--bb-dur) var(--bb-ease);
}

.bb-topbar a:hover {
	color: #ffffff;
}

.bb-topbar-menu {
	display: flex;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* =========================================================
   BRAND ROW
   ========================================================= */
.bb-brand-row {
	align-items: center;
	background: var(--bb-surface);
	display: flex;
	justify-content: center;
	min-height: 118px;
	padding: 20px 24px;
	text-align: center;
}

.bb-site-title {
	display: -webkit-box;
	font-size: 56px;
	font-weight: 700;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-height: 1;
	margin: 0;
	overflow: hidden;
}

.bb-site-title a {
	background: var(--bb-grad);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	transition: opacity var(--bb-dur) var(--bb-ease);
}

.bb-site-title a:hover {
	color: inherit;
	opacity: 0.82;
}

.bb-site-description {
	color: var(--bb-muted);
	font-size: 11px;
	letter-spacing: 3px;
	margin: 10px 0 0;
	text-transform: uppercase;
}

.custom-logo {
	max-height: 80px;
	width: auto;
}

/* =========================================================
   NAV — GLASSMORPHISM
   ========================================================= */
.bb-nav-row {
	backdrop-filter: blur(24px) saturate(1.8);
	-webkit-backdrop-filter: blur(24px) saturate(1.8);
	background: var(--bb-glass);
	border-bottom: 1px solid rgba(255, 255, 255, 0.55);
	box-shadow: var(--bb-shadow-sm);
	position: sticky;
	top: 0;
	z-index: 100;
}

.bb-nav-row::after {
	background: var(--bb-grad-h);
	bottom: 0;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	right: 0;
}

.bb-nav-inner {
	align-items: center;
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr auto;
	min-height: 54px;
}

.bb-primary-nav {
	min-width: 0;
}

.bb-menu {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bb-menu a {
	color: var(--bb-ink);
	display: block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.6px;
	padding: 18px 14px;
	position: relative;
	text-transform: uppercase;
	transition: color var(--bb-dur) var(--bb-ease);
}

.bb-menu a::after {
	background: var(--bb-grad-h);
	bottom: 8px;
	content: "";
	height: 2px;
	left: 14px;
	position: absolute;
	right: 14px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--bb-dur) var(--bb-ease);
}

.bb-menu a:hover,
.bb-menu .current-menu-item > a,
.bb-menu .current_page_item > a,
.home .bb-menu > li:first-child > a {
	color: var(--bb-grad-b);
}

.bb-menu a:hover::after,
.bb-menu .current-menu-item > a::after,
.bb-menu .current_page_item > a::after {
	transform: scaleX(1);
}

.bb-header-search {
	width: 220px;
}

.search-form {
	display: flex;
}

.search-field {
	background: var(--bb-soft);
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-r-sm) 0 0 var(--bb-r-sm);
	border-right: 0;
	font-size: 13px;
	min-width: 0;
	padding: 9px 12px;
	transition: border-color var(--bb-dur) var(--bb-ease), background var(--bb-dur) var(--bb-ease);
	width: 100%;
}

.search-field:focus {
	background: var(--bb-surface);
	border-color: var(--bb-grad-b);
	outline: none;
}

.search-submit {
	background: var(--bb-grad);
	border: 0;
	border-radius: 0 var(--bb-r-sm) var(--bb-r-sm) 0;
	color: #ffffff;
	cursor: pointer;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.5px;
	padding: 9px 14px;
	text-transform: uppercase;
	transition: opacity var(--bb-dur) var(--bb-ease);
	white-space: nowrap;
}

.search-submit:hover,
.search-submit:focus-visible {
	opacity: 0.88;
}

.bb-menu-toggle {
	background: transparent;
	border: 0;
	cursor: pointer;
	display: none;
	padding: 10px 0;
}

.bb-menu-icon {
	display: grid;
	gap: 5px;
}

.bb-menu-icon span {
	background: var(--bb-ink);
	border-radius: 2px;
	display: block;
	height: 2px;
	transition: transform var(--bb-dur) var(--bb-ease), opacity var(--bb-dur) var(--bb-ease);
	width: 24px;
}

/* =========================================================
   HOMEPAGE
   ========================================================= */
.bb-home-main {
	padding-bottom: 60px;
}

.bb-feature-area {
	margin-bottom: 28px;
	margin-top: 28px;
}

.bb-feature-grid {
	display: grid;
	gap: 6px;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}

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

/* ── Hero layout variants ── */
.bb-feature-grid--grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bb-feature-grid--grid-1-2 .bb-feature-side {
	grid-template-columns: 1fr;
}

.bb-feature-grid--full {
	grid-template-columns: 1fr;
}
.bb-feature-grid--full .bb-feature-main {
	min-height: 580px;
}

/* ── Title-below mode: image above, text block below ── */
.bb-feature-grid--title-below .bb-feature-card {
	display: flex;
	flex-direction: column;
}
.bb-feature-grid--title-below .bb-feature-card > .bb-item-media {
	aspect-ratio: 16 / 9;
	flex-shrink: 0;
	inset: auto;
	position: relative;
}
.bb-feature-grid--title-below .bb-feature-card > .bb-item-media::after {
	display: none;
}
.bb-feature-card.bb-feature-title-below > .bb-item-media::after {
	display: none;
}
.bb-feature-grid--title-below .bb-feature-content {
	background: var(--bb-surface, #1a1a1a);
	bottom: auto;
	color: var(--bb-ink, #18181b);
	flex: 1;
	left: auto;
	position: relative;
	right: auto;
}
.bb-feature-card.bb-feature-title-below {
	display: flex;
	flex-direction: column;
}
.bb-feature-card.bb-feature-title-below > .bb-item-media {
	aspect-ratio: 16 / 9;
	flex-shrink: 0;
	inset: auto;
	position: relative;
}
.bb-feature-card.bb-feature-title-below .bb-feature-content {
	background: var(--bb-surface);
	bottom: auto;
	color: var(--bb-ink);
	flex: 1;
	left: auto;
	position: relative;
	right: auto;
}
.bb-feature-grid--title-below .bb-feature-content .bb-item-meta {
	color: var(--bb-muted);
}
.bb-feature-card.bb-feature-title-below .bb-feature-content .bb-item-meta {
	color: var(--bb-muted);
}

.bb-feature-card {
	background: var(--bb-dark);
	border-radius: var(--bb-r-md);
	min-height: 240px;
	overflow: hidden;
	position: relative;
}

.bb-feature-main {
	min-height: 488px;
}

.bb-item-media {
	--bb-card-hue: 280deg;
	background: linear-gradient(
		135deg,
		hsl(var(--bb-card-hue) 50% 35%),
		hsl(calc(var(--bb-card-hue) + 40deg) 65% 44%)
	);
	display: block;
	overflow: hidden;
	position: relative;
}

.bb-feature-card > .bb-item-media {
	background: var(--bb-dark);
	inset: 0;
	position: absolute;
}

.bb-item-media picture {
	display: contents;
}

.bb-item-media img {
	height: 100%;
	object-fit: cover;
	transition: transform 0.55s var(--bb-ease);
	width: 100%;
}

.bb-feature-card:hover .bb-item-media img {
	transform: scale(1.04);
}

.bb-feature-card > .bb-item-media img {
	object-fit: contain;
}

.bb-feature-card:hover > .bb-item-media img {
	transform: none;
}

.bb-feature-card > .bb-item-media::after {
	background: linear-gradient(180deg, transparent 25%, rgba(0, 0, 0, var(--bb-hero-overlay, 0.55)));
	content: "";
	inset: 0;
	position: absolute;
}

.bb-feature-content {
	bottom: 0;
	color: #ffffff;
	left: 0;
	padding: 26px;
	position: absolute;
	right: 0;
	z-index: 1;
}

.bb-feature-content a {
	color: inherit;
}

.bb-feature-content a:hover {
	color: inherit;
	opacity: 0.88;
}

.bb-item-category {
	background: var(--bb-grad);
	border-radius: 4px;
	color: #ffffff;
	display: inline-flex;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.8px;
	line-height: 1;
	padding: 6px 10px;
	text-transform: uppercase;
	transition: opacity var(--bb-dur) var(--bb-ease);
}

.bb-item-category:hover,
.bb-item-category:focus {
	color: #ffffff;
	opacity: 0.85;
}

.bb-feature-content h2,
.bb-feature-content h3 {
	font-size: 34px;
	line-height: 1.13;
	margin: 10px 0 8px;
}

.bb-feature-small .bb-feature-content h2 {
	font-size: 17px;
	line-height: 1.2;
}

.bb-item-meta {
	align-items: center;
	color: var(--bb-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 12px;
	gap: 6px;
}

.bb-feature-content .bb-item-meta,
.bb-dark-module .bb-item-meta {
	color: rgba(255, 255, 255, 0.7);
}

.bb-item-meta span:not(:last-child)::after {
	color: var(--bb-grad-b);
	content: "·";
	margin-left: 6px;
}

/* =========================================================
   HIGHLIGHTS BAR
   ========================================================= */
.bb-highlights {
	align-items: start;
	border-bottom: 1px solid var(--bb-line);
	border-top: 1px solid var(--bb-line);
	display: grid;
	gap: 20px;
	grid-template-columns: 160px minmax(0, 1fr);
	margin-bottom: 32px;
	padding: 18px 0;
}

.bb-highlights h2 {
	background: var(--bb-grad);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-size: 16px;
	line-height: 1.2;
	margin: 0;
	text-transform: uppercase;
}

.bb-highlight-list {
	column-count: 2;
	column-gap: 32px;
}

.bb-highlight-list a {
	break-inside: avoid;
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	margin-bottom: 10px;
	transition: color var(--bb-dur) var(--bb-ease);
}

.bb-highlight-list a:hover {
	color: var(--bb-grad-b);
}

/* =========================================================
   CATEGORY TILES
   ========================================================= */
.bb-category-tiles {
	display: grid;
	gap: 6px;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	margin-bottom: 40px;
}

.bb-category-tile {
	align-items: center;
	background: linear-gradient(
		135deg,
		hsl(var(--bb-tile-hue, 280deg) 52% 38%),
		hsl(calc(var(--bb-tile-hue, 280deg) + 38deg) 64% 48%)
	);
	border-radius: var(--bb-r-md);
	color: #ffffff;
	display: flex;
	font-size: 12px;
	font-weight: 900;
	justify-content: center;
	letter-spacing: 0.5px;
	min-height: 88px;
	overflow: hidden;
	position: relative;
	text-align: center;
	text-transform: uppercase;
	transition: transform var(--bb-dur) var(--bb-ease), box-shadow var(--bb-dur) var(--bb-ease);
}

.bb-category-tile::before {
	background: rgba(255, 255, 255, 0.1);
	content: "";
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: opacity var(--bb-dur) var(--bb-ease);
}

.bb-category-tile:hover,
.bb-category-tile:focus {
	box-shadow: var(--bb-shadow-md);
	color: #ffffff;
	transform: translateY(-3px);
}

.bb-category-tile:hover::before,
.bb-category-tile:focus::before {
	opacity: 1;
}

.bb-category-tile span {
	position: relative;
	z-index: 1;
}

/* =========================================================
   HOME LAYOUT
   ========================================================= */
.bb-home-layout {
	align-items: start;
	display: grid;
	gap: 36px;
	grid-template-columns: minmax(0, 1fr) var(--bb-sidebar-width, 340px);
}

.bb-home-layout.no-sidebar,
.bb-layout.no-sidebar {
	grid-template-columns: 1fr;
}

/* =========================================================
   MODULE TITLES — gradient text
   ========================================================= */
.bb-module {
	margin-bottom: 40px;
}

.bb-module-title {
	align-items: center;
	display: flex;
	gap: 18px;
	margin-bottom: 22px;
}

.bb-module-title::before,
.bb-module-title::after {
	background: var(--bb-line);
	content: "";
	flex: 1;
	height: 1px;
}

.bb-module-title h2,
.bb-sidebar-widget h2,
.widget-title {
	font-size: 20px;
	line-height: 1.2;
	margin: 0;
	text-align: center;
	white-space: nowrap;
}

.bb-module-title h2 {
	background: var(--bb-grad);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* =========================================================
   LEAD LIST GRID
   ========================================================= */
.bb-lead-list-grid {
	display: grid;
	gap: 28px;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 0.88fr);
}

/* =========================================================
   MAG CARD
   ========================================================= */
.bb-mag-card {
	background: var(--bb-surface);
	border-radius: var(--bb-r-md);
	box-shadow: var(--bb-shadow-card);
	overflow: hidden;
	transition: box-shadow var(--bb-dur) var(--bb-ease), transform var(--bb-dur) var(--bb-ease);
}

.bb-mag-card:hover {
	box-shadow: var(--bb-shadow-hover);
	transform: translateY(-4px);
}

.bb-mag-card > .bb-item-media {
	aspect-ratio: 16 / 10;
}

.bb-mag-card > .bb-item-media img {
	transition: transform 0.5s var(--bb-ease);
}

.bb-mag-card:hover > .bb-item-media img {
	transform: scale(1.04);
}

.bb-mag-body {
	padding: 18px;
}

.bb-mag-body h3,
.bb-news-body h3 {
	font-size: 18px;
	line-height: 1.28;
	margin: 8px 0 6px;
}

.bb-mag-body h3 a,
.bb-news-body h3 a {
	transition: color var(--bb-dur) var(--bb-ease);
}

.bb-mag-body h3 a:hover,
.bb-news-body h3 a:hover {
	color: var(--bb-grad-b);
}

.bb-mag-body p,
.bb-news-body p {
	color: var(--bb-muted);
	font-size: 14px;
	line-height: 1.55;
	margin: 6px 0 0;
}

/* =========================================================
   CARD GRID
   ========================================================= */
.bb-card-grid {
	display: grid;
	gap: 28px;
}

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

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

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

.bb-card-grid-4 .bb-mag-body {
	padding: 15px;
}

.bb-card-grid-4 .bb-mag-body h3 {
	font-size: 16px;
}

.bb-grid-list-tail {
	border-top: 1px solid var(--bb-line);
	margin-top: 28px;
	padding-top: 24px;
}

/* =========================================================
   NEWS ITEM
   ========================================================= */
.bb-stacked-list {
	display: grid;
	gap: 20px;
}

.bb-news-item {
	display: grid;
	gap: 14px;
	grid-template-columns: 108px minmax(0, 1fr);
}

.bb-news-thumb {
	aspect-ratio: 4 / 3;
	border-radius: var(--bb-r-sm);
	overflow: hidden;
}

.bb-news-thumb img {
	transition: transform 0.45s var(--bb-ease);
}

.bb-news-item:hover .bb-news-thumb img {
	transform: scale(1.06);
}

.bb-news-large {
	border-bottom: 1px solid var(--bb-line);
	grid-template-columns: 200px minmax(0, 1fr);
	padding-bottom: 24px;
}

.bb-news-large + .bb-news-large {
	margin-top: 24px;
}

.bb-news-large .bb-news-body h3 {
	font-size: 22px;
}

.bb-feature-content h2,
.bb-feature-content h3,
.bb-mag-body h3,
.bb-news-body h3,
.bb-story-content h3,
.bb-archive-header h1,
.bb-section-heading h1,
.bb-section-heading h2,
.bb-popular-list a,
.bb-highlight-list a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.bb-item-media.bb-has-title-overlay {
	position: relative;
}

.bb-item-media.bb-has-title-overlay::after {
	background: linear-gradient(180deg, transparent 22%, rgba(0, 0, 0, 0.62));
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

.bb-media-title {
	bottom: 0;
	color: #ffffff;
	display: -webkit-box;
	font-size: 15px;
	font-weight: 800;
	left: 0;
	line-height: 1.25;
	overflow: hidden;
	padding: 14px;
	position: absolute;
	right: 0;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	z-index: 2;
}

.bb-mag-card .bb-media-title {
	font-size: 17px;
	padding: 18px;
}

.bb-news-large .bb-media-title,
.bb-video-main .bb-media-title {
	font-size: 20px;
	padding: 20px;
}

.bb-title-on-image .bb-mag-body,
.bb-title-on-image .bb-news-body {
	padding-top: 12px;
}

/* =========================================================
   AD WIDGET SLOTS
   ========================================================= */
.bb-ad-slot {
	border: 1px dashed var(--bb-line);
	border-radius: var(--bb-r-md);
	margin: 0 0 36px;
	min-height: 90px;
	overflow: hidden;
	text-align: center;
}

.bb-ad-slot-sidebar {
	border: 1px dashed var(--bb-line);
	border-radius: var(--bb-r-md);
	min-height: 260px;
	overflow: hidden;
	text-align: center;
}

/* =========================================================
   DARK / GRADIENT MODULE
   ========================================================= */
.bb-dark-module {
	background: linear-gradient(135deg, #0f0f14 0%, #1e1030 100%);
	border-radius: var(--bb-r-lg);
	color: #ffffff;
	padding: 30px;
}

.bb-dark-module .bb-module-title::before,
.bb-dark-module .bb-module-title::after {
	background: rgba(255, 255, 255, 0.16);
}

.bb-dark-module .bb-module-title h2 {
	-webkit-text-fill-color: transparent;
}

.bb-video-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
}

.bb-video-main {
	border-radius: var(--bb-r-sm);
	min-height: 360px;
}

.bb-video-side .bb-news-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-bottom: 16px;
}

.bb-video-side .bb-news-body h3 {
	color: #ffffff;
	font-size: 16px;
}

.bb-latest-list {
	display: grid;
	gap: 0;
}

/* =========================================================
   SIDEBAR
   ========================================================= */
.bb-home-sidebar {
	display: grid;
	gap: 28px;
}

.bb-sidebar-sticky {
	position: sticky;
	top: 86px;
}

.bb-sidebar-widget,
.widget,
.bb-page-panel,
.bb-archive-header,
.bb-comments {
	background: var(--bb-surface);
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-r-md);
	box-shadow: var(--bb-shadow-sm);
	padding: 24px;
}

.bb-sidebar-widget h2,
.widget-title {
	font-size: 16px;
	line-height: 1.2;
	margin: 0 0 18px;
	padding-bottom: 14px;
	position: relative;
}

.bb-sidebar-widget h2::after,
.widget-title::after {
	background: var(--bb-grad-h);
	border-radius: 2px;
	bottom: 0;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	width: 36px;
}

/* Social */
.bb-social-links {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bb-social-links a {
	border-radius: var(--bb-r-sm);
	color: #ffffff !important;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.4px;
	padding: 10px;
	text-align: center;
	text-transform: uppercase;
	transition: opacity var(--bb-dur) var(--bb-ease), transform var(--bb-dur) var(--bb-ease);
}

.bb-social-links a:hover {
	opacity: 0.85;
	transform: translateY(-1px);
}

.bb-social-facebook  { background: #1877f2; }
.bb-social-twitter   { background: #000000; }
.bb-social-instagram { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.bb-social-pinterest { background: #e60023; }
.bb-social-youtube   { background: #ff0000; }
.bb-social-tiktok    { background: #010101; }

/* Popular list */
.bb-popular-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bb-popular-list li {
	display: grid;
	gap: 10px;
	grid-template-columns: 30px minmax(0, 1fr);
	padding: 11px 0;
}

.bb-popular-list li + li {
	border-top: 1px solid var(--bb-line);
}

.bb-popular-list span {
	align-items: center;
	background: var(--bb-grad);
	border-radius: var(--bb-r-sm);
	color: #ffffff;
	display: flex;
	font-size: 12px;
	font-weight: 900;
	height: 26px;
	justify-content: center;
	width: 26px;
}

.bb-popular-list a {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	transition: color var(--bb-dur) var(--bb-ease);
}

.bb-popular-list a:hover {
	color: var(--bb-grad-b);
}

.bb-popular-list small {
	color: var(--bb-muted);
	display: block;
	font-size: 11px;
	grid-column: 2;
}

/* Sidebar categories */
.bb-sidebar-cats {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bb-sidebar-cats li + li {
	border-top: 1px solid var(--bb-line);
}

.bb-sidebar-cats a {
	display: flex;
	font-size: 13px;
	font-weight: 800;
	justify-content: space-between;
	padding: 9px 0;
	text-transform: uppercase;
	transition: color var(--bb-dur) var(--bb-ease);
}

.bb-sidebar-cats a:hover {
	color: var(--bb-grad-b);
}

/* Newsletter */
.bb-newsletter {
	background: var(--bb-grad) !important;
	border: 0 !important;
	border-radius: var(--bb-r-lg) !important;
	color: #ffffff;
	text-align: center;
}

.bb-newsletter h2 {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

.bb-newsletter h2::after {
	background: rgba(255, 255, 255, 0.45) !important;
}

.bb-newsletter p {
	color: rgba(255, 255, 255, 0.88);
	font-size: 14px;
	margin: 0 0 16px;
}

.bb-newsletter form {
	display: grid;
	gap: 10px;
}

.bb-newsletter input[type="email"],
.bb-newsletter input[type="text"] {
	background: rgba(255, 255, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: var(--bb-r-sm);
	color: #ffffff;
	padding: 12px 14px;
	width: 100%;
}

.bb-newsletter input::placeholder {
	color: rgba(255, 255, 255, 0.6);
}

.bb-newsletter input:focus {
	background: rgba(255, 255, 255, 0.3);
	border-color: rgba(255, 255, 255, 0.75);
	outline: none;
}

.bb-newsletter button {
	background: rgba(255, 255, 255, 0.2);
	border: 2px solid rgba(255, 255, 255, 0.65);
	border-radius: var(--bb-r-sm);
	color: #ffffff;
	cursor: pointer;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.8px;
	padding: 12px;
	text-transform: uppercase;
	transition: background var(--bb-dur) var(--bb-ease);
}

.bb-newsletter button:hover {
	background: rgba(255, 255, 255, 0.34);
}

.bb-newsletter-thanks {
	color: rgba(255, 255, 255, 0.9);
	font-size: 14px;
}

/* =========================================================
   INNER PAGE LAYOUT
   ========================================================= */
.bb-layout {
	align-items: start;
	display: grid;
	gap: 36px;
	grid-template-columns: minmax(0, 1fr) var(--bb-sidebar-width, 340px);
	padding-bottom: 60px;
	padding-top: 48px;
}

.bb-layout.no-sidebar {
	grid-template-columns: 1fr;
}

.bb-content-stack {
	min-width: 0;
}

.bb-sidebar {
	display: grid;
	gap: 28px;
}

/* =========================================================
   STORY CARD (archive / search)
   ========================================================= */
.bb-story-card {
	background: var(--bb-surface);
	border-radius: var(--bb-r-md);
	box-shadow: var(--bb-shadow-card);
	overflow: hidden;
	transition: box-shadow var(--bb-dur) var(--bb-ease), transform var(--bb-dur) var(--bb-ease);
}

.bb-story-card:hover {
	box-shadow: var(--bb-shadow-hover);
	transform: translateY(-4px);
}

.bb-story-image {
	aspect-ratio: 16 / 10;
	background: var(--bb-soft);
	display: block;
	overflow: hidden;
}

.bb-story-image img {
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--bb-ease);
	width: 100%;
}

.bb-story-card:hover .bb-story-image img {
	transform: scale(1.04);
}

.bb-compact-thumb {
	aspect-ratio: 4 / 3;
	background: var(--bb-soft);
	border-radius: var(--bb-r-sm);
	display: block;
	overflow: hidden;
}

.bb-compact-thumb img {
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s var(--bb-ease);
	width: 100%;
}

.bb-compact-post:hover .bb-compact-thumb img {
	transform: scale(1.06);
}

.bb-story-content {
	padding: 20px;
}

.bb-category-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 6px;
}

.bb-category-pill,
.bb-kicker {
	background: var(--bb-grad);
	border-radius: 4px;
	color: #ffffff;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.5px;
	padding: 5px 8px;
	text-transform: uppercase;
	transition: opacity var(--bb-dur) var(--bb-ease);
}

.bb-category-pill:hover {
	color: #ffffff;
	opacity: 0.85;
}

.bb-post-meta {
	color: var(--bb-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 12px;
	gap: 6px;
	margin-top: 4px;
}

/* =========================================================
   SINGLE POST — bb-sp-center (the ONE centering class)
   ========================================================= */
.bb-sp-center {
	margin-left: auto;
	margin-right: auto;
	max-width: 820px;
	padding-left: 24px;
	padding-right: 24px;
	width: 100%;
}

/* =========================================================
   SINGLE POST — HERO IMAGE
   ========================================================= */
.bb-sp-hero-wrap {
	line-height: 0;
	margin-bottom: 0;
}

/* contained: image boxed to content column, rounded corners */
.bb-sp-hero--contained {
	border-radius: 8px;
	margin-top: 24px;
	overflow: hidden;
}

.bb-sp-hero-img {
	display: block;
	height: auto;
	width: 100%;
}

.bb-sp-img--square  { aspect-ratio: 1/1;  object-fit: cover; }
.bb-sp-img--portrait{ aspect-ratio: 4/5;  object-fit: cover; }

/* =========================================================
   SINGLE POST — PARALLAX
   ========================================================= */
.bb-sp-parallax {
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	display: flex;
	align-items: flex-end;
	min-height: 560px;
	position: relative;
}

.bb-sp-parallax::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
}

.bb-sp-parallax-inner {
	position: relative;
	z-index: 1;
	padding-top: 60px;
	padding-bottom: 48px;
	color: #fff;
}

/* =========================================================
   SINGLE POST — OVERLAY HERO
   ========================================================= */
.bb-sp-hero-overlay-wrap {
	position: relative;
	line-height: 0;
}

.bb-sp-hero-overlay-wrap .bb-sp-hero-img {
	height: 540px;
	max-height: 80vh;
	object-fit: cover;
}

.bb-sp-hero-overlay-text {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding-top: 80px;
	padding-bottom: 40px;
	background: linear-gradient(to top, rgba(0,0,0,0.84) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
	color: #fff;
	line-height: 1.4;
}

/* =========================================================
   SINGLE POST — HEADER (above or below image)
   ========================================================= */
.bb-sp-header-above,
.bb-sp-header-below {
	padding-top: 40px;
	padding-bottom: 32px;
}

/* =========================================================
   SINGLE POST — CATEGORY BADGES (reuse existing bb-post-categories) */

/* =========================================================
   SINGLE POST — TITLE
   ========================================================= */
.bb-sp-title {
	font-size: 42px;
	font-weight: 900;
	letter-spacing: -0.5px;
	line-height: 1.12;
	margin: 12px 0 18px;
}

.bb-sp-title--sm  { font-size: 28px; }
.bb-sp-title--md  { font-size: 36px; }
.bb-sp-title--lg  { font-size: 52px; }
.bb-sp-title--xl  { font-size: 64px; line-height: 1.05; }
.bb-sp-title--xxl { font-size: 80px; line-height: 1.0; letter-spacing: -1px; }

/* =========================================================
   SINGLE POST — SUBTITLE
   ========================================================= */
.bb-sp-subtitle {
	color: var(--bb-muted);
	font-size: 19px;
	font-weight: 400;
	line-height: 1.6;
	margin: -4px 0 20px;
}

.bb-sp-subtitle--light { color: rgba(255,255,255,0.82); }

/* =========================================================
   SINGLE POST — META ROW
   ========================================================= */
.bb-sp-meta {
	align-items: center;
	color: var(--bb-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 14px;
	gap: 12px;
	margin-top: 4px;
}

.bb-sp-readtime {
	background: var(--bb-soft);
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
}

/* =========================================================
   SINGLE POST — BODY CONTENT
   ========================================================= */
.bb-entry-content {
	font-size: 18px;
	line-height: 1.82;
	padding: 36px 0 8px;
}

.bb-entry-content h1,.bb-entry-content h2,
.bb-entry-content h3,.bb-entry-content h4,
.bb-entry-content h5,.bb-entry-content h6 {
	line-height: 1.2;
	margin: 1.8em 0 0.5em;
}

.bb-entry-content h2 { font-size: 1.55em; }
.bb-entry-content h3 { font-size: 1.28em; }
.bb-entry-content h4 { font-size: 1.1em; }
.bb-entry-content p  { margin: 0 0 1.4em; }

.bb-entry-content a {
	background: linear-gradient(180deg, transparent 62%, rgba(236,72,153,0.26) 62%);
	color: var(--bb-grad-b);
	font-weight: 500;
}

.bb-entry-content a:hover {
	background: linear-gradient(180deg, transparent 0%, rgba(236,72,153,0.18) 0%);
}

.bb-entry-content ul,
.bb-entry-content ol {
	margin: 0 0 1.4em;
	padding-left: 1.6em;
}

.bb-entry-content li { margin-bottom: 0.5em; }

.bb-entry-content blockquote {
	background: var(--bb-soft);
	border-left: 4px solid var(--bb-grad-b);
	border-radius: 0 var(--bb-r-sm) var(--bb-r-sm) 0;
	font-size: 1.1em;
	font-style: italic;
	margin: 1.8em 0;
	padding: 20px 24px;
}

.bb-entry-content blockquote p:last-child { margin: 0; }

.bb-entry-content code {
	background: var(--bb-soft);
	border-radius: 4px;
	font-family: ui-monospace, "SF Mono", monospace;
	font-size: 0.875em;
	padding: 2px 6px;
}

.bb-entry-content pre {
	background: var(--bb-ink);
	border-radius: var(--bb-r-sm);
	color: rgba(255,255,255,0.9);
	font-size: 0.875em;
	line-height: 1.7;
	margin: 1.6em 0;
	overflow-x: auto;
	padding: 20px 24px;
}

.bb-entry-content pre code { background: none; color: inherit; padding: 0; }

.bb-entry-content img {
	border-radius: var(--bb-r-sm);
	margin: 0.6em auto;
}

.bb-entry-content figure     { margin: 1.6em 0; }
.bb-entry-content figcaption { color: var(--bb-muted); font-size: 0.82em; margin-top: 8px; text-align: center; }

.bb-entry-content hr {
	background: var(--bb-grad-h);
	border: 0;
	height: 2px;
	margin: 2.4em 0;
	opacity: 0.45;
}

.bb-entry-content table { border-collapse: collapse; font-size: 0.9em; margin: 1.6em 0; width: 100%; }
.bb-entry-content th    { background: var(--bb-grad); color: #fff; font-weight: 700; padding: 10px 14px; text-align: left; }
.bb-entry-content td    { border-bottom: 1px solid var(--bb-line); padding: 10px 14px; }
.bb-entry-content tr:last-child td { border-bottom: 0; }

/* =========================================================
   SINGLE POST — FOOTER (tags)
   ========================================================= */
.bb-sp-footer {
	border-top: 1px solid var(--bb-line);
	margin-top: 8px;
	padding: 20px 0 28px;
}

.bb-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bb-tags a {
	background: var(--bb-soft);
	border: 1px solid var(--bb-line);
	border-radius: 40px;
	color: var(--bb-muted);
	font-size: 12px;
	font-weight: 600;
	padding: 5px 12px;
	transition: background var(--bb-dur) var(--bb-ease), color var(--bb-dur) var(--bb-ease);
}

.bb-tags a:hover {
	background: var(--bb-grad-b);
	border-color: var(--bb-grad-b);
	color: #fff;
}

/* =========================================================
   SINGLE POST — AUTHOR BIO
   ========================================================= */
.bb-sp-author {
	align-items: flex-start;
	background: var(--bb-soft);
	border-radius: var(--bb-r-md);
	display: flex;
	gap: 18px;
	margin: 0 0 32px;
	padding: 24px;
}

.bb-sp-author-avatar {
	border-radius: 50%;
	flex-shrink: 0;
	height: 64px;
	width: 64px;
}

.bb-sp-author-info {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.bb-sp-author-label {
	color: var(--bb-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

.bb-sp-author-name {
	font-size: 16px;
	font-weight: 800;
}

.bb-sp-author-desc {
	color: var(--bb-muted);
	font-size: 14px;
	line-height: 1.6;
	margin: 4px 0 0;
}

/* =========================================================
   SINGLE POST — POST NAVIGATION
   ========================================================= */
.bb-post-navigation {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 32px;
}

.bb-prev, .bb-next { flex: 1; min-width: 0; }
.bb-next { text-align: right; }

.bb-post-navigation a {
	background: var(--bb-surface);
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-r-sm);
	box-shadow: var(--bb-shadow-sm);
	display: block;
	font-size: 13px;
	font-weight: 800;
	padding: 12px 16px;
	transition: border-color var(--bb-dur) var(--bb-ease), box-shadow var(--bb-dur) var(--bb-ease), color var(--bb-dur) var(--bb-ease);
}

.bb-post-navigation a:hover {
	border-color: var(--bb-grad-b);
	box-shadow: var(--bb-shadow-md);
	color: var(--bb-grad-b);
}

/* =========================================================
   SINGLE POST — COMMENTS
   ========================================================= */
.bb-comments, .comments-area {
	margin-top: 28px;
}

.comment-form input:not([type="checkbox"]),
.comment-form textarea {
	background: var(--bb-soft);
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-r-sm);
	padding: 10px 14px;
	transition: border-color var(--bb-dur) var(--bb-ease);
	width: 100%;
}

.comment-form input:focus,
.comment-form textarea:focus {
	border-color: var(--bb-grad-b);
	outline: none;
}

.form-submit .submit {
	background: var(--bb-grad);
	border: 0;
	border-radius: var(--bb-r-sm);
	color: #fff;
	cursor: pointer;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: 0.5px;
	padding: 12px 24px;
	text-transform: uppercase;
	transition: opacity var(--bb-dur) var(--bb-ease);
}

.form-submit .submit:hover { opacity: 0.88; }

/* =========================================================
   SINGLE POST — RELATED POSTS
   ========================================================= */
.bb-sp-related {
	background: var(--bb-soft);
	margin-top: 60px;
	padding: 48px 0;
}

.bb-sp-related-title {
	font-size: 16px;
	font-weight: 900;
	letter-spacing: 0.6px;
	margin-bottom: 24px;
	text-transform: uppercase;
}

.bb-sp-related-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bb-sp-related-card {
	background: var(--bb-surface);
	border-radius: var(--bb-r-md);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: box-shadow var(--bb-dur) var(--bb-ease), transform var(--bb-dur) var(--bb-ease);
}

.bb-sp-related-card:hover {
	box-shadow: var(--bb-shadow-md);
	transform: translateY(-2px);
}

.bb-sp-related-thumb {
	aspect-ratio: 16/9;
	margin: 0;
	overflow: hidden;
}

.bb-sp-related-thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
	width: 100%;
}

.bb-sp-related-card:hover .bb-sp-related-thumb img {
	transform: scale(1.04);
}

.bb-sp-related-thumb picture { display: contents; }

.bb-sp-related-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px 18px;
}

.bb-sp-related-cat {
	color: var(--bb-grad-b);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

.bb-sp-related-body h3 {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
}

.bb-sp-related-body time {
	color: var(--bb-muted);
	font-size: 12px;
	margin-top: auto;
}

/* =========================================================
   SINGLE POST — SIDEBAR LAYOUT
   ========================================================= */
.bb-sp-layout-grid {
	display: grid;
	gap: 40px;
	grid-template-columns: minmax(0, 1fr) 300px;
	max-width: 1200px;
	padding-left: 24px;
	padding-right: 24px;
}

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

.bb-sp-layout-grid--left .bb-sp-content-col { order: 2; }
.bb-sp-layout-grid--left .bb-sidebar        { order: 1; }

/* =========================================================
   SINGLE POST — LAYOUT VARIANTS
   ========================================================= */

/* layout-6: bold headline */
.bb-sp--layout-6 .bb-sp-title { font-size: 72px; line-height: 1.0; }

/* layout-7: wide */
.bb-sp--layout-7 .bb-sp-center { max-width: 1060px; }

/* layout-5: narrow */
.bb-sp--layout-5 .bb-sp-center { max-width: 660px; }

/* layout-8/2: image-first — no extra overrides needed */

/* layout-11: dark header */
.bb-sp--layout-11 .bb-sp-header-above {
	background: var(--bb-ink);
	color: #fff;
}
.bb-sp--layout-11 .bb-sp-header-above .bb-sp-title { color: #fff; }
.bb-sp--layout-11 .bb-sp-header-above .bb-sp-subtitle,
.bb-sp--layout-11 .bb-sp-header-above .bb-sp-meta { color: rgba(255,255,255,0.7); }
.bb-sp--layout-11 .bb-sp-header-above .bb-sp-readtime { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.85); }

/* layout-13: float thumbnail */
.bb-sp--layout-13 .bb-sp-hero-wrap {
	float: right;
	margin: 0 0 20px 28px;
	width: 42%;
}

/* layout-14: tall hero */
.bb-sp--layout-14 .bb-sp-hero-img { height: 85vh; object-fit: cover; }

/* layout-15: split */
.bb-sp--layout-15 .bb-sp-hero-wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 460px;
	gap: 0;
}
.bb-sp--layout-15 .bb-sp-hero-img { height: 100%; object-fit: cover; }
.bb-sp--layout-15 .bb-sp-header-below {
	align-self: center;
	padding: 48px 40px;
}

/* layout-17: category banner header */
.bb-sp--layout-17 .bb-sp-header-above {
	background: var(--bb-grad);
	color: #fff;
}
.bb-sp--layout-17 .bb-sp-header-above .bb-sp-title { color: #fff; }
.bb-sp--layout-17 .bb-sp-header-above .bb-sp-subtitle,
.bb-sp--layout-17 .bb-sp-header-above .bb-sp-meta { color: rgba(255,255,255,0.75); }
.bb-sp--layout-17 .bb-sp-header-above .bb-sp-readtime { background: rgba(255,255,255,0.2); color: #fff; }

/* layout-16: card boxed */
.bb-sp--layout-16 .bb-sp-center {
	background: var(--bb-surface);
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-r-lg);
	box-shadow: var(--bb-shadow-lg);
	max-width: 840px;
	padding: 0;
	overflow: hidden;
}
.bb-sp--layout-16 .bb-entry-content,
.bb-sp--layout-16 .bb-sp-footer,
.bb-sp--layout-16 .bb-sp-author,
.bb-sp--layout-16 .bb-post-navigation { padding-left: 36px; padding-right: 36px; }

/* layout-18: minimal reader */
.bb-sp--layout-18 .bb-sp-center { max-width: 620px; }
.bb-sp--layout-18 .bb-sp-title  { font-size: 34px; }

/* layout-20: editorial serif */
.bb-sp--layout-20 .bb-sp-center  { max-width: 700px; }
.bb-sp--layout-20 .bb-sp-title   { font-family: Georgia,"Times New Roman",serif; font-size: 48px; }
.bb-sp--layout-20 .bb-entry-content { font-family: Georgia,"Times New Roman",serif; font-size: 19px; line-height: 1.9; }


/* =========================================================
   FOOTER
   ========================================================= */
.bb-site-footer {
	background: var(--bb-dark);
	border-top: 3px solid transparent;
	border-image: var(--bb-grad-h) 1;
	color: rgba(255, 255, 255, 0.55);
	font-family: inherit;
	font-size: 14px;
}

/* ── widget bar ── */
.bb-footer-widgets {
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	padding: 52px 0;
}

.bb-footer-cols {
	display: grid;
	gap: 36px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bb-footer-cols .widget-title,
.bb-footer-cols .widgettitle {
	background: var(--bb-grad);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	margin: 0 0 18px;
	text-transform: uppercase;
}

.bb-footer-cols .widget {
	color: rgba(255, 255, 255, 0.55);
}

.bb-footer-cols .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bb-footer-cols .widget ul li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	padding: 8px 0;
}

.bb-footer-cols .widget ul li:first-child {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.bb-footer-cols .widget ul li a {
	color: rgba(255, 255, 255, 0.55);
	font-size: 13px;
	text-decoration: none;
	transition: color var(--bb-dur) var(--bb-ease);
}

.bb-footer-cols .widget ul li a:hover {
	color: #fff;
}

/* ── main middle band ── */
.bb-footer-main {
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	padding: 52px 0;
}

.bb-footer-main-grid {
	display: grid;
	gap: 40px;
	grid-template-columns: 2fr 1fr 1fr;
}

.bb-footer-about h2,
.bb-footer-important-links h2,
.bb-footer-menu-panel h2 {
	background: var(--bb-grad);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	margin: 0 0 18px;
	text-transform: uppercase;
}

.bb-footer-about p {
	color: rgba(255, 255, 255, 0.55);
	font-size: 13px;
	line-height: 1.8;
	margin: 0;
	max-width: 360px;
}

.bb-footer-important-links ul,
.bb-footer-menu-panel ul,
.bb-footer-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bb-footer-important-links li,
.bb-footer-nav li,
.bb-footer-menu li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	padding: 8px 0;
}

.bb-footer-important-links li:first-child,
.bb-footer-nav li:first-child,
.bb-footer-menu li:first-child {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.bb-footer-important-links a,
.bb-footer-nav a,
.bb-footer-menu a {
	color: rgba(255, 255, 255, 0.55);
	font-size: 13px;
	text-decoration: none;
	transition: color var(--bb-dur) var(--bb-ease);
}

.bb-footer-important-links a:hover,
.bb-footer-nav a:hover,
.bb-footer-menu a:hover {
	color: #fff;
}

/* ── bottom bar ── */
.bb-footer-inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	padding: 22px 0;
}

.bb-footer-brand {
	flex: 1 0 auto;
	margin: 0;
}

.bb-footer-brand a {
	background: var(--bb-grad);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -.01em;
	text-decoration: none;
}

.bb-footer-brand img {
	height: 34px;
	width: auto;
}

.bb-footer-credit {
	color: rgba(255, 255, 255, 0.3);
	font-size: 12px;
	margin: 0;
}

.bb-affiliate-note {
	color: rgba(255, 255, 255, 0.22);
	font-size: 11px;
	margin: 0;
	width: 100%;
}

/* =========================================================
   PLACEHOLDERS
   ========================================================= */
.bb-placeholder .bb-story-image,
.bb-placeholder .bb-compact-thumb,
.bb-placeholder > .bb-item-media {
	background: linear-gradient(135deg, var(--bb-soft), var(--bb-line));
}

/* =========================================================
   RESPONSIVE — 1080px
   ========================================================= */
@media (max-width: 1080px) {
	.bb-feature-grid,
	.bb-home-layout,
	.bb-layout,
	.bb-video-grid {
		grid-template-columns: 1fr;
	}

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

	.bb-sidebar-sticky {
		position: static;
	}
}

/* =========================================================
   RESPONSIVE — 820px
   ========================================================= */
@media (max-width: 820px) {
	.bb-topbar-inner {
		align-items: flex-start;
		display: flex;
		flex-direction: column;
		gap: 6px;
		padding-bottom: 10px;
		padding-top: 10px;
	}

	.bb-site-title {
		font-size: 42px;
	}

	.bb-nav-inner {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.bb-menu-toggle {
		display: block;
	}

	.bb-primary-nav {
		display: none;
		order: 3;
		width: 100%;
	}

	.bb-primary-nav.is-open {
		display: block;
	}

	.bb-menu {
		align-items: stretch;
		flex-direction: column;
		padding: 6px 0;
	}

	.bb-menu a {
		border-top: 1px solid var(--bb-line);
		padding: 13px 0;
	}

	.bb-menu a::after {
		display: none;
	}

	.bb-header-search {
		width: calc(100% - 52px);
	}

	.bb-feature-side,
	.bb-card-grid-3,
	.bb-card-grid-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

	.bb-feature-main,
	.bb-feature-card,
	.bb-video-main {
		min-height: 320px;
	}

	.bb-highlights,
	.bb-lead-list-grid,
	.bb-contact-grid,
	.bb-footer-main-grid,
	.bb-footer-cols {
		grid-template-columns: 1fr;
	}

	.bb-highlight-list {
		column-count: 1;
	}

	.bb-home-sidebar,
	.bb-sidebar {
		grid-template-columns: 1fr;
	}

	.bb-sp-title          { font-size: 30px; }
	.bb-sp-center         { padding-left: 16px; padding-right: 16px; }
	.bb-sp-layout-grid    { grid-template-columns: 1fr; padding-left: 16px; padding-right: 16px; }
	.bb-sp-related-grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bb-sp-parallax       { background-attachment: scroll; min-height: 380px; }
	.bb-sp-title--xl      { font-size: 44px; }
	.bb-sp-title--xxl     { font-size: 52px; }
	.bb-sp--layout-6 .bb-sp-title { font-size: 48px; }
}

/* =========================================================
   RESPONSIVE — 560px
   ========================================================= */
@media (max-width: 560px) {
	.bb-shell,
	.bb-container {
		padding-left: 16px;
		padding-right: 16px;
	}

	.bb-site-title {
		font-size: 32px;
	}

	.bb-feature-content h2 {
		font-size: 22px;
	}

	.bb-feature-small .bb-feature-content h2 {
		font-size: 15px;
	}

	.bb-mag-body h3,
	.bb-news-body h3,
	.bb-news-large .bb-news-body h3 {
		font-size: 16px;
	}

	.bb-feature-side,
	.bb-card-grid-2,
	.bb-card-grid-3,
	.bb-card-grid-4,
	.bb-category-tiles {
		grid-template-columns: 1fr;
	}

	.bb-news-item,
	.bb-news-large {
		grid-template-columns: 90px minmax(0, 1fr);
	}

	.bb-news-large .bb-news-body p,
	.bb-mag-body p {
		display: none;
	}

	.bb-dark-module {
		padding: 20px;
	}

	.bb-sidebar-widget,
	.widget,
	.bb-page-panel,
	.bb-archive-header,
	.bb-comments {
		padding: 18px;
	}

	.bb-sp-title          { font-size: 24px; }
	.bb-sp-subtitle       { font-size: 15px; }
	.bb-entry-content     { font-size: 16px; }
	.bb-sp-related-grid   { grid-template-columns: 1fr; }
	.bb-sp-parallax       { min-height: 280px; }
	.bb-sp-parallax-inner { padding-bottom: 28px; }
	.bb-sp-hero-overlay-wrap .bb-sp-hero-img { height: 320px; }
	.bb-sp-author         { flex-direction: column; }
	.bb-sp--layout-6  .bb-sp-title  { font-size: 36px; }
	.bb-sp--layout-20 .bb-sp-title  { font-size: 30px; }
	.bb-sp-title--xl      { font-size: 32px; }
	.bb-sp-title--xxl     { font-size: 38px; }

	.bb-footer-cols {
		grid-template-columns: 1fr;
	}
}