/* Start:/local/templates/vine/css/history-page.css?17873210673072*/
/*
	Страница «История» (макет 2095:21745) — блоки, у которых нет своего компонента:
	шапка с H1 и подзаголовком (2095:22079), блок-призыв (2100:22421)
	и заголовок «Лента новостей» (2095:21844).

	Сама лента вех (разделители между строками таймлайна, отступы колонок)
	живёт в style.css шаблона news.list/history-timeline — здесь её нет.
	Карточки новостей описаны в style.css шаблона news-main.

	Кегли заголовков пишутся с `.vine-main`, иначе общее правило
	`.vine-h2, .vine-main h2` перебивает макетное значение.
*/

/* ------------------------------------ Шапка (2095:22079), 1248×182, отступ 8 */

/*
	Фон #C4C4C4 и скругление 8px — из макета (см. заливку фрейма 2095:22079),
	это тот же тон, что у блока-призыва ниже.
*/
.history-head {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap);
	align-items: flex-start;
	max-width: var(--vine-container);
	padding: var(--vine-gap-sm);
	background: var(--vine-color-card);
	border-radius: var(--vine-radius);
}

/*
	8 + 56 + 16 + 94 + 8 = 182px — высота макетного фрейма.
	Интерлиньяж H1 задан числом (а не `normal`), иначе Roboto добавляет
	четверть пикселя и блок перестаёт совпадать с макетом.
*/
.vine-main .history-head__title {
	margin: 0;
	font-size: 48px;
	font-weight: 400;
	line-height: 56px;
	color: var(--vine-color-text);
}

.vine-main .history-head__subtitle {
	margin: 0;
	font-size: 40px;
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text);
}

/* ------------------------------------------- Блок-призыв (2100:22421), 1248 */

/* Рамки и тени в макете нет — только заливка и скругление 24px. */
.history-callout {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap);
	align-items: flex-start;
	max-width: var(--vine-container);
	padding: 24px;
	background: var(--vine-color-card);
	border: 0;
	border-radius: 24px;
	box-shadow: none;
}

/* 1248 − 24 − 24 = 1200px — ширина контента в макете */
.history-callout p {
	width: 100%;
	max-width: 1200px;
	margin: 0;
	font-size: var(--vine-fz-text);
	line-height: normal;
	color: var(--vine-color-text);
}

/* первый абзац набран Bold (2099:22411) */
.history-callout__lead,
.history-callout > p:first-of-type {
	font-weight: 700;
}

/* ---------------------------------- «Лента новостей» (2095:21844), 1248×47 */

.vine-main .history-news-title {
	margin: 0 0 var(--vine-gap);
	font-size: 40px;
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text);
}

/* End */


/* Start:/local/templates/vine/components/bitrix/news.list/history-timeline/style.css?17873216348822*/
/*
	Таймлайн «История компании» (макет 2097:22107, 2098:22108, 2098:22130,
	2098:22152, 2098:22174).

	Строка — 1248px, flex, gap 32, align-items: flex-start; три колонки
	348 / 488 (flex:1) / 348. Стороны чередуются, центральная колонка не
	зеркалится никогда: у чётных строк порядок колонок переставляет order,
	чтобы в разметке годы шли перед текстом, а не после картинок.

	Пунктир «Линия» вариант Black/5/Dashed рисуем на CSS: из макета взяты
	stroke-width 5 и stroke-dasharray 25 25, то есть штрих 25 и пропуск 25.
	Это простая геометрия, отдельная иконка тут не нужна.
*/

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

/* Разделитель строк — узел «Линия» 1248×16: штрих 5px, в макете он лежит
   на y = 5..10 внутри полосы 16px, поэтому padding 5px сверху и 6px снизу. */
.vine-history__divider {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 16px;
	padding: 5px 0 6px;
}

.vine-history__divider::before {
	content: "";
	display: block;
	height: 5px;
	background-image: repeating-linear-gradient(
		to right,
		#000000 0,
		#000000 25px,
		transparent 25px,
		transparent 50px
	);
}

.vine-history__row {
	display: flex;
	gap: 32px;
	align-items: flex-start;
	width: 100%;
}

/* Зеркалим только боковые колонки: текст всегда посередине и всегда слева. */
.vine-history__row--even > .vine-history__pics {
	order: 1;
}

.vine-history__row--even > .vine-history__text {
	order: 2;
}

.vine-history__row--even > .vine-history__side {
	order: 3;
}

/* ------------------------------------------------- боковая колонка: годы */

/* Два «этажа» по 140px с gap 16 дают минимальные 296px высоты строки. */
.vine-history__side {
	position: relative;
	display: flex;
	box-sizing: border-box;
	flex: 0 0 348px;
	flex-direction: column;
	gap: 16px;
	align-self: stretch;
	width: 348px;
	min-height: 296px;
}

