/* Start:/local/templates/vine/css/about-page.css?17873223433737*/
/*
	Страница «О нас» (макет 829:7103) — блоки, у которых нет своего компонента:
	H1-баннер с фоновым изображением (960:13289), ряд «видео + текст» (1049:17044),
	заголовки секций «Преподаватели» (831:7281) и «Дегустационные залы» (831:7283)
	и ссылки «Все …  →» под ними (832:7584, 833:7655).

	Карточки преподавателей, залов, сквозные блоки «Разделы» и «Сертификат»
	и отзывы описаны в style.css своих шаблонов компонентов — здесь их нет.

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

/* ------------------------------------------- H1-баннер (960:13289), 1248×88 */

/*
	Тёмный эллипс под заголовком впаян в само изображение — отдельный слой
	затемнения не нужен. Скруглений и рамок в макете нет.
*/
.about-hero {
	box-sizing: border-box;
	max-width: var(--vine-container);
	padding: var(--vine-gap);
	overflow: hidden;
	background-image: url(/upload/figma/about-hero-bg.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}

/*
	16 + 56 + 16 = 88px — ровно высота макетного фрейма.
	Интерлиньяж задан числом (а не `normal`), иначе Roboto добавляет
	четверть пикселя и полоса перестаёт быть ровно 88px.
*/
.vine-main .about-hero__title {
	margin: 0;
	font-size: 48px;
	font-weight: 400;
	line-height: 56px;
	color: #fff;
}

/* -------------------------------- Ряд «видео + текст» (1049:17044), 1248×284 */

/*
	Классы ряда названы `about-intro*`, а не `about-video*`: класс `.about-video`
	занят самим блоком ролика (style.css шаблона news.list/about-video, 612×284).
	Два определения одного класса в одной сборке CSS перебивали друг друга —
	сборка страницы грузится раньше стилей компонента, и ряд получал
	max-width 612px и height 284px вместо 1248×авто.
*/

/* 612 + 24 + 612 = 1248 */
.about-intro {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	max-width: var(--vine-container);
}

.about-intro__player,
.about-intro__text {
	flex: 1 1 0;
	min-width: 0;
}

.about-intro__text {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap-sm);
	align-items: flex-start;
}

.about-intro__text p {
	margin: 0;
	font-size: var(--vine-fz-text);
	line-height: normal;
	color: var(--vine-color-text);
}

/* первая фраза первых двух абзацев набрана Bold («Школа вина AST», «Наша миссия») */
.about-intro__text strong {
	font-weight: 700;
}

/* ------------- Заголовки секций (831:7281 «Преподаватели», 831:7283 «Залы») */

.vine-main .about-section-title {
	margin: 0 0 24px;
	font-size: 40px;
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text);
}

/* ---------------- Ссылки под секциями (832:7584, 833:7655), отступ сверху 24 */

.about-more {
	margin: 24px 0 0;
	font-size: var(--vine-fz-text);
	line-height: normal;
}

.about-more a {
	color: var(--vine-color-link);
	text-decoration: underline;
}

/* End */


/* Start:/local/templates/vine/components/bitrix/news.list/about-video/style.css?17873206821075*/
/* Видео о школе. Макет Figma 1049:17044, левая колонка 960:13292 (612x284) */
.about-video {
	position: relative;
	max-width: 612px;
	height: 284px;
}

/* Постер во всю площадь блока: без скруглений и рамок — так в макете */
.about-video__poster {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Круглая кнопка 64x64 по центру постера (узел 960:13295) */
.about-video__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding: 0;
	background: #FFFFFF;
	border: 5px solid var(--vine-color-text);
	border-radius: 40px;
	cursor: pointer;
}

/* Пока адрес ролика не задан, кнопка неактивна, но габариты те же */
.about-video__play[disabled] {
	cursor: default;
}

.about-video__icon {
	display: block;
	width: 24px;
	height: 24px;
}

/* End */


