/* Start:/local/templates/vine/components/bitrix/catalog/vine_lessons/style.min.css?1786716927684*/
.grid .bx_content_section{margin-bottom:15px}.grid .bx_sidebar{margin-bottom:15px}.grid2x1 .bx_content_section{float:left;width:66%;margin-bottom:15px}.grid2x1 .bx_sidebar{float:right;width:33%;margin-bottom:15px;padding-left:5%;box-sizing:border-box}@media(max-width:960px){.grid2x1 .bx_sidebar{padding-left:4%}}@media(max-width:640px){.grid2x1 .bx_content_section,.grid2x1 .bx_sidebar{width:100%;float:none}.grid2x1 .bx_sidebar{padding-left:3%}}@media(max-width:479px){.grid2x1 .bx_sidebar{padding-left:1%}}.catalog-block-header{font-size:14px;font-weight:bold;text-align:left;margin:5px 0;padding:5px 0;border-bottom:2px solid #d9dee6;border-bottom-color:var(--primary);color:#000}
/* End */


/* Start:/local/templates/vine/components/bitrix/catalog.element/vine_lesson/style.css?178708339013587*/
/* =========================================================================
   catalog.element / vine_lesson — детальная страница ЗАНЯТИЯ
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y, фрейм 68:2734 (1280×3467):
   баннер 68:2738, описание + слайдер 68:2744, материалы 68:2751,
   фотогалерея 75:3311.

   Разметка совпадает со страницей курса, поэтому классы те же, что в
   catalog.element/vine_course. Стили ПРИХОДИТСЯ держать здесь: Битрикс
   подключает style.css только того шаблона компонента, который отрисован
   на странице, — vine_course/style.css на /lessons/ не загружается.
   Взяты только правила, нужные странице занятия: онлайн-вариант баннера,
   блок «для кого», «Интерфейс курса» сюда не переносились.

   Общий слой (.vine-container, .vine-btn, .vine-btn--disabled, .vine-badge,
   .vine-title-detail, .vine-field-date, .vine-scroller, .vine-divider,
   .vine-section) живёт в template_styles.css и здесь не переопределяется.
   ========================================================================= */

.vine-lesson {
	width: 100%;
	/* Контентная колонка макета — 1248px, как у баннера и всех секций. */
	max-width: var(--vine-container);
	margin-inline: auto;
}

/* H1 занятия: до баннера 16px */
.vine-lesson__title {
	margin: 0 0 var(--vine-gap);
}

/* ------------------------------------------------------------------ ЗАГОЛОВКИ */
/* Заголовки секций макета — 40px (блок 47px). Селектор с .vine-main нужен,
   чтобы перебить базовое правило .vine-main h2 (34px) из template_styles.css. */
.vine-course-title,
.vine-main .vine-course-title {
	margin: 0 0 var(--vine-gap);
	font-size: var(--vine-fz-h1);
	font-weight: 400;
	line-height: normal;
}

/* ========================================================== 1. ГЛАВНЫЙ БАННЕР */
/* Инстанс 1248×523,85: фон-фото на всю площадь, поверх снизу полупрозрачная
   белая панель rgba(255,255,255,0.8). */
.vine-course-banner {
	position: relative;
	width: 100%;
	max-width: var(--vine-container);
	aspect-ratio: 1248 / 523.8519;
	overflow: hidden;
}

.vine-course-banner__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Панель прижата к низу: отступы 16 по бокам, 8 сверху (бейдж на y=8), 16 снизу.
   У занятия панель на строку «Модуль курса:» выше, чем у курса, — высоту не
   фиксируем, она набирается содержимым. */
.vine-course-banner__panel {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 8px var(--vine-side) var(--vine-side);
	background: var(--vine-color-overlay);
}

/* Бейдж 62×24 на y=8, следом колонки на y=40 → зазор 8 */
.vine-course-banner__badge {
	margin: 0 0 var(--vine-gap-sm);
	line-height: 0;
}

/* Общий .vine-badge растёт до 26px от собственного line-height шрифта —
   в баннере высоту фиксируем по макету, не трогая сам общий класс. */
.vine-course-banner__badge .vine-badge {
	height: 24px;
	align-items: center;
	line-height: 16px;
}

.vine-course-banner__cols {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

/* Frame 377 очного баннера: 1216 = 203 + 120 + 435 + 120 + 338 */
.vine-course-banner__cols--offline {
	gap: 24px 120px;
}

.vine-course-banner__col {
	flex: 0 0 auto;
	min-width: 0;
	max-width: 100%;
}

.vine-course-banner__col--pick {
	width: 203px;
}

.vine-course-banner--offline .vine-course-banner__col--info {
	width: 435px;
}

.vine-course-banner--offline .vine-course-banner__col--buy {
	width: 338px;
}

/* Строки панели: кегль 18, строка 21px, шаг между строками 29 → зазор 8 */
.vine-course-banner__label,
.vine-course-banner__seats,
.vine-course-banner__line,
.vine-course-banner__contacts {
	margin: 0 0 var(--vine-gap-sm);
	font-size: var(--vine-fz-text);
	font-weight: 400;
	line-height: 21px;
}

.vine-course-banner__line:last-child,
.vine-course-banner__contacts:last-child {
	margin-bottom: 0;
}

/* «Выберите начало курса» и «Осталось мест: 12» — Bold */
.vine-course-banner__label,
.vine-course-banner__seats {
	font-weight: 700;
}

/* «Мест не осталось» — красным (макет, состояние 16:217) */
.vine-course-banner__seats.is-sold-out {
	color: #FF0000;
}

/* Поле выбора сеанса 139×40. Базовый .vine-field-date снимает системную
   отрисовку — возвращаем её, чтобы у списка была штатная стрелка: отдельной
   иконки стрелки в /local/templates/vine/images/ нет, а рисовать её нельзя. */
.vine-course-banner__select {
	width: 139px;
	max-width: 100%;
	-webkit-appearance: auto;
	appearance: auto;
}

/* Адрес и телефон одной строкой: 279 + 16 + 140 (Frame 574) */
.vine-course-banner__contacts {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--vine-gap);
}

.vine-course-banner__phone {
	color: var(--vine-color-link);
	text-decoration: underline;
}

/* Цена: 40px Bold, блок 47, до кнопок 16 */
.vine-course-banner__price {
	margin: 0 0 var(--vine-gap);
	font-size: var(--vine-fz-h1);
	font-weight: 700;
	line-height: 47px;
}

/* «В корзину» 109×40 + зазор 32 + кнопка листа ожидания.
   У занятия подпись длиннее («Убрать из листа ожидания», ~213px), поэтому
   ширина второй кнопки минимальная, а не жёсткая. */
.vine-course-banner__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--vine-gap-sm) 32px;
}

