/* ============================================================
   БЛОК «Статья с оглавлением» (lux-article).
   Зліва липка картка: фото + авто-оглавлення (якорі на h2–h5,
   плавне гортання), справа репітер WYSIWYG-разделів.
   Лінія зліва — глобальна (.lux-article::before у style.css).
   ============================================================ */

/* Без overflow:hidden — иначе position:sticky левой колонки не работает */
.lux-article {
	position: relative;
	color: var(--lux-dark, #111);
	padding: 90px 0 90px;
}

.lux-article__row {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 60px;
	align-items: start;
}

/* ---------- липка ліва картка ---------- */
.lux-article__aside {
	position: sticky;
	top: 110px;
}
.lux-article__card {
	background: #fff;
	border-radius: 10px;
	padding: 14px;
	box-shadow: 0 12px 34px rgba(17, 17, 17, .08);
}
.lux-article__img-wrap {
	border-radius: 8px;
	overflow: hidden;
	background: #f4efe9;
	aspect-ratio: 1 / 1;
	position: relative;
}
.lux-article__img {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	object-fit: cover;
}
.lux-article__toc {
	padding: 20px 8px 10px;
}
.lux-article__toc-title {
	font-family: 'Unbounded', sans-serif;
	font-weight: 500;
	font-size: 17px;
	line-height: 1.4;
	color: var(--lux-dark, #111);
	margin-bottom: 14px;
}
.lux-article__toc ul {
	list-style: disc;
	margin: 0;
	padding-left: 18px;
	color: var(--lux-dark, #111);
}
.lux-article__toc ul ul {
	list-style: circle;
	margin-top: 6px;
}
.lux-article__toc li {
	padding: 0 0 8px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--lux-dark, #111);
}
.lux-article__toc a {
	color: var(--lux-dark, #111);
	text-decoration: none;
}
.lux-article__toc a:hover {
	text-decoration: underline;
}

/* ---------- стаття ---------- */
.lux-article__pill {
	margin-bottom: 14px;
}
.lux-article__title {
	font-family: 'Unbounded', sans-serif;
	font-weight: 400;
	font-size: clamp(26px, 3vw, 44px);
	line-height: 1.2;
	color: var(--lux-dark, #111);
	margin: 0 0 20px;
}
.lux-article__section {
	max-width: 760px;
	margin-bottom: 34px;
}
.lux-article__section h3 {
	font-family: 'Unbounded', sans-serif;
	font-weight: 500;
	font-size: clamp(20px, 2.2vw, 28px);
	line-height: 1.3;
	color: var(--lux-dark, #111);
	margin: 0 0 16px;
}

/* Заголовки всередині WYSIWYG-разделів (якоря для оглавлення) */
.lux-article__content h2,
.lux-article__content h3,
.lux-article__content h4,
.lux-article__content h5 {
	font-family: 'Unbounded', sans-serif;
	font-weight: 400;
	line-height: 1.3;
	color: var(--lux-dark, #111);
	scroll-margin-top: 120px;
}
.lux-article__content h2 { font-size: clamp(24px, 2.6vw, 36px); margin: 0 0 20px; }
.lux-article__content h3 { font-size: clamp(20px, 2.2vw, 28px); margin: 0 0 16px; }
.lux-article__content h4 { font-size: clamp(17px, 1.8vw, 22px); margin: 0 0 12px; }
.lux-article__content h5 { font-size: clamp(15px, 1.5vw, 18px); margin: 0 0 10px; }

/* Відступи рівнів заголовків в оглавленні */
.lux-article__toc-item--h3 { margin-left: 12px; }
.lux-article__toc-item--h4 { margin-left: 24px; }
.lux-article__toc-item--h5 { margin-left: 36px; }

/* кнопка внизу блока (поп-ап заявки) */
.lux-article__btn {
	margin-top: 10px;
}
.lux-article__section-text {
	font-size: 15px;
	line-height: 1.65;
	color: rgba(17, 17, 17, .85);
	margin: 0 0 14px;
}
.lux-article__section-list {
	list-style: disc;
	margin: 0 0 12px;
	padding-left: 0;
}
.lux-article__section-list li {
	font-size: 15px;
	line-height: 1.6;
	color: rgba(17, 17, 17, .85);
	margin-bottom: 8px;
}

/* ---------- адаптив ---------- */
@media (max-width: 991px) {
	.lux-article__row {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.lux-article__aside {
		position: static;
	}
}
@media (max-width: 767px) {
	.lux-article {
		padding: 80px 0 60px;
	}
	.lux-article__card {
		padding: 10px;
	}
	.lux-article__toc-title {
		font-size: 15px;
	}
}

/* Нейтралізуємо оранжеві маркери старої теми (header.css
   ul:not([class]) li:before) — ставимо звичайні диски */
.lux-article__toc ul:not([class]) li:before,
.lux-article__content ul:not([class]) li:before,
.lux-article__content ol:not([class]) li:before {
	content: normal;
}
.lux-article__toc ul:not([class]),
.lux-article__content ul:not([class]) {
	list-style: disc;
	padding-left: 20px;
}
.lux-article__toc ul:not([class]) li,
.lux-article__content ul:not([class]) li {
	list-style: disc;
	padding-left: 0;
}
.lux-article__content ol:not([class]) {
	list-style: decimal;
	padding-left: 20px;
}
.lux-article__content ol:not([class]) li {
	list-style: decimal;
	padding-left: 0;
}