/* Start:/local/templates/vine/css/calendar-page.css?17875025743521*/
/* =========================================================================
   Страница «Календарь мероприятий» — то, у чего нет своего компонента:
   H1 обеих раскладок и текстовый блок внизу месячной.

   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y:
     140:4310   H1 «Календарь мероприятий», 1248×56, 48px Roboto Regular
     1403:12321 тот же H1 на месячной раскладке (561×56)
     1708:7899  сетка месяца 832×461, прижата к левому краю колонки 1248
     1601:8058  текстовый блок на плашке #C4C4C4, 1248×330
     1601:8060  текст внутри плашки

   Секции с компонентами описаны в style.css своих шаблонов:
   catalog.section/calendar-scale, catalog.section/calendar-month,
   catalog.section/calendar-promo, news.list/calendar-filter.

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

.vine-main .calendar-page__title {
	margin: 0 0 var(--vine-gap, 16px);
	font-size: 48px;
	font-weight: 400;
	line-height: normal;
}

/* --------------------------------------------- сетка месяца (1708:7899) */

/* Сетка занимает 832 из 1248 и прижата влево: справа в макете пустая полоса
   416px на всю высоту блока. Ширину держит сам шаблон (max-width: 832px),
   секция остаётся обычным блоком и прижимает её к левому краю колонки.

   Флексом эту секцию делать нельзя: во flex-контейнере плашка получает ширину
   по содержимому и схлопывается — замер давал 560 вместо 832, а ячейка 68,65
   вместо 107,43. Ошибка тихая: вёрстка целая, просто уже. */
.calendar-page__month {
	margin-right: auto;
}

/* ------------------------------------- текстовый блок месяца (1601:8058) */

/*
   Плашка 1248×330 с текстом. Из макета в спецификацию волны попали фон
   (#C4C4C4) и габариты; радиус и внутренние поля там не зафиксированы,
   поэтому взяты те же, что у соседней плашки этой же раскладки
   (1708:7899 — radius 16, padding 16). Скрытый узел 1601:8061 (811×235,
   место под картинку) не строится — вопрос К12 к заказчику.

   Высота не прибивается: 330px макета — высота при макетном тексте, а в
   реальном контенте строк может быть больше. Минимум сохранён.
*/
.calendar-page__note {
	box-sizing: border-box;
	max-width: 1248px;
	min-height: 330px;
	padding: 16px;
	border-radius: 16px;
	background: #C4C4C4;
}

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

/* 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/catalog.section/calendar-scale/style.css?178734517312610*/
/* =========================================================================
   Раскладка «шкала» календаря мероприятий, /calendar/.
   Макет: Figma HA2Vx4dnWPRDdb6SL7tM3y, узел 140:4305.

   Файл держит две секции:
     140:4314   лента месяцев и дней   1252×103   .calendar-strip
     1608:8318  лента мероприятий      1248×990   .calendar-scale

   ЭТОТ ФАЙЛ — ТОЛЬКО РАЗНИЦА С КАРТОЧКОЙ ГЛАВНОЙ.
   Сама карточка (.events, .events__grid, .events-card__*) приходит из
   components/bitrix/catalog.section/events-card/style.css: шаблон подключает
   его вызовом $this->addExternalCss(). Ничего из тех правил здесь не
   дублируется — правится только то, чем карточка календаря (140:4311)
   отличается от карточки главной: три колонки вместо двух, заголовок 34px
   Regular вместо 28px Bold и строка «тип мероприятия + бейдж» над ценой.

   Про специфичность. events-card/style.css регистрируется ИЗ template.php,
   то есть ПОЗЖЕ собственного style.css шаблона, который Битрикс подключает
   до выполнения шаблона. Поэтому одноклассовые селекторы проиграли бы
   .events__grid по порядку следования при равной специфичности — все
   переопределения ниже написаны двумя классами намеренно. Заголовки — с
   .vine-main по той же причине: .vine-main h2 (34px) и .vine-main h3
   (28px Bold) из template_styles.css специфичнее одного класса.
   ========================================================================= */