.vine-course-banner__cart,
.vine-course-banner__waitlist {
	height: var(--vine-field-h);
	padding: 0 12px;
	line-height: normal;
}

.vine-course-banner__cart {
	width: 109px;
}

.vine-course-banner__waitlist {
	min-width: 197px;
}

/* Штатный catalog.product.subscribe рисует <span>, а не <button> —
   выравниваем его по кнопке макета. */
span.vine-course-banner__waitlist {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* ------------------------------------------- строка связи с курсом (68:2738) */
/* Нижняя строка панели баннера — «Модуль курса:  <название курса>»,
   ссылка #0077FF (I68:2738;1861:10353). Отбивка от блока кнопок — 16px. */
.vine-lesson-banner__course {
	margin: var(--vine-gap) 0 0;
	font-size: var(--vine-fz-text);
	font-weight: 400;
	line-height: 21px;
}

.vine-lesson-banner__course-link {
	color: var(--vine-color-link);
}

a.vine-lesson-banner__course-link {
	text-decoration: underline;
}

/* ================================================= 2. ОПИСАНИЕ + ГАЛЕРЕЯ-СЛАЙДЕР */
/* Две колонки 616 + 616 с зазором 16 = 1248 */
.vine-course-about__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vine-gap);
	align-items: start;
}

.vine-course-about__detail,
.vine-course-about__detail p {
	margin: 0;
	font-size: var(--vine-fz-text);
	line-height: 21px;
}

.vine-course-about__detail p + p {
	margin-top: 21px;
}

/* Кадр 570×313 у левого края правой колонки */
.vine-course-slider__frame {
	position: relative;
	width: 570px;
	max-width: 100%;
	aspect-ratio: 570 / 313;
	overflow: hidden;
	background: var(--vine-color-card);
}

.vine-course-slider__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

/* Панель управления под кадром: «<» 26×29, счётчик 28×21, «>» 26×29 */
.vine-course-slider__controls {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: var(--vine-gap);
	margin-top: var(--vine-gap);
	height: 29px;
}

/* Стрелки — текстовые символы на плашках #C4C4C4. Разный радиус (4 против 8) —
   из макета, это не ошибка вёрстки. */
.vine-course-slider__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 29px;
	padding: 0;
	border: 0;
	background: var(--vine-color-card);
	font-family: var(--vine-font);
	font-size: var(--vine-fz-text);
	line-height: normal;
	color: var(--vine-color-text);
}

.vine-course-slider__arrow--prev {
	border-radius: 4px;
}

.vine-course-slider__arrow--next {
	border-radius: 8px;
}

