/*
 * Сетка и блоки на месте js_composer.min.css (465 КБ) и сгенерированного
 * js_composer_front_custom.css (569 КБ). Здесь только то, что реально
 * встречается в 13 материалах с шорткодами билдера.
 *
 * Имена классов совпадают с плагином — старые правила в blog.css, prime.css
 * и style.css продолжают попадать в цель. Числа взяты из настроек билдера
 * на этом сайте: отступ сетки 15px (то есть по 7.5px на колонку),
 * нижний отступ блока 35px, точки перелома 768 / 992 / 1200.
 */

/* --- ряд ---------------------------------------------------------- */

.vc_row {
	margin-right: -7.5px;
	margin-left: -7.5px;
}

.vc_row:before,
.vc_row:after {
	content: " ";
	display: table;
}

.vc_row:after {
	clear: both;
}

.vc_row-no-padding .vc_column-inner {
	padding-right: 0;
	padding-left: 0;
}

.vc_row-no-padding .vc_inner {
	margin-right: 0;
	margin-left: 0;
}

/* --- колонки ------------------------------------------------------ */

.vc_column_container {
	width: 100%;
	padding-right: 0;
	padding-left: 0;
}

.vc_column_container > .vc_column-inner {
	box-sizing: border-box;
	width: 100%;
	padding-right: 7.5px;
	padding-left: 7.5px;
}

.vc_column-inner:before,
.vc_column-inner:after {
	content: " ";
	display: table;
}

.vc_column-inner:after {
	clear: both;
}

[class*="vc_col-sm-"],
[class*="vc_col-md-"] {
	position: relative;
	box-sizing: border-box;
	min-height: 1px;
	padding-right: 7.5px;
	padding-left: 7.5px;
}

/* Колонка-контейнер сама отступов не даёт — их делает .vc_column-inner. */
.vc_column_container[class*="vc_col-"] {
	padding-right: 0;
	padding-left: 0;
}

/*
 * Ряду с заливкой билдер добавляет верхний отступ — и ему самому,
 * и следующему за ним ряду. Второе правило повторяет это поведение.
 */
.vc_col-has-fill > .vc_column-inner,
.vc_row-has-fill > .vc_column_container > .vc_column-inner,
.vc_row-has-fill + .vc_row > .vc_column_container > .vc_column-inner,
.vc_row-has-fill + .vc_row-full-width + .vc_row > .vc_column_container > .vc_column-inner {
	padding-top: 35px;
}

@media (min-width: 768px) {
	.vc_col-sm-1,
	.vc_col-sm-2,
	.vc_col-sm-3,
	.vc_col-sm-4,
	.vc_col-sm-5,
	.vc_col-sm-6,
	.vc_col-sm-7,
	.vc_col-sm-8,
	.vc_col-sm-9,
	.vc_col-sm-10,
	.vc_col-sm-11,
	.vc_col-sm-12 {
		float: left;
	}

	.vc_col-sm-1 { width: 8.33333333%; }
	.vc_col-sm-2 { width: 16.66666667%; }
	.vc_col-sm-3 { width: 25%; }
	.vc_col-sm-4 { width: 33.33333333%; }
	.vc_col-sm-5 { width: 41.66666667%; }
	.vc_col-sm-6 { width: 50%; }
	.vc_col-sm-7 { width: 58.33333333%; }
	.vc_col-sm-8 { width: 66.66666667%; }
	.vc_col-sm-9 { width: 75%; }
	.vc_col-sm-10 { width: 83.33333333%; }
	.vc_col-sm-11 { width: 91.66666667%; }
	.vc_col-sm-12 { width: 100%; }

	.vc_col-sm-offset-0 { margin-left: 0; }
	.vc_col-sm-offset-1 { margin-left: 8.33333333%; }
	.vc_col-sm-offset-2 { margin-left: 16.66666667%; }
	.vc_col-sm-offset-3 { margin-left: 25%; }
	.vc_col-sm-offset-4 { margin-left: 33.33333333%; }
	.vc_col-sm-offset-6 { margin-left: 50%; }

	.vc_hidden-sm { display: none !important; }
}