/* =========================================================================
   1. ЛЕНТА МЕСЯЦЕВ И ДНЕЙ — 140:4314
   Раскладка по горизонтали: 24 стрелка + 8 + 1188 окно + 8 + 24 = 1252.
   По вертикали: 21 месяцы + 8 + 45 дни + 8 + 21 дни недели = 103.
   Лента шире контейнера 1248 на 4px — так в макете (x = 16, правый край
   1268 при контейнере до 1264); стрелки стоят по краям снаружи окна.
   ========================================================================= */

.calendar-strip {
	display: flex;
	align-items: center;
	gap: var(--vine-gap-sm, 8px);
	max-width: 1252px;
	font-family: var(--vine-font, "Roboto", sans-serif);
	color: var(--vine-color-text, #000);
}

/* Стрелка прокрутки 24×24 (313:2562, 313:2568) — выгруженная иконка
   «Стрелка-треугольник». Без скрипта кнопка приходит disabled: в макете
   левая стрелка нарисована ровно так (вектор выгружается с fill-opacity 0.3),
   потому что листать назад некуда — прошедших дней в ленте нет. */
.calendar-strip__arrow {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.calendar-strip__arrow[disabled] {
	opacity: 0.3;
	cursor: default;
}

.calendar-strip__arrow-icon {
	width: 24px;
	height: 24px;
}

/* Окно прокрутки 1188px (141:4626). Полоса прокрутки скрыта: в макете её нет,
   а её появление добавило бы к высоте ленты полтора десятка пикселей.
   Прокрутка при этом остаётся штатной — колесом с Shift, тачпадом, свайпом
   и стрелками клавиатуры (у окна есть tabindex), поэтому лента работает и
   без скрипта. */
.calendar-strip__viewport {
	/* position: relative делает окно системой координат для ячеек: скрипт
	   считает offsetLeft выбранного дня именно от него. */
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.calendar-strip__viewport::-webkit-scrollbar {
	display: none;
}

/* Ширина по содержимому: лента заведомо шире окна (в макете 2824 против
   1188) — именно на этом переполнении и живёт прокрутка. Ужимать ячейки
   под окно нельзя: переполнение исчезнет, и стрелки станут мёртвыми. */
.calendar-strip__track {
	display: flex;
	gap: 32px;
	width: max-content;
}

/* Группа одного месяца: подпись, ряд чисел, ряд дней недели. Шаг 8px. */
.calendar-strip__month {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--vine-gap-sm, 8px);
}

/* Подпись месяца «Июнь» / «Июль» — 18px Regular (I314:2811).
   Это ссылка на ?month=YYYY-MM (окно ленты сдвигается на выбранный месяц),
   но выглядит как обычный текст макета: без цвета ссылки и подчёркивания. */
.calendar-strip__month-name {
	min-height: 21px;
	color: var(--vine-color-text, #000);
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	text-decoration: none;
	white-space: nowrap;
}

.calendar-strip__month-name:hover,
.calendar-strip__month-name:focus {
	color: var(--vine-color-text, #000);
	text-decoration: underline;
}

.calendar-strip__row {
	display: flex;
	gap: var(--vine-gap-sm, 8px);
}

/* Ряд чисел: 45px вместо 29 — под ячейкой висит подпись «Сегодня» (1258:6759).
   Высота держится всегда, иначе лента прыгала бы на 16px, стоило окну
   сдвинуться на месяц вперёд, где сегодняшнего дня уже нет. */
.calendar-strip__row--days {
	align-items: flex-start;
	min-height: 45px;
}

.calendar-strip__cellbox {
	display: flex;
	flex: 0 0 64px;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: 64px;
}

/* Ячейка дня 64×29: рамка 1px #000 без скругления, padding 4, число слева,
   пустой слот справа (141:4659). */
.calendar-strip__cell {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	box-sizing: border-box;
	width: 64px;
	padding: 4px;
	border: 1px solid var(--vine-color-text, #000);
	background: var(--vine-color-bg, #fff);
	color: var(--vine-color-text, #000);
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
	text-decoration: none;
}

.calendar-strip__cell:hover,
.calendar-strip__cell:focus {
	color: var(--vine-color-text, #000);
	text-decoration: none;
}

/* Выбранный день — заливка rgba(41,129,0,0.5) (141:4673 макета). */
.calendar-strip__cell--selected {
	background: rgba(41, 129, 0, 0.5);
}

.calendar-strip__num {
	white-space: nowrap;
}

/* Правый слот 35×21: в макете зарезервирован и пуст (на месячной раскладке
   в него встают чипы городов «МСК» / «СПБ»). */
.calendar-strip__slot {
	flex: 1 0 0;
	height: 21px;
	min-width: 1px;
}

/* Подпись под сегодняшней ячейкой — 12px Regular (I1258:6760). */
.calendar-strip__today {
	font-size: 12px;
	line-height: normal;
	white-space: nowrap;
}

/* День недели — 18px Regular, ширина ячейки 64 (314:2782). */
.calendar-strip__weekday {
	flex: 0 0 64px;
	width: 64px;
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
}

/* СБ и ВС красные — #FF0000 (I314:2784, I314:2785). */
.calendar-strip__weekday--holiday {
	color: #FF0000;
}

/* =========================================================================
   2. ЛЕНТА МЕРОПРИЯТИЙ — 1608:8318
   Вертикальный ритм — сплошные 16px:
   47 + 16 + 50 + 16 + 768 + 16 + 21 + 16 + 40 = 990.
   ========================================================================= */

.calendar-scale {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap, 16px);
	/* Корень ограничен шириной контейнера макета: без max-width сетка на
	   широком экране разъезжается, карточки уходят далеко за 405px. */
	max-width: 1248px;
}

/* Заголовок «Мероприятия 27 июня» — 40px Regular, блок 47 (140:4327). */
.calendar-scale__title,
.vine-main .calendar-scale__title {
	margin: 0;
	font-size: var(--vine-fz-h1, 40px);
	font-weight: 400;
	line-height: normal;
}

/* Пустое состояние 316:6127 — две строки 18px Italic, шаг 8px. */
.calendar-scale__empty {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap-sm, 8px);
}

.calendar-scale__empty-line,
.calendar-scale__end {
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	font-style: italic;
	line-height: normal;
}

/* Три колонки по 405,33 = (1248 − 2 × 16) / 3.
   На главной та же сетка идёт в две колонки по 616 — отсюда переопределение. */
.calendar-scale .events__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* Карточки одного ряда тянутся до высоты самой высокой: в макете соседи
	   ряда одинаковой высоты (356 и 356, 396 и 396) при разной длине текста. */
	align-items: stretch;
}

/* Заголовок карточки — 34px Regular (I141:5123;209:17672).
   В events-card он 28px Bold, а базовое .vine-main h3 — 28px Bold; поэтому
   кегль и насыщенность задаются здесь явно и двумя-тремя классами. */
.calendar-scale .events-card__title,
.vine-main .calendar-scale .events-card__title {
	font-size: var(--vine-fz-h2, 34px);
	font-weight: 400;
}

/* Строка «тип мероприятия + бейдж» над ценой (1277:6120).
   На главной цена и бейдж стоят в одной строке через space-between; здесь
   бейдж уехал к типу, а цена ушла на строку ниже. Шаг 8px, выравнивание по
   центру: бейдж выше текста на padding 4px сверху и снизу. */
.calendar-scale .calendar-scale-card__typeline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vine-gap-sm, 8px);
}

/* Тип мероприятия «Очный курс» / «Дегустация» — 14px Roboto Italic, чёрный
   (I141:5125). Тот же кегль и начертание, что у бейджа, но без плашки. */
.calendar-scale .calendar-scale-card__type {
	font-size: var(--vine-fz-small, 14px);
	font-style: italic;
	line-height: normal;
	word-break: break-word;
}

/* Постраничная навигация рисует себя сама (system.pagenavigation/vine_pager);
   здесь только выравнивание по левому краю ленты, как у кнопки 1279:7435. */
.calendar-scale__pager {
	align-self: flex-start;
}

/* ------------------------------------------------------------- АДАПТИВ */
/* Мобильных и планшетных фреймов в макете нет: раскладку сужаем по здравому
   смыслу, сохраняя карточку и ячейку ленты неизменными. 405px — минимум,
   при котором кадр 128 и колонка 245 стоят в ряд. */
@media (max-width: 1279px) {
	.calendar-scale .events__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

/* End */


/* Start:/local/templates/vine/components/bitrix/news.list/calendar-filter/style.css?178734566211907*/
/* =========================================================================
   ПАНЕЛЬ ФИЛЬТРОВ КАЛЕНДАРЯ (bitrix:news.list / calendar-filter)
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y.

   СТРОКА ФИЛЬТРОВ — узел 316:6167, 1248x40 (на месячной раскладке
   1403:12522, узел в узел та же). Ряд с переносом, шаг 16px, выравнивание
   по центру. Слева группа 1861:10263 (272x32): поле 1861:8485 240x32 и лупа
   1861:8496 24x24 через 8px. Дальше чипы 1259:7250 / 7256 / 7262 / 7268 и
   ссылка 1274:7570 «Сбросить фильтр» (18px, #0077FF, подчёркнутая).

   Чип: отступы 16 по горизонтали и 8 по вертикали ОТ РАМКИ (в вёрстке это
   padding 15/7 плюс рамка 1px, см. ниже), шаг 10, радиус 16, текст 18px.
   Выбранный — фон #C4C4C4 и крестик 24x24 справа (в макете крестик стоит
   у «Тип мероприятия» и «Город», у «Формат» и «Уровень» он скрыт — то есть
   крестик показывает именно ВЫБРАННЫЙ фильтр). Высота чипа строки — 40
   (8 + 24 крестика + 8), чипа значения в окне — 37 (8 + 21 текста + 8).

   ОКНА — 1261:7360 (тип), 1261:7522 (формат), 1261:7572 (уровень),
   1261:7622 (город). Все четыре одинаковы: 344 по ширине, белые, padding 16,
   БЕЗ рамки и БЕЗ скругления, внутренняя колонка 312px с шагом 24. Высота
   не задаётся: список значений приходит из данных и длиннее макетного.
   Кнопка закрытия 32x32 в макете скрыта (1261:7361), но место под неё
   зарезервировано в правом верхнем углу — ровно туда её и ставим, поэтому
   шапка оболочки здесь абсолютная и не отодвигает заголовок вниз.

   Подложку, окно и шапку строит js/contacts-modal.js, базовые габариты
   (1280x986 под окно контактов) лежат в css/contacts-modal.css. Календарю
   нужны свои — ниже переопределены классы оболочки через модификатор
   .contacts-modal__window--calfilter, который скрипт ставит по значению
   data-contacts-modal. Тот же приём у окна зала (news.list/hall-modal) и у
   окна фото статьи. Селекторы двойные: у правил оболочки та же
   специфичность, и одиночный класс зависел бы от порядка подключения файлов.
   ========================================================================= */

/* ------------------------------------------------------ СТРОКА ФИЛЬТРОВ */

.calendar-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vine-gap, 16px);
	width: 100%;
	/* без ограничения у корня секция на широком экране разъезжается */
	max-width: var(--vine-container, 1248px);
	font-family: var(--vine-font, "Roboto", "Helvetica Neue", Arial, sans-serif);
	font-size: var(--vine-fz-text, 18px);
	color: var(--vine-color-text, #000000);
}

/* ---------------------------------------------------------------- ПОИСК */
/* 1861:10263: поле и лупа через 8px, лупа СНАРУЖИ поля (в шапке сайта она
   в кнопке 32x32 с рамкой, здесь — голая иконка 24x24). */

.calendar-filter__search {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--vine-gap-sm, 8px);
}

/* поле 1861:8485: 240x32, рамка 1px #000, скругления нет, крестик внутри */
.calendar-filter__field {
	display: flex;
	align-items: center;
	gap: var(--vine-gap-sm, 8px);
	width: 240px;
	max-width: 100%;
	height: 32px;
	padding: 0 4px 0 8px;
	overflow: hidden;
	border: 1px solid var(--vine-color-text, #000000);
	background: var(--vine-color-bg, #FFFFFF);
}

.calendar-filter__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
	color: var(--vine-color-text, #000000);
}

.calendar-filter__input:focus {
	outline: none;
}

.calendar-filter__input::placeholder {
	color: var(--vine-color-card, #C4C4C4);
	opacity: 1;
}

.calendar-filter__field-clear,
.calendar-filter__find {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.calendar-filter__field-clear[hidden] {
	display: none;
}

.calendar-filter__field-clear img,
.calendar-filter__find img {
	display: block;
	width: 24px;
	height: 24px;
}

/* ----------------------------------------------------------------- ЧИПЫ */

/* ПРО padding 7/15 вместо 8/16. Рамка в Figma нарисована внутрь фрейма:
   чип «Формат» 98x40 при тексте 66x21, то есть 16 + 66 + 16 по горизонтали
   БЕЗ учёта рамки. При border-box такие числа даёт только padding 15 + рамка 1
   — тот же приём, что у окна зала (padding 31) и окна фото статьи.
   Высота 40 в макете задана фреймом (в активном чипе её набирает крестик
   24px), поэтому здесь она стоит как min-height. */
.calendar-filter__chip {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 10px;
	max-width: 100%;
	min-height: 40px;
	padding: 7px 15px;
	border: 1px solid var(--vine-color-text, #000000);
	border-radius: 16px;
	background: var(--vine-color-bg, #FFFFFF);
}

/* выбранный фильтр: серая плашка макета */
.calendar-filter__chip--active {
	background: var(--vine-color-card, #C4C4C4);
}

/* кнопка-надпись: вся видимая часть чипа кликабельна */
.calendar-filter__chip-open {
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	/* 21px — высота текстового узла макета (18px Roboto). line-height: normal
	   даёт 22 и раздувает чип на 1px против макета. */
	line-height: 21px;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.calendar-filter__chip-clear {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	text-decoration: none;
}

.calendar-filter__chip-clear:hover,
.calendar-filter__chip-clear:focus {
	text-decoration: none;
}

.calendar-filter__chip-clear img {
	display: block;
	width: 24px;
	height: 24px;
}

.calendar-filter__reset {
	flex: 0 0 auto;
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
}

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

.contacts-modal__window.contacts-modal__window--calfilter {
	position: relative;
	gap: 0;
	width: 344px;
	max-width: 100%;
	min-height: 0;
	padding: var(--vine-gap, 16px);
}

/* Кнопка закрытия стоит в правом верхнем углу поверх колонки — на месте
   скрытой в макете «Кнопки-иконки» (x=296, y=16 при окне 344). Обычная
   шапка оболочки — отдельная строка 32px, она сдвинула бы «Фильтр» вниз. */
.contacts-modal__window--calfilter .contacts-modal__head {
	position: absolute;
	top: var(--vine-gap, 16px);
	right: var(--vine-gap, 16px);
	width: 32px;
	height: 32px;
}

/* колонка 1261:7362 — 312px, шаг 24 */
.contacts-modal__window--calfilter .contacts-modal__content {
	gap: 24px;
	padding: 0;
}

/* Заголовки: селектор с .vine-main обязателен — общее правило
   «.vine-h2, .vine-main h2» специфичнее одного класса и молча сбивает
   кегль с макетных 34px Bold. */
.calendar-filter-modal__title,
.vine-main .calendar-filter-modal__title {
	margin: 0;
	font-size: 34px;
	font-weight: 700;
	line-height: normal;
	color: var(--vine-color-text, #000000);
}

.calendar-filter-modal__subtitle,
.vine-main .calendar-filter-modal__subtitle {
	margin: 0;
	font-size: 34px;
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text, #000000);
}

/* ------------------------------------------------- ЗНАЧЕНИЯ ФИЛЬТРА */
/* 1274:7567 — поток чипов с переносом, шаг 24 по обеим осям.
   Чип значения: 37px высотой (8 + 21 + 8), радиус 16, рамка 1px #000;
   выбранный — фон #C4C4C4, невыбранный — белый. */

.calendar-filter-modal__options {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	width: 100%;
}

.calendar-filter-option {
	display: inline-flex;
	max-width: 100%;
}

/* Галочка не видна, но остаётся доступной с клавиатуры: убирать её через
   display: none нельзя — пропадёт фокус и вместе с ним управление окном. */
.calendar-filter-option__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.calendar-filter-option__text {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	/* 7/15 + рамка 1 = макетные 37px высоты и «текст + 32» ширины */
	padding: 7px 15px;
	border: 1px solid var(--vine-color-text, #000000);
	border-radius: 16px;
	background: var(--vine-color-bg, #FFFFFF);
	font-size: var(--vine-fz-text, 18px);
	line-height: 21px;
	color: var(--vine-color-text, #000000);
	cursor: pointer;
}

.calendar-filter-option__input:checked + .calendar-filter-option__text {
	background: var(--vine-color-card, #C4C4C4);
}

.calendar-filter-option__input:focus-visible + .calendar-filter-option__text {
	outline: 2px solid var(--vine-color-link, #0077FF);
	outline-offset: 2px;
}

/* ------------------------------------------------------------- КНОПКИ */
/* 1261:7383 — «Отмена» слева, «Применить» справа, между ними распор.
   Сами кнопки — общие .vine-btn и .vine-btn--dark: padding 9/12/10,
   рамка 1px, радиус 5, текст 18px, то есть ровно макетные 89x40 и 120x40. */

.calendar-filter-modal__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vine-gap, 16px);
	width: 100%;
}

.calendar-filter-modal__cancel,
.calendar-filter-modal__apply {
	cursor: pointer;
}

/* --------------------------------------------------------- УЗКИЙ ЭКРАН */
/* Мобильных состояний строки в макете нет. Ряд и так с переносом; на узком
   экране поле поиска перестаёт держать 240px, чтобы не рвать строку. */

@media (max-width: 640px) {
	.calendar-filter__search {
		width: 100%;
	}

	.calendar-filter__field {
		flex: 1 1 auto;
		width: auto;
	}
}

/* End */


/* Start:/local/templates/vine/components/bitrix/system.pagenavigation/vine_more/style.css?1787502081471*/
/*
	Кнопка «Показать ещё» (макет 1279:7435, 143×40).

	Оформление — общая кнопка проекта `.vine-btn` (белая, рамка 1px #000,
	радиус 5, текст 18px). Здесь только габариты из макета: общая кнопка
	тянется по содержимому, а в макете ширина фиксированная.
*/

.vine-more {
	min-width: 143px;
	min-height: 40px;
}

/* 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/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/calendar-promo/style.css?17873450814802*/
/* Витрина мероприятий календаря — макет 1608:8326 (подборка «Мероприятия,
   которые могут быть вам интересны», 1248×419) и три витрины месячной
   раскладки (1599:7695, 1599:7698, 1599:7700).

   Размеры дословно из макета: заголовок 40px, отступ до сетки 16, ряд из трёх
   карточек 405×356 с шагом 16, карточка — фон #C4C4C4, радиус 8, padding 8,
   вертикальный шаг 16; заголовок карточки 34px обычного начертания, подпись
   типа и бейдж «новинка» курсивом 14px, цена Bold 16px, остальное 18px.

   Заголовки написаны двойным классом намеренно: общее правило
   `.vine-h2, .vine-main h2` (34px) и `.vine-main h3` (28px Bold) специфичнее
   одного класса и молча перебило бы макетный кегль — на этом проекте уже
   трижды. Двойной класс (0,2,0) сильнее пары «класс + тег» (0,1,1). */

.calendar-promo {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap, 16px);
	width: 100%;
	max-width: var(--vine-container, 1248px);
	font-family: var(--vine-font, "Roboto", system-ui, sans-serif);
	color: var(--vine-color-text, #000000);
}

.calendar-promo__title.calendar-promo__title {
	margin: 0;
	font-size: var(--vine-fz-h1, 40px);
	font-weight: 400;
	line-height: normal;
	word-break: break-word;
}

.calendar-promo__grid {
	display: grid;
	grid-template-columns: repeat(var(--calendar-promo-columns, 3), minmax(0, 1fr));
	gap: var(--vine-gap, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.calendar-promo__item {
	display: flex;
	min-width: 0;
}

/* --------------------------------------------------- ПУСТОЕ СОСТОЯНИЕ */
/* Макет 316:6127: две строки 18px с шагом 8. */

.calendar-promo__empty {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap-sm, 8px);
}

.calendar-promo__empty-text,
.calendar-promo__empty-hint {
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
}

/* ---------------------------------------------------------- КАРТОЧКА */

.calendar-card {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--vine-gap, 16px);
	min-width: 0;
	box-sizing: border-box;
	padding: var(--vine-pad-card, 8px);
	border-radius: var(--vine-radius, 8px);
	background: var(--vine-color-card, #C4C4C4);
}

.calendar-card__title.calendar-card__title {
	margin: 0;
	font-size: var(--vine-fz-h2, 34px);
	font-weight: 400;
	line-height: normal;
	word-break: break-word;
}

.calendar-card__title-link {
	color: inherit;
	text-decoration: none;
}

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

.calendar-card__row {
	display: flex;
	align-items: flex-start;
	gap: var(--vine-gap, 16px);
	width: 100%;
}

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

.calendar-card__pic {
	display: block;
	width: 128px;
	height: 128px;
	object-fit: cover;
}

.calendar-card__meta {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--vine-gap-sm, 8px);
	min-width: 0;
}

.calendar-card__typeline {
	display: flex;
	align-items: center;
	gap: var(--vine-gap-sm, 8px);
	flex-wrap: wrap;
}

.calendar-card__type {
	font-size: var(--vine-fz-small, 14px);
	font-style: italic;
	line-height: normal;
	white-space: nowrap;
}

.calendar-card__badge {
	padding: 4px;
	border: 1px solid var(--vine-color-text, #000000);
	border-radius: var(--vine-radius-badge, 4px);
	background: var(--vine-color-badge, #FFFF00);
	font-size: var(--vine-fz-small, 14px);
	font-style: italic;
	line-height: normal;
	white-space: nowrap;
}

.calendar-card__price {
	font-size: var(--vine-fz-price, 16px);
	font-weight: 700;
	line-height: normal;
	white-space: nowrap;
}

.calendar-card__date,
.calendar-card__address,
.calendar-card__announce {
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
	word-break: break-word;
}

.calendar-card__announce p {
	margin: 0;
}

.calendar-card__more {
	align-self: flex-start;
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
	color: var(--vine-color-link, #0077FF);
	text-decoration: underline;
}

@media (max-width: 1023px) {
	.calendar-promo__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

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

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

/* End */
/* /local/templates/vine/css/calendar-page.css?17875025743521 */
/* /local/templates/vine/css/contacts-modal.css?17873146455499 */
/* /local/templates/vine/components/bitrix/catalog.section/calendar-scale/style.css?178734517312610 */
/* /local/templates/vine/components/bitrix/news.list/calendar-filter/style.css?178734566211907 */
/* /local/templates/vine/components/bitrix/system.pagenavigation/vine_more/style.css?1787502081471 */
/* /local/templates/vine/components/bitrix/catalog.section/events-card/style.css?17864796352943 */
/* /local/templates/vine/components/bitrix/news.list/certificate/style.css?1786479947967 */
/* /local/templates/vine/components/bitrix/catalog.section/calendar-promo/style.css?17873450814802 */