/* Первый кадр: «назад» визуально неактивна (#777777) */
.vine-course-slider__arrow.is-inactive {
	color: var(--vine-color-disabled);
}

.vine-course-slider__counter {
	margin-top: 4px;
	font-size: var(--vine-fz-text);
	line-height: 21px;
}

/* ============================================================ 3. МАТЕРИАЛЫ */
/* Заголовок 47, зазор 16, строка ссылок 21; зазор между ссылками 32 */
.vine-course-docs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vine-gap-sm) 32px;
	margin: 0;
}

.vine-course-docs__link {
	color: var(--vine-color-link);
	font-size: var(--vine-fz-text);
	line-height: 21px;
	text-decoration: underline;
}

/* =========================================================== 4. ФОТОГАЛЕРЕЯ */
/* Лента шире контейнера 1248: 3×570 + 2×16 = 1742. Переполнение из макета
   воспроизводим прокруткой (утилита .vine-scroller из общего слоя). */
.vine-course-gallery__item {
	width: 570px;
}

.vine-course-gallery__img {
	width: 570px;
	height: 313px;
	max-width: none;
	object-fit: cover;
	background: var(--vine-color-card);
}

.vine-course-gallery__list:focus-visible {
	outline: 2px solid var(--vine-color-link);
	outline-offset: 2px;
}

/* ====================================================== 5. СПОСОБЫ ОПЛАТЫ */
/* Логотип 200×42, под ним абзац про рассрочку и «Подробнее →».
   Сам контент лежит во включаемой области /include/payment-methods.php. */
.vine-course-payment__logo {
	width: 200px;
	height: 42px;
	object-fit: contain;
}

.vine-course-payment__text {
	margin: var(--vine-gap) 0 0;
	font-size: var(--vine-fz-text);
	line-height: 21px;
}

.vine-course-payment__more {
	display: inline-block;
	margin-top: 4px;
	color: var(--vine-color-link);
	font-size: var(--vine-fz-text);
	line-height: 21px;
	text-decoration: underline;
}

/* ---------------------------------------------------------------- АДАПТИВ */
/* Мобильных и планшетных раскладок в макете нет ни для одной секции.
   Ниже — только защита от горизонтальной прокрутки страницы. */
@media (max-width: 1279px) {
	.vine-course-banner__col--pick,
	.vine-course-banner--offline .vine-course-banner__col--info,
	.vine-course-banner--offline .vine-course-banner__col--buy {
		width: auto;
	}

	.vine-course-banner__cols--offline {
		gap: 16px 64px;
	}
}

@media (max-width: 1023px) {
	.vine-course-banner {
		aspect-ratio: auto;
	}

	.vine-course-banner__bg {
		position: static;
		height: auto;
		aspect-ratio: 1248 / 523.8519;
	}

	.vine-course-banner__panel {
		position: static;
	}

	.vine-course-about__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.vine-course-slider__frame {
		width: 100%;
	}

	.vine-course-gallery__item,
	.vine-course-gallery__img {
		width: 80vw;
	}

	.vine-course-gallery__img {
		height: auto;
		aspect-ratio: 570 / 313;
	}
}

/* Баннер без фонового фото. Пропорция 1248×523,85 держит площадь под фото;
   если фото не залито, на странице остаётся белое поле в пол-экрана и она
   выглядит несвёрстанной. Тогда панель перестаёт быть наложением и сама
   задаёт высоту блока. */
.vine-course-banner--no-image {
	aspect-ratio: auto;
}

.vine-course-banner--no-image .vine-course-banner__panel {
	position: static;
	padding-left: 0;
	padding-right: 0;
	background: none;
}

/* End */


/* Start:/local/templates/vine/components/bitrix/news.list/teachers-list/style.css?17867172055774*/
/* =========================================================================
   Преподаватели — bitrix:news.list / teachers-list
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y: 1861:10291 (заголовок), 66:2699
   (сетка карточек), 1617:10422 (кнопка), 75:3415 (должность, слой скрыт).

   Размеры из макета:
     секция      — колонка, шаг 16px;
     заголовок   — 40px Regular;
     карточка    — 405,33 (три в ряд при контейнере 1248 и зазоре 16),
                   рамка 1px #000, padding 8px, внутренний шаг 10px,
                   содержимое по центру, высота карточек в ряду общая;
     фото        — 270×220 (в разметке отдаётся ×2 под retina);
     ФИО         — 18px Bold, по центру, перенос после фамилии;
     должность   — 14px Regular, по левому краю;
     описание    — 18px Regular, три строки с многоточием;
     «Подробнее» — 18px, #0077FF, подчёркнутая;
     кнопка      — 188×40, белая с рамкой (общий класс .vine-btn).
   ========================================================================= */

.teachers {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--vine-gap, 16px);
}

