.mkb-learn-article {
	padding-bottom: var(--mkb-space-20);
}

.mkb-learn-article__layout {
	width: min(var(--mkb-container), calc(100% - 40px));
	margin-inline: auto;
}

.mkb-article-problem {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--mkb-space-5);
	max-width: 900px;
	margin: var(--mkb-space-10) auto;
	padding: var(--mkb-space-6);
	border: 1px solid rgba(79, 124, 103, 0.16);
	border-radius: var(--mkb-radius-lg);
	background: var(--mkb-color-primary-soft);
}

.mkb-article-problem h2 {
	margin: var(--mkb-space-2) 0 var(--mkb-space-3);
	font-size: 1.35rem;
}

.mkb-article-problem p {
	margin: 0;
	color: var(--mkb-color-muted);
	line-height: 1.75;
}

.mkb-article-checklist {
	display: grid;
	grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
	gap: var(--mkb-space-8);
	max-width: 960px;
	margin: var(--mkb-space-12) auto;
	padding: var(--mkb-space-8);
	border: 1px solid var(--mkb-color-border);
	border-radius: var(--mkb-radius-xl);
	background: var(--mkb-color-surface);
	box-shadow: var(--mkb-shadow-sm);
}

.mkb-article-checklist h2 {
	margin: var(--mkb-space-4) 0 0;
	font-size: 1.55rem;
}

.mkb-article-checklist ol {
	display: grid;
	gap: var(--mkb-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mkb-article-checklist li {
	display: grid;
	grid-template-columns: 34px 1fr;
	align-items: center;
	gap: var(--mkb-space-3);
	padding: var(--mkb-space-3);
	border-radius: var(--mkb-radius-sm);
	background: var(--mkb-color-surface-soft);
}

.mkb-article-checklist li span {
	color: var(--mkb-color-primary);
	font-size: var(--mkb-text-xs);
}

.mkb-article-checklist a {
	color: var(--mkb-color-ink);
	font-weight: 600;
	text-decoration: none;
}

.mkb-learn-article__body {
	max-width: var(--mkb-reading);
	margin-inline: auto;
}

.mkb-article-tools,
.mkb-article-knowledge {
	width: min(100%, 1080px);
	margin: var(--mkb-space-20) auto 0;
}

.mkb-learn-article__layout > .mkb-related-card-grid {
	width: min(100%, 1080px);
	margin: var(--mkb-space-20) auto 0;
}

.mkb-article-related-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mkb-space-4);
}

.mkb-article-related-grid .mkb-learn-related-card {
	display: flex;
	min-height: 150px;
	flex-direction: column;
	padding: var(--mkb-space-6);
	border: 1px solid var(--mkb-color-border);
	border-radius: var(--mkb-radius-lg);
	background: var(--mkb-color-surface);
	color: var(--mkb-color-ink);
	text-decoration: none;
	box-shadow: var(--mkb-shadow-sm);
}

.mkb-article-related-grid .mkb-learn-related-card span {
	margin-top: var(--mkb-space-3);
	color: var(--mkb-color-muted);
	line-height: 1.7;
}

.mkb-article-next {
	width: min(100%, 1080px);
	margin: var(--mkb-space-20) auto 0;
}

@media (max-width: 720px) {
	.mkb-article-checklist {
		grid-template-columns: 1fr;
	}

	.mkb-article-related-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 520px) {
	.mkb-learn-article__layout {
		width: min(100% - 32px, var(--mkb-container));
	}

	.mkb-article-problem {
		grid-template-columns: 1fr;
	}

	.mkb-article-checklist {
		padding: var(--mkb-space-6);
	}
}

/* Legacy article resource module: compact horizontal presentation. */
.mkb-learn-article__body .mkb-phase3-next-assets {
	position: relative;
	left: 50%;
	width: min(1080px, calc(100vw - 40px));
	max-width: none;
	margin: var(--mkb-space-20) 0 var(--mkb-space-12);
	padding: var(--mkb-space-10);
	transform: translateX(-50%);
	border: 1px solid var(--mkb-color-border);
	border-radius: var(--mkb-radius-xl);
	background: var(--mkb-color-surface);
	box-shadow: var(--mkb-shadow-sm);
}

