/* Start:/local/templates/vine/components/bitrix/news/vine_teachers/style.css?17871539726424*/
/* Страницы «Преподаватели» (2090:18002) и «Преподаватель» (2093:20344):
   обвязка, которую рисует сам комплексный шаблон, — панель фильтров,
   алфавит, заголовки секций, сетка мероприятий с плиткой заявки и
   заключительный текстовый блок. Карточки, детальная, материалы и форма
   лежат в style.css своих шаблонов. */

/* ------------------------------------------------ панель фильтров 2091:19669 */

.vine-teachers-intro {
	display: flex;
	flex-direction: column;
	gap: 24px;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--vine-container);
	padding: var(--vine-gap);
	border-radius: var(--vine-gap);
	background: var(--vine-color-card);
}

.vine-teachers-intro__title {
	margin: 0;
	font-family: var(--vine-font);
	font-size: var(--vine-fz-h1);
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text);
}

.vine-teachers-intro__lead {
	margin: 0;
	font-size: var(--vine-fz-text);
	line-height: normal;
}

.vine-teachers-intro__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 32px;
	margin: 0;
}

/* поле поиска 2090:19335 — 344×32, белое, рамка 1px, лупа справа */

.vine-teachers-search {
	display: flex;
	align-items: center;
	gap: var(--vine-gap);
}

.vine-teachers-search__field {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 344px;
	max-width: 100%;
	height: 32px;
	padding: 0 4px 0 8px;
	border: 1px solid var(--vine-color-text);
	background: var(--vine-color-bg) url("/local/templates/vine/images/icon-search.svg") no-repeat right 4px center;
	background-size: 20px 20px;
}

.vine-teachers-search__input {
	flex: 1 0 0;
	min-width: 0;
	padding: 0 28px 0 0;
	border: 0;
	background: transparent;
	font-family: var(--vine-font);
	font-size: var(--vine-fz-text);
	line-height: normal;
	color: var(--vine-color-text);
}

.vine-teachers-search__input::placeholder {
	color: var(--vine-color-card);
	opacity: 1;
}

.vine-teachers-search__input:focus {
	outline: none;
}

/* кнопка «Найти» 2090:19336 */

.vine-teachers-search__submit {
	padding: 9px 12px 10px;
	border: 1px solid var(--vine-color-text);
	border-radius: var(--vine-radius-btn);
	background: var(--vine-color-btn);
	font-family: var(--vine-font);
	font-size: var(--vine-fz-text);
	line-height: normal;
	color: var(--vine-color-btn-text);
	cursor: pointer;
}

/* алфавит 2091:19606 — буквы 18px, #0077FF, подчёркивание пунктиром, шаг 16 */

.vine-teachers-alphabet {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vine-gap);
}

.vine-teachers-alphabet__item {
	font-size: var(--vine-fz-text);
	line-height: normal;
	color: var(--vine-color-link);
	text-decoration: underline dotted;
	text-underline-position: from-font;
}

.vine-teachers-alphabet__item--current {
	font-weight: 700;
	text-decoration: none;
	color: var(--vine-color-text);
}

/* ------------------------------------------------------ заголовки страницы */

/* Селектор с .vine-main намеренно: общее правило шаблона сайта
   «.vine-h2, .vine-main h2 { font-size: var(--vine-fz-h2) }» специфичнее
   одного класса и сажало заголовок сетки с макетных 48px на 34px. */
.vine-main .vine-teachers-heading {
	margin: 0;
	font-family: var(--vine-font);
	font-size: 48px;
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text);
}

.vine-main .vine-teachers-events__title,
.vine-main .vine-teacher-events__title,
.vine-main .vine-teachers-outro__title {
	margin: 0;
	font-family: var(--vine-font);
	font-size: var(--vine-fz-h1);
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text);
}

.vine-teachers-events,
.vine-teacher-events,
.vine-teachers-outro {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap);
	width: 100%;
	max-width: var(--vine-container);
}

.vine-teachers-outro__text {
	margin: 0;
	font-size: var(--vine-fz-text);
	line-height: normal;
}

/* ------------------------- сетка мероприятий детальной + плитка 2095:21531 */

/* Плитка стоит третьей ячейкой той же сетки, что и карточки мероприятий.
   Чтобы не трогать общий шаблон events-card, его обёртки распластываются
   по нашей сетке: и .events, и .events__grid становятся display: contents,
   а их li — прямыми ячейками. */

.vine-teacher-events__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--vine-gap);
	align-items: stretch;
}

.vine-teacher-events__grid > .events--flat,
.vine-teacher-events__grid > .events--flat > .events__grid {
	display: contents;
}

