/* Start:/local/templates/vine/components/bitrix/news.detail/vine_hall/style.css?17873261106123*/
/* ======================================= ДЕТАЛЬНАЯ ДЕГУСТАЦИОННОГО ЗАЛА
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y, узел 1963:8523.
   Все числа — координаты и размеры макета, а не подбор «чтобы влезло».
   Общий слой (токены, типографика, .vine-container) — в template_styles.css,
   здесь он не переопределяется.
   ==================================================================== */

.hall-detail {
	/* ширина контента макета: ограничение ставим у корня секции, иначе на
	   широком экране баннер разъедется. Центрирует .vine-container страницы */
	width: 100%;
	max-width: var(--vine-container);
	/* 16px под крошками уже даёт .vine-breadcrumb-wrap, своего отступа нет:
	   крошки кончаются на 16, H1 начинается на 32 */
	margin: 0;
}

/* ------------------------------------------------------- H1 (1963:8528) */
/* общее правило .vine-main h1 = 40px и специфичнее одного класса,
   поэтому селектор из двух классов */
.hall-detail .hall-detail__title {
	margin: 0;
	font-family: var(--vine-font);
	font-size: 48px;   /* Roboto Regular 48px из макета */
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text);
}

/* --------------------------------------------------- БАННЕР (1963:8933) */
/* 1248 x 353: панель 391 + шаг 16 + фото 841 */
.hall-detail__banner {
	display: flex;
	align-items: stretch; /* серая панель тянется на высоту фото */
	gap: var(--vine-gap); /* 16px */
	/* H1 кончается на 88, баннер начинается на 104 */
	margin-top: var(--vine-gap);
}

/* ------------------------------- серая инфопанель 391x353 (1963:9002) */
.hall-detail__info {
	flex: 0 0 391px;
	max-width: 391px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center; /* в макете содержимое по центру панели */
	gap: 32px;               /* шаг между парами «подпись/значение» */
	padding: var(--vine-gap);
	/* radius 16 — собственный радиус панели макета, крупнее карточного
	   --vine-radius (8), поэтому числом */
	border-radius: 16px;
	background: var(--vine-color-card);
	text-align: center;
}

/* пара «подпись / значение» (1964:9009 и 1964:9010) */
.hall-detail__pair {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--vine-gap); /* 16px между подписью и значением */
	min-width: 0;
}

.hall-detail__label {
	font-size: var(--vine-fz-text); /* 18px */
	font-weight: 700;               /* Roboto Bold */
	line-height: normal;
	word-break: break-word;
}

.hall-detail__value {
	font-size: var(--vine-fz-text); /* 18px */
	font-weight: 400;
	line-height: normal;
	word-break: break-word;
}

/* ------------------------------------------ фото 841x353 (1963:8934) */
.hall-detail__photo {
	flex: 1 1 0;
	min-width: 0;
	/* 841 x 353,0123 — это ровно 405/170; ширину отдаём флексу,
	   высоту считает пропорция */
	aspect-ratio: 405 / 170;
	overflow: hidden;
	/* скругления у кадра в макете нет */
	border-radius: 0;
}

.hall-detail__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* детальной картинки нет — серая плашка тех же габаритов, чтобы место под
   кадр не схлопнулось и высота баннера осталась макетной */
.hall-detail__photo--empty {
	background: var(--vine-color-card);
}

/* ---------------------------------- ОПИСАНИЕ (1963:8534 и 1963:8996) */
.hall-detail__text {
	/* баннер кончается на 457, первый абзац начинается на 473 */
	margin-top: var(--vine-gap);
	font-size: var(--vine-fz-text); /* 18px Regular */
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text);
	word-break: break-word;
}

/* абзацы идут с тем же шагом 16: первый кончается на 557, второй начинается
   на 573. Сброс полей у p лежит в общем слое (template_styles.css), поэтому
   здесь только шаг соседним селектором. Своего правила `.hall-detail__text p`
   тут быть не должно: оно специфичнее `> * + *` и погасило бы шаг между
   абзацами — проверено замером, абзацы слипались вплотную */
.hall-detail__text > * + * {
	margin-top: var(--vine-gap);
}