/* Вертикальный пунктир: полоса 16px во всю высоту строки, штрих 5px по центру. */
.vine-history__rail {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 16px;
	background-image: repeating-linear-gradient(
		to bottom,
		#000000 0,
		#000000 25px,
		transparent 25px,
		transparent 50px
	);
	background-repeat: repeat-y;
	background-position: 50% 0;
	background-size: 5px 50px;
}

.vine-history__row--odd .vine-history__rail {
	left: 0;
}

.vine-history__row--even .vine-history__rail {
	right: 0;
}

/* Этаж года: 16 полосы пунктира + 32 зазора = 48 отступа до текста. */
.vine-history__floor {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	box-sizing: border-box;
	min-height: 0;
}

.vine-history__row--odd .vine-history__floor {
	justify-content: flex-end;
	padding-left: 48px;
}

.vine-history__row--even .vine-history__floor {
	justify-content: flex-start;
	padding-right: 48px;
}

/* В строке из двух вех этажи фиксированные — по 140px. В строке из одной
   вехи высоту этажа задаёт остаток колонки: под годом там картинка. */
.vine-history__row--pair .vine-history__floor {
	min-height: 140px;
}

.vine-history__year {
	font-size: var(--vine-fz-h1, 40px);
	font-weight: 700;
	line-height: normal;
	color: var(--vine-color-text, #000000);
	white-space: nowrap;
}

/* --------------------------------------------------------------- уголок */

/* Последняя веха ленты: пунктир доходит до середины блока года (отсечка
   задана inline-стилем на .vine-history__rail) и поворачивает перемычкой.
   Перемычка тянется по остатку ширины — при «2026 год» это ровно 135px. */
.vine-history__row--odd .vine-history__floor--corner,
.vine-history__row--even .vine-history__floor--corner {
	gap: 16px;
	padding: 0;
}

.vine-history__row--even .vine-history__floor--corner {
	flex-direction: row-reverse;
}

/* Пустышка под полосой пунктира: сам пунктир рисует .vine-history__rail. */
.vine-history__stub {
	flex: 0 0 16px;
	width: 16px;
}

.vine-history__arm {
	flex: 1 1 auto;
	height: 5px;
	background-image: repeating-linear-gradient(
		to right,
		#000000 0,
		#000000 25px,
		transparent 25px,
		transparent 50px
	);
}

.vine-history__floor--corner .vine-history__year {
	flex: 0 0 auto;
}

/* ------------------------------------------- центральная колонка: текст */

.vine-history__text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: space-between;
	align-self: stretch;
	min-width: 0;
}

.vine-history__para {
	display: flex;
	align-items: center;
}

/* Два блока по 148px без gap — это и есть 296px высоты строки. */
.vine-history__row--pair .vine-history__para {
	flex: 1 1 auto;
	min-height: 148px;
}

/* Строка из одной вехи: абзацы стоят по содержимому, не ближе 16px друг
   к другу, и растягивают строку, когда их набирается много. */
.vine-history__row--solo .vine-history__text {
	gap: 16px;
}

.vine-history__row--solo .vine-history__para {
	flex: 0 1 auto;
}

.vine-history .vine-history__p {
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text, #000000);
}

/* --------------------------------------------- колонка картинок строки */

/* 300 картинки + 48 внешнего отступа = те же 348, что и у колонки годов. */
.vine-history__pics {
	display: flex;
	box-sizing: border-box;
	flex: 0 0 348px;
	flex-direction: column;
	gap: 16px;
	align-self: stretch;
	width: 348px;
}

.vine-history__row--odd .vine-history__pics {
	padding-right: 48px;
}

.vine-history__row--even .vine-history__pics {
	padding-left: 48px;
}

/* overflow тут не нужен: <img> ровно по месту, а диагонали заглушки должны
   доходить до углов рамки и обрезать их нельзя. */
.vine-history__pic,
.vine-history__aside {
	position: relative;
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 300px;
}

/* Одно место в строке — 300×300 во всю её высоту, два и больше — по 300×140. */
.vine-history__pic--full {
	flex: 1 1 auto;
	min-height: 300px;
}

.vine-history__pic--half {
	height: 140px;
}

/* Картинка под годом прижата к тому же краю, что и сами годы. */
.vine-history__row--odd .vine-history__aside {
	align-self: flex-end;
	margin-left: 48px;
}

.vine-history__row--even .vine-history__aside {
	align-self: flex-start;
	margin-right: 48px;
}

.vine-history__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Заглушка «Изображение» (компонент 2023:9700): белый фон, рамка 1px,
   две пунктирные диагонали и подпись на белой подложке. Держим место,
   пока контент-менеджер не зальёт фотографии, — иначе из вертикального
   ритма страницы выпадают сотни пикселей. */
.vine-history__pic--empty,
.vine-history__aside--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--vine-color-text, #000000);
	background: #ffffff;
}