@media (min-width: 992px) {
	.vc_col-md-1,
	.vc_col-md-2,
	.vc_col-md-3,
	.vc_col-md-4,
	.vc_col-md-5,
	.vc_col-md-6,
	.vc_col-md-7,
	.vc_col-md-8,
	.vc_col-md-9,
	.vc_col-md-10,
	.vc_col-md-11,
	.vc_col-md-12 {
		float: left;
	}

	.vc_col-md-1 { width: 8.33333333%; }
	.vc_col-md-2 { width: 16.66666667%; }
	.vc_col-md-3 { width: 25%; }
	.vc_col-md-4 { width: 33.33333333%; }
	.vc_col-md-5 { width: 41.66666667%; }
	.vc_col-md-6 { width: 50%; }
	.vc_col-md-7 { width: 58.33333333%; }
	.vc_col-md-8 { width: 66.66666667%; }
	.vc_col-md-9 { width: 75%; }
	.vc_col-md-10 { width: 83.33333333%; }
	.vc_col-md-11 { width: 91.66666667%; }
	.vc_col-md-12 { width: 100%; }
}

@media (max-width: 767px) {
	.vc_hidden-xs { display: none !important; }
}

/* --- выравнивание колонок по высоте -------------------------------- */

.vc_row.vc_row-flex {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
}

.vc_row.vc_row-flex:before,
.vc_row.vc_row-flex:after {
	display: none;
}

.vc_row.vc_row-flex > .vc_column_container {
	display: flex;
}

