.mbg-blog,
.mbg-blog * {
	box-sizing: border-box;
}

.mbg-blog {
	--mbg-ink: #121316;
	--mbg-muted: #686b73;
	--mbg-border: #e7e8eb;
	--mbg-surface: #fff;
	--mbg-soft: #f5f6f8;
	--mbg-accent: #5c46d8;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-right: calc(50% - 50vw) !important;
	margin-left: calc(50% - 50vw) !important;
	/* Pull the shortcode up beneath the site's header spacer. */
	padding: 0 0 clamp(28px, 4vw, 44px);
	margin-top: clamp(-104px, -7vw, -52px) !important;
	overflow: hidden;
	color: var(--mbg-ink);
	background: #fff;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@supports (width: 100dvw) {
	.mbg-blog {
		width: 100dvw !important;
		max-width: 100dvw !important;
		margin-right: calc(50% - 50dvw) !important;
		margin-left: calc(50% - 50dvw) !important;
	}
}

.mbg-shell {
	width: min(1200px, calc(100% - 48px));
	margin: 0 auto;
}

.mbg-hero {
	padding: clamp(22px, 3vw, 40px) 0 clamp(18px, 2.5vw, 30px);
	text-align: center;
	background:
		radial-gradient(circle at 50% 0, rgba(92, 70, 216, 0.10), transparent 54%),
		linear-gradient(180deg, #fbfaff 0%, #fff 100%);
}

.mbg-hero__eyebrow {
	margin: 0 0 16px;
	color: var(--mbg-accent);
	font-size: 12px;
	font-weight: 750;
	line-height: 1.2;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.mbg-breadcrumbs {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0 0 22px;
	color: var(--mbg-muted);
	font-size: 13px;
	line-height: 1.4;
}

.mbg-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.mbg-breadcrumbs a:hover,
.mbg-breadcrumbs a:focus-visible {
	color: var(--mbg-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mbg-hero__title {
	max-width: 900px;
	margin: 0 auto;
	color: var(--mbg-ink);
	font-size: clamp(34px, 4.2vw, 60px);
	font-weight: 760;
	line-height: 1.08;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.mbg-hero__intro {
	max-width: 780px;
	margin: 22px auto 0;
	color: var(--mbg-muted);
	font-size: clamp(16px, 1.6vw, 19px);
	line-height: 1.7;
	text-wrap: pretty;
}

.mbg-toolbar {
	margin-top: 0;
	margin-bottom: clamp(22px, 3vw, 32px);
	border-top: 1px solid var(--mbg-border);
	border-bottom: 1px solid var(--mbg-border);
	background: rgba(255, 255, 255, 0.96);
}

.mbg-toolbar__inner {
	display: flex;
	width: min(1600px, calc(100% - 72px));
	min-height: 68px;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	margin: 0 auto;
}

.mbg-toolbar__title {
	flex: 0 0 auto;
	margin: 0;
	color: var(--mbg-ink);
	font-size: clamp(18px, 1.7vw, 22px);
	font-weight: 720;
	line-height: 1.25;
}

.mbg-topics {
	display: flex;
	min-width: 0;
	align-items: center;
	justify-content: flex-end;
	gap: 7px;
	overflow-x: auto;
	scrollbar-width: none;
}

.mbg-topics::-webkit-scrollbar {
	display: none;
}

.mbg-topic {
	display: inline-flex;
	min-height: 40px;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	padding: 9px 14px;
	color: #3f424a;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 620;
	line-height: 1.2;
	text-decoration: none;
	transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.mbg-topic:hover,
.mbg-topic:focus-visible {
	color: var(--mbg-ink);
	background: var(--mbg-soft);
}

.mbg-topic.is-active {
	color: #fff;
	background: var(--mbg-ink);
	border-color: var(--mbg-ink);
}

.mbg-grid {
	display: grid;
	width: min(1600px, calc(100% - 72px));
	margin: 0 auto;
	grid-template-columns: repeat(var(--mbg-columns, 3), minmax(0, 1fr));
	gap: clamp(18px, 2vw, 28px);
}

.mbg-card {
	display: flex;
	min-width: 0;
	flex-direction: column;
	overflow: hidden;
	background: var(--mbg-surface);
	border: 1px solid var(--mbg-border);
	border-radius: 16px;
	box-shadow: 0 8px 28px rgba(18, 19, 22, 0.06);
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.mbg-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 38px rgba(18, 19, 22, 0.11);
}

.mbg-card__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--mbg-soft);
}

.mbg-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 280ms ease;
}

.mbg-card:hover .mbg-card__image {
	transform: scale(1.035);
}

.mbg-card__placeholder {
	display: grid;
	width: 100%;
	height: 100%;
	place-items: center;
	color: #777b85;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.08em;
	background: linear-gradient(135deg, #f7f7f8, #e8eaef);
}

.mbg-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: clamp(18px, 2.5vw, 26px);
}

.mbg-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin-bottom: 10px;
	color: var(--mbg-muted);
	font-size: 13px;
	line-height: 1.4;
}

.mbg-card__date {
	color: var(--mbg-muted);
}

.mbg-card__separator {
	color: #a4a7ae;
}

.mbg-card__topic {
	color: var(--mbg-muted);
	text-decoration: none;
}

.mbg-card__topic:hover,
.mbg-card__topic:focus-visible {
	color: var(--mbg-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mbg-card__title {
	display: -webkit-box;
	overflow: hidden;
	margin: 0 0 12px;
	font-size: clamp(19px, 1.65vw, 23px);
	font-weight: 700;
	line-height: 1.25;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.mbg-card__title a {
	color: var(--mbg-ink);
	text-decoration: none;
}

.mbg-card__title a:hover,
.mbg-card__title a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.mbg-card__excerpt {
	display: -webkit-box !important;
	min-height: 6.6em;
	max-height: 6.6em;
	overflow: hidden !important;
	margin: 0 0 20px;
	color: var(--mbg-muted);
	font-size: 15px;
	line-height: 1.65;
	white-space: normal !important;
	word-break: normal;
	overflow-wrap: anywhere;
	text-overflow: clip !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 4 !important;
}

.mbg-card__link {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	margin-top: auto;
	padding: 10px 15px;
	color: #fff;
	background: var(--mbg-ink);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 650;
	line-height: 1;
	text-decoration: none;
	transition: opacity 160ms ease, gap 160ms ease;
}

.mbg-card__link:hover,
.mbg-card__link:focus-visible {
	gap: 12px;
	color: #fff;
	opacity: 0.82;
}

.mbg-pagination {
	width: min(1600px, calc(100% - 72px));
	margin-right: auto;
	margin-left: auto;
	margin-top: clamp(22px, 3vw, 34px);
}

.mbg-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbg-pagination a.page-numbers,
.mbg-pagination span.page-numbers {
	display: inline-flex;
	min-width: 42px;
	height: 42px;
	align-items: center;
	justify-content: center;
	padding: 0 13px;
	color: var(--mbg-ink);
	background: var(--mbg-surface);
	border: 1px solid var(--mbg-border);
	border-radius: 999px;
	font-size: 14px;
	text-decoration: none;
}

.mbg-pagination span.current,
.mbg-pagination a.page-numbers:hover,
.mbg-pagination a.page-numbers:focus-visible {
	color: #fff;
	background: var(--mbg-ink);
	border-color: var(--mbg-ink);
}

.mbg-empty {
	width: min(1200px, calc(100% - 48px));
	margin: 0 auto;
	padding: 28px;
	color: var(--mbg-muted);
	text-align: center;
	background: var(--mbg-soft);
	border-radius: 12px;
}

@media (max-width: 1100px) {
	.mbg-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 960px) {
	.mbg-toolbar__inner {
		align-items: flex-start;
		flex-direction: column;
		gap: 15px;
		padding: 22px 0;
	}

	.mbg-topics {
		width: 100%;
		justify-content: flex-start;
		padding-bottom: 2px;
	}

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

@media (max-width: 620px) {
	.mbg-shell,
	.mbg-toolbar__inner,
	.mbg-grid {
		width: calc(100% - 28px);
	}

	.mbg-grid {
		grid-template-columns: 1fr;
	}

	.mbg-pagination {
		width: calc(100% - 28px);
	}

	.mbg-card {
		border-radius: 13px;
	}

	.mbg-hero {
		padding-top: 28px;
	}

	.mbg-blog {
		margin-top: -32px !important;
	}

	.mbg-hero__title {
		font-size: clamp(32px, 10vw, 43px);
	}

	.mbg-topic {
		min-height: 38px;
		padding: 8px 12px;
		font-size: 13px;
	}

	.mbg-empty {
		width: calc(100% - 28px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mbg-card,
	.mbg-card__image,
	.mbg-card__link,
	.mbg-topic {
		transition: none;
	}
}