/* viewBox совпадает с габаритами места, поэтому масштаб 1:1 и штрих
   диагоналей остаётся ровно таким, как в макете. */
.vine-history__cross {
	position: absolute;
	top: -1px;
	left: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
}

.vine-history__cross line {
	stroke: #000000;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 5 5;
}

.vine-history__cap {
	position: relative;
	z-index: 1;
	background: #ffffff;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text, #000000);
	white-space: nowrap;
}

/* End */


/* Start:/local/templates/vine/components/bitrix/news.list/history-news/style.css?17873211704627*/
/* =========================================================================
   Лента новостей на странице «История» — bitrix:news.list / history-news
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y, узел 2095:21845.

   Ряд 1248x168: три карточки 353,33x168 + кнопка 140x168, шаг 16px,
   выравнивание по верху, без прокрутки.
   Геометрия: 1248 = список 1092 + 16 + кнопка 140;
   внутри списка 1092 = 353,33 * 3 + 16 * 2.
   ========================================================================= */

/* --------------------------------------------------------------- РЯД */
.history-news {
	display: flex;
	align-items: flex-start;
	gap: var(--vine-gap, 16px);
	width: 100%;
	max-width: var(--vine-container, 1248px);
}

/* ------------------------------------------------------------ СПИСОК */
.history-news__list {
	display: flex;
	align-items: flex-start;
	gap: var(--vine-gap, 16px);
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------------------------------------------------------- КАРТОЧКА */
/* flex: 1 1 0 — три карточки делят строку поровну (353,33px);
   max-width держит ширину макета, если новостей меньше трёх,
   чтобы ряд не разъезжался.
   height 168px + overflow hidden — фиксированная высота из макета: длинный
   заголовок обрезается по карточке, а не растягивает весь ряд. */
.history-news__item {
	display: flex;
	align-items: flex-start;
	gap: var(--vine-gap, 16px);
	flex: 1 1 0;
	min-width: 0;
	max-width: 353.33px;
	height: 168px;
	box-sizing: border-box;
	padding: var(--vine-gap-sm, 8px);
	overflow: hidden;
	border-radius: var(--vine-radius, 8px);
	background: var(--vine-color-card, #C4C4C4);
}

.history-news__pic {
	display: block;
	flex: 0 0 152px;
	width: 152px;
	height: 152px;
	overflow: hidden;
	background: var(--vine-color-card, #C4C4C4);
}

/* новость без картинки — серая плашка на том же месте, ряд не схлопывается */
.history-news__pic--empty {
	background: var(--vine-color-card, #C4C4C4);
}

.history-news__img {
	display: block;
	width: 152px;
	height: 152px;
	object-fit: cover;
}

/* высота колонки равна высоте фото (152px) — по ней и обрезается заголовок */
.history-news__body {
	display: flex;
	align-self: stretch;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--vine-gap-sm, 8px);
	min-width: 0;
	overflow: hidden;
}

/* двойной класс — чтобы перебить общее правило .vine-main h3 из базового слоя */
.history-news .history-news__name {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 700;
	line-height: normal;
	color: var(--vine-color-text, #000000);
	word-break: break-word;
}

.history-news__name-link {
	color: inherit;
	text-decoration: none;
}

.history-news__name-link:hover,
.history-news__name-link:focus {
	color: inherit;
	text-decoration: underline;
}

.history-news__date {
	flex: 0 0 auto;
	margin: 0;
	font-size: var(--vine-fz-small, 14px);
	font-style: italic;
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text, #000000);
}

/* ------------------------------------------------------------- КНОПКА */
/* оформление берём у общей .vine-btn, здесь только размеры из макета */
.history-news__all {
	align-self: stretch;
	flex: 0 0 140px;
	box-sizing: border-box;
	width: 140px;
	min-height: 168px;
	margin-left: auto;
}

/* ------------------------------------------------------------- АДАПТИВ */
@media (max-width: 900px) {
	.history-news {
		flex-wrap: wrap;
	}

	.history-news__list {
		align-items: stretch;
		flex-wrap: wrap;
		flex-basis: 100%;
	}

	/* на узком экране заголовку даём вырасти: высота карточки не фиксируется */
	.history-news__item {
		flex: 1 1 320px;
		max-width: none;
		height: auto;
		min-height: 168px;
	}

	.history-news__all {
		align-self: flex-start;
		min-height: 0;
		margin-left: 0;
	}
}

@media (max-width: 640px) {
	.history-news__item {
		flex-basis: 100%;
		min-height: 0;
	}

	.history-news__pic,
	.history-news__img {
		flex-basis: 96px;
		width: 96px;
		height: 96px;
	}
}

/* End */
/* /local/templates/vine/css/history-page.css?17873210673072 */
/* /local/templates/vine/components/bitrix/news.list/history-timeline/style.css?17873216348822 */
/* /local/templates/vine/components/bitrix/news.list/history-news/style.css?17873211704627 */