/* двойной класс — чтобы перебить общее правило .vine-main h2 базового слоя */
.teachers .teachers__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;
}

/* ------------------------------------------------------------------ СЕТКА */
/* три карточки в ряд: (1248 − 2×16) / 3 = 405,33 */
.teachers__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--vine-gap, 16px);
	width: 100%;
}

.teachers__item {
	display: flex;
	flex: 0 0 calc((100% - 2 * var(--vine-gap, 16px)) / 3);
	max-width: calc((100% - 2 * var(--vine-gap, 16px)) / 3);
	min-width: 0;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: var(--vine-pad-card, 8px);
	border: 1px solid var(--vine-color-text, #000000);
	background: var(--vine-color-bg, #FFFFFF);
}

/* ---------------------------------------------------------------- КАРТОЧКА */
.teachers__photo {
	flex: 0 0 auto;
	width: 270px;
	max-width: 100%;
	height: 220px;
	overflow: hidden;
}

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

.teachers .teachers__name {
	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;
}

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

/* описание в макете обрывается многоточием на третьей строке */
.teachers__text {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	width: 100%;
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text, #000000);
	word-break: break-word;
}

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

/* ----------------------------------------------------- РАСКРЫТИЕ СПИСКА */
/* Пояснение 1617:10425: кнопка не ведёт на страницу, а разворачивает весь
   список преподавателей курса здесь же. Разметка содержит всех, лишние
   карточки скрыты, кнопка их показывает и после этого исчезает.
   Класс .teachers--js ставит script.js: пока скрипт не отработал, скрывать
   карточки нельзя — иначе без JS часть преподавателей пропала бы совсем. */
.teachers__more {
	display: none;
	min-width: 188px;
}

.teachers--js .teachers__item--rest {
	display: none;
}

.teachers--js .teachers__more {
	display: inline-flex;
}

.teachers--js.teachers--expanded .teachers__item--rest {
	display: flex;
}

.teachers--js.teachers--expanded .teachers__more {
	display: none;
}

/* карточка, на которую после раскрытия уводится фокус, рамку не рисует
   поверх макета — оставляем штатный контур браузера только с клавиатуры */
.teachers__item:focus:not(:focus-visible) {
	outline: none;
}

/* ------------------------------------------------------------- АДАПТИВ */
/* Мобильных раскладок в макете нет: сетка просто перестраивается,
   чтобы карточка 405px не ломала колонку на узком экране. */
@media (max-width: 1024px) {
	.teachers__item {
		flex-basis: calc((100% - var(--vine-gap, 16px)) / 2);
		max-width: calc((100% - var(--vine-gap, 16px)) / 2);
	}
}

@media (max-width: 640px) {
	.teachers__item {
		flex-basis: 100%;
		max-width: 100%;
	}

	.teachers__more {
		width: 100%;
	}
}

/* End */


/* Start:/local/templates/vine/components/bitrix/news.list/course-result-document/style.css?17867172161883*/
/* =========================================================================
   По окончании вы получите — bitrix:news.list / course-result-document
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y, узел 2008:17883 (Frame 661).

   Размеры из макета:
     секция    — колонка, шаг 16px между заголовком и текстом;
     заголовок — 40px Regular;
     блок      — 18px Regular во всю ширину контейнера;
     первая строка — маркер-ромб + название документа Bold;
     абзацы описания идут вплотную, без отбивок (leading normal).
   ========================================================================= */

.result-doc {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--vine-gap, 16px);
}

/* двойной класс — чтобы перебить общее правило .vine-main h2 базового слоя */
.result-doc .result-doc__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;
}

.result-doc__body {
	width: 100%;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text, #000000);
	word-break: break-word;
}

.result-doc__name {
	margin: 0;
	font-weight: 400;
}

.result-doc__name b {
	font-weight: 700;
}

/* абзацы описания приходят из PREVIEW_TEXT — в макете между ними
   нет вертикальных отступов, строки идут подряд */
.result-doc__text,
.result-doc__text p,
.result-doc__text ul,
.result-doc__text ol {
	margin: 0;
}

.result-doc__text ul,
.result-doc__text ol {
	padding-left: 27px;
}

/* 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/catalog/vine_lessons/style.min.css?1786716927684 */
/* /local/templates/vine/components/bitrix/catalog.element/vine_lesson/style.css?178708339013587 */
/* /local/templates/vine/components/bitrix/news.list/teachers-list/style.css?17867172055774 */
/* /local/templates/vine/components/bitrix/news.list/course-result-document/style.css?17867172161883 */
/* /local/templates/vine/components/bitrix/news.list/course-reviews/style.css?17867178453611 */
/* /local/templates/vine/components/bitrix/news.list/faq-accordion/style.css?17867178372833 */