/* Start:/local/templates/vine/css/halls-page.css?17873277096866*/
/* =========================================================================
   Страница «Наши залы» — /about/classes/
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y, узел 605:12380 (1280×4479).

   Здесь лежит только то, что рисует сама страница-сборка: H1, вертикальный
   ритм страницы, ряд «Дегустации и семинары» и модификатор лент мероприятий.
   Всё остальное — style.css шаблонов компонентов (halls-city-filter,
   halls-map, halls-list, hall-modal, certificate, events-card, promo-tile).
   template_styles.css не правится.

   Файл подключается ТОЛЬКО в режиме списка (news.php шаблона vine_halls):
   у детальной страницы зала свой, общесайтовый ритм 16px, и правило крошек
   ниже ей навредило бы.

   ВЕРТИКАЛЬНЫЙ РИТМ. На этой странице шаг между блоками 24px, а не
   общесайтовые 16. Координаты макета (внутри фрейма 605:12382): крошки 0,
   H1 40, фильтр 120, карта 184, список 1008, линия 2392, «Сертификат» 2432,
   линия 2712, лента мероприятий 2752 — то есть 16+24, 96+24, 160+24,
   984+24, 2368+24, 2408+24, 2688+24, 2728+24. Внутри блока мероприятий
   шаг остаётся 16 (63, 119, 470, 526, 899, 962), поэтому его секции
   возвращают себе общесайтовое значение.
   ========================================================================= */

/* --------------------------------------------------- КРОШКИ -> H1 (24px) */
/* Отбивку задаёт .vine-breadcrumb-wrap, но его обёртка несёт и класс
   .vine-container, у которого в общем бандле объявлен `margin: 0 auto` —
   при равной специфичности (0,1,0) побеждает он и обнуляет margin-bottom.
   Перебиваем селектором с .vine-main — (0,2,0). Те же грабли уже ловили на
   странице сертификата. */
.vine-main .vine-breadcrumb-wrap {
	margin-bottom: 24px;
}

/* ------------------------------------------------------------ КОРЕНЬ */
/* Ограничение ширины у корня обязательно: без него сетки внутри на широком
   экране разъезжаются за макетные 1248. */
.halls-page {
	max-width: var(--vine-container, 1248px);
}

/* ------------------------------------------------------------------ H1 */
/* 605:12385 — 1248×56: Roboto Regular 48px. Селектор с .vine-main перебивает
   общее правило `.vine-main h1` (40px) — этот кегль общий слой навязывает
   всем страницам. */
