/* ============================================================
   MTSP — Корисна інформація / Полезная информация (v2 canon)
   Верстка за docs-claude/mockups/Корисне v2.html.
   Токени — canon --mtsp-* (tokens.css). Generic-класи скоуплені
   під .mtsp-ki-page (немає глобального .container на темі —
   той самий патерн, що .mtsp-catalog-page у catalog.css).
   ============================================================ */

.mtsp-ki-page {
	font-family: var(--mtsp-font-body);
	color: var(--mtsp-gray-800);
}

/* ============ PAGE CONTAINER ============ */
.mtsp-ki-page .container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
}

/* BREADCRUMBS — спільне джерело .mtsp-info-page .breadcrumbs (page-head.css). Корінь несе клас .mtsp-info-page. */

/* ============ PAGE HEAD ============ */
.mtsp-ki-page .page-head {
	background: var(--mtsp-gray-50);
	border-bottom: 1px solid var(--mtsp-gray-200);
	padding: 48px 0 40px;
}
.mtsp-ki-page .page-head h1 {
	font-family: var(--mtsp-font-display);
	font-size: 40px;
	font-weight: 600;
	color: var(--mtsp-navy);
	letter-spacing: -1px;
	line-height: 1.08;
	margin: 0 0 12px;
}
.mtsp-ki-page .page-head p {
	color: var(--mtsp-gray-600);
	font-size: 15px;
	line-height: 1.7;
	max-width: 620px;
	margin: 0;
}

/* ============ SECTION SHELL (мова каталогу / rsm-v2) ============ */
.mtsp-ki-page .section {
	padding: 72px 0;
	border-bottom: 1px solid var(--mtsp-gray-100);
}
.mtsp-ki-page .section.compact { padding: 44px 0; }
.mtsp-ki-page .section.alt { background: var(--mtsp-gray-50); }
.mtsp-ki-page .section:last-of-type { border-bottom: none; }

/* .section-eyebrow / .section-title / .section-header → канон у page-head.css (sitewide) */

/* ============ РОЗДІЛИ — topic cards ============ */
.mtsp-ki-page .topics-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px; /* nav-tile grid: gap 16→18 (трек 2026-07-14) */
}
/* Плитки розділів → canon .nav-tile (.nav-tile--index.nav-tile--index-lg,
   nav-tiles.css; крупна назва Tinos 19px/600 через --index-lg). Сама плитка
   .topic-card* видалена 2026-07-14; лишається лише грід-обгортка .topics-grid. */

/* ============ СТАТТІ — article cards ============ */
.mtsp-ki-page .articles-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
/* Картки статей → canon .teaser (assets/css/article-cards.css). Блок .article-card /
   .ac-* видалено 2026-07-15 (трек E Гр.2); лишається лише грід-обгортка .articles-grid. */

/* ============ CTA — help-banner (реюз патерну catalog.css, canon) ============ */
.mtsp-ki-page .ki-help { padding: 48px 0 56px; }
/* .help-banner / .help-actions / .help-cta / .help-phone → канон у page-head.css (sitewide) */

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
	.mtsp-ki-page .topics-grid,
	.mtsp-ki-page .articles-grid { grid-template-columns: repeat(2, 1fr); }
	.mtsp-ki-page .page-head h1 { font-size: 30px; }
}
@media (max-width: 640px) {
	.mtsp-ki-page .topics-grid,
	.mtsp-ki-page .articles-grid { grid-template-columns: 1fr; }
	.mtsp-ki-page .help-banner { grid-template-columns: 1fr; gap: 24px; }
}