/* Start:/local/templates/vine/components/bitrix/news.list/teachers-about/style.css?17873212377866*/
/* =========================================================================
   Карусель преподавателей страницы «О нас» — news.list / teachers-about.
   Макет: Figma HA2Vx4dnWPRDdb6SL7tM3y, узлы 832:7565 (строка карусели),
   960:13337 / 960:13343 (стрелки), 832:7566 (карточка), 832:7567 (фото),
   832:7568 (имя), 832:7569 (должность), 832:7570 (анонс), 832:7571 (ссылка).

   Размеры из макета:
     строка      — 1248 = стрелка 32 + gap 16 + лента 1152 + gap 16 + стрелка 32;
     карточка    — 373,33×418, рамка 1px #000, padding 8, шаг 10, без скругления,
                   содержимое по центру; шаг листания 373,33 + 16 = 389,33;
     фото        — 270×220 (в разметке отдаётся ×2 под ретину);
     имя         — 18px Bold, по центру;
     должность   — 14px Regular, по левому краю;
     анонс       — 18px Regular, обрезается многоточием;
     «Подробнее» — 18px, #0077FF, подчёркнутая, по левому краю.

   Карточка НЕ ужимается под ширину ленты (flex: 0 0 373,33px). Иначе при любом
   числе преподавателей содержимое ровно влезало бы в окно, лента не прокручивалась
   и стрелки были бы мертвы навсегда.
   ========================================================================= */

/* строка карусели 832:7565; ширину ограничиваем у корня, иначе на широком
   экране лента разъедется за контейнер макета */
.teachers-about {
	box-sizing: border-box;
	display: flex;
	align-items: center; /* стрелки — вертикально по центру ленты */
	gap: var(--vine-gap, 16px);
	width: 100%;
	max-width: var(--vine-container, 1248px);
}