.vine-teacher-request-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 9px 12px 10px;
	border: 1px solid var(--vine-color-text);
	border-radius: var(--vine-radius-btn);
	background: var(--vine-color-bg);
	font-family: var(--vine-font);
	font-size: var(--vine-fz-h1);
	font-weight: 700;
	line-height: normal;
	text-align: center;
	color: var(--vine-color-text);
	overflow-wrap: break-word;
	cursor: pointer;
}

@media (max-width: 900px) {
	.vine-teacher-events__grid {
		grid-template-columns: 1fr;
	}

	.vine-teacher-request-tile {
		font-size: var(--vine-fz-h3);
	}
}

/* Лента мероприятий: в макете обеих страниц три карточки в ряд, а общий
   шаблон events-card раскладывает их по две. Ширину колонок задаём здесь,
   через штатный модификатор SECTION_MOD_CLASS, — сам events-card
   используется и на главной и остаётся нетронутым. */
.events--cols3 .events__grid {
	grid-template-columns: repeat(3, 1fr);
}

/* End */


/* Start:/local/templates/vine/components/bitrix/news.detail/vine_teacher/style.css?17871501976477*/
/* =========================================================================
   Карточка преподавателя — bitrix:news.detail / vine_teacher
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y: 2093:20351 (серая карточка),
   2094:21089 (плашка «Философия преподавания …»), 2093:20521 (галерея
   «Сертификаты и дипломы преподавателя»).

   Размеры из макета:
     между блоками — 24px;
     серая карточка и плашка — фон #C4C4C4, радиус 16, padding 16,
                               ширина 1248 (её задаёт .vine-container);
     строка карточки — две колонки с зазором 24;
     фото            — 270×220, обрезка по центру (в разметке отдаётся ×2);
     правая колонка  — шаг 24 между блоками;
     ФИО             — 40px Regular, чёрный;
     регалии, биография, стаж — 18px Regular;
     отзывы          — цитаты шаблона course-reviews, без заголовка и подвала;
     заголовок философии — 18px Bold;
     заголовок галереи   — 40px Regular;
     плитка сертификата  — 140×200, шаг 16 по обеим осям, восемь в ряду,
                           ряды по центру, обрезка по центру.

   Общий слой (токены, типографика, .vine-divider) лежит в template_styles.css
   и здесь не переопределяется.
   ========================================================================= */