.vine-main .halls-page__title {
	max-width: var(--vine-container, 1248px);
	margin: 0 0 24px;
	font-family: var(--vine-font);
	font-size: 48px;
	font-weight: 400;
	line-height: 56px;
	color: var(--vine-color-text, #000000);
}

/* -------------------------------------------------- РИТМ БЛОКОВ (24px) */
.halls-page .vine-section {
	margin: 0 0 24px;
}

.halls-page .vine-divider {
	margin: 24px 0;
}

/* --------------------------------------------------------------- КАРТА */
/* Контейнеру нужен id (на него ссылается aria-controls кнопки «Свернуть
   карту»), а сворачивание — обычный атрибут hidden, который ставит
   js/halls-page.js. Явное display: none нужно потому, что у секции может
   оказаться display из другого правила, и тогда hidden перестаёт работать. */
.halls-page__map[hidden] {
	display: none;
}

/* --------------------------------------- ЛЕНТЫ «БЛИЖАЙШИЕ МЕРОПРИЯТИЯ» */
/* Блок-близнец главной (1675:17854 против 1675:17924). Единственное
   расхождение макетов — кегль заголовка карточки: здесь Roboto Regular
   34px, на главной Roboto Bold 28px. Из-за него ряды выше (335 / 357 / 356
   против 300 / 343 / 342), но раскладка та же, поэтому нового шаблона нет —
   только модификатор на обёртке ленты. */
.events--halls .events-card__title {
	font-size: 34px;
	font-weight: 400;
}

/* Внутри блока мероприятий шаг макета 16px, а не 24px страницы. */
.halls-page .halls-page__events,
.halls-page .halls-page__events-deg {
	margin-bottom: var(--vine-gap, 16px);
}

.halls-page .halls-page__events-deg {
	margin-bottom: 0;
}

/* Ряд «Очные» и следующий подзаголовок «Онлайн» — те же 16px
   (1675:17929 кончается на 454, 1675:17960 начинается на 470). */
.halls-page__events-block {
	margin: 0 0 var(--vine-gap, 16px);
}

/* Ряд «Дегустации и семинары» (1675:18004): лента 1005 + промо-плитка 227,
   зазор 16 — 1005 + 16 + 227 = 1248, ровно как на главной (1289:13127). */
.halls-page__deg-row {
	display: flex;
	align-items: flex-start;
	gap: var(--vine-gap, 16px);
}

.halls-page__deg-row > .events {
	flex: 1 1 auto;
	min-width: 0;
}

.halls-page__deg-row > .promo-tiles {
	flex: 0 0 auto;
}

/* ------------------------------------------------------------ УЗКИЙ ЭКРАН */
/* Мобильных и планшетных фреймов в макете нет вовсе (риск 7 спецификации),
   поэтому раскладка на узком экране — по здравому смыслу: ряд переносится,
   ритм страницы возвращается к общесайтовым 16px. */
@media (max-width: 1023px) {
	.halls-page__deg-row {
		flex-wrap: wrap;
	}

	.halls-page__deg-row > .events {
		flex: 1 1 100%;
	}
}

@media (max-width: 767px) {
	.vine-main .halls-page__title {
		font-size: var(--vine-fz-h1, 40px);
		line-height: normal;
		margin-bottom: var(--vine-gap, 16px);
	}

	.vine-main .vine-breadcrumb-wrap {
		margin-bottom: var(--vine-gap, 16px);
	}

	.halls-page .vine-section {
		margin-bottom: var(--vine-gap, 16px);
	}

	.halls-page .vine-divider {
		margin: var(--vine-gap, 16px) 0;
	}

	.events--halls .events-card__title {
		font-size: var(--vine-fz-h3, 28px);
	}
}

/* End */


/* Start:/local/templates/vine/components/bitrix/news.list/halls-city-filter/style.css?17873303603682*/
/* Строка фильтра городов «Наших залов» (макет 1687:9426, 1248×40).
   Слева группа 1677:18305: подпись «Город:» и пункты с шагом 24px,
   справа кнопка 1687:9422 «Свернуть карту» — она же .vine-btn из
   общего слоя (padding 9/12/10, рамка 1px #000, радиус 5, текст 18px).
   Активный пункт — Roboto Bold чёрным без подчёркивания, остальные —
   #0077FF с пунктирным подчёркиванием (.vine-pseudo-link--link). */

.halls-city-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vine-gap-sm) var(--vine-gap);
	max-width: 1248px;
	min-height: 40px;
	margin: 0 auto;
}

/* левая группа: «Город:» и пункты идут одной строкой с общим шагом 24px */
.halls-city-filter__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	min-width: 0;
}

.halls-city-filter__group--empty {
	/* городов меньше двух: пустая распорка, чтобы кнопка осталась справа */
	display: block;
	width: 0;
	height: 0;
}

.halls-city-filter__label {
	font-family: var(--vine-font);
	font-size: var(--vine-fz-text);
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text);
	white-space: nowrap;
}

.halls-city-filter__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.halls-city-filter__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* выбранный пункт: Bold, чёрный, без подчёркивания */
.halls-city-filter__current {
	font-family: var(--vine-font);
	font-size: var(--vine-fz-text);
	font-weight: 700;
	line-height: normal;
	color: var(--vine-color-text);
	text-decoration: none;
	white-space: nowrap;
}

/* «Все» в состоянии «города нет среди залов»: выглядит как выбранный пункт,
   но остаётся ссылкой. Правила :hover/:focus нужны потому, что базовое
   a:hover (0,1,1) перебивает одиночный класс и иначе красило бы пункт в
   синий с подчёркиванием. */
a.halls-city-filter__current--reset,
a.halls-city-filter__current--reset:hover,
a.halls-city-filter__current--reset:focus {
	color: var(--vine-color-text);
	text-decoration: none;
	cursor: pointer;
}

/* остальные пункты: обычные ссылки, цвет и пунктир задаёт .vine-pseudo-link--link */
.halls-city-filter__link {
	font-family: var(--vine-font);
	font-size: var(--vine-fz-text);
	font-weight: 400;
	line-height: normal;
	white-space: nowrap;
}