.vc_row.vc_row-flex > .vc_column_container > .vc_column-inner {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.vc_row.vc_row-flex > .vc_column_container > .vc_column-inner > * {
	min-height: 1em;
}

.vc_row.vc_row-o-equal-height > .vc_column_container {
	align-items: stretch;
}

.vc_row.vc_row-o-content-middle > .vc_column_container > .vc_column-inner {
	justify-content: center;
}

.vc_row.vc_row-o-content-bottom > .vc_column_container > .vc_column-inner {
	justify-content: flex-end;
}

.vc_row.vc_row-o-content-middle:not(.vc_row-o-equal-height) > .vc_column_container {
	align-items: center;
}

.vc_row.vc_row-o-content-bottom:not(.vc_row-o-equal-height) > .vc_column_container {
	align-items: flex-end;
}

/* --- ряд во всю ширину экрана -------------------------------------- */

/*
 * У плагина ширину подставлял скрипт. Здесь ряд выходит за контейнер средствами
 * CSS, а внутренние отступы возвращают содержимое на прежнее место — так ведёт
 * себя stretch_row. Для stretch_row_content содержимое тоже растягивается.
 *
 * --clear-vw — ширина окна без полосы прокрутки, её проставляет короткий скрипт
 * из inc/vc-shortcodes.php. Без скрипта работает запасное значение 100vw:
 * ряд вылезет на ширину полосы прокрутки, и её обрежет overflow ниже.
 */
.clear-vc-stretch {
	--clear-stretch: calc((var(--clear-vw, 100vw) - 100%) / 2);
	box-sizing: border-box;
	width: var(--clear-vw, 100vw);
	max-width: var(--clear-vw, 100vw);
	margin-right: calc(-1 * var(--clear-stretch));
	margin-left: calc(-1 * var(--clear-stretch));
	padding-right: calc(var(--clear-stretch) - 7.5px);
	padding-left: calc(var(--clear-stretch) - 7.5px);
}

.clear-vc-stretch--content {
	padding-right: 0;
	padding-left: 0;
}

/* overflow-x: clip, в отличие от hidden, не ломает position: sticky */
body:has(.clear-vc-stretch) {
	overflow-x: clip;
}

/* --- параллакс ------------------------------------------------------ */

.vc_parallax {
	position: relative;
	overflow: hidden;
}

.vc_parallax > * {
	position: relative;
	z-index: 1;
}

/*
 * Слой с картинкой выше своего блока и стоит по центру запаса. При прокрутке
 * он едет вниз, поэтому фон отстаёт от текста — это и есть параллакс.
 *
 * Всё считается от одной величины: --parallax-scale — во сколько раз слой выше
 * блока. Чем больше, тем медленнее фон и тем сильнее обрезаются края картинки.
 * 1.8 — фон движется примерно на четверть медленнее содержимого.
 *
 * Движение задаёт CSS-анимация, привязанная к прокрутке (см. ниже). Там, где
 * браузер её не умеет, слой двигает js/parallax.js. Если не работает ни то,
 * ни другое — видно середину картинки, что тоже нормально.
 */
.vc_parallax .vc_parallax-inner,
.clear-parallax__inner {
	--parallax-scale: 1.8;
	position: absolute;
	z-index: 0;
	top: calc((1 - var(--parallax-scale)) * 50%);
	right: 0;
	left: 0;
	height: calc(var(--parallax-scale) * 100%);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	pointer-events: none;
}

/*
 * Анимация по прокрутке. Такую браузер считает на том же потоке, что и саму
 * прокрутку, поэтому картинка едет без рывков — в отличие от любого варианта
 * на обработчике scroll, который всегда отстаёт на кадр.
 *
 * Отсчёт ведём по блоку-родителю (view-timeline-name на нём), а не по слою:
 * слой выше блока и вылезает за его границы, по нему считать нельзя.
 */
@supports (animation-timeline: view()) {
	.vc_parallax,
	.clear-parallax {
		view-timeline-name: --clear-parallax;
		view-timeline-axis: block;
	}

	.vc_parallax .vc_parallax-inner,
	.clear-parallax__inner {
		animation: clear-parallax-move linear both;
		animation-timeline: --clear-parallax;
		/* весь путь блока по экрану: от появления снизу до ухода вверх */
		animation-range: cover 0% cover 100%;
	}

	@keyframes clear-parallax-move {
		from {
			transform: translate3d(0, calc((var(--parallax-scale) - 1) / var(--parallax-scale) * -50%), 0);
		}

		to {
			transform: translate3d(0, calc((var(--parallax-scale) - 1) / var(--parallax-scale) * 50%), 0);
		}
	}
}

/*
 * На узком экране блок низкий, и слой в 1.8 раза выше него обрезал бы панораму
 * почти вдвое по ширине. Ослабляем: картинка остаётся читаемой, а движение
 * на маленьком экране всё равно почти не заметно.
 */
@media (max-width: 767px) {
	.vc_parallax .vc_parallax-inner,
	.clear-parallax__inner {
		--parallax-scale: 1.35;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vc_parallax .vc_parallax-inner,
	.clear-parallax__inner {
		animation: none;
		transform: none !important;
	}
}

/* --- блоки содержимого ---------------------------------------------- */

.wpb_content_element,
.wpb_button {
	margin-bottom: 35px;
}

.wpb_single_image img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
}

.wpb_single_image .vc_figure,
.wpb_single_image .vc_single_image-wrapper {
	display: inline-block;
	max-width: 100%;
	margin: 0;
	vertical-align: top;
}

.wpb_single_image.vc_align_center {
	text-align: center;
}

.wpb_single_image.vc_align_right {
	text-align: right;
}

.vc_box_outline_circle,
.vc_box_outline_circle img,
.vc_box_border_circle,
.vc_box_border_circle img,
.vc_box_circle,
.vc_box_circle img {
	border-radius: 50%;
}

.vc_box_outline_circle,
.vc_box_outline {
	padding: 5px;
	border: 1px solid #ebebeb;
}

.wpb_gmaps_widget .wpb_map_wraper iframe {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
}

.wpb_gmaps_widget.vc_map_responsive .wpb_map_wraper {
	position: relative;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
}

.wpb_gmaps_widget.vc_map_responsive .wpb_map_wraper iframe {
	position: absolute;
	inset: 0;
	height: 100%;
}