.teacher {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* ------------------------------------------- 1. СЕРАЯ КАРТОЧКА (2093:20351) */
.teacher__card {
	width: 100%;
	padding: 16px;
	border-radius: 16px;
	background: var(--vine-color-card, #C4C4C4);
}

/* фото слева, текстовая колонка справа; зазор 24 */
.teacher__row {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.teacher__photo {
	flex: 0 0 270px;
	width: 270px;
	height: 220px;
	overflow: hidden;
}

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

/* min-width: 0 — иначе длинное слово в биографии распирает колонку */
.teacher__info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* двойной класс — перебить .vine-main h1 из базового слоя */
.teacher .teacher__name {
	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;
}

.teacher__position,
.teacher__bio,
.teacher__experience {
	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;
}

/* биография приходит из DETAIL_TEXT несколькими абзацами */
.teacher__bio p {
	margin: 0;
}

.teacher__bio p + p {
	margin-top: 16px;
}

/* ------------------------------------------------- ОТЗЫВЫ В СЕРОЙ КАРТОЧКЕ */
/* Цитаты рисует чужой шаблон course-reviews; его файлы не трогаем, а лишнее
   для этого места гасим здесь, внутри своей обёртки.
   Собственный шаг секции у course-reviews не нужен: отзывы стоят последним
   блоком колонки, а её шаг 24 уже отбил их от строки стажа. */
.teacher__reviews .course-reviews {
	gap: 0;
}

/* подвал секции — кнопка «Показать ещё» и строка «Вы посмотрели все отзывы»;
   в этом месте макета их нет, большой блок отзывов идёт ниже по странице */
.teacher__reviews .course-reviews__foot {
	display: none;
}

/* ------------------------------------------------ 2. ФИЛОСОФИЯ (2094:21089) */
.teacher__philosophy {
	width: 100%;
	padding: 16px;
	border-radius: 16px;
	background: var(--vine-color-card, #C4C4C4);
	display: flex;
	flex-direction: column;
	gap: 24px;
}

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

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

/* ---------------------------------------------- 3. СЕРТИФИКАТЫ (2093:20521) */
.teacher__certs {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* двойной класс — перебить .vine-main h2 (34px) из базового слоя */
.teacher .teacher__certs-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;
}

/* восемь плиток в ряд: 8×140 + 7×16 = 1232 при контейнере 1248;
   неполный ряд макет ставит по центру */
.teacher__certs-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.teacher__certs-item {
	flex: 0 0 auto;
	width: 140px;
	height: 200px;
	overflow: hidden;
}

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

/* -------------------------------------------------------------- АДАПТИВ */
/* Мобильных раскладок у этих секций в макете нет. Ниже 900px карточка
   перестаёт помещаться в две колонки — переносим фото над текстом,
   размеры и отступы макета при этом не меняются. */
@media (max-width: 900px) {
	.teacher__row {
		flex-wrap: wrap;
	}

	.teacher__info {
		flex-basis: 100%;
	}
}

/* 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/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/form.result.new/teacher_request/style.css?17871503297630*/
/* =========================================================================
   form.result.new / teacher_request — заявка на обучение у преподавателя.
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y: окно с формой 2095:21525.

   Из макета: окно — белое, рамка 1px #000, радиус 16, padding 32, шаг строк 8,
   ширина 558; кнопка закрытия 32×32 (белая, рамка 1px, радиус 5) прижата
   вправо, крестик внутри 24×24; подписи и текст 18px; поля 344×32 с рамкой
   1px #000 без скругления; поле даты 148×32 с иконкой календаря 24×24;
   комментарий 344×128; счётчик участников 139×32: кнопки #151515 по краям
   («−» 32px, «+» 24px) и поле 64×32 между ними; кнопка «Отправить заявку»
   177×40 и кнопка «Закрыть» 97×40 прижаты вправо, фон #151515, текст белый
   18px, рамка 1px #000, радиус 5, padding 9/10/12 (общий класс .vine-btn).

   Состояний hover/focus/disabled и отдельной мобильной ширины в макете нет —
   их здесь нет тоже.
   ========================================================================= */

/* --------------------------------------------------------------- ПОДЛОЖКА */
.vine-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow: auto;
	padding: 32px 16px;
	background: rgba(0, 0, 0, 0.5);
}

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

/* Окно 558 по макету, высота по содержимому */
.vine-modal__window {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap-sm, 8px);
	width: 558px;
	max-width: 100%;
	margin: auto;
	padding: 32px;
	border: 1px solid var(--vine-color-text, #000000);
	border-radius: 16px;
	background: var(--vine-color-bg, #FFFFFF);
	font-family: var(--vine-font);
	font-size: var(--vine-fz-text, 18px);
	line-height: 21px;
	color: var(--vine-color-text, #000000);
}

/* Шапка: кнопка с крестиком прижата вправо */
.vine-modal__head {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
}

.vine-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;
}

.vine-modal__close img {
	display: block;
	width: 24px;
	height: 24px;
}

/* ------------------------------------------------------------------ ФОРМА */
/* Компонент оборачивает поля в <form>; чтобы шаг строк 8px сохранился,
   форма сама становится колонкой. */
.vine-teacher-form form {
	display: contents;
}

.vine-teacher-form__label {
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	line-height: 21px;
}

.vine-teacher-form__input,
.vine-teacher-form__textarea,
.vine-teacher-form__select {
	width: 344px;
	max-width: 100%;
	border: 1px solid var(--vine-color-text, #000000);
	border-radius: 0;
	background: var(--vine-color-bg, #FFFFFF);
	font-family: var(--vine-font);
	font-size: var(--vine-fz-text, 18px);
	line-height: 21px;
	color: var(--vine-color-text, #000000);
}

.vine-teacher-form__input,
.vine-teacher-form__select {
	height: 32px;
	padding: 0 8px;
}

/* Комментарий 344×128, внутренний отступ 8/5 */
.vine-teacher-form__textarea {
	height: 128px;
	padding: 5px 8px;
	resize: vertical;
}

/* Плейсхолдеры макета — #C4C4C4 */
.vine-teacher-form__input::placeholder,
.vine-teacher-form__textarea::placeholder {
	color: var(--vine-color-card, #C4C4C4);
	opacity: 1;
}

/* Списки «Желаемый формат» и «Город»: своя стрелка (иконка макета) */
.vine-teacher-form__select-wrap {
	position: relative;
	width: 344px;
	max-width: 100%;
}

.vine-teacher-form__select {
	width: 100%;
	padding-right: 36px;
	-webkit-appearance: none;
	appearance: none;
	background-image: url(/local/templates/vine/components/bitrix/form.result.new/teacher_request/images/icon-select-arrow.svg);
	background-repeat: no-repeat;
	background-position: right 4px center;
	background-size: 24px 24px;
}

/* Блок «Город» показывается только при формате «Очно» / «Смешанный»
   (пояснение макета 2095:21439); внутри тот же шаг строк 8px. */
.vine-teacher-form__city {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap-sm, 8px);
	width: 100%;
}

.vine-teacher-form__city[hidden] {
	display: none;
}

/* Поле даты 148×32 с иконкой календаря справа */
.vine-teacher-form__date {
	position: relative;
	width: 148px;
	max-width: 100%;
}

.vine-teacher-form__input--date {
	width: 100%;
	padding-right: 32px;
}

.vine-teacher-form__date-icon {
	position: absolute;
	top: 50%;
	right: 4px;
	width: 24px;
	height: 24px;
	transform: translateY(-50%);
	pointer-events: none;
}

/* Тексты ошибок макета — красные, 18px */
.vine-teacher-form__error {
	margin: 0;
	color: red;
	font-size: var(--vine-fz-text, 18px);
	line-height: 21px;
}

.vine-teacher-form__error[hidden] {
	display: none;
}

/* Счётчик участников 139×32: «−» и «+» на #151515 по краям, поле 64 между */
/* align-self обязателен: окно — flex-колонка, без него счётчик растянулся бы
   на всю ширину окна вместо макетных 139px. */
.vine-counter {
	display: inline-flex;
	align-self: flex-start;
	align-items: stretch;
	width: fit-content;
	height: 32px;
}

.vine-counter__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 37px;
	padding: 0 12px;
	border: 1px solid var(--vine-color-text, #000000);
	background: var(--vine-color-btn, #151515);
	color: var(--vine-color-btn-text, #FFFFFF);
	font-family: var(--vine-font);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.vine-counter__btn--minus {
	border-radius: var(--vine-radius-btn, 5px) 0 0 var(--vine-radius-btn, 5px);
	font-size: 32px;
}

.vine-counter__btn--plus {
	border-radius: 0 var(--vine-radius-btn, 5px) var(--vine-radius-btn, 5px) 0;
	font-size: 24px;
}

.vine-counter__value {
	width: 64px;
	border: 1px solid var(--vine-color-text, #000000);
	border-left: 0;
	border-right: 0;
	border-radius: 0;
	background: var(--vine-color-bg, #FFFFFF);
	font-family: var(--vine-font);
	font-size: var(--vine-fz-text, 18px);
	line-height: 21px;
	text-align: center;
	color: var(--vine-color-text, #000000);
}

/* Кнопка подвала прижата вправо */
.vine-teacher-form__actions {
	display: flex;
	justify-content: flex-end;
	width: 100%;
}

/* «Отправить заявку» 177×40 и «Закрыть» 97×40 */
.vine-teacher-form__submit,
.vine-teacher-done__close {
	height: var(--vine-field-h, 40px);
	line-height: normal;
}

.vine-teacher-form__submit {
	min-width: 177px;
}

.vine-teacher-done__close {
	min-width: 97px;
}

/* ------------------------------------------------------- ОКНО «СПАСИБО!» */
.vine-teacher-done__text {
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	line-height: 21px;
}

/* End */


/* Start:/local/templates/vine/components/bitrix/news.list/vine_materials_cards/style.css?17871501007487*/
/* =========================================================================
   «Полезные материалы» — карточки с картинкой сверху
   bitrix:news.list / vine_materials_cards

   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y:
     2091:20207 — режим GRID     (страница списка преподавателей);
     2095:21626 — режим CAROUSEL (детальная страница преподавателя).

   Общее для обоих режимов: заголовок секции 40px, карточка без фона,
   рамки и внутренних отступов; картинка высотой 152px, ниже название
   Bold 28px, дата Italic 14px, анонс 18px и ссылка «Подробнее →» 18px
   цветом #0077FF. Шаг между картинкой и текстом 16px, между текстовыми
   полями 8px.
   ========================================================================= */

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

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

/* ------------------------------------------------------- СТРОКА С ЛЕНТОЙ */
.materials-cards__row {
	display: flex;
	gap: var(--vine-gap, 16px);
	min-width: 0;
}

.materials-cards__list {
	display: flex;
	gap: var(--vine-gap, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

/* ------------------------------------------------------------- КАРТОЧКА */
/* ни фона, ни рамки, ни padding — только колонка с шагом 16px */
.materials-cards__item {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap, 16px);
	min-width: 0;
}

.materials-cards__pic {
	display: block;
	width: 100%;
	height: 152px;
	overflow: hidden;
	background: var(--vine-color-card, #C4C4C4);
}

.materials-cards__img {
	display: block;
	width: 100%;
	height: 152px;
	object-fit: cover;
	border-radius: 0;
}

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

/* двойной класс — чтобы перебить общее правило .vine-main h3 из базового слоя */
.materials-cards .materials-cards__name {
	margin: 0;
	font-size: var(--vine-fz-h3, 28px);
	font-weight: 700;
	line-height: normal;
	color: var(--vine-color-text, #000000);
	word-break: break-word;
}

.materials-cards__name-link {
	color: inherit;
	text-decoration: none;
}

.materials-cards__name-link:hover,
.materials-cards__name-link:focus {
	color: inherit;
	text-decoration: underline;
}

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

.materials-cards__text {
	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;
}

.materials-cards__text p {
	margin: 0;
}

.materials-cards__more {
	align-self: flex-start;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-link, #0077FF);
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-underline-position: from-font;
	white-space: nowrap;
}

/* =============================================================== РЕЖИМ GRID
   Строка карточек 300px с шагом 16, выравнивание по верху: высоты
   карточек не выравниваются. Четвёртая плитка-ссылка растянута на
   высоту строки.
   ------------------------------------------------------------------------ */
.materials-cards--grid .materials-cards__row,
.materials-cards--grid .materials-cards__list {
	align-items: flex-start;
}

.materials-cards--grid .materials-cards__list {
	flex-wrap: wrap;
}

.materials-cards--grid .materials-cards__item {
	flex: 0 0 300px;
	width: 300px;
}

/* плитка «Все полезные материалы» */
.materials-cards--grid .materials-cards__item--all {
	align-self: stretch;
}

.materials-cards__all {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap, 16px);
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: var(--vine-pad-card, 8px);
	background: var(--vine-color-card, #C4C4C4);
	border-radius: var(--vine-radius, 8px);
	text-decoration: none;
}

/* картинка занимает всё оставшееся место плитки */
.materials-cards__all-img {
	display: block;
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	object-fit: cover;
}

.materials-cards__all-text {
	flex: 0 0 auto;
	font-size: var(--vine-fz-h3, 28px);
	font-weight: 700;
	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;
}

/* =========================================================== РЕЖИМ CAROUSEL
   Лента карточек 373px с шагом 16, по краям кнопки-стрелки 32x32.
   Выравнивание по центру; карточки при этом одной высоты — их тянет
   align-self: stretch, поэтому центрирование на вид ничего не смещает.
   Прокрутка — overflow-x: auto, кнопки листают лентой из script.js.
   ------------------------------------------------------------------------ */
.materials-cards--carousel .materials-cards__row,
.materials-cards--carousel .materials-cards__list {
	align-items: center;
}

.materials-cards--carousel .materials-cards__list {
	flex: 1 1 auto;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

.materials-cards--carousel .materials-cards__item {
	flex: 0 0 373px;
	width: 373px;
	align-self: stretch;
	scroll-snap-align: start;
}

/* ---------------------------------------------------------- КНОПКИ-СТРЕЛКИ */
/* скруглённый квадрат 32x32, внутри чёрный треугольник 24x24 */
.materials-cards__arrow {
	display: flex;
	flex: 0 0 32px;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	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);
	color: var(--vine-color-text, #000000);
	cursor: pointer;
}

.materials-cards__arrow-icon {
	display: block;
	width: 24px;
	height: 24px;
	font-size: 24px;
	line-height: 24px;
	color: var(--vine-color-text, #000000);
}

.materials-cards__arrow[disabled] {
	opacity: 0.4;
	cursor: default;
}

/* ------------------------------------------------------------- АДАПТИВ */
@media (max-width: 640px) {
	.materials-cards--grid .materials-cards__item,
	.materials-cards--carousel .materials-cards__item {
		flex-basis: 86vw;
		width: 86vw;
	}
}

/* End */
/* /local/templates/vine/components/bitrix/news/vine_teachers/style.css?17871539726424 */
/* /local/templates/vine/components/bitrix/news.detail/vine_teacher/style.css?17871501976477 */
/* /local/templates/vine/components/bitrix/news.list/course-reviews/style.css?17867178453611 */
/* /local/templates/vine/components/bitrix/catalog.section/events-card/style.css?17864796352943 */
/* /local/templates/vine/components/bitrix/form.result.new/teacher_request/style.css?17871503297630 */
/* /local/templates/vine/components/bitrix/news.list/vine_materials_cards/style.css?17871501007487 */