.mkb-learn-article__body .mkb-phase3-next-assets .mkb-v5-section__head {
	display: block;
	margin: 0 0 var(--mkb-space-6);
}

.mkb-learn-article__body .mkb-phase3-next-assets .mkb-v5-section__head > div {
	width: 100%;
}

.mkb-learn-article__body .mkb-phase3-next-assets .mkb-v5-section__head h2 {
	display: block !important;
	margin: 0 0 var(--mkb-space-2) !important;
	font-size: clamp(1.65rem, 2.6vw, 2.15rem);
	line-height: 1.25;
	overflow-wrap: normal;
	white-space: normal;
	word-break: keep-all;
	writing-mode: horizontal-tb !important;
}

.mkb-learn-article__body .mkb-phase3-next-assets .mkb-v5-section__head p {
	margin: 0;
	color: var(--mkb-color-muted);
	font-size: var(--mkb-text-sm);
	line-height: 1.7;
}

.mkb-learn-article__body .mkb-phase3-next-assets .mkb-v5-resource-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mkb-space-4);
}

.mkb-learn-article__body .mkb-phase3-next-assets .mkb-v5-resource-grid > p {
	display: none;
}

.mkb-learn-article__body .mkb-phase3-next-assets .mkb-v5-resource-grid > .mkb-v5-resource-card {
	display: flex;
	min-height: 156px;
	flex-direction: column;
	padding: var(--mkb-space-6);
	border: 1px solid rgba(79, 124, 103, 0.12);
	border-radius: var(--mkb-radius-lg);
	background: var(--mkb-color-surface-soft);
	color: var(--mkb-color-ink);
	text-decoration: none;
	transition: transform var(--mkb-transition), border-color var(--mkb-transition), box-shadow var(--mkb-transition);
}

.mkb-learn-article__body .mkb-phase3-next-assets .mkb-v5-resource-grid > .mkb-v5-resource-card:hover,
.mkb-learn-article__body .mkb-phase3-next-assets .mkb-v5-resource-grid > .mkb-v5-resource-card:focus-visible {
	transform: translateY(-3px);
	border-color: var(--mkb-color-border-strong);
	box-shadow: var(--mkb-shadow-sm);
}

.mkb-learn-article__body .mkb-phase3-next-assets .mkb-v5-resource-card > span {
	display: none;
}

.mkb-learn-article__body .mkb-phase3-next-assets .mkb-v5-resource-card h3 {
	margin: 0 0 var(--mkb-space-3);
	color: var(--mkb-color-ink);
	font-size: 1.125rem;
	line-height: 1.45;
}

.mkb-learn-article__body .mkb-phase3-next-assets .mkb-v5-resource-card p {
	margin: auto 0 0;
	color: var(--mkb-color-muted);
	font-size: var(--mkb-text-sm);
	line-height: 1.65;
}

@media (max-width: 720px) {
	.mkb-learn-article__body .mkb-phase3-next-assets {
		left: auto;
		width: 100%;
		margin-top: var(--mkb-space-12);
		padding: var(--mkb-space-6);
		transform: none;
		border-radius: var(--mkb-radius-lg);
	}

	.mkb-learn-article__body .mkb-phase3-next-assets .mkb-v5-section__head h2 {
		font-size: 1.5rem;
		word-break: normal;
	}

	.mkb-learn-article__body .mkb-phase3-next-assets .mkb-v5-resource-grid {
		grid-auto-columns: minmax(240px, 82%);
		grid-template-columns: none;
		grid-auto-flow: column;
		padding-bottom: var(--mkb-space-2);
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: inline proximity;
		scrollbar-width: none;
	}

	.mkb-learn-article__body .mkb-phase3-next-assets .mkb-v5-resource-grid::-webkit-scrollbar {
		display: none;
	}

	.mkb-learn-article__body .mkb-phase3-next-assets .mkb-v5-resource-grid > .mkb-v5-resource-card {
		min-height: 148px;
		scroll-snap-align: start;
	}
}