/* ------------------------------------------------------------ УЗКИЙ ЭКРАН */
/* Мобильных фреймов в макете нет вовсе: панель 391 + фото 841 в строку на
   узком экране не помещаются, поэтому ниже 900px раскладываем в колонку —
   так же, как карточки залов на «О нас» */
@media (max-width: 900px) {
	.hall-detail .hall-detail__title {
		font-size: var(--vine-fz-h1);
	}

	.hall-detail__banner {
		flex-direction: column;
	}

	.hall-detail__info {
		flex: 0 0 auto;
		max-width: none;
		width: 100%;
	}

	/* в колонке flex-basis считается по высоте: с «flex: 1 1 0» кадр получал
	   высоту 0 и фото пропадало (проверено замером в 390px). Поэтому в
	   колонке размер задаёт ширина, а высоту по-прежнему считает пропорция */
	.hall-detail__photo {
		flex: 0 0 auto;
		width: 100%;
	}
}

/* End */


/* Start:/local/templates/vine/components/bitrix/catalog.section/hall-events-by-month/style.css?17873257526673*/
/* =========================================================================
   Лента «Ближайшие мероприятия» на детальной дегустационного зала,
   сгруппированная по месяцам.
   Макет: Figma HA2Vx4dnWPRDdb6SL7tM3y, узел 2005:17060, блок 1248×1384.

     2005:17061  «Ближайшие мероприятия»  Roboto Regular 40px, блок 47, y = 0
     2005:17063  «Август 2026»            Roboto Regular 34px, блок 40, y = 63
     2008:17330  сетка месяца 1248×378,   3 колонки по 405,33, шаг 16, y = 119
     2008:17456  «Ноябрь 2026»            34px, блок 40,  y = 513
     2008:17458  сетка месяца 1248×759,   два ряда,       y = 569
     2008:17787  кнопка 426×40,           y = 1344

   Вертикальный ритм — сплошные 16px:
     47 + 16 + 40 + 16 + 378 + 16 + 40 + 16 + 759 + 16 + 40 = 1384.

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

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

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

/* Заголовок секции — 40px Regular, блок 47 (2005:17061). */
.hall-events__title,
.vine-main .hall-events__title {
	margin: 0;
	font-size: var(--vine-fz-h1, 40px);
	font-weight: 400;
	line-height: normal;
}

/* Месяц: заголовок + своя сетка, шаг тот же 16px. */
.hall-events__month {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap, 16px);
}

/* Заголовок месяца «Август 2026» — 34px Regular, блок 40 (2005:17063).
   Это h3 по смыслу (подзаголовок внутри секции), а базовое .vine-main h3 —
   28px Bold, поэтому кегль и насыщенность задаются здесь явно. */
.hall-events__month-title,
.vine-main .hall-events__month-title {
	margin: 0;
	font-size: var(--vine-fz-h2, 34px);
	font-weight: 400;
	line-height: normal;
}

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

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

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

/* Кнопка «Показать все мероприятия в …» (2008:17787) — штатная .vine-btn
   из template_styles.css: padding 9/12/10, рамка 1px #000, radius 5, 18px.
   Ширина по содержимому (в макете 426), поэтому кнопка не растягивается
   на всю колонку flex-контейнера. */
.hall-events__more {
	align-self: flex-start;
}

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

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

/* 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/course-reviews/style.css?17867178453611*/
/* =========================================================================
   Отзывы на детальной — bitrix:news.list / course-reviews
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y, узел 1641:11136 (очный курс),
   он же 960:12354 «Другие отзывы» на онлайн-курсе.

   Из макета: заголовок 40px; цитата Roboto Italic 18px с чёрной чертой
   слева 5px и отступом 16px; подпись «— Имя, возраст» 18px без курсива;
   шаг между отзывами 16px, внутри отзыва 8px; кнопка «Показать ещё»
   143×40; строка «Вы посмотрели все отзывы» 18px; ссылка «Оставить отзыв»
   18px синяя подчёркнутая.

   Черта, курсив и подпись живут в общем слое (.vine-quote,
   .vine-quote__author), кнопка — .vine-btn. Здесь только раскладка секции.
   ========================================================================= */