.halls-city-filter__map-toggle {
	flex-shrink: 0;
	cursor: pointer;
}

/* Заглушка «В этом городе залов пока нет»: состояние достижимо по прямой
   ссылке ?city=<город, которого нет среди залов>. Текста для него в макете
   нет, поэтому оформление — общий текстовый стиль страницы: 18px Roboto
   Regular чёрным, отбивка 24px, как шаг блоков «Наших залов». */
.halls-city-filter__empty {
	max-width: 1248px;
	margin: 24px auto 0;
	font-family: var(--vine-font);
	font-size: var(--vine-fz-text);
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text);
}

/* End */


/* Start:/local/templates/vine/components/bitrix/news.list/halls-map/style.css?17873303567288*/
/* =========================================================================
   Карта дегустационных залов (шаблон news.list/halls-map).
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y, узел 1685:209652.

   Размеры взяты из макета:
     контейнер            1248×800, рамка 1px #777777, radius 16;
     блок контролов       32×112 у правого края (x=1184, отступ 32px)
                          по вертикальному центру, gap 16, тень
                          2px 2px 2px rgba(0,0,0,.5);
     кнопка контрола      32×32, белая, рамка 1px #000, radius 5;
     иконка внутри        24×24;
     маркер               56×80;
     плашка адреса        padding 4, radius 4, белая, текст 18px Roboto.

   Файл обязан начинаться открытым комментарием: без него браузер
   разбирает текст шапки как селектор и съедает первое правило.
   ========================================================================= */

.halls-map {
	position: relative;
	width: 100%;
	max-width: 1248px;
	height: 800px;
	margin: 0 auto;
	border: 1px solid #777777;
	border-radius: 16px;
	overflow: hidden;
	background: #ffffff;
}

/* Подложка карты: файл 1248×800, то есть один к одному с контейнером.
   cover оставлен на случай замены картинки другим кадром. */
.halls-map__backdrop {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.halls-map__backdrop[hidden] {
	display: none;
}

/* Слой карты и маркеров. Сам слой кликов не ловит, ловят маркеры —
   иначе он перекрыл бы контролы. */
.halls-map__layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* ----------------------------------------------------------- контролы */

.halls-map__controls {
	position: absolute;
	top: 50%;
	right: 32px;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .5));
}

/* «+» и «−» стоят встык: в макете это один фрейм 32×64 из двух кнопок. */
.halls-map__zoom {
	display: flex;
	flex-direction: column;
}

.halls-map__control {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: #ffffff;
	border: 1px solid #000000;
	border-radius: 5px;
	cursor: pointer;
}

/* Блок контролов шаблон сейчас НЕ выводит (решение от 21.08.2026: пока нет
   ключа Яндекс.Карт, нерабочие кнопки не рисуем). Правила ниже оставлены
   намеренно: возврат контролов — это 'SHOW_CONTROLS' => 'Y' в вызове
   компонента, без единой правки стилей. */

/* Когда карты ещё нет, кнопки помечены disabled: выглядят как в макете, но
   не притворяются рабочими. Внешний вид не гасим намеренно. */
.halls-map__control[disabled] {
	cursor: default;
	opacity: 1;
}

.halls-map__icon {
	position: relative;
	display: block;
	width: 24px;
	height: 24px;
}

/* Плюс и минус собраны из одного выгруженного штриха 14px (SVG 17×3
   вместе с полутолщиной обводки), вертикальный — тот же файл, повёрнутый
   на 90°. Так же он устроен и в макете. */
.halls-map__line {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 17px;
	height: 3px;
	transform: translate(-50%, -50%);
}

.halls-map__line--v {
	transform: translate(-50%, -50%) rotate(90deg);
}

/* «Навигация»: треугольник 11.31×16.97, повёрнутый на 45°, в боксе 20×20,
   прижатом к правому краю иконки и приподнятом на 2px — как в макете. */
.halls-map__nav {
	position: absolute;
	top: calc(50% - 2px);
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	transform: translateY(-50%);
}

.halls-map__nav img {
	display: block;
	width: 11.3137px;
	height: 16.9706px;
	transform: rotate(45deg);
}

/* ------------------------------------------------- маркер и плашка адреса */

/* Позицию задаёт карта через --pin-x/--pin-y. Точка привязки — остриё
   пина, поэтому маркер сдвинут на половину ширины и на всю высоту. */
