/**
 * Сетка страницы статьи — три колонки.
 *
 * Этап 1 редизайна, 29.07.2026. До этого статья была одной колонкой 760px —
 * её зажимал блок в article-minimap-toc.css (удалён вместе с этой правкой),
 * а заложенная в SCSS двухколоночная раскладка была мёртвым кодом.
 *
 * ВСЁ В ПИКСЕЛЯХ, НЕ В REM — сознательно.
 * В теме плавающий rem (--main-font-size во vw): на мониторе 1920 1rem = 10px,
 * на 1440 — 8.25px. Из-за этого .wrap на 1440 сжимается до 1188px и три колонки
 * по макету (1352px) не помещаются. Колонки в px дают одинаковую раскладку
 * на всех экранах, а ширина текста 720px — оптимум для чтения (~70 символов
 * в строке) и не должна зависеть от размера монитора.
 *
 * Пороги выбраны по Яндекс.Метрике (30 дней, ширина ОКНА браузера на ПК):
 *   >= 1440 — 59.7% десктопных визитов  -> три колонки
 *   1200-1439 — ~10%                    -> две колонки (центр + правая)
 *   < 1200 — ~17%                       -> одна колонка
 *   Смартфоны (69% всего трафика) сюда не попадают — у них pill-тулбар
 *   и bottom-sheets, раскладка не менялась.
 *
 * Размеры колонок из макета: 232 / 720 / 320, gap 40.
 *
 * ВАЖНО про .article__aside: на мобиле он — контейнер модалок «Оглавление»
 * и «Поделиться» (position:fixed из SCSS, открываются кнопками тулбара).
 * Поэтому он остаётся на своём месте в разметке и просто прячется
 * на десктопе, где его роль берут на себя рельсы.
 */

/* ─────────────────────────────────────────────────────────────
   Мобильная страховка от горизонтального скролла.
   На страницу статьи изредка попадает что-то шире viewport
   (широкая таблица от редактора, картинка без max-width,
   iframe встроенного плеера, section-similarproducts со Swiper).
   Фиксированный тулбар translateX(-50%) в отдельных Safari
   тоже мог давать «полсотни пикселей» справа при определённой
   ширине. Клип на body убирает симптом полностью, при этом
   position:sticky/fixed внутри страницы продолжают работать
   (в отличие от overflow:hidden на html, который их ломает).
   ───────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
	/* На body одна overflow-x: clip срабатывает не всегда: WebKit нередко
	   пропускает её на body и вешает скролл на html. Ставим на оба — так
	   гарантируется, что горизонтальный скролл-контейнер не создаётся. */
	html, body { overflow-x: clip; max-width: 100vw; }
	body.single, body.blog, body.category, body.archive {
		overflow-x: clip;
	}
	/* Не даём wrap распираться содержимым — общие paddings и min-width:0
	   на вложенных гридах, чтобы длинные строки не выпихивали контейнер. */
	body.single .article__wrap,
	body.single .article__main,
	body.single .article__part-content,
	body.single .article__part-content > * {
		max-width: 100%;
		min-width: 0;
	}
	/* Медиа никогда не выходят за пределы столбца текста. */
	body.single .article__part-content img,
	body.single .article__part-content video,
	body.single .article__part-content iframe {
		max-width: 100%;
		height: auto;
	}
	body.single .article__part-content iframe { max-width: 100% !important; }
	/* Таблицы и pre скроллятся ВНУТРИ своего контейнера, не тянут страницу. */
	body.single .article__part-content pre,
	body.single .article__part-content table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ─────────────────────────────────────────────────────────────
   Рельсы существуют только на десктопе.
   ───────────────────────────────────────────────────────────── */
.article__rail { display: none; }