.course-reviews {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap, 16px);
}

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

/* ------------------------------------------------------------- СПИСОК */
.course-reviews__list {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap, 16px);
}

/* .vine-quote даёт черту, отступ и курсив; здесь — только внутренний шаг */
.course-reviews__item {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap-sm, 8px);
}

.course-reviews__quote {
	margin: 0;
	font: inherit;
	color: inherit;
	word-break: break-word;
}

.course-reviews__quote p {
	margin: 0 0 var(--vine-gap-sm, 8px);
}

.course-reviews__quote p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------- ПОДВАЛ */
/* Кнопка, строка «всё» и ссылка идут друг под другом с шагом 16px.
   В макете кнопка и строка нарисованы одновременно, но это два состояния
   одного места — лишнее скрыто атрибутом hidden. */
.course-reviews__foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--vine-gap, 16px);
}

.course-reviews__foot > [hidden] {
	display: none;
}

/* «Показать ещё» — 143×40 из макета: ширина набирается текстом 18px
   и полями .vine-btn, поэтому фиксируем минимумы, а не жёсткий размер */
.course-reviews__more {
	min-width: 143px;
	min-height: 40px;
}

.course-reviews__more[aria-busy="true"] {
	opacity: 0.6;
	pointer-events: none;
}

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

.course-reviews__add {
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
	color: var(--vine-color-link, #0077FF);
	text-decoration: underline;
}

/* ------------------------------------------------------------- ФОРМА */
.course-reviews__form {
	margin: 0;
}

.course-reviews__form[hidden] {
	display: none;
}

/* End */


/* Start:/local/templates/vine/components/bitrix/news.list/faq-accordion/style.css?17867178372833*/
/* =========================================================================
   Часто задаваемые вопросы — bitrix:news.list / faq-accordion
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y, узел 1894:8503 (1248×356).

   Из макета: заголовок 40px; вопрос 18px, цвет #0077FF, подчёркивание
   пунктирное; ответ 18px, цвет #000000; шаг между вопросами 16px,
   от вопроса до ответа 8px; иконок-переключателей нет.
   Пунктир, сброс кнопки и цвет ссылки берём из общего слоя
   (.vine-pseudo-link / .vine-pseudo-link--link в template_styles.css).
   ========================================================================= */

.faq {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap, 16px);
}

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

.faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap, 16px);
}

.faq__item {
	margin: 0;
}

/* -------------------------------------------------------------- ВОПРОС */
/* Сброс кнопки и пунктир уже в .vine-pseudo-link; здесь только кегль,
   перенос длинных вопросов и зона клика по всей строке. */
.faq .faq__question {
	display: inline;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	word-break: break-word;
}

/* Вопрос без ответа: цвет и кегль как в макете, но без пунктира и без
   курсора-руки — раскрывать нечего, обещать интерактив нельзя. */
.faq .faq__question--plain {
	display: block;
	margin: 0;
	color: var(--vine-color-link, #0077FF);
	text-decoration: none;
	cursor: auto;
}

/* фокус с клавиатуры виден — в макете состояний фокуса нет,
   поэтому берём системную рамку, а не свой цвет */
.faq .faq__question[data-faq-toggle]:focus-visible {
	outline: 2px solid var(--vine-color-text, #000000);
	outline-offset: 2px;
}

/* -------------------------------------------------------------- ОТВЕТ */
.faq__answer {
	margin: var(--vine-gap-sm, 8px) 0 0;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text, #000000);
	word-break: break-word;
}

.faq__answer p {
	margin: 0 0 var(--vine-gap-sm, 8px);
}

.faq__answer p:last-child {
	margin-bottom: 0;
}

/* End */
/* /local/templates/vine/components/bitrix/news.detail/vine_hall/style.css?17873261106123 */
/* /local/templates/vine/components/bitrix/catalog.section/hall-events-by-month/style.css?17873257526673 */
/* /local/templates/vine/components/bitrix/catalog.section/events-card/style.css?17864796352943 */
/* /local/templates/vine/components/bitrix/news.list/course-reviews/style.css?17867178453611 */
/* /local/templates/vine/components/bitrix/news.list/faq-accordion/style.css?17867178372833 */