.halls-map__pin {
	position: absolute;
	top: var(--pin-y, 50%);
	left: var(--pin-x, 50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 0;
	background: none;
	border: 0;
	transform: translate(-50%, -100%);
	cursor: pointer;
	pointer-events: auto;
}

.halls-map__pin[hidden] {
	display: none;
}

.halls-map__pin-icon {
	display: block;
	width: 56px;
	height: 80px;
}

/* Плашка адреса — по наведению и по фокусу (решение З11: клик занят
   модалкой зала). visibility, а не display: высота маркера не должна
   прыгать, иначе пин сдвигается относительно точки. */
.halls-map__plate {
	display: inline-flex;
	align-items: flex-start;
	padding: 4px;
	background: #ffffff;
	border-radius: 4px;
	font-size: 18px;
	font-weight: 400;
	/* 21 + padding 4+4 = 29px высоты плашки, как в макете */
	line-height: 21px;
	color: #000000;
	white-space: nowrap;
	visibility: hidden;
}

.halls-map__pin:hover .halls-map__plate,
.halls-map__pin:focus-visible .halls-map__plate,
.halls-map__pin.is-active .halls-map__plate {
	visibility: visible;
}

/* ------------------------------------------------------------- список */

/* Список залов блока карты скрыт визуально (.vine-visually-hidden из
   template_styles.css) и нужен клавиатуре и скринридеру: без маркеров
   иначе из карты нельзя открыть описание зала. */
.halls-map__legend {
	margin: 0;
	padding: 0;
	list-style: none;
}

.halls-map__legend-open {
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

/* --------------------------------------------------------- узкий экран */

/* Мобильных фреймов в макете нет (риск 7). Ниже 1280px держим пропорцию
   макета, чтобы карта не обрезалась по высоте. */
@media (max-width: 1279px) {
	.halls-map {
		height: auto;
		aspect-ratio: 1248 / 800;
	}
}

@media (max-width: 767px) {
	.halls-map__controls {
		right: 16px;
	}
}

/* End */


/* Start:/local/templates/vine/components/bitrix/news.list/halls-list/style.css?17873256187261*/
/* =========================================================================
   Список дегустационных залов — bitrix:news.list / halls-list
   Страница «Наши залы» (/about/classes/), макет Figma
   HA2Vx4dnWPRDdb6SL7tM3y, узел 1675:18217.

   Размеры из макета (замеры по метаданным узлов):
     сетка       — 1248×1360, две колонки по 616 (x = 0 и 632),
                   пять рядов (y = 0, 288, 560, 832, 1104),
                   то есть шаг 16 и по горизонтали, и по вертикали;
     карточка    — 616×256, рамка 1px #000, padding 8, строка, зазор 10,
                   выравнивание по верхнему краю, без скругления и заливки;
     фото        — 270×220 слева (x = 8, y = 8), object-fit: cover,
                   без скругления;
     колонка     — 320 справа (x = 288), колонка, зазор 10,
                   выравнивание по центру;
     название    — 18px Bold, по центру (1676:9233);
     адрес       — 14px Regular, по центру (1676:9234);
     вместимость — 14px Regular, по центру (1676:9235);
     анонс       — 18px Regular, по левому краю (1676:9236);
     «Подробнее» — 18px #0077FF с подчёркиванием, по левому краю (1676:9237).

   Первая карточка макета (1676:9219) выше остальных — 272 вместо 256:
   у «Гранд Крю» название переносится на две строки, а адрес на две
   строки не помещается в 320. Ряд в макете тянется по высокой карточке,
   поэтому в сетке карточки растянуты (align-items: stretch), а колонка
   внутри карточки прижата к верху, как в макете.

   Карточка списка отличается от карточки «О нас» (halls-preview,
   405,33×612, колонка вместо строки) — общие у них только габариты фото.
   ========================================================================= */

/* Ограничение ширины на корне: без него сетка на широком экране
   разъезжается, а карточка перестаёт быть макетными 616. */
.halls-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: var(--vine-gap, 16px);
	width: 100%;
	max-width: var(--vine-container, 1248px);
}

/* -------------------------------------------------------------- КАРТОЧКА */
/* min-height держит ряд ровным, когда у зала нет ни анонса, ни фото:
   содержимого тогда на 60px, а макетная карточка — 256. */
.halls-list__card {
	display: flex;
	box-sizing: border-box;
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	min-height: 256px;
	min-width: 0;
	padding: var(--vine-pad-card, 8px);
	border: 1px solid var(--vine-color-text, #000000);
}

/* ------------------------------------------------------------------ ФОТО */
/* Фото — кнопка: по нему открывается модалка «Описание зала». Сброс
   собственных стилей кнопки, чтобы визуально это осталось картинкой. */
.halls-list__photo {
	display: block;
	flex: 0 0 270px;
	box-sizing: border-box;
	width: 270px;
	max-width: 100%;
	height: 220px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: none;
	border: 0;
	border-radius: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

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

/* Зал без фото: серая плашка тех же 270×220. Схлопывать нельзя —
   иначе текстовая колонка растянется на всю карточку и ряд разъедется. */
.halls-list__photo--empty {
	background: var(--vine-color-card, #C4C4C4);
}

/* Клавиатурный фокус: кнопка без видимого контура ловушкой не выглядит. */
.halls-list__photo:focus-visible {
	outline: 2px solid var(--vine-color-link, #0077FF);
	outline-offset: 2px;
}

/* --------------------------------------------------------------- КОЛОНКА */
/* min-width: 0 — обязателен, иначе длинное слово растянет flex-элемент
   шире 320 и фото ужмётся. */
.halls-list__body {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	align-self: stretch;
}

/* Двойной класс — чтобы перебить общее правило .vine-main h2 (34px)
   базового слоя: в макете название карточки 18px Bold. */
.halls-list .halls-list__name {
	max-width: 100%;
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 700;
	line-height: normal;
	text-align: center;
	color: var(--vine-color-text, #000000);
	word-break: break-word;
}

.halls-list__address,
.halls-list__capacity {
	width: 100%;
	margin: 0;
	font-size: var(--vine-fz-small, 14px);
	font-weight: 400;
	line-height: normal;
	text-align: center;
	color: var(--vine-color-text, #000000);
	word-break: break-word;
}

.halls-list__text {
	width: 100%;
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	text-align: left;
	color: var(--vine-color-text, #000000);
	word-break: break-word;
}

/* В макете «Подробнее →» стоит сразу под анонсом, а не прижато к низу
   карточки: колонка выровнена по верху, свободное место остаётся снизу. */
.halls-list__more {
	width: 100%;
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
	color: var(--vine-color-link, #0077FF);
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-underline-position: from-font;
	word-break: break-word;
}

/* ---------------------------------------------------------------- АДАПТИВ */
/* Мобильных фреймов в макете нет вовсе. Раскладка по здравому смыслу:
   сначала одна колонка карточек, затем фото над текстом — карточка 616
   с фото 270 в строку на узкий экран не помещается. */
@media (max-width: 1024px) {
	.halls-list {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.halls-list__card {
		flex-direction: column;
		align-items: center;
		min-height: 0;
	}

	.halls-list__photo {
		flex: 0 0 auto;
	}

	.halls-list__body {
		width: 100%;
	}
}

/* End */


/* Start:/local/templates/vine/components/bitrix/news.list/certificate/style.css?1786479947967*/
/* Сквозной блок «Сертификат в подарок». Макет Figma 2090:19128 (1248x256) */
.certificate {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 1248px;
	margin: 0 auto;
}

.certificate__item {
	display: flex;
	align-items: center;
	gap: 64px;
	width: 100%;
	min-height: 256px;
	border: 1px solid #000;
	border-radius: 24px;
	background: #FFF;
	overflow: hidden;
}

.certificate__image {
	flex-shrink: 0;
	display: block;
	width: 256px;
	height: 256px;
	border-radius: 24px;
	object-fit: cover;
}

.certificate__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.certificate__title {
	margin: 0;
	font-size: 40px;
	font-weight: 400;
	line-height: normal;
}

.certificate__text {
	font-size: 18px;
	line-height: normal;
}

.certificate__text p {
	margin: 0;
}

.certificate__link {
	align-self: flex-start;
	font-size: 18px;
	color: #0077FF;
	text-decoration: underline;
}

/* End */


/* Start:/local/templates/vine/components/bitrix/catalog.section/events-card/style.css?17864796352943*/
/* Карточка мероприятия — макет, узел 1675:17854 */
.events {
    --events-text: #000000;
    --events-link: #0077FF;
    --events-card-bg: #C4C4C4;
    --events-badge-bg: #FFFF00;
    font-family: "Roboto", system-ui, sans-serif;
    color: var(--events-text);
}

.events__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.events__item {
    display: flex;
    min-width: 0;
}

.events-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    box-sizing: border-box;
    padding: 8px;
    border-radius: 8px;
    background: var(--events-card-bg);
}

.events-card__title {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: normal;
    word-break: break-word;
}

.events-card__title-link {
    color: var(--events-text);
    text-decoration: none;
}

.events-card__title-link:hover {
    text-decoration: underline;
}

/* Картинка сверху во всю ширину карточки */
.events-card__media {
    display: flex;
    justify-content: center;
    width: 100%;
}

.events-card__media .events-card__pic {
    width: 389px;
    max-width: 100%;
    height: 110px;
}

/* Ряд «картинка слева 128x128 + мета» */
.events-card__row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

.events-card__thumb {
    flex: 0 0 128px;
    width: 128px;
    height: 128px;
    overflow: hidden;
}

.events-card__thumb .events-card__pic {
    width: 128px;
    height: 128px;
}

.events-card__pic {
    display: block;
    object-fit: cover;
}

.events-card__meta {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.events-card__priceline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.events-card__price {
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    white-space: nowrap;
}

.events-card__badge {
    padding: 4px;
    border: 1px solid var(--events-text);
    border-radius: 4px;
    background: var(--events-badge-bg);
    font-size: 14px;
    font-style: italic;
    line-height: normal;
    white-space: nowrap;
}

.events-card__date,
.events-card__address,
.events-card__announce {
    font-size: 18px;
    line-height: normal;
    word-break: break-word;
}

.events-card__announce p {
    margin: 0;
}

.events-card__more {
    align-self: flex-start;
    font-size: 18px;
    line-height: normal;
    color: var(--events-link);
    text-decoration: underline;
}

@media (max-width: 767px) {
    .events__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 479px) {
    .events-card__row {
        flex-direction: column;
    }

    .events-card__thumb {
        flex: 0 0 auto;
    }
}

/* End */


/* Start:/local/templates/vine/components/bitrix/news.list/promo-tile/style.css?1786479950915*/
/* Узкая промо-плитка «Все дегустации». Макет Figma 1289:13154 (227x342, картинка 211x277) */
.promo-tiles {
	display: flex;
	gap: 16px;
}

.promo-tile {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex-shrink: 0;
	width: 227px;
	height: 342px;
	padding: 8px;
	border-radius: 8px;
	background: #C4C4C4;
}

.promo-tile__media {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
}

.promo-tile__media-link {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
}

.promo-tile__image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.promo-tile__link {
	align-self: flex-start;
	font-size: 28px;
	font-weight: 700;
	color: #0077FF;
	text-decoration: underline;
}

.promo-tile__caption {
	align-self: flex-start;
	font-size: 28px;
	font-weight: 700;
	color: #000;
}

/* End */


/* Start:/local/templates/vine/components/bitrix/news.list/hall-modal/style.css?17873314766640*/
/* =========================================================================
   Модалка «Описание зала» — bitrix:news.list / hall-modal
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y, узел 1689:9658.

   Размеры из макета:
     окно      552 x 607, белое, рамка 1px #000, радиус 16, padding 32,
               колонка с шагом 8 (32 + 32 шапки + 8 + 503 панели + 32 = 607);
     шапка     488 x 32, в ней только кнопка закрытия, прижатая вправо
               (её рисует оболочка contacts-modal, здесь не описана);
     панель    1689:9772 — 488 x 503, padding 8, шаг 10, по центру;
     фото      1689:9773 — 270 x 220, без скругления, object-fit: cover;
     название  1689:9775 — 34px Regular, по центру;
     адрес     1689:9776 — 14px Regular, по центру;
     вместимость 1689:9777 — 14px Regular, по центру;
     анонс     1689:9778 — 18px Regular, по левому краю;
     ссылка    1689:9779 — 18px #0077FF, сплошное подчёркивание.

   Подложку, окно и шапку строит js/contacts-modal.js, а их базовые
   габариты (1280x986 под модалку контактов) лежат в css/contacts-modal.css.
   Залам нужны свои — поэтому ниже переопределены два класса оболочки:
   .contacts-modal__window--hall (модификатор, который скрипт ставит по
   значению data-contacts-modal) и .contacts-modal__content внутри него.
   Селекторы намеренно двойные: у правил оболочки та же специфичность,
   и одиночный класс зависел бы от порядка подключения файлов.

   Высота панели (503) жёстко не задаётся: анонсы у залов разной длины,
   фиксированная высота обрезала бы текст. Все внутренние габариты —
   макетные.
   ========================================================================= */

/* --------------------------------------------------------------- ОКНО */

/* Ширина задаётся ПОЛНАЯ, вместе с padding и рамкой, — как у окна города в
   css/contacts-modal.css (width 1280 при padding 16) и у окна фото статьи в
   news.detail/vine_article/style.css: общий сброс * { box-sizing: border-box }
   из template_styles.css никто не отменяет, а в width пишут внешний размер
   макета. Прежние content-box + width 488 давали 488 + 2 × 32 padding +
   2 × 1 рамки = 554, то есть на 2px шире макета 1689:9658.

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

/* Контейнер модалки: боковые отступы 16px из оболочки залам не нужны —
   488px панели получаются из 552 − 2 × 31 padding − 2 × 1 рамки. */
.contacts-modal__window--hall .contacts-modal__content {
	gap: 0;
	padding: 0;
}

/* ------------------------------------------------------------- ПАНЕЛЬ */
/* Показывает одну панель и прячет остальные оболочка: правило
   [data-city-panel]:not(.is-active) { display: none } живёт в
   css/contacts-modal.css. Здесь — только раскладка видимой. */

.hall-modal__panel.is-active {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: var(--vine-pad-card, 8px);
}

.hall-modal__photo {
	flex: 0 0 auto;
	width: 270px;
	max-width: 100%;
	height: 220px;
	overflow: hidden;
}

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

/* Зал без фото: плашка тех же 270×220 — окно не должно менять высоту
   из-за незаполненной карточки. */
.hall-modal__photo--empty {
	background: var(--vine-color-card, #C4C4C4);
}

/* двойной класс — перебить общее правило .vine-h2, .vine-main h2 (34px
   там же, но с другим весом и отступами) */
.hall-modal .hall-modal__name {
	width: 100%;
	margin: 0;
	font-size: var(--vine-fz-h2, 34px);
	font-weight: 400;
	line-height: normal;
	text-align: center;
	color: var(--vine-color-text, #000000);
	word-break: break-word;
}

.hall-modal__address,
.hall-modal__capacity {
	width: 100%;
	margin: 0;
	font-size: var(--vine-fz-small, 14px);
	font-weight: 400;
	line-height: normal;
	text-align: center;
	color: var(--vine-color-text, #000000);
	word-break: break-word;
}

.hall-modal__text {
	width: 100%;
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	text-align: left;
	color: var(--vine-color-text, #000000);
	word-break: break-word;
}

.hall-modal__more {
	width: 100%;
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
	text-align: left;
	color: var(--vine-color-link, #0077FF);
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-underline-position: from-font;
	word-break: break-word;
}

/* ------------------------------------------------------------- АДАПТИВ */
/* Мобильных состояний модалки в макете нет. Ниже 584px (552 окна + 2×16
   подложки) окно занимает доступную ширину, отступы уменьшаются вдвое. */

@media (max-width: 585px) {
	.contacts-modal__window.contacts-modal__window--hall {
		width: 100%;
		padding: var(--vine-gap, 16px);
	}
}

/* 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 */
/* /local/templates/vine/css/halls-page.css?17873277096866 */
/* /local/templates/vine/components/bitrix/news.list/halls-city-filter/style.css?17873303603682 */
/* /local/templates/vine/components/bitrix/news.list/halls-map/style.css?17873303567288 */
/* /local/templates/vine/components/bitrix/news.list/halls-list/style.css?17873256187261 */
/* /local/templates/vine/components/bitrix/news.list/certificate/style.css?1786479947967 */
/* /local/templates/vine/components/bitrix/catalog.section/events-card/style.css?17864796352943 */
/* /local/templates/vine/components/bitrix/news.list/promo-tile/style.css?1786479950915 */
/* /local/templates/vine/components/bitrix/news.list/hall-modal/style.css?17873314766640 */
/* /local/templates/vine/css/contacts-modal.css?17873146455499 */