@use "sass:math";

// links
@each $suf, $color in ('base-1': $co-base-1, 'text': $text-color, 'beta': $co-beta, 'muted': $text-muted) {
	.link-#{$suf} {
		color: $color;
		text-decoration: none;
		@include hover() {
			text-decoration: none;
			color: $color;
			opacity: .7;
		}
	}
}

.link {
	&-inverse {
		color: $text-color;
		text-decoration: none;
		@include hover() {
			color: $co-alpha;
			text-decoration-thickness: 1px;
		}
	}

	&-underline {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		@include hover() { text-decoration: none; }
	}

	&-h-underline {
		text-decoration: none;
		@include hover() {
			text-decoration: underline;
			text-decoration-thickness: 1px;
		}
	}

	&-skip {
		position: fixed;
		z-index: $z-index-header + 1;
		top: 0;
		left: 0;
		transform: translate(-200%,-200%);
		padding: $sp-2 $sp-3;
		color: $text-color;
		text-decoration: none;
		background-color: $co-gray-80;
		@if $useBorderRadius {
			border-bottom-right-radius: $sp-4;
		}
		&:hover {
			background-color: lighten($co-gray-80, 5%);
		}
		&:focus-visible {
			transform: translate(0,0);
			box-shadow: none;
		}
	}
}

.link-expand {
	position: relative;

	&-item:after {
		content:"";
		position: absolute;
		inset: 0;
		z-index: 10;
		cursor: pointer;
	}

	&-sec {
		position: relative;
		z-index: 20;
	}

	@include hover() {
		.img-link-opacity .img-link-media img {
			opacity: .7;
		}

		.img-link-zoom .img-link-media img {
			@include imageZoomEndEffect;
		}
	}

}

// text
.text-columns {
	columns: 25rem 3;
	// column-rule: 1px solid $co-gray-70;
	column-gap: $sp-6;
	> :last-child { margin-bottom: 0 !important;}
}

// icons
.ico {
	display: inline-block;

	@at-root svg#{&} {
		width: 1em;
		height: 1em;
		fill: currentColor;
		vertical-align: middle;
		position: relative;
		top: -0.05em;
	}

	&-spin {
		animation: Spin 2s infinite linear;
	}
}

// list
.list-unstyled {
	margin: 0;
	padding: 0;
	list-style: none;
}

.list-ico {
	list-style: none;
	padding: 0;

	> li {
		position: relative;
		padding-left: $sp-5 + .4;

		> .ico {
			position: absolute;
			top: 0;
			left: 0;
			&[class*="fa-"] { top: 0.2em;}
		}
		> svg.ico {
			top: .3em;
		}
	}
}

.list-symbol {
	> li:not(:last-child) {
		margin-right: $sp-2;
		&::after {
			content: attr(data-symbol);
		}
	}
}

.list-check {
	margin-bottom: $sp-5;
	> li {
		position: relative;
		padding-left: 4rem;
		margin-bottom: $sp-3;
		&::before {
			content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='27' fill='none' viewBox='0 0 27 27'%3E%3Cpath stroke='%232765b6' d='M13.416 1.082c6.81 0 12.33 5.52 12.33 12.33s-5.52 12.33-12.33 12.33-12.33-5.52-12.33-12.33 5.52-12.33 12.33-12.33Z'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M8.298 12.511a1.166 1.166 0 0 0-1.58 1.67l3.5 4.668a1.17 1.17 0 0 0 1.811.068l8.167-9.334a1.167 1.167 0 0 0-1.638-1.654l-7.495 6.425z' clip-rule='evenodd'/%3E%3Cpath fill='%232765b6' fill-rule='evenodd' d='M13.413 0C6.01 0 0 6.01 0 13.413s6.01 13.413 13.413 13.413 13.413-6.01 13.413-13.413S20.816 0 13.413 0m0 1.166c6.76 0 12.247 5.488 12.247 12.247 0 6.76-5.488 12.247-12.247 12.247-6.76 0-12.247-5.488-12.247-12.247 0-6.76 5.488-12.247 12.247-12.247' clip-rule='evenodd'/%3E%3Cpath fill='%232765b6' fill-rule='evenodd' d='M8.62 12.023a1.75 1.75 0 0 0-2.371 2.506l3.5 4.667a1.75 1.75 0 0 0 2.717.103l8.166-9.334a1.75 1.75 0 0 0-2.456-2.481l-7.16 6.137zm-.648.97 2.765 1.844a.585.585 0 0 0 .703-.042l7.495-6.425a.583.583 0 0 1 .82.827l-8.167 9.333a.584.584 0 0 1-.906-.034l-3.5-4.667a.583.583 0 0 1 .79-.835' clip-rule='evenodd'/%3E%3C/svg%3E");
			position: absolute;
			top: 0;
			left: 0;
			width: 2rem;
			height: 2rem;
		}
	}

	&-2-col {
		container-type: inline-size;
		display: flex;
		gap: 0 $sp-4;
		flex-wrap: wrap;

		> li {
			width: 100%;
		}

		@container (min-width: 500px) {
			> li {
				width: calc(50% - math.div($sp-4, 2));
			}
		}
	}
}

