/* Start:/local/templates/vine/components/bitrix/news.detail/vine_article/style.css?178733073515260*/
/* =========================================================================
   Страница «Статья» — bitrix:news.detail / vine_article
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y, фрейм 1717:8184.

   Размеры из макета:
     контейнер            — 1248, шаг между блоками 24;
     баннер (1717:8189)   — 1248×298, фон-картинка cover, БЕЗ затемнения,
                            padding 16, колонка с шагом 10, прижата влево;
                            заголовок 48px, подзаголовок 40px, оба белые;
                            низ: дата 18px слева, кнопка 126×40 справа;
     лид (1717:8195)      — 18px, на всю ширину;
     тело статьи          — h2 40px (24 сверху, 8 снизу), абзацы 18px
                            с интервалом 21, списки с отступом 27;
                            .article-cols 659 + 8 + 581;
                            .article-video 600×380 с кругом 64 (рамка 5);
                            .article-gallery — три кадра 405×223 с шагом 16,
                            скругление 16;
     «Материалы …»        — заголовок 40px, ниже 24 строка ссылок с шагом 32;
     плашки источника,    — фон #C4C4C4, радиус 16, padding 16, текст 18px;
     сносок, копирайта
     и тегов              — теги прижаты вправо, шаг 32.

   Общий слой (шрифт, токены, контейнер, типографика) лежит в
   template_styles.css и здесь не переопределяется.
   ========================================================================= */

.article {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	max-width: var(--vine-container, 1248px);
}

/* ------------------------------------------------------- 1. БАННЕР (1717:8189) */
/* Затемнения в макете нет: белый текст лежит прямо на фотографии. */
.article__banner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	/* Статья (1717:8189) — 298, новость (1716:7703) — 144: у новости в
	   баннере только заголовок, без подзаголовка, даты и кнопки. Высоту
	   задаём минимумом под каждый режим, остальное набирает содержимое. */
	min-height: 298px;
	padding: 16px;
	background-color: transparent;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #FFFFFF;
}

/* Картинки нет — белый текст на белом фоне не читается, переключаем на чёрный.
   В макете такого состояния нет, это решение шаблона. */
