/* ============================================================
   MTSP — спільний canon page-head (template-parts/page-head.php)
   Скоуп .mtsp-info-page — для сторінок БЕЗ власного page-head-CSS
   (Галерея, Політика). Канонні 3 (Корисне/Оплата/Контакти) лишаються
   на своєму per-page скоупі (byte-safe, не чіпаються).
   Значення = точна копія канону (page-korisna-informatsiya.css).
   ============================================================ */

.mtsp-info-page .container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
}

/* breadcrumbs — сіра смуга full-bleed. Текстові властивості ЗАМКНУТІ явно
   (font-family/weight/letter-spacing/line-height/text-transform) — щоб не протікав
   Kadence-системний шрифт на каталозі/статті. Одне джерело для ВСІХ сторінок з крихтами. */
.mtsp-info-page .breadcrumbs {
	background: var(--mtsp-gray-50);
	padding: 12px 0;
	font-family: var(--mtsp-font-body);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.4;
	text-transform: none;
	color: var(--mtsp-gray-600);
	border-bottom: 1px solid var(--mtsp-gray-200);
}
.mtsp-info-page .breadcrumbs a { color: var(--mtsp-gray-600); font-weight: 400; text-decoration: none; transition: color 0.16s; }
.mtsp-info-page .breadcrumbs a:hover { color: var(--mtsp-accent); }
.mtsp-info-page .breadcrumbs .sep { margin: 0 8px; color: var(--mtsp-gray-300); }
.mtsp-info-page .breadcrumbs .current { color: var(--mtsp-navy); font-weight: 600; }

/* Вітринний режим: тільки ФОН band → navy (форма/шрифт/висота/позиція = ті самі,
   успадковують спільне .breadcrumbs). Крихти зливаються з navy-hero нижче. */
/* Той самий градієнт, що .about-hero → crumbs = верх hero, без border-шва. */
.mtsp-hero-navy .breadcrumbs { background: linear-gradient(135deg, var(--mtsp-navy) 0%, var(--mtsp-navy-light) 100%); border-bottom: none; }
.mtsp-hero-navy .breadcrumbs a { color: rgba(255, 255, 255, 0.72); }
.mtsp-hero-navy .breadcrumbs a:hover { color: var(--mtsp-accent); }
.mtsp-hero-navy .breadcrumbs .sep { color: rgba(255, 255, 255, 0.4); }
.mtsp-hero-navy .breadcrumbs .current { color: #fff; }

/* page-head band */
.mtsp-info-page .page-head {
	background: var(--mtsp-gray-50);
	border-bottom: 1px solid var(--mtsp-gray-200);
	padding: 48px 0 40px;
}
/* Опційні mono-чіпи (дата/час читання) — page-head.php $args['meta'].
   Рендеряться лише коли передано → інші page-head сторінки без змін. */
.mtsp-info-page .page-head .page-head-meta {
	display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline;
	font-family: var(--mtsp-font-mono);
	font-size: 12px; color: var(--mtsp-gray-400);
	margin-bottom: 14px;
}
.mtsp-info-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-info-page .page-head p {
	color: var(--mtsp-gray-600);
	font-size: 15px; line-height: 1.7;
	max-width: 620px; margin: 0;
}

/* ============================================================
   SITEWIDE SECTION CANON — ЄДИНЕ джерело .section-eyebrow /
   .section-title / .section-header для body-секцій УСІХ сторінок
   (about / kontakti / oplata / korisna / article / seal + інші).
   Значення = узгоджений канон (звірено з 6 per-page копіями 2026-07-07):
   тайтл margin 0; весь вертикальний ритм — на .section-header.
   Скоуплені оверрайди (about-hero, seal .cta-section) лишаються у своїх
   per-page файлах і виграють за специфічністю.
   ============================================================ */
.section-eyebrow {
	display: block;
	color: var(--mtsp-accent);
	font-family: var(--mtsp-font-mono);
	font-size: 11px; font-weight: 700;
	letter-spacing: 2px; text-transform: uppercase;
	margin-bottom: 10px;
}
.section-title {
	font-family: var(--mtsp-font-display);
	font-size: 32px; font-weight: 600;
	color: var(--mtsp-navy);
	letter-spacing: -0.8px; line-height: 1.15;
	margin: 0;
}
.section-header { margin-bottom: 36px; max-width: 720px; }
.section.compact .section-header { margin-bottom: 28px; }

@media (max-width: 1024px) {
	.mtsp-info-page .page-head h1 { font-size: 30px; }
	.section-title { font-size: 26px; }
}

/* ============================================================
   HELP-BANNER CANON (Група A) — boxed navy промо-банер. ЄДИНЕ
   джерело для body-банерів УСІХ сторінок (catalog / категорія /
   стаття / gallery / korisna). Розмітка — template-parts/help-banner.php
   (arg variant=default|consult); gallery несе власну inline-розмітку
   (інша кнопка/текст) але той самий контейнер.
   Значення = узгоджений канон (звірено з 4 per-page копіями 2026-07-07).
   Per-page лишаються ЛИШЕ дельти: margin-top (catalog 44 / gallery 60)
   + responsive-колапс (різні брейкпоінти) + gallery .help-actions.
   ============================================================ */
.help-banner {
	background: linear-gradient(135deg, var(--mtsp-navy) 0%, var(--mtsp-navy-light) 100%);
	border-radius: 10px;
	padding: 32px 36px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 40px;
	align-items: center;
	color: var(--mtsp-white);
	position: relative;
	overflow: hidden;
}
.help-banner::before {
	content: '';
	position: absolute; top: -60%; right: -8%;
	width: 460px; height: 460px;
	background: radial-gradient(circle, rgba(217,116,65,0.20), transparent 60%);
	pointer-events: none;
}
.help-banner h3 {
	font-family: var(--mtsp-font-display);
	font-size: 24px; font-weight: 600;
	color: var(--mtsp-white);
	letter-spacing: -0.4px; margin: 0 0 6px;
	position: relative;
}
.help-banner p {
	font-size: 14px; color: rgba(255,255,255,0.75);
	line-height: 1.6; max-width: 540px; margin: 0;
	position: relative;
}
.help-actions { display: flex; flex-direction: column; gap: 10px; position: relative; }
.help-cta {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 24px;
	background: var(--mtsp-accent); color: var(--mtsp-white);
	border-radius: 6px;
	font-size: 13px; font-weight: 700;
	text-decoration: none; white-space: nowrap;
	transition: background 0.2s;
}
.help-cta:hover { background: var(--mtsp-accent-hover); color: var(--mtsp-white); }
.help-phone {
	color: var(--mtsp-white); font-family: var(--mtsp-font-mono);
	font-weight: 700; font-size: 16px;
	text-align: center; text-decoration: none;
}
.help-phone:hover { color: var(--mtsp-accent); }