.list-contacts {
	&-info {
		text-align: center;

		.is-title { margin-bottom: 0;}
	}
}

// media responsive
.ratio {
	position: relative;
	width: 100%;

	> img,
	> video,
	> iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	&-4x3  { padding-top: 75%;}
	&-16x9 { padding-top: 56.25%;}
	// &-21x9 { padding-top: 42.8571428571%;}
}

// shadows
.shadow {
	position: relative;
	min-height: 1px;
	&:after {
		content:"";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: $sp-4;
		max-width: $content-max-width;
		margin-left: auto;
		margin-right: auto;
		pointer-events: none;
		background: radial-gradient(ellipse at top, rgba(#000, .15), transparent 70%);
	}
}

.bgi-1 {
	position: relative;
	z-index: 1;
	overflow: hidden;
	background: linear-gradient(to right,#e3eaf2, #fafafa);

	&-img {
		position: absolute;
		z-index: -1;
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-fit: cover;
	}
}

.bg-contacts {
	background: linear-gradient(-5deg,#fafafa 33%, #e3eaf2 66%);
	&-img {
		position: absolute;
		z-index: -1;
		inset: 0 0 auto;
	}
	body.has-banner &-img {
		top: 800px;
	}
}

.rsocial {
	background: linear-gradient(to top,$co-base-1, transparent), linear-gradient(to right,#ebf0f5, transparent);

	&-list {
		padding-bottom: 1px;
	}

	&-item {
		margin-left: $sp-4;
		margin-right: $sp-4;
	}

	&-img {
		position: relative;
		z-index: 2;
		margin-left: auto;
		padding-left: $sp-7;
		max-width: 564px;
		img {
			border-radius: $sp-6;
		}
	}

	&-body {
		overflow: hidden;
		position: relative;
		z-index: 1;
		padding: $sp-lg-2 $sp-5 $sp-5;
		margin-right: $sp-5;
		margin-top: -80px;
		border-radius: $sp-6;
	}

	&-body-img {
		position: absolute;
		z-index: -1;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: .2;
	}
}
.rsocial-page {
	position: relative;
	&-bg {
		position: absolute;
		inset: 0 0 auto;
		z-index: -1;
		width: 100%;
		max-width: 753px;
		margin-left: auto;
		margin-right: auto;
		object-fit: contain;
		pointer-events: none;
	}
}
.rsocial-gallery {
	&-list {
		display: flex;
		flex-wrap: wrap;
		gap: $sp-6 10rem;
		justify-content: space-evenly;
	}
	&-item {
		position: relative;
		width: 20rem;

		&.has-arrow:after {
			content: "";
			position: absolute;
			z-index: 1;
			top: 10rem;
			left: calc(100% + (var(--arrow-span, 10rem) - 10rem) / 2);
			width: 10rem;
			height: 3.2rem;
			transform: translateY(-50%);
			pointer-events: none;
			background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 32' fill='none'%3E%3Cpath d='M0 16C24 16 36 6 50 6 64 6 76 16 84 16' stroke='%236e92ad' stroke-width='1.8' stroke-linecap='round' stroke-dasharray='.01 4'/%3E%3Cpath fill='%236e92ad' d='M82 12.2 98 16 82 19.8z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
		}
	}
	&-title {
		position: relative;
		width: 20rem;
		aspect-ratio: 1 / 1;
		padding: $sp-4;
		align-content: center;
		border-radius: 50%;
		line-height: 1.1;
		.is-num {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%, -50%);
			display: inline-block;
			width: $sp-7;
			align-content: center;
			aspect-ratio: 1 / 1;
			background-color: $co-beta;
			border-radius: 50%;
		}
	}
}
.rsocial-boxed {
	position: relative;
	isolation: isolate;
	padding: $sp-lg-2 0 $sp-lg-1;

	&:after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		background-color: $co-gamma;
		border-radius: $sp-lg-2;
		transform: skewY(-2deg);
	}

	&-bg {
		position: absolute;
		inset: 0;
		z-index: -1;
		height: 100%;
		width: 100%;
		max-width: 1820px;
		margin-left: auto;
		margin-right: auto;
		display: none;
	}

	&-img {
		max-width: 300px;
		margin-left: auto;
		margin-right: auto;
		border: 10px solid;
		overflow: hidden;
	}
}

.ulinks {
	&-group {
		border: 1px solid;
		padding: $sp-6;
		border-radius: $sp-5;
	}
}

.stats {
	&-number {
		position: relative;
		font-size: 8.8rem;
		line-height: 1;
		-webkit-text-stroke: 1px $co-base-1;
		-webkit-text-fill-color: transparent;
		line-height: 1;
		paint-order: stroke fill;
		&:after {
			content: "";
			position: absolute;
			inset: 0 -3px 0 auto;
			border-right: 1px solid;
			opacity: .5;
		}
	}

	&-title {
		padding-left: $sp-2;
	}
}

.docs {
	--bg-opacity: .05;
	--icon-img-size: 60px;
	position: relative;
	isolation: isolate;
	padding: $sp-lg-2 0;
	background-color: $co-gray-90;

	&-bg {
		position: absolute;
		inset: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		opacity: var(--bg-opacity);
	}

	& + & {
		border-top: 3px solid $co-alpha;
	}

	&-content {
		position: sticky;
		top: var(--header-height);
	}

	&-link {
		display: flex;
		gap: $sp-4;
		align-items: center;
		margin-bottom: $sp-4;
		padding: $sp-4 $sp-5;
		color: $co-beta;
		text-decoration: none;
		border-radius: $border-radius-3;
		background-color: $co-base-1;
		.is-img {
			width: var(--icon-img-size);
			svg {
				fill: $co-beta;
				width: var(--icon-img-size);
				height: var(--icon-img-size);
			}
		}
		.is-title {
			flex-grow: 1;
		}
		.is-icon {
			width: $sp-7;
			min-width: $sp-7;
			height: $sp-7;
			text-align: center;
			align-content: center;
			background-color: $co-gray-90;
			border-radius: 50%;
		}
	}
}

.contacts {
	position: relative;

	&-bg {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		opacity: .05;
		&-1 {
			display: none;
		}
	}

	&-info {
		position: relative;
		padding: $sp-5;
		margin-bottom: $sp-6;
		border-radius: $sp-5;
		background-color: $co-beta;

		&-group {
			display: flex;
			gap: $sp-4;
			align-items: flex-start;
		}

		&-title {
			position: relative;
			margin: 0;
			padding-right: $sp-2;
			line-height: 1.2;
			writing-mode: sideways-lr;
			text-align: right;
			&:after {
				content:"";
				position: absolute;
				top: 0;
				right: 0;
				width: 2px;
				height: 100px;
				background-color: $co-alpha;
			}
		}

		.list-ico {
			> li {
				padding-left: 5.6rem;
				padding-top: $sp-1;
				margin-bottom: 2rem;
			}
			span.ico {
				width: 4rem;
				height: 4rem;
				border-radius: 50%;
				text-align: center;
				align-content: center;
				background-color: $co-alpha;
			}
		}
	}

	&-form {
		padding: $sp-5;
		border-radius: $sp-5;
		background-color: $co-base-1;
		border: 1px solid $co-alpha;
	}
}


@include mediaQ(xsMax) {
	.docs {
		--icon-img-size: 40px;
		&-link {
			padding: $sp-3 $sp-4;
			.is-title {
				font-size: $font-size-large;
			}
			.is-icon {
				width: $sp-6;
				min-width: $sp-6;
				height: $sp-6;
			}
		}
	}
}

@include mediaQ(xs) {
	.contacts {
		&-form {
			padding: $sp-7;
		}
	}
}

@include mediaQ(sm) {
	.list-contacts {
		&-info {
			text-align: left;
			display: grid;
			grid-template-columns: max-content max-content;
			gap: 0 $gutter;
			width: max-content;
			margin-left: auto;
			margin-right: auto;

			.is-body {
				position: relative;
				padding-left: $sp-6;
				.ico {
					position: absolute;
					left: 0;
					top: 0.2em;
				}
			}
		}
	}

	.contacts {
		&-info {
			padding: $sp-6;
			&-title {
				font-size: 3rem;
				max-height: 36rem;
			}
		}
	}
}

@include mediaQ(md) {
	.rsocial {
		&-item {
			display: grid;
			grid-template-columns: 200px 1fr;
			align-items: center;
			&.is-sticky {
				position: sticky;
				top: var(--header-height);
			}

			&:nth-child(odd) {
				direction: rtl;
				text-align: left;
			}
		}

		&-img {
			margin: 0;
			padding: 0;
			img {
				width: 450px;
				max-width: 450px;
				// opacity: .5;
			}
		}

		&-body {
			margin: 0;
			padding: $sp-6;
		}

		&-content {
			direction: ltr;
		}

		&-item:nth-child(odd) {
			.rsocial-content {
				padding-right: 260px;
			}
		}
		&-item:nth-child(even) {
			.rsocial-content {
				padding-left: 260px;
			}
		}
	}
}

@include mediaQ(lg) {
	.contacts {
		display: grid;
		padding: $sp-lg-1;
		margin-top: 20rem;
		grid-template-columns: 50% 50%;
		background-color: $co-beta;
		align-items: start;
		border-radius: $sp-lg-1;

		&-bg {
			&-1 {
				display: block;
				border-radius: $sp-lg-1;
			}
			&-2 {
				display: none;
			}
		}

		&-info {
			padding: 0;
			margin-bottom: 0;
			background-color: transparent;
			&-group {
				gap: $sp-7;
			}
			&-title {
				text-wrap: balance;
				max-height: 48rem;
				font-size: $font-size-h1;
			}
		}

		&-form {
			position: relative;
			z-index: 10;
			margin-top: -20rem;
		}
	}
}

@include mediaQ(xl) {
	.rsocial {
		&-list {
			width: 1500px;
			margin-left: auto;
			margin-right: auto;
		}

		&-item {
			margin-left: 0;
			margin-right: 0;
		}
		&-img {
			img {
				width: 564px;
				max-width: 564px;
				border-radius: $sp-lg-1;
			}
		}

		&-body {
			padding: $sp-lg-1;
			border-radius: $sp-lg-1;
		}

		&-item:nth-child(odd) {
			padding-right: 200px;

			.rsocial-body {
				padding-left: 100px;
			}

			.rsocial-content {
				padding-right: 360px;
			}
		}
		&-item:nth-child(even) {
			padding-left: 200px;

			.rsocial-body {
				padding-right: 100px;
			}

			.rsocial-content {
				padding-left: 360px;
			}
		}
	}

	.rsocial-boxed {
		&:after {
			display: none;
		}
		&-bg {
			display: block;
		}
		.container {
			padding-left: 14rem;
			padding-right: 14rem;
		}
	}

	.contacts {
		margin-left: -10rem;
		margin-right: -10rem;
		padding: 10rem;
		&-form {
			margin-top: -26rem;
		}
	}
}