/* ==========================================================================
   Внутрішні сторінки: 404 і текстова сторінка.
   ========================================================================== */

/* --------------------------------------------------------------------------
   404 · Сторінку не знайдено — 1440×760 (44:265)
   -------------------------------------------------------------------------- */
.notfound {
	position: relative;
	min-height: 760px;
	background: #06170E;
	color: var(--t-on-dark);
	overflow: hidden;
}
.notfound__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.notfound__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(4, 13, 7, .92) 0%, rgba(6, 23, 14, .82) 55%, rgba(6, 23, 14, .94) 100%);
}

.notfound__inner { position: relative; min-height: 760px; display: flex; justify-content: center; }
.notfound__content {
	display: flex; flex-direction: column; align-items: center;
	width: 760px;
	padding-top: 102.5px;
	text-align: center;
}

.notfound__code {
	font: 800 170px/1 var(--f-display);
	letter-spacing: -6.8px;
	color: #F0B838;
}
.notfound__title { margin-top: 20px; max-width: 700px; color: #F7F2E6; }
.notfound__text { margin-top: 16px; max-width: 620px; color: #C2D8C9; }

.notfound__cta { display: flex; align-items: center; gap: 14px; margin-top: 36px; }

.notfound__divider { width: 120px; height: 1px; margin-top: 44px; background: rgba(255, 255, 255, .18); }
.notfound__links-title { margin-top: 26px; color: #8CAB99; }

.notfound__links {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
	width: 100%;
	margin-top: 16px;
}

.link-chip {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 11px 20px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: var(--r-pill);
	font: 500 15px/1.3 var(--f-body);
	letter-spacing: -.03px;
	color: #DDEAE1;
	text-decoration: none;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.link-chip:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .34); }

@media (max-width: 1023px) {
	.notfound, .notfound__inner { min-height: 0; }
	.notfound__content { width: 100%; padding-block: 72px 80px; }
	.notfound__code { font-size: 120px; letter-spacing: -4.8px; }
}

@media (max-width: 767px) {
	.notfound__content { padding-block: 56px 64px; }
	.notfound__code { font-size: 84px; letter-spacing: -3.4px; }
	.notfound__cta { flex-direction: column; align-items: stretch; width: 100%; }
	.notfound__cta .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Текстова сторінка — шапка 1440×273 (43:248) + тіло 1440×2857 (43:264)
   -------------------------------------------------------------------------- */
.page-hero { background: #0B2115; color: var(--t-on-dark); padding-block: 56px 60px; }

.crumbs { display: flex; align-items: center; gap: 10px; }
.crumbs__link {
	font: var(--ty-body-s); letter-spacing: var(--tr-body-s);
	color: #8CAB99;
	text-decoration: none;
}
.crumbs__link:hover { color: #DDEAE1; text-decoration: underline; }
.crumbs__sep { width: 14px; height: 14px; color: #8CAB99; }
.crumbs__current { font: var(--ty-body-s); letter-spacing: var(--tr-body-s); color: #DDEAE1; }

.page-hero__title { margin-top: 22px; max-width: 900px; color: #F7F2E6; }
.page-hero__meta {
	display: flex; align-items: center; gap: 10px;
	margin-top: 18px;
	font: var(--ty-body-s); letter-spacing: var(--tr-body-s);
	color: #8CAB99;
}

.text-page { background: #FCF7EC; padding-block: 88px; }
/* stretch, а не flex-start: інакше колонка змісту заввишки з саму картку
   і sticky нема куди рухатися. */
.text-page__grid { display: flex; align-items: stretch; gap: 100px; }

/* --- Зміст (43:265) ------------------------------------------------------ */
.toc { width: 300px; flex: none; }
.toc__inner {
	position: sticky;
	top: calc(var(--header-h-solid) + 24px);
	padding: 26px 22px 28px 26px;
	background: #F2EAD9;
	border-radius: 20px;
	box-shadow: inset 0 0 0 1px #E1D5BD;
}
.toc__title { color: #5E6F64; }
.toc__links { list-style: none; display: flex; flex-direction: column; gap: 2px; margin-top: 18px; }

.toc__link {
	display: flex; align-items: flex-start; gap: 10px;
	padding: 10px 12px;
	border-radius: 10px;
	font: var(--ty-body-s); letter-spacing: var(--tr-body-s);
	color: #3B4D42;
	text-decoration: none;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.toc__link:hover { background: rgba(255, 255, 255, .55); }
.toc__marker { width: 3px; height: 18px; flex: none; margin-top: 4px; border-radius: 2px; background: transparent; }
.toc__link.is-active { background: #fff; color: #0E1F15; }
.toc__link.is-active .toc__marker { background: #1E8A4C; }

/* --- Колонка тексту (43:290) --------------------------------------------- */
.text-page__content { width: 800px; flex: none; min-width: 0; }
.text-page__content--wide { width: 100%; max-width: 800px; }

.text-page__lead {
	font: var(--ty-lead); letter-spacing: var(--tr-lead);
	color: #0E1F15;
}
.text-page__lead + h2 { margin-top: 44px; }

/* Між секціями в макеті два порожні кадри: 14 після абзацу і 44 перед H2. */
.text-page__content h2 {
	margin-top: 58px;
	font: var(--ty-h3); letter-spacing: var(--tr-h3);
	color: #0E1F15;
	scroll-margin-top: calc(var(--header-h-solid) + 24px);
}
.text-page__content h2:first-child { margin-top: 0; }
.text-page__content h3 {
	margin-top: 40px;
	font: var(--ty-h5); letter-spacing: var(--tr-h5);
	color: #0E1F15;
}
.text-page__content h2 + *, .text-page__content h3 + * { margin-top: 18px; }
.text-page__content h3 + * { margin-top: 12px; }

.text-page__content p,
.text-page__content ul,
.text-page__content ol { margin-top: 14px; }

.text-page__content p {
	font: var(--ty-body-l); letter-spacing: var(--tr-body-l);
	color: #3B4D42;
}
.text-page__content a { color: var(--t-link); }

/* Маркований список: крапка 6px (43:303) */
.text-page__content ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.text-page__content ul li {
	position: relative;
	padding-left: 20px;
	font: var(--ty-body-l); letter-spacing: var(--tr-body-l);
	color: #3B4D42;
}
.text-page__content ul li::before {
	content: "";
	position: absolute;
	left: 0; top: 11px;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: #1E8A4C;
}

/* Нумерований список: кружечок 26px (43:402) */
.text-page__content ol { list-style: none; counter-reset: tp; display: flex; flex-direction: column; gap: 12px; }
.text-page__content ol li {
	position: relative;
	counter-increment: tp;
	padding-left: 40px;
	font: var(--ty-body-l); letter-spacing: var(--tr-body-l);
	color: #3B4D42;
}
.text-page__content ol li::before {
	content: counter(tp);
	position: absolute;
	left: 0; top: 2px;
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px;
	border-radius: var(--r-pill);
	background: #D6F2E0;
	font: 500 13.5px/1.42 var(--f-body);
	color: #17663B;
}

/* Врізка-примітка (43:346) */
.text-page__content .callout {
	display: flex; gap: 14px; align-items: flex-start;
	margin-top: 14px;
	padding: 18px 22px 18px 20px;
	background: rgba(249, 234, 196, .55);
	border-left: 3px solid #F0B838;
	border-radius: 12px;
}
.text-page__content .callout p {
	margin: 0;
	font: var(--ty-body-m); letter-spacing: var(--tr-body-m);
	color: #5E4A0C;
}
.text-page__content .callout::before {
	content: "";
	width: 20px; height: 20px; flex: none;
	margin-top: 1px;
	background: currentColor;
	color: #5E4A0C;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.6'/><path d='M12 11v5M12 8.2v.2'/></svg>") center / 20px no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.6'/><path d='M12 11v5M12 8.2v.2'/></svg>") center / 20px no-repeat;
}

/* --- Пошук (окремого макета немає, зібрано на компонентах) --------------- */
.search-results { list-style: none; display: flex; flex-direction: column; gap: var(--sp-24); }
.search-results__link { color: var(--t-primary); text-decoration: none; }
.search-results__link:hover { color: var(--c-green-700); }
.search-form__row { display: flex; gap: var(--sp-12); align-items: stretch; }
.search-form__row .field__control { flex: 1 0 0; }

@media (max-width: 1279px) {
	.text-page__grid { gap: 48px; }
	.text-page__content { width: auto; flex: 1 0 0; }
}

@media (max-width: 1023px) {
	.page-hero { padding-block: 40px 44px; }
	.text-page { padding-block: 56px; }
	.text-page__grid { flex-direction: column; gap: 32px; }
	.toc { width: 100%; }
	.toc__inner { position: static; }
	.text-page__content { width: 100%; }
}

@media (max-width: 767px) {
	.text-page { padding-block: 40px; }
	.toc__inner { padding: 20px; }
}