.article__banner--plain {
	color: var(--vine-color-text, #000000);
}

.article .article__title {
	margin: 0;
	font-size: 48px;
	font-weight: 400;
	color: inherit;
}

.article .article__subtitle {
	margin: 0;
	font-size: 40px;
	font-weight: 400;
	color: inherit;
}

/* дата слева, кнопка справа; строка прижата к низу баннера */
.article__banner-bottom {
	display: flex;
	gap: 10px;
	align-items: flex-end;
	justify-content: space-between;
	width: 100%;
	margin-top: auto;
}

.article__date {
	font-size: 18px;
	font-weight: 400;
	color: inherit;
}

.article__share {
	flex: 0 0 auto;
	width: 126px;
	height: 40px;
	padding: 9px 12px 10px;
	border: 1px solid var(--vine-color-text, #000000);
	border-radius: 5px;
	background: var(--vine-color-bg, #FFFFFF);
	color: var(--vine-color-text, #000000);
	font-family: inherit;
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
	text-align: center;
	white-space: nowrap;
}

/* ---------------------------------------------------------- 2. ЛИД (1717:8195) */
.article__lead {
	width: 100%;
	font-size: 18px;
	font-weight: 400;
	color: var(--vine-color-text, #000000);
}

/* ------------------------------------------------------------- 4. ТЕЛО СТАТЬИ */
/* DETAIL_TEXT приходит из редактора как есть — стили задаёт шаблон. */
.article .article-body {
	font-size: 18px;
	font-weight: 400;
	color: var(--vine-color-text, #000000);
}

.article .article-body > * {
	margin: 0;
}

/* интервал между абзацами и блоками — 21px (пустая строка макета) */
.article .article-body > * + *,
.article .article-body .article-cols__text > * + * {
	margin-top: 21px;
}

.article .article-body h2 {
	margin-top: 24px;
	margin-bottom: 8px;
	font-size: 40px;
	font-weight: 400;
	color: var(--vine-color-text, #000000);
}

.article .article-body > h2:first-child {
	margin-top: 0;
}

/* после заголовка — только его собственные 8px, а не общие 21 */
.article .article-body h2 + * {
	margin-top: 0;
}

.article .article-body p {
	font-size: 18px;
	color: var(--vine-color-text, #000000);
}

.article .article-body ul,
.article .article-body ol {
	padding-inline-start: 27px;
}

.article .article-body ul {
	list-style: disc;
}

.article .article-body ol {
	list-style: decimal;
}

.article .article-body li {
	font-size: 18px;
}

.article .article-body strong,
.article .article-body b {
	font-weight: 700;
}

/* Медиа-блоки в макете стоят отдельными фреймами с шагом 24 (1717:8233,
   1717:8215), а после двух колонок идёт шаг 8 (1729:9445). */
.article .article-body > .article-video,
.article .article-body > .article-gallery,
.article .article-body > .article-video + *,
.article .article-body > .article-gallery + * {
	margin-top: 24px;
}

.article .article-body > .article-cols + * {
	margin-top: 8px;
}

/* но сразу после заголовка шаг всегда 8 — им управляет margin-bottom у h2 */
.article .article-body > h2 + * {
	margin-top: 0;
}

/* --- две колонки: текст 659 + картинка 581 (1729:9448) */
.article .article-body .article-cols {
	display: flex;
	gap: 8px;
	justify-content: space-between;
	align-items: flex-start;
}

.article .article-body .article-cols__text {
	flex: 0 0 659px;
	max-width: 659px;
}

.article .article-body .article-cols__media {
	flex: 0 0 581px;
	max-width: 581px;
}

.article .article-body .article-cols__media img {
	width: 581px;
	max-width: 100%;
	height: 310px;
	object-fit: contain;
	border-radius: 0;
}

/* --- видео 600×380 с кнопкой play (1717:8233) */
.article .article-body .article-video {
	position: relative;
	width: 600px;
	max-width: 100%;
	height: 380px;
}

.article .article-body .article-video__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Круг 64×64, рамка 5px, радиус 40 — из макета. Вектора «плей» в макете нет,
   поэтому треугольник рисуем символом ▶. */
.article .article-body .article-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 5px solid var(--vine-color-text, #000000);
	border-radius: 40px;
	background: var(--vine-color-bg, #FFFFFF);
	color: var(--vine-color-text, #000000);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.article .article-body .article-video__play::before {
	content: "\25B6";
}

/* --- галерея: кадры в ряд, скругление 16, курсор «лупа» (1717:8215) */
.article .article-body .article-gallery {
	display: flex;
	gap: 16px;
}

.article .article-body .article-gallery img {
	flex: 1 1 0;
	min-width: 0;
	width: 100%;
	height: auto;
	aspect-ratio: 570 / 313;
	object-fit: cover;
	border-radius: 16px;
	/* Курсор — та самая лупа 24×24 из макета (1717:8222): в макете она лежит
	   с тенью поверх первого кадра в произвольной точке (31; 4), то есть
	   нарисована как указатель мыши, а не как значок на фотографии. Файл уже
	   есть в шаблоне (images/magnifier.svg — тот же круг r 8.5 обводкой 3 и та
	   же ручка длиной 11,3137, что в макете), новый ассет не заводим. Точка
	   привязки — центр линзы. Где SVG-курсоры не работают, остаётся zoom-in. */
	cursor: url("/local/templates/vine/images/magnifier.svg") 14 10, zoom-in;
}

/* --- ссылка на сноску */
.article .article-body .article-footnote-link {
	color: var(--vine-color-link, #0077FF);
	text-decoration: underline dotted;
}

/* ------------------------------- 5. МАТЕРИАЛЫ ДЛЯ СКАЧИВАНИЯ (1717:8283) */
.article__docs {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.article .article__docs-title {
	margin: 0;
	font-size: 40px;
	font-weight: 400;
	color: var(--vine-color-text, #000000);
}

.article__docs-list {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
}

.article__doc {
	font-size: 18px;
	color: var(--vine-color-link, #0077FF);
	text-decoration: underline;
}

/* --------------------------------------- ПЛАШКИ: ИСТОЧНИК, СНОСКИ, КОПИРАЙТ, ТЕГИ */
.article__source,
.article__footnotes,
.article__copyright,
.article__tags {
	padding: 16px;
	border-radius: 16px;
	background: var(--vine-color-card, #C4C4C4);
	font-size: 18px;
	font-weight: 400;
	color: var(--vine-color-text, #000000);
}

/* --- 6. источник (1717:8280): «Источник: » жирным, значение — ссылкой */
.article .article__source {
	margin: 0;
}

.article__source-label {
	font-weight: 700;
}

.article__source-link {
	color: var(--vine-color-link, #0077FF);
	text-decoration: underline;
}

/* --- 7. сноски (1717:8281): нумерация уже внутри текста свойства */
.article .article__footnote {
	margin: 0;
}

.article .article__footnote + .article__footnote {
	margin-top: 21px;
}

/* --- 8. копирайт (1717:8282): два абзаца без зазора — в макете это две строки */
.article .article__copyright-line {
	margin: 0;
}

/* --- 9. теги (1722:8618): строка прижата вправо, шаг 32 */
.article__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	justify-content: flex-end;
	align-items: baseline;
}

.article__tags-label {
	color: var(--vine-color-text, #000000);
	text-decoration: none;
}

.article__tag {
	color: var(--vine-color-link, #0077FF);
	text-decoration: underline;
}

/* Дата новости (493:13981): в отличие от статьи она стоит не в баннере,
   а отдельной строкой под ним — 14px Roboto Italic, чёрная. */
.article__date--outside {
	margin: 0;
	font-size: var(--vine-fz-small, 14px);
	font-style: italic;
	line-height: normal;
	color: var(--vine-color-text, #000000);
}

/* Лид новости (493:13982) — жирный абзац перед цитатой. */
.article-body .article-lead {
	font-weight: 700;
}

/* Цитата-врезка новости (493:13983): крупный текст без рамки и фона. */
.article-body .article-quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: var(--vine-fz-h2, 34px);
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text, #000000);
}

/* Тот же двухколоночный блок, но картинка слева (493:13984). */
.article-body .article-cols--media-first .article-cols__media {
	order: -1;
}

/* Баннер новости: только заголовок, минимум по макету 144. */
.article__banner--news {
	min-height: 144px;
}

/* ------------------------------------------ 10. МОДАЛКА «ФОТО» (1717:8148) */
/* Увеличение одного кадра из ряда .article-gallery. Оболочка общая с модалкой
   города и модалкой зала: css/contacts-modal.css + js/contacts-modal.js. Она
   строит подложку, окно и шапку с крестиком и держит закрытие крестиком,
   Escape и кликом по подложке, ловушку фокуса и замок прокрутки. Здесь только
   габариты окна по макету: ключ модалки photo оболочка переносит в
   модификатор .contacts-modal__window--photo.

   Макет 1717:8148 — окно 552×371,97: рамка 1px #000, радиус 16, padding 32,
   колонка с шагом 8; шапка 1717:8150 — 488×32, в ней только кнопка закрытия;
   кадр 1717:8171 — 488×267,97, пропорция 570/313, object-fit: cover, БЕЗ
   скругления. Стрелок, счётчика кадров, миниатюр и подписи в макете нет.

   Селекторы двухклассовые: в css/contacts-modal.css габариты окна и отступы
   контента переопределяются медиазапросами одноклассовыми правилами, и при
   равной силе исход зависел бы от порядка подключения файлов.

   ПРО padding 31 вместо 32. Рамка в Figma нарисована внутрь фрейма и места в
   раскладке не занимает: ширина фрейма 552 и при этом дети стоят на x = 32 и
   имеют ширину 488 (32 + 488 + 32 = 552), высота 371,97 = 32 + 32 шапки + 8 +
   267,97 кадра + 32. При box-sizing: border-box такие числа даёт только
   padding 31 + рамка 1: внешние 552×371,97 и содержимое ровно 488 на x = 32.
   С padding 32 содержимое ужалось бы до 486, а если бы рамка вылезала наружу
   (content-box), окно стало бы 554 вместо 552. */
.contacts-modal .contacts-modal__window--photo {
	gap: 8px;
	box-sizing: border-box;
	width: 552px;
	max-width: 100%;
	min-height: 0;
	padding: 31px;
	border: 1px solid var(--vine-color-text, #000000);
	border-radius: 16px;
}

/* Контейнер окна — сам кадр и ничего больше: отступы и шаг оболочки,
   рассчитанные на контакты, здесь снимаем. */
.contacts-modal .contacts-modal__window--photo .contacts-modal__content {
	gap: 0;
	padding: 0;
}

.article-photo__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 570 / 313;
	object-fit: cover;
}

/* End */


/* Start:/local/templates/vine/css/contacts-modal.css?17873146455499*/
/* =========================================================================
   ОБОЛОЧКА МОДАЛКИ «Контакты — Город» (макет 2023:13109).

   Здесь только каркас окна: подложка, само окно 1280x986, кнопка закрытия,
   шапка с ней и служебное скрытие неактивных панелей городов.
   Содержимое (заголовок, вкладки, панель офиса, карта, карусель
   сотрудников) размечает и оформляет шаблон компонента
   news.list/contacts-city — его классы в этом файле не описаны.

   Разметку подложки и окна строит на лету js/contacts-modal.js вокруг
   контейнера [data-contacts-modal], который уже стоит на странице.

   Габариты макета (узел 2023:13109):
     окно            1280 x 986, белое, padding 16, без рамки и скругления;
     кнопка закрытия 2063:17660 — 32x32, рамка 1px #000, радиус 5,
                     иконка 24x24, отступы сверху и справа по 16;
     контент         2023:13111 — 1248 x 912, начинается на y=58,
                     то есть 16 (padding) + 32 (кнопка) + 10 (зазор).

   ВНЕ МАКЕТА: затемнённой подложки в макете нет — сделана
   rgba(0, 0, 0, 0.4), это решение вёрстки, а не значение из Figma.
   ========================================================================= */

/* ------------------------------------------------------------- подложка */

.contacts-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow: auto;
	padding: 16px 0;
	background: rgba(0, 0, 0, 0.4);
}

.contacts-modal[hidden] {
	display: none;
}

/* Пока окно открыто, страница под ним не прокручивается.
   Класс вешает скрипт на <html> и <body>. */
.contacts-modal__body-lock {
	overflow: hidden;
}

/* ----------------------------------------------------------------- окно */

.contacts-modal__window {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 1280px;
	max-width: 100%;
	min-height: 986px;
	margin: auto;
	padding: 16px;
	background: var(--vine-color-bg, #FFFFFF);
	font-family: var(--vine-font, "Roboto", "Helvetica Neue", Arial, sans-serif);
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
	color: var(--vine-color-text, #000000);
}

/* Шапка 32px: в макете в ней только кнопка закрытия, прижатая вправо. */
.contacts-modal__head {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	height: 32px;
}

.contacts-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--vine-color-text, #000000);
	border-radius: var(--vine-radius-btn, 5px);
	background: var(--vine-color-bg, #FFFFFF);
	cursor: pointer;
}

.contacts-modal__close img {
	display: block;
	width: 24px;
	height: 24px;
}

/* До того как скрипт обернёт контейнер в окно, он не должен мелькать в
   потоке страницы: класс contacts-modal__content ставит на него скрипт. */
[data-contacts-modal]:not(.contacts-modal__content) {
	display: none;
}

/* Контейнер [data-contacts-modal] — фрейм 2023:13111 1248x912.
   Ширину и внутренние отступы задаёт скрипт этим классом, чтобы шаблон
   контента не зависел от того, чем его обернули. */
.contacts-modal__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	padding: 0 16px;
}

/* --------------------------------------------- переключение городов */
/* Активную вкладку и панель отмечает классом is-active скрипт, а рисует их
   style.css шаблона contacts-city. Здесь только скрытие неактивных панелей:
   без него все города показались бы разом. Правило намеренно не назначает
   display активной панели — её раскладку задаёт шаблон. */

[data-city-panel]:not(.is-active) {
	display: none;
}

/* -------------------------------------------------------------- узкий экран */
/* В макете мобильных состояний модалки нет. Ниже 1312px (1280 окна + 2x16
   подложки) окно занимает всю доступную ширину, а жёсткая высота снимается,
   чтобы содержимое не обрезалось. */

@media (max-width: 1311px) {
	.contacts-modal {
		padding: 16px;
	}

	.contacts-modal__window {
		width: 100%;
		min-height: 0;
	}
}

@media (max-width: 640px) {
	.contacts-modal {
		padding: 8px;
	}

	.contacts-modal__window {
		padding: 8px;
	}

	.contacts-modal__content {
		padding: 0;
	}
}

/* End */


/* Start:/local/templates/vine/components/bitrix/news.list/vine_other_materials/style.css?17871527486105*/
/* =========================================================================
   «Другие материалы» — вкладки над серой панелью с карточками
   bitrix:news.list / vine_other_materials

   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y:
     1722:8671 — блок целиком, 1248x225;
     1722:8635 — строка вкладок, 470x41;
     1717:8284 — серая панель, 1248x184.

   Раскладка панели один в один повторяет макет:
     1248 − 16 (padding 8 слева и справа) = 1232;
     1232 − 140 (кнопка) − 16 (шаг) = 1076 на список;
     1076 − 32 (два шага по 16) = 1044 → три карточки по 348.
   ========================================================================= */

.other-materials {
	display: flex;
	flex-direction: column;
	max-width: var(--vine-container, 1248px);
}

/* двойной класс — чтобы перебить общее правило .vine-main h2 из базового слоя */
.other-materials .other-materials__title {
	margin: 0 0 var(--vine-gap, 16px);
	font-size: var(--vine-fz-h1, 40px);
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text, #000000);
	word-break: break-word;
}

/* --------------------------------------------------------------- ВКЛАДКИ */
/* Встык, без зазора: вкладки — обычные ссылки на свои разделы, активная
   рисуется span'ом. Клиентского переключения в макете не показано. */
.other-materials__tabs {
	display: flex;
	align-items: flex-start;
	min-width: 0;
}

.other-materials__tab {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	box-sizing: border-box;
	height: 41px;
	padding: 10px;
	border: 1px solid var(--vine-color-text, #000000);
	border-bottom: 0;                 /* снизу рамки нет — вкладка стоит на панели */
	border-radius: var(--vine-radius, 8px) var(--vine-radius, 8px) 0 0;
	background: none;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text, #000000);
	white-space: nowrap;
	text-decoration: none;
}

.other-materials__tab--active {
	background: var(--vine-color-text, #000000);
	color: var(--vine-color-bg, #FFFFFF);
}

/* ------------------------------------------------------- СЕРАЯ ПАНЕЛЬ */
/* Скругления у панели нет — только у карточек внутри. */
.other-materials__panel {
	display: flex;
	align-items: flex-start;
	gap: var(--vine-gap, 16px);
	box-sizing: border-box;
	width: 100%;
	padding: var(--vine-pad-card, 8px);
	background: var(--vine-color-card, #C4C4C4);
	border-radius: 0;
}

.other-materials__list {
	display: flex;
	align-items: flex-start;
	gap: var(--vine-gap, 16px);
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

/* ------------------------------------------------------------- КАРТОЧКА */
/* 348x168: картинка 152x152 слева, справа колонка с названием и датой */
.other-materials__item {
	display: flex;
	align-items: flex-start;
	align-self: stretch;
	gap: var(--vine-gap, 16px);
	flex: 1 1 0;
	box-sizing: border-box;
	min-width: 0;
	padding: var(--vine-pad-card, 8px);
	background: var(--vine-color-bg, #FFFFFF);
	border-radius: var(--vine-radius, 8px);
}

.other-materials__pic {
	display: block;
	flex: 0 0 152px;
	width: 152px;
	height: 152px;
	overflow: hidden;
}

/* без скругления — в макете у картинки его нет */
.other-materials__img {
	display: block;
	width: 152px;
	height: 152px;
	object-fit: cover;
	border-radius: 0;
}

.other-materials__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--vine-gap-sm, 8px);
	flex: 1 1 0;
	min-width: 0;
}

/* двойной класс — чтобы перебить общее правило .vine-main h3 из базового слоя */
.other-materials .other-materials__name {
	margin: 0;
	width: 100%;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 700;
	line-height: normal;
	color: var(--vine-color-text, #000000);
	word-break: break-word;
}

.other-materials__name-link {
	color: inherit;
	text-decoration: none;
}

.other-materials__name-link:hover,
.other-materials__name-link:focus {
	color: inherit;
	text-decoration: underline;
}

.other-materials__date {
	margin: 0;
	width: 100%;
	font-size: var(--vine-fz-small, 14px);
	font-style: italic;
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text, #000000);
	word-break: break-word;
}

/* ------------------------------------------------------ КНОПКА СПРАВА */
/* 140 шириной, растянута на высоту ряда карточек */
.other-materials__all {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	flex: 0 0 140px;
	box-sizing: border-box;
	width: 140px;
	padding: 9px 12px 10px;
	background: var(--vine-color-btn, #151515);
	border: 1px solid var(--vine-color-text, #000000);
	border-radius: var(--vine-radius-btn, 5px);
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-btn-text, #FFFFFF);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

/* ------------------------------------------------------------- АДАПТИВ */
/* В макете не задан: на узком экране вкладки прокручиваются вбок,
   карточки и кнопка встают в колонку. */
@media (max-width: 900px) {
	.other-materials__tabs {
		overflow-x: auto;
	}

	.other-materials__panel {
		flex-wrap: wrap;
	}

	.other-materials__list {
		flex-wrap: wrap;
		width: 100%;
	}

	.other-materials__item {
		flex: 1 1 100%;
	}

	.other-materials__all {
		flex: 1 1 100%;
		width: 100%;
		padding-top: 9px;
		padding-bottom: 10px;
	}
}

/* End */
/* /local/templates/vine/components/bitrix/news.detail/vine_article/style.css?178733073515260 */
/* /local/templates/vine/css/contacts-modal.css?17873146455499 */
/* /local/templates/vine/components/bitrix/news.list/vine_other_materials/style.css?17871527486105 */