.article__rail-inner {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* ─────────────────────────────────────────────────────────────
   1200px+ : две колонки — текст + правая рельса
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
	.article__wrap .article__main {
		display: grid;
		grid-template-columns: minmax(0, 720px) 320px;
		gap: 40px;
		justify-content: center;
		align-items: start;
	}

	/* Старый мобильный контейнер модалок на десктопе не нужен */
	.article__wrap .article__main > .article__aside { display: none; }

	.article__wrap .article__part-content {
		grid-column: 1;
		min-width: 0;   /* иначе длинные URL и код распирают колонку */
		max-width: 720px;
	}

	.article__wrap .article__rail--right {
		display: block;
		grid-column: 2;
		position: sticky;
		top: 110px;
		align-self: start;
	}

	/* Левая рельса на этой ширине не помещается — её содержимое
	   уходит под статью в одну строку. Наполнение — этап 2. */
	.article__wrap .article__rail--left {
		display: block;
		grid-column: 1;
		grid-row: 2;
	}

	.article__wrap .article__rail--left .article__rail-inner {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 20px;
	}

	/* Обёртка: своя ширина под сетку, без опоры на плавающий rem */
	.article__wrap.wrap {
		max-width: 1128px;   /* 720 + 40 + 320 + 2×24 поля */
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* ─────────────────────────────────────────────────────────────
   1440px+ : три колонки — полный макет
   232 + 40 + 720 + 40 + 320 = 1352px
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1440px) {
	.article__wrap .article__main {
		grid-template-columns: 232px minmax(0, 720px) 320px;
	}

	.article__wrap .article__part-content { grid-column: 2; }

	.article__wrap .article__rail--left {
		grid-column: 1;
		grid-row: 1;
		position: sticky;
		top: 110px;
		align-self: start;
	}

	.article__wrap .article__rail--left .article__rail-inner {
		flex-direction: column;
		gap: 18px;
	}

	.article__wrap .article__rail--right {
		grid-column: 3;
		grid-row: 1;
	}

	.article__wrap.wrap { max-width: 1400px; }   /* 1352 сетки + 2×24 поля */
}

/* ─────────────────────────────────────────────────────────────
   Ширина текста, когда рельс ещё нет (этап 1) или их не хватает.
   Раньше 760px задавал minimap-CSS — теперь это здесь и в px.
   ───────────────────────────────────────────────────────────── */
@media (min-width: 981px) and (max-width: 1199px) {
	.article__wrap .article__main > .article__aside { display: none; }

	.article__wrap .article__part-content {
		max-width: 720px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ═══════════════════════════════════════════════════════════════════
   БЛОКИ РЕЛЬС
   Значения один в один из макета «Страница статьи.dc.html»:
   карточка #FFF / border #EAE9E6 / radius 14 / padding 14.
   Кегли в px (11-13) — так в макете; в rem они бы поплыли вместе
   с --main-font-size темы и на 1440px провалились бы до 9px.
   ═══════════════════════════════════════════════════════════════════ */

.art-rail-block {
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
	color: #16171A;
	background: #fff;
	border: 1px solid #eae9e6;
	border-radius: 14px;
	padding: 14px;
}

.art-rail-block__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 13px;
}

.art-rail-block__eyebrow {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8a857c;
	margin: 0 0 12px;
}

.art-rail-block__head .art-rail-block__eyebrow { margin: 0; }

.art-rail-block__count,
.art-rail-block__more {
	font-size: 11px;
	font-weight: 700;
	color: #a8322d;
	text-decoration: none;
	white-space: nowrap;
}

.art-rail-block__more:hover { text-decoration: underline; }

/* Кнопка-ссылка на всю ширину блока */
.art-rail-block__cta {
	display: block;
	margin-top: 13px;
	padding: 8px;
	border: 1px solid #c9d6cb;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	color: #3f5f4c;
	text-align: center;
	text-decoration: none;
	transition: background .22s ease, color .22s ease;
}

.art-rail-block__cta:hover {
	background: #3f5f4c;
	color: #fff;
}

/* ─────────────── Автор ─────────────── */
.art-author__row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.art-author__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
	background: #f4f4f4;
}

.art-author__avatar--letter {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(140deg, #e4d6be, #c9a97c);
}

.art-author__id { min-width: 0; }

.art-author__name {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
}

.art-author__role {
	margin-top: 2px;
	font-size: 11px;
	color: #8a857c;
	line-height: 1.25;
}

/* ─────────────── Поделиться ─────────────── */
/* По макету: ряд равных плиток на сером фоне, без обводки.
   flex:1 у каждой — ряд заполняет ширину блока при любом числе кнопок. */
.art-share__row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.art-share__like,
.art-share__btn {
	flex: 1;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: #f5f5f3;
	color: #6e6a63;
	font-size: 12px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}

.art-share__like { color: #a8322d; }

.art-share__like:hover,
.art-share__btn:hover { background: #ebeae6; color: #111314; }

.art-share__like:hover { color: #a8322d; }

.art-share__like.is-liked svg { fill: currentColor; }

.art-share__btn .icon { width: 16px; height: 16px; }

/* Галочка «скопировано» — показывается вместо иконки после клика.
   Класс is-copied вешает общий обработчик .js-copy темы. */
.art-share__copy-done { display: none; color: #4f725d; }
.art-share__copy.is-copied .art-share__copy-default { display: none; }
.art-share__copy.is-copied .art-share__copy-done { display: block; }

/* ─────────────── Похожие статьи ─────────────── */
/* Элементы разделены тонкой линией, как в макете, — вместо
   расстояния между самостоятельными карточками. */
.art-related__list,
.art-podcasts__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.art-related__item + .art-related__item,
.art-podcasts__item + .art-podcasts__item {
	padding-top: 13px;
	border-top: 1px solid #efeeeb;
}

.art-related__link {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: transform .25s cubic-bezier(.2, .7, .3, 1);
}

.art-related__link:hover { transform: translateY(-3px); }

.art-related__cover {
	display: block;
	margin: 0 0 9px;
	height: 96px;
	border-radius: 10px;
	overflow: hidden;
	background: #f4f4f4;
}

.art-related__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.art-related__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.35;
	font-weight: 700;
	color: #16171a;
}

.art-related__meta {
	display: block;
	margin-top: 5px;
	font-size: 11px;
	color: #8a857c;
}

/* ─────────────── Подкасты ─────────────── */
.art-podcasts__link {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
	transition: transform .25s cubic-bezier(.2, .7, .3, 1);
}

.art-podcasts__link:hover { transform: translateX(3px); }

.art-podcasts__play {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 10px;
	background: linear-gradient(140deg, #7e211d, #b4472f);
	color: #fff;
	transition: transform .25s ease;
}

.art-podcasts__link:hover .art-podcasts__play { transform: scale(1.08); }

/* Есть обложка выпуска — она и есть плитка, значок play лежит поверх
   в затемнении, иначе на светлых обложках его не видно. */
.art-podcasts__play--cover { position: relative; }

.art-podcasts__play--cover img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.art-podcasts__play--cover svg {
	position: relative;
	z-index: 1;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
}

.art-podcasts__play--cover::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(0, 0, 0, .28);
}

.art-podcasts__play--cover svg { z-index: 2; }

.art-podcasts__body { min-width: 0; flex: 1; }

.art-podcasts__meta {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #a9a39a;
	margin-bottom: 3px;
}

.art-podcasts__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 12px;
	line-height: 1.3;
	font-weight: 700;
	color: #16171a;
}

/* ─────────────────────────────────────────────────────────────
   Промежуточная ширина 1200-1439: левая рельса лежит под статьёй
   в строку. Карточки не должны растягиваться на всю ширину.
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1200px) and (max-width: 1439px) {
	.article__rail--left .art-rail-block { flex: 1 1 260px; max-width: 340px; }
	.article__rail--left .art-related,
	.article__rail--left .art-podcasts { display: none; }  /* дубли есть внизу страницы */
}

/* ═══════════════════════════════════════════════════════════════════
   ШАПКА СТАТЬИ
   Дата · Автор · время чтения одной строкой (по макету).
   Работает на всех ширинах, не только на десктопе.
   ═══════════════════════════════════════════════════════════════════ */
.art-head__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 18px;
	margin: 22px 0 20px;
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 14px;
	line-height: 1.3;
	color: #6e6a63;
}

.art-head__date {
	font-size: inherit;
	color: inherit;
	white-space: nowrap;
}

/* Автор — главное в строке: фото и тёмное имя вместо серой подписи */
.art-head__author-wrap {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.art-head__avatar {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
	background: #f4f4f4;
}

.art-head__author {
	color: #16171a;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.art-head__author:hover { color: #a8322d; }

/* Время чтения — с часами, читается как отдельная подсказка */
.art-head__read {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	background: #f5f5f3;
	font-size: 13px;
	font-weight: 600;
	color: #6e6a63;
	white-space: nowrap;
}

.art-head__read svg { flex: none; opacity: .75; }

@media (max-width: 580px) {
	.art-head__meta {
		gap: 10px 14px;
		margin: 18px 0 18px;
	}
}

/* ═══════════════════════════════════════════════════════════════════
   ПРАВАЯ РЕЛЬСА
   Значения из макета: «Сегодня» — тёмно-зелёная карточка #2F4A3A,
   остальные блоки белые с radius 16 и padding 16.
   ═══════════════════════════════════════════════════════════════════ */

.article__rail--right .art-rail-block {
	border-radius: 16px;
	padding: 16px;
}

/* ─────────────── Сегодня ─────────────── */
/* Раньше карточка была тёмно-зелёной (#2f4a3a) — под неё пришлось
   изобретать «осветлённые под фон» цвета стихий, и они не совпадали
   с каноническими цветами Грит из china-calendar. Перевёл на светлый
   кремовый фон — теперь работают настоящие цвета стихий: fire=#E63232,
   wood=#2E7D2A, water=#0F6FD9, earth=#7A4A1E, metal=#5C6B78. */
.art-today {
	background: #fcf7ed;
	border-color: #EAE0C4;
	padding: 18px;
	color: #16171A;
}

.art-today__head { margin-bottom: 14px; }

.art-today__eyebrow {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8A6A2E;
}

.art-today__cards {
	display: flex;
	gap: 10px;
}

.art-today__card {
	flex: 1;
	min-width: 0;
	background: #FFFFFF;
	border: 1px solid #EAE0C4;
	border-radius: 11px;
	padding: 12px;
}

.art-today__label {
	display: block;
	font-size: 11px;
	color: #8A857C;
	margin-bottom: 6px;
}

/* Столп читается сверху вниз: ствол, под ним ветвь — как в классической
   записи и как на /yun-vey/. Цвета — стихии соответствующего иероглифа,
   осветлённые под тёмный фон карточки. */
.art-today__pillar {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.art-today__hanzi,
.art-today__num {
	display: block;
	line-height: 1.05;
	color: #16171A;
}

.art-today__pillar {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	line-height: 1;
}

.art-today__hanzi {
	font-family: 'Noto Serif SC', 'Songti SC', serif;
	font-size: 42px;
	font-weight: 700;
	line-height: 1;
}

.art-today__hanzi + .art-today__hanzi {
	margin-top: 2px;
}

.art-today__num {
	font-size: 44px;
	font-weight: 800;
}

/* Канонические цвета стихий Ирины Грит — из assets/china-calendar/calendar.css.
   Те же самые используются в главном /bazi/, Ци Мене и всех расчётах.
   На светлом фоне карточки читаются как задумано. */
.art-today .el-wood,  .art-today .el-wood-soft  { color: #2E7D2A; }
.art-today .el-fire,  .art-today .el-fire-soft  { color: #E63232; }
.art-today .el-earth, .art-today .el-earth-soft { color: #7A4A1E; }
.art-today .el-metal, .art-today .el-metal-soft { color: #5C6B78; }
.art-today .el-water, .art-today .el-water-soft { color: #0F6FD9; }

.art-today__note {
	display: block;
	margin-top: 6px;
	font-size: 11px;
	line-height: 1.3;
	color: #6E6A63;
}

.art-today__tips {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 14px 0 0;
}

.art-today__tip {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
	color: rgba(255, 255, 255, .82);
}

.art-today__tip-mark {
	flex: none;
	margin-top: 2px;
	display: inline-flex;
}

.art-today__tip-mark--good { color: #8fbf9e; }
.art-today__tip-mark--bad { color: #d98d7b; }

.art-today__cta {
	display: block;
	margin-top: 14px;
	padding: 9px 10px;
	border-radius: 9px;
	background: transparent;
	border: 1px solid #C9B98A;
	color: #8A6A2E;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.art-today__cta:hover { background: #EFE5C8; border-color: #B08A4A; color: #6E4E1E; }

/* ─────────────── Инструменты по теме ─────────────── */
.art-tools__list,
.art-glossary__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.art-tools__item + .art-tools__item,
.art-glossary__item + .art-glossary__item {
	padding-top: 12px;
	border-top: 1px solid #efeeeb;
}

.art-tools__link {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	transition: transform .25s cubic-bezier(.2, .7, .3, 1);
}

.art-tools__link:hover { transform: translateX(3px); }

/* Превью инструмента — живая карточка с главной, ужатая целиком.
   Пропорции те же (384×200), поэтому ничего не обрезается.
   Анимации внутри глушим: правило проекта — не держать десятки
   бесконечных анимаций в покое, iOS Safari убивает такую вкладку. */
.art-tools__icon {
	flex: none;
	position: relative;
	width: 88px;
	height: 46px;
	border-radius: 10px;
	overflow: hidden;
	background: #f5f5f3;
}

.art-tools__native {
	position: absolute;
	top: 0;
	left: 0;
	width: 384px;
	transform: scale(.2292);   /* 88 / 384 */
	transform-origin: top left;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	pointer-events: none;
}

/* Карточка на главной высокая (min-height 400px) и прижимает визуал кверху
   отступами под заголовок. В рельсе заголовок не нужен — снимаем отступы
   и оставляем только сам визуал, тогда он занимает плитку целиком. */
.art-tools__native .tc {
	min-height: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	display: block !important;
}

.art-tools__native .tc__body { display: none !important; }

.art-tools__native .tc__visual {
	height: 200px !important;
	margin: 0 !important;
}

.art-tools__native * {
	animation: none !important;
	will-change: auto !important;
}

/* Готовая иллюстрация раздела вместо схематичной карточки */
.art-tools__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.art-tools__body { min-width: 0; }

.art-tools__name {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	color: #16171a;
}

.art-tools__sub {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	color: #8a857c;
}

/* ─────────────── Справочник ─────────────── */
.art-glossary__list { gap: 14px; }
.art-glossary__item + .art-glossary__item { padding-top: 14px; }

.art-glossary__link {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	text-decoration: none;
	color: inherit;
	transition: transform .25s cubic-bezier(.2, .7, .3, 1);
}

.art-glossary__link:hover { transform: translateX(3px); }

/* Значок раздела: картинка, SVG-глиф или иероглиф — всё в общем
   контейнере 40×40 и по центру, чтобы строки не разъезжались. */
.art-glossary__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 9px;
	overflow: hidden;
	background: #f5f5f3;
}

.art-glossary__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* SVG-глиф знака зодиака рисуется контуром — ему нужен воздух */
.art-glossary__icon .art-glossary__glyph {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.art-glossary__cn {
	font-family: 'Noto Serif SC', 'Songti SC', serif;
	font-size: 26px;
	line-height: 1;
	color: #a8322d;
}

.art-glossary__body { flex: 1; min-width: 0; }

.art-glossary__name {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: #16171a;
}

.art-glossary__desc {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.45;
	color: #8a857c;
}

.art-glossary__arrow {
	flex: none;
	margin-top: 2px;
	color: #c9c4bc;
	transition: transform .25s cubic-bezier(.2, .7, .3, 1), color .25s ease;
}

.art-glossary__link:hover .art-glossary__arrow {
	transform: translateX(3px);
	color: #a8322d;
}

/* ═══════════════════════════════════════════════════════════════════
   ВРЕЗКА В ТЕКСТЕ СТАТЬИ
   Баннеры переиспользуются готовые, здесь только обвязка: отступы,
   ширина и гашение анимаций.
   ═══════════════════════════════════════════════════════════════════ */
.art-inline-banner {
	margin: 40px 0;
	clear: both;
}

/* У баннера Ба Цзы PRO 12 плавающих пятен с бесконечной анимацией.
   На калькуляторе это один экран, а в статье он живёт в фоне часами —
   правило проекта: не держать десятки infinite-анимаций в покое,
   iOS Safari выгружает такую вкладку. */
.art-inline-banner .bzpro-up__blobs { display: none; }

.art-inline-banner .love-promo-sec,
.art-inline-banner .bzpro-upsell { margin: 0; }

/* ─────────────── Врезка «Натальная карта» ─────────────── */
.art-banner {
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
	border-radius: 20px;
	overflow: hidden;
	background: linear-gradient(135deg, #1b2942 0%, #2c3e63 55%, #3a5183 100%);
}

.art-banner__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	align-items: center;
	gap: 24px;
	padding: 28px 30px;
	color: #fff;
	text-decoration: none;
}

.art-banner__eyebrow {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #b9c6e4;
}

.art-banner__title {
	margin: 10px 0 0;
	font-family: 'Forum', Georgia, serif;
	font-size: 32px;
	line-height: 1.15;
	font-weight: 400;
	color: #fff;
}

.art-banner__desc {
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: #d3dcf0;
}

.art-banner__cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 20px;
	padding: 12px 26px;
	border-radius: 999px;
	background: #fff;
	color: #1b2942;
	font-size: 15px;
	font-weight: 700;
	transition: background .2s ease, transform .2s ease;
}

.art-banner__link:hover .art-banner__cta {
	background: #eef2fa;
	transform: translateX(2px);
}

.art-banner__arrow { transition: transform .2s ease; }
.art-banner__link:hover .art-banner__arrow { transform: translateX(3px); }

/* Колесо — та же карточка, что на главной, ужатая под врезку */
.art-banner__visual {
	position: relative;
	width: 260px;
	height: 260px;
	overflow: hidden;
	justify-self: end;
}

.art-banner__native {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 384px;
	transform: translate(-50%, -50%) scale(.6771);   /* 260 / 384 */
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	pointer-events: none;
}

.art-banner__native .tc {
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;          /* рамка карточки попадала в кадр
	                                  вертикальными полосками по бокам */
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	display: block !important;
}

.art-banner__native .tc::after { display: none !important; }
.art-banner__native .tc__body { display: none !important; }

.art-banner__native .tc__visual {
	height: 384px !important;
	margin: 0 !important;
}

.art-banner__native * {
	animation: none !important;
	will-change: auto !important;
}

@media (max-width: 720px) {
	.art-banner__link {
		grid-template-columns: minmax(0, 1fr);
		padding: 24px 22px;
	}

	.art-banner__title { font-size: 26px; }

	/* На узком экране колесо съедает пол-экрана и отодвигает кнопку —
	   на телефоне важнее текст и переход. */
	.art-banner__visual { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   Компактная геометрия врезок.
   Оба готовых баннера рассчитаны на всю ширину страницы (1200px+),
   где текст и визуал стоят рядом свободно. В колонке статьи 720px
   текст сжимается вдвое, строк становится вдвое больше — баннер
   вырастает на целый экран. Поэтому здесь своя сетка и кегли;
   на страницах калькуляторов баннеры остаются как были.
   ───────────────────────────────────────────────────────────── */

/* ── Ба Цзы PRO ── */
.art-inline-banner .bzpro-up {
	grid-template-columns: minmax(0, 1fr) 300px;
	border-radius: 18px;
}

.art-inline-banner .bzpro-up__text { padding: 26px 28px; }

.art-inline-banner .bzpro-up__title {
	font-size: 28px;
	margin-bottom: 12px;
}

.art-inline-banner .bzpro-up__desc {
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 18px;
}

.art-inline-banner .bzpro-up__cta {
	padding: 12px 24px;
	font-size: 14px;
}

.art-inline-banner .bzpro-up__visual { padding: 22px 22px 22px 0; }
.art-inline-banner .bzpro-up__row { gap: 6px; }

.art-inline-banner .bzpro-up__tab {
	width: 66px;
	height: 158px;
	padding: 9px 4px 11px;
}

.art-inline-banner .bzpro-up__stem { font-size: 30px; height: 36px; margin-top: 12px; }
.art-inline-banner .bzpro-up__branch { font-size: 19px; margin-top: 10px; }
.art-inline-banner .bzpro-up__nayin { font-size: 10px; }
.art-inline-banner .bzpro-up__lbl { font-size: 9px; }

/* ── Любовная совместимость ── */
.art-inline-banner .love-promo {
	grid-template-columns: minmax(0, 1fr) 260px;
	padding: 26px 28px;
	border-radius: 18px;
}

.art-inline-banner .love-promo .love-promo__title {
	font-size: 27px;
	line-height: 1.15;
}

.art-inline-banner .love-promo .love-promo__desc {
	font-size: 14px;
	line-height: 1.5;
}

.art-inline-banner .love-promo .lc-wheel-wrap,
.art-inline-banner .love-promo__visual {
	max-width: 260px;
	margin-left: auto;
}

/* ── Натальная карта ── */
.art-inline-banner .art-banner__link {
	grid-template-columns: minmax(0, 1fr) 250px;
	padding: 26px 28px;
}

.art-inline-banner .art-banner__title { font-size: 28px; }
.art-inline-banner .art-banner__desc { font-size: 14px; }

.art-inline-banner .art-banner__visual {
	width: 250px;
	height: 250px;
}

.art-inline-banner .art-banner__native {
	transform: translate(-50%, -50%) scale(.651);   /* 250 / 384 */
}

@media (max-width: 760px) {
	.art-inline-banner .bzpro-up,
	.art-inline-banner .love-promo,
	.art-inline-banner .art-banner__link {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Столпы должны занимать всю ширину внутреннего контента.
	   Фиксированные 66px из десктопных правил врезки перебивали
	   мобильную сетку баннера, и ряд прижимался влево. */
	.art-inline-banner .bzpro-up__visual { padding: 8px 20px 24px; }
	.art-inline-banner .bzpro-up__altar { width: 100%; }

	.art-inline-banner .bzpro-up__row {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 8px;
		width: 100%;
	}

	.art-inline-banner .bzpro-up__tab {
		width: 100%;
		height: 190px;
		padding: 11px 4px 13px;
	}

	.art-inline-banner .bzpro-up__stem { font-size: 34px; height: 42px; margin-top: 18px; }
	.art-inline-banner .bzpro-up__branch { font-size: 21px; margin-top: 16px; }
	.art-inline-banner .bzpro-up__nayin { font-size: 11px; }
	.art-inline-banner .bzpro-up__lbl { font-size: 10px; }
}


/* ═══════════════════════════════════════════════════════════════════
   БЛОКИ КОЛОНОК ВНУТРИ ТЕКСТА
   На телефоне (69% трафика) боковых колонок нет. Выносить эти блоки
   под статью бесполезно — до конца лонгрида доходят единицы, именно
   там и теряется читатель. Поэтому они встают прямо в текст, между
   разделами, и чередуются с баннерами.
   На десктопе скрыты: там работают настоящие колонки.
   ═══════════════════════════════════════════════════════════════════ */
.art-inline-block {
	margin: 36px 0;
	clear: both;
}

@media (min-width: 1200px) {
	.art-inline-block { display: none; }
}

/* Внутри текста блок шире колонки — раскладываем карточки в ряд,
   иначе четыре обложки подряд растянут статью на лишний экран. */
.art-inline-block .art-rail-block {
	border-radius: 16px;
	padding: 18px;
}

.art-inline-block .art-rail-block__eyebrow,
.art-inline-block .art-rail-block__head { margin-bottom: 14px; }

.art-inline-block .art-related__list {
	flex-direction: row;
	gap: 14px;
}

.art-inline-block .art-related__item {
	flex: 1 1 0;
	min-width: 0;
	padding-top: 0;
	border-top: 0;
}

.art-inline-block .art-related__cover { height: 120px; }
.art-inline-block .art-related__title { font-size: 15px; }
.art-inline-block .art-related__meta { font-size: 12px; }

.art-inline-block .art-podcasts__title,
.art-inline-block .art-tools__name { font-size: 15px; }

.art-inline-block .art-tools__sub,
.art-inline-block .art-podcasts__meta { font-size: 12px; }

/* Превью инструментов крупнее: в тексте есть место */
.art-inline-block .art-tools__icon {
	width: 104px;
	height: 54px;
}

.art-inline-block .art-tools__native {
	transform: scale(.2708);   /* 104 / 384 */
}

@media (max-width: 580px) {
	/* На узком экране ряд карточек не помещается — возвращаем колонку */
	.art-inline-block .art-related__list { flex-direction: column; }

	.art-inline-block .art-related__item + .art-related__item {
		padding-top: 14px;
		border-top: 1px solid #efeeeb;
	}

	.art-inline-block .art-related__cover { height: 150px; }
}

.art-head__avatar--letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(140deg, #e4d6be, #c9a97c);
}

/* ═══════════════════════════════════════════════════════════════════
   ПУСТАЯ БЕЛАЯ ПАНЕЛЬ ПОД ТУЛБАРОМ (фикс)
   В style.css у .article__aside осталась старая мобильная панель:
   position:fixed, width:100%, background:#fff, border-top, паддинги.
   Кнопки из неё переехали в pill-тулбар, но сама панель продолжала
   рисоваться белой полосой под ним — 43px пустого белого.
   Обнулить её в article-single.css не выходило: style.css подключается
   вторым заходом ПОСЛЕ всех файлов темы, поэтому нужна специфичность
   выше одного класса — отсюда .article перед .article__aside.
   Контейнер оставляем на месте: внутри него модалки «Оглавление»
   и «Поделиться», они позиционируются сами (position:fixed).
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
	.article .article__aside {
		height: 0;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		pointer-events: none;
	}

	.article .article__aside .modal { pointer-events: auto; }
}

/* ─────────────────────────────────────────────────────────────
   Обсуждение — в колонке статьи.
   Блок лежит внутри сетки, поэтому встаёт ровно под текстом,
   а не по центру страницы: колонка статьи смещена рельсами.
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
	.article__wrap .art-comments {
		grid-column: 1;
		grid-row: 2;
		width: 100%;
		max-width: 720px;
		margin-left: 0;
		margin-right: 0;
	}

	/* Левая рельса на этой ширине лежала во второй строке — уступает
	   место обсуждению и уходит ниже. */
	.article__wrap .article__rail--left { grid-row: 3; }
}

@media (min-width: 1440px) {
	.article__wrap .art-comments { grid-column: 2; }
	.article__wrap .article__rail--left { grid-row: 1; }
}

/* ─────────────── Ссылка на обсуждение в шапке статьи ───────────────
   Тот же чип, что и время чтения, но кликабельный: читатель сразу
   видит, есть ли под статьёй разговор, и попадает в него одним нажатием.
   ─────────────────────────────────────────────────────────────────── */
.art-head__discuss {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border: 1px solid rgba(26, 24, 48, .1);
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: #4a473f;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .22s ease, color .22s ease, background .22s ease, transform .22s ease;
}

.art-head__discuss svg { flex: none; opacity: .7; }

.art-head__discuss:hover {
	border-color: rgba(201, 119, 74, .4);
	background: rgba(201, 119, 74, .06);
	color: #c9774a;
	transform: translateY(-1px);
}

.art-head__discuss-count {
	min-width: 18px;
	padding: 1px 6px;
	border-radius: 999px;
	background: #2f5c4a;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-align: center;
}

.art-head__discuss-count[hidden] { display: none; }

/* Подсветка блока, когда пришли по ссылке — иначе непонятно,
   куда именно прокрутило. */
@keyframes ig-comments-highlight {
	0%   { box-shadow: 0 0 0 0 rgba(47, 92, 74, .28); }
	100% { box-shadow: 0 0 0 14px rgba(47, 92, 74, 0); }
}

.art-comments.is-targeted .art-comments__card {
	animation: ig-comments-highlight 1.1s ease-out;
}

/* iOS jetsam-fix 2026-08-02: статьи отдают 500-700KB HTML — на iPhone c iOS 18 WebKit
   убивает вкладку по памяти и страница перезагружается (см. memory ios-safari-reload-fix).
   content-visibility выгружает из памяти рендера блоки ниже статьи, пока не доскроллены.
   Тело статьи (.article__part-content) НЕ трогаем — article-single.js меряет его offsetHeight
   для прогресс-бара. Слайдеры (.tools-rich, .section-blogslider) не трогаем — Swiper. */
@supports (content-visibility: auto) {
	.article .art-comments,
	.article .article__common-cards,
	.article .section-category-podcasts,
	.article .section-faq_in-article,
	.article .blog__section-categories {
		content-visibility: auto;
		contain-intrinsic-size: auto 520px;
	}
}