/* ------------------------------------------------------------------ СТРЕЛКИ */
/* 960:13337 и 960:13343: кнопка 32×32, белая, рамка 1px #000, радиус 5 */
.teachers-about__arrow {
	box-sizing: border-box;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--vine-color-text, #000);
	border-radius: var(--vine-radius-btn, 5px);
	background: #fff;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* Крайние положения ленты и случай «карточки помещаются целиком»: листать
   нечего, кнопку выключает атрибутом disabled script.js (в разметке обе
   кнопки выключены изначально — без JS листания нет). */
.teachers-about__arrow[disabled] {
	cursor: default;
	opacity: 0.4;
}

.teachers-about__arrow-icon {
	display: block;
	width: 24px;
	height: 24px;
}

/* -------------------------------------------------------------------- ЛЕНТА */
/* полезная ширина 1152 = 1248 − 2×(32 + 16) */
.teachers-about__track {
	flex: 1 1 auto;
	min-width: 0; /* без этого flex-элемент раздувается по содержимому */
	display: flex;
	align-items: stretch; /* высота карточек в ряду общая — по самой высокой */
	gap: var(--vine-gap, 16px);
	overflow: hidden;
}

/* ----------------------------------------------------------------- КАРТОЧКА */
/* 832:7566: 373,33×418 — три штуки в ленте 1152 (3×373,33 + 2×16 = 1152) */
.teachers-about__card {
	box-sizing: border-box;
	flex: 0 0 373.33px;
	width: 373.33px;
	min-height: 418px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border: 1px solid var(--vine-color-text, #000);
	border-radius: 0; /* в макете у карточки скругления нет */
	background: #fff;
}

/* фото 832:7567 — контейнер 270×220, кадрирование как в макете */
.teachers-about__photo {
	flex: 0 0 auto;
	width: 270px;
	max-width: 100%;
	height: 220px;
	overflow: hidden;
}

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

/* имя 832:7568 — короткое имя (SHORT_NAME), 18px Bold, по центру.
   Двойной класс перебивает кегль h3 из общего слоя шаблона. */
.teachers-about .teachers-about__name {
	max-width: 100%;
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 700;
	line-height: normal;
	text-align: center;
	color: var(--vine-color-text, #000);
	word-break: break-word;
}

/* должность 832:7569 — 14px, во всю ширину карточки, по левому краю.
   В макете занимает не больше двух строк. */
.teachers-about__position {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	align-self: stretch;
	margin: 0;
	font-size: var(--vine-fz-small, 14px);
	font-weight: 400;
	line-height: normal;
	text-align: left;
	color: var(--vine-color-text, #000);
	word-break: break-word;
}

/* анонс 832:7570 — 18px, обрезается многоточием.
   В макете первая карточка обрывается на третьей строке, остальные на
   четвёртой: её должность занимает две строки и съедает одну строку анонса.
   Жёстко резать по высоте 418 нельзя — обрезка пришлась бы на середину
   строки, без многоточия. Поэтому предел общий (четыре строки), а карточки
   выравниваются по самой высокой (align-items: stretch у ленты). */
.teachers-about__text {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	align-self: stretch;
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	text-align: left;
	color: var(--vine-color-text, #000);
	word-break: break-word;
}

/* ссылка 832:7571 — в макете стоит у нижнего края карточки, поэтому
   прижимаем её вниз: карточки в ряду одной высоты, а текста в них разное
   количество */
.teachers-about__link {
	align-self: stretch;
	margin-top: auto;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	text-align: left;
	color: var(--vine-color-link, #0077FF);
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-underline-position: from-font;
	word-break: break-word;
}

/* ------------------------------------------------------------------ АДАПТИВ */
/* Мобильной раскладки в макете нет. Карточку макетной ширины на узком экране
   держать бессмысленно — она не влезет целиком, поэтому ниже 768px в ленте
   показывается ровно одна карточка на всю ширину. Шаг листания script.js
   меряет по карточке, а не по константе, поэтому пересчитывать его не нужно. */
@media (max-width: 767px) {
	.teachers-about__card {
		flex: 0 0 100%;
		width: 100%;
	}
}

/* End */


/* Start:/local/templates/vine/components/bitrix/news.list/halls-preview/style.css?17873211196112*/
/* =========================================================================
   Дегустационные залы — bitrix:news.list / halls-preview
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y: 831:7283 (заголовок секции),
   833:7636 (ряд из трёх карточек), 833:7655 (ссылка под блоком).

   Размеры из макета (замеры по метаданным узлов):
     секция      — колонка, ширина 1248, шаг 24
                   (низ заголовка y=1105 → верх ряда y=1129;
                    низ ряда y=1741 → верх ссылки y=1765);
     заголовок   — 40px Regular;
     ряд         — три карточки по 405,33 с зазором 16, высота общая
                   (в макете все три фрейма 405,33×612);
     карточка    — рамка 1px #000, padding 8, шаг 10, по центру,
                   без скругления и без заливки;
     фото        — 270×220, по центру (67,67 = (405,33 − 270) / 2);
     название    — 18px Bold по центру;
     адрес       — 14px Regular по центру;
     вместимость — 14px Regular по центру;
     описание    — 18px Regular по левому краю;
     «Подробнее» — 18px #0077FF с подчёркиванием, по левому краю;
     «Все залы»  — 18px #0077FF с подчёркиванием.
   ========================================================================= */

/* Шаг секции 24 = 16 + 8 из токенов: в макете и заголовок, и нижняя ссылка
   отбиты от ряда карточек одинаковыми 24px. */
.halls-preview {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(var(--vine-gap, 16px) + var(--vine-gap-sm, 8px));
	max-width: var(--vine-container, 1248px);
}

/* двойной класс — чтобы перебить общее правило .vine-main h2 базового слоя */
.halls-preview .halls-preview__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.
   align-items: stretch — в макете высота карточек в ряду общая. */
.halls-preview__row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--vine-gap, 16px);
	width: 100%;
}

/* Заливки и скругления в макете у карточки нет — только рамка 1px. */
.halls-preview__card {
	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);
}

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

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

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

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

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

.halls-preview__text {
	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;
}

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

/* ------------------------------------------------------- ССЫЛКА ПОД РЯДОМ */
.halls-preview__all {
	width: 100%;
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
	color: var(--vine-color-link, #0077FF);
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-underline-position: from-font;
	word-break: break-word;
}

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

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

/* End */


/* Start:/local/templates/vine/components/bitrix/news.list/sections-tiles/style.css?1787240270970*/
/* Сквозной блок «Разделы». Макет Figma 2023:12774: мозаика 1248x322 из плиток 400x149, зазор 24 */
.sections-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 149px);
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 24px;
	max-width: 1248px;
	margin: 0 auto;
}

.sections-tiles__cell {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 64px 16px;
	border: 1px solid #000;
	border-radius: 24px;
	background: #FFF;
	overflow: hidden;
	text-decoration: none;
}

.sections-tiles__caption {
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
	color: #000;
	text-align: center;
	word-break: break-word;
}

.sections-tiles__image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 24px;
	object-fit: cover;
}

/* 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:/bitrix/components/bitrix/system.pagenavigation/templates/round/style.min.css?17864742182515*/
.bx-pagination{margin:10px 0}.bx-pagination .bx-pagination-container{text-align:center;position:relative}.bx-pagination .bx-pagination-container ul{padding:0;margin:0;list-style:none;display:inline-block}.bx-pagination .bx-pagination-container ul li{display:inline-block;margin:0 2px 15px}.bx-pagination .bx-pagination-container ul li span{-webkit-transition:color .3s ease,background-color .3s ease,border-color .3s ease;-moz-transition:color .3s ease,background-color .3s ease,border-color .3s ease;-ms-transition:color .3s ease,background-color .3s ease,border-color .3s ease;-o-transition:color .3s ease,background-color .3s ease,border-color .3s ease;transition:color .3s ease,background-color .3s ease,border-color .3s ease;background:#eff0f1;padding:0 8px;font-size:14px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bx-pagination .bx-pagination-container ul li a,.bx-pagination .bx-pagination-container ul li span{display:block;height:32px;min-width:32px;line-height:32px;color:#444;border-radius:16px;vertical-align:middle}.bx-pagination .bx-pagination-container ul li a{text-decoration:none}.bx-pagination .bx-pagination-container ul li a:hover span{background:#dadada}.bx-pagination .bx-pagination-container ul li.bx-active span{background:#0083d1;color:#fff}.bx-pagination .bx-pagination-container ul li.bx-pag-all a span,.bx-pagination .bx-pagination-container ul li.bx-pag-next a span,.bx-pagination .bx-pagination-container ul li.bx-pag-prev a span{background:#fff;border:2px solid #eff0f1;line-height:28px;padding:0 18px;color:#444}.bx-pagination .bx-pagination-container ul li.bx-pag-all span,.bx-pagination .bx-pagination-container ul li.bx-pag-next span,.bx-pagination .bx-pagination-container ul li.bx-pag-prev span{color:#aab1b4;background:#fff;border:2px solid #eff0f1;line-height:28px;padding:0 18px}.bx-pagination .bx-pagination-container ul li.bx-pag-all a:hover span,.bx-pagination .bx-pagination-container ul li.bx-pag-next a:hover span,.bx-pagination .bx-pagination-container ul li.bx-pag-prev a:hover span{background:#fff;border-color:#dadada;color:#000}.bx-pagination.bx-green .bx-pagination-container ul li.bx-active span{background:#3bc915;color:#fff}.bx-pagination.bx-yellow .bx-pagination-container ul li.bx-active span{background:#f9a91d;color:#fff}.bx-pagination.bx-red .bx-pagination-container ul li.bx-active span{background:#e22b2b;color:#fff}.bx-pagination.bx-blue .bx-pagination-container ul li.bx-active span{background:#0083d1;color:#fff}
/* End */


/* Start:/local/templates/vine/components/bitrix/news.list/reviews/style.css?17865368237983*/
/* =========================================================================
   Отзывы — bitrix:news.list / reviews
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y, узел 773:6795.
   Заголовок 40px, подзаголовки 34px, цитата 18px курсив с чертой слева
   5px, шаг между отзывами 16px, внутри отзыва 8px.
   Плашка .ya-widget пересобрана по растровому скриншоту виджета
   Яндекс.Карт из макета (узел 775:6824): жёлтая полоса, три белые
   карточки, стрелки и полоса прокрутки.
   ========================================================================= */

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

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

.reviews .reviews__subtitle {
	margin: 0;
	font-size: var(--vine-fz-h2, 34px);
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text, #000000);
	word-break: break-word;
}

/* ================================================ ПЛАШКА ВИДЖЕТА ЯНДЕКСА */
/* цвета сняты пипеткой со скриншота из макета:
   полоса #FED74E, карточка #FFFFFF, блок цитаты #F6F6F6, звёзды #FACD00 */
.ya-widget {
	box-sizing: border-box;
	padding: 6px 4px 8px;
	background: #FED74E;
}

.ya-widget__track {
	display: flex;
	gap: 27px;
	align-items: stretch;
	overflow-x: auto;
	padding-bottom: 2px;
	scroll-snap-type: x proximity;
	/* положение показывает собственная полоса .ya-widget__scroll из макета,
	   нативный скроллбар был бы вторым индикатором — прячем его */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ya-widget__track::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.ya-widget__card {
	box-sizing: border-box;
	flex: 0 0 417px;
	min-width: 260px;
	display: flex;
	flex-direction: column;
	padding: 18px;
	border-radius: 12px;
	background: #FFFFFF;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
	scroll-snap-align: start;
}

/* ------------------------------------------------- шапка карточки */
.ya-widget__head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.ya-widget__avatar {
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	object-fit: cover;
}

.ya-widget__meta {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ya-widget__name {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	color: #141414;
	word-break: break-word;
}

/* звезды в макете нарисованы внутри растрового скриншота, отдельного
   векторного глифа нет — поэтому текстовый символ ★ */
.ya-widget__stars {
	font-size: 16px;
	line-height: 1.1;
	letter-spacing: 1px;
	color: #FACD00;
	white-space: nowrap;
}

.ya-widget__date {
	font-size: 13px;
	line-height: 1.2;
	color: #7F7F7F;
}

/* --------------------------------------------- серый блок с цитатой */
.ya-widget__body {
	margin-top: 24px;
	padding: 18px 12px 14px;
	border-radius: 10px;
	background: #F6F6F6;
}

.ya-widget__text {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	font-size: 15px;
	line-height: 20px;
	color: #151515;
	word-break: break-word;
}

.ya-widget__more {
	display: block;
	margin-top: 12px;
	font-size: 13px;
	line-height: 1.2;
	color: #727272;
}

.ya-widget__source {
	align-self: flex-start;
	margin-top: 20px;
	font-size: 13px;
	line-height: 1.2;
	color: #777777;
	text-decoration: underline;
}

/* --------------------------------- стрелки и полоса прокрутки (рабочие) */
.ya-widget__nav {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 0 4px;
}

.ya-widget__arrow {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 37px;
	height: 37px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: #F7F7F7;
	color: #141414;
	font-family: inherit;
	font-size: 22px;
	line-height: 1;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.ya-widget__arrow:hover:not([disabled]) {
	background: #ECECEC;
}

/* на краях ленты листать некуда: плашка из макета остаётся, гаснет глиф */
.ya-widget__arrow[disabled] {
	color: #BDBDBD;
	cursor: default;
}

.ya-widget__scroll {
	position: relative;
	flex: 1 1 auto;
	height: 2px;
	margin-left: 18px;
	background: rgba(0, 0, 0, 0.14);
	cursor: pointer;
	/* вертикальную прокрутку страницы отдаём браузеру,
	   горизонтальное перетаскивание бегунка обрабатываем сами */
	touch-action: pan-y;
}

.ya-widget__scroll[aria-disabled="true"] {
	cursor: default;
}

/* полоса высотой 2px — по ней тяжело попасть; расширяем зону нажатия,
   не трогая раскладку */
.ya-widget__scroll::before {
	content: "";
	position: absolute;
	top: -9px;
	right: 0;
	bottom: -9px;
	left: 0;
}

.ya-widget__thumb {
	position: absolute;
	top: -1px;
	left: 4.7%;
	width: 5.2%;
	height: 3px;
	background: #3B7578;
}

/* --------------------------------------------- фокус с клавиатуры */
.ya-widget__arrow:focus-visible,
.ya-widget__track:focus-visible {
	outline: 2px solid #141414;
	outline-offset: 2px;
}

.ya-widget__scroll:focus-visible {
	outline: none;
}

.ya-widget__scroll:focus-visible::before {
	outline: 2px solid #141414;
	border-radius: 4px;
}

/* на узком экране карточки не ужимаются, полоса скроллится пальцем */
@media (max-width: 900px) {
	.ya-widget__card {
		flex-basis: 78%;
	}
}

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

.reviews__item {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap-sm, 8px);
	margin: 0;
	padding-left: var(--vine-gap, 16px);
	border-left: 5px solid var(--vine-color-text, #000000);
}

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

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

/* ------------------------------------------ КНОПКА «ПОКАЗАТЬ ЕЩЁ» */
/* из макета: padding 9px 12px 10px, рамка 1px #000, радиус 5px, текст 18px */
.reviews__more {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 12px 10px;
	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);
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

.reviews__more:hover,
.reviews__more:focus {
	color: var(--vine-color-text, #000000);
	text-decoration: none;
}

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

/* End */
/* /local/templates/vine/css/about-page.css?17873223433737 */
/* /local/templates/vine/components/bitrix/news.list/about-video/style.css?17873206821075 */
/* /local/templates/vine/components/bitrix/news.list/teachers-about/style.css?17873212377866 */
/* /local/templates/vine/components/bitrix/news.list/halls-preview/style.css?17873211196112 */
/* /local/templates/vine/components/bitrix/news.list/sections-tiles/style.css?1787240270970 */
/* /local/templates/vine/components/bitrix/news.list/certificate/style.css?1786479947967 */
/* /bitrix/components/bitrix/system.pagenavigation/templates/round/style.min.css?17864742182515 */
/* /local/templates/vine/components/bitrix/news.list/reviews/style.css?17865368237983 */