/**
 * Заглушка-главная. Повторение страницы, собранной в Elementor, без плагинов.
 *
 * Числа — замеры с живой страницы (tools/check-page.py), не прикидка.
 * Брейкпоинты Elementor: >1400 десктоп, ≤1400 ноутбук, ≤1024 планшет, ≤767 мобильный.
 *
 * Слои по z-index, как в оригинале: фон 3, всё остальное 5.
 */

/* --- Gilroy. Имена семейств те же, что были в Elementor. --- */
@font-face {
	font-family: 'Gilroy';
	src: url('../fonts/Gilroy-Regular.woff2') format('woff2'),
	     url('../fonts/Gilroy-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Gilroy-Semibold';
	src: url('../fonts/Gilroy-Semibold.woff2') format('woff2'),
	     url('../fonts/Gilroy-Semibold.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* --- Страница --- */
body.provincial-front {
	margin: 0;
	background: #fff;
}
/* На мобильном правая плашка стоит с right:-14px и вылезает за край экрана —
   страница уезжает вбок. Так в оригинале, поэтому оставлено как есть.
   Лечится одной строкой: overflow-x: hidden на body. */

.fr-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Фон: фото во всю ширину под белой полупрозрачной заливкой --- */
.fr__bg {
	position: relative;
	z-index: 3;
	min-height: 100vh;
	background: url('../img/front/bg-wide.png') 0 -40px / 100% auto no-repeat;
}
.fr__bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: #fff;
	opacity: .5;
}
.fr__bg--mobile { display: none; }

/* --- Логотип ---
   Виджет тянется на всю высоту слоя: fadeInUp сдвигает его на собственную
   высоту, и размах подъёма зависит именно от неё.

   Слой обрезан по своей границе (= низ экрана). В начале анимации логотип
   стоит целиком ниже неё, и без обрезки он на две секунды растягивает
   документ и вызывает полосу прокрутки. Полоса сужает окно, а от ширины окна
   считается ширина плашек в нижней ленте — они выходили на 2px уже. Вид от
   обрезки не меняется: логотип и так за кадром, пока не поднимется. */
.fr__logo-layer {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 5;
	display: flex;
	justify-content: center;
	width: 100%;
	min-height: 100vh;
	padding-top: 60px;
	box-sizing: border-box;
	overflow: hidden;
	pointer-events: none;
}
.fr__logo-widget {
	width: 352px;
	animation: fr-fade-up 2s ease both;
}
.fr__logo {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Плашки с текстом --- */
.fr__side {
	position: absolute;
	top: 0;
	z-index: 5;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	width: 50%;
	min-height: 100vh;
	box-sizing: border-box;
}
.fr__side--left  { left: 0;  padding: 106px 0 0 20px; }
.fr__side--right { right: 0; padding: 84px 0 0 20px; }

.fr__note {
	box-sizing: border-box;
	color: #000;
	border-style: solid;
}
.fr__note p { margin: 0 0 14.4px; }
.fr__accent { color: #e79700; }

.fr__note--left {
	width: 312px;
	padding: 20px 20px 20px 21px;
	border-width: 1px 1px 0 0;
	border-color: #838383;
	font: 400 18px/1.5 'Gilroy-Semibold', sans-serif;
	text-transform: uppercase;
	animation: fr-fade-left 1.25s ease .4s both;
}
.fr__note--right {
	width: 300px;
	padding: 20px 20px 20px 30px;
	border-width: 1px 0 0 1px;
	border-color: #949494;
	font: 400 15px/1.5 'Gilroy', sans-serif;
	animation: fr-fade-left 1.25s ease .8s both;
}

/* --- Нижняя панель ---
   Ширины в процентах и flex-shrink дают ту же раскладку, что в Elementor:
   боковые колонки сжимаются вместе со средней пропорционально своей ширине. */
.fr__bar {
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 5;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 20px;
	width: 98%;
	padding: 0 40px;
	box-sizing: border-box;
}
.fr__col {
	padding: 10px;
	box-sizing: border-box;
	/* Без этого колонки упираются в min-content и сжатие идёт не туда:
	   боковые схлопываются в поля плашки, а средняя не уступает ни пикселя. */
	min-width: 0;
}
.fr__col--side { width: 15%; }
.fr__col--mid  { width: 100%; }

/* --- Мобильные блоки: в потоке, показываются ниже 768 --- */
.fr__m-logos,
.fr__m-btns { display: none; }

/* --- Карусель --- */
.fr-car { position: relative; }

.fr-car__box {
	position: relative;
	overflow: hidden;
	height: 115px;
	padding-bottom: 30px;   /* место под точки: как «пагинация снаружи» */
	margin: 0 auto;
	box-sizing: border-box;
	touch-action: pan-y;    /* листаем вбок сами, страницу вниз отдаём браузеру */
}
.fr-car__track {
	display: flex;
	height: 100%;
}
.fr-car__slide {
	flex: 0 0 auto;
	display: block;
	height: 100%;
	padding: 6px;
	background: #F8F8F8E0;
	border-radius: 6px;
	box-sizing: border-box;
}
/* Один слайд — карусели нет, плашка просто занимает всю ширину. */
.fr-car:not([data-carousel]) .fr-car__slide {
	width: 100%;
	margin-right: 0;
}
.fr-car--tg .fr-car__slide { padding: 20px; }

.fr-car__img {
	display: block;
	width: 100%;
	height: 100%;
	background: 50% 50% / contain no-repeat;
}

.fr-car__arrow {
	position: absolute;
	top: calc(50% - 15px);   /* центр площадки над точками */
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	padding: 0;
	border: 0;
	background: none;
	color: #000;
	cursor: pointer;
}
.fr-car__arrow--prev { left: 10px; }
.fr-car__arrow--next { right: 10px; }
.fr-car__arrow svg {
	display: block;
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.fr-car__dots {
	position: absolute;
	left: 0;
	bottom: 5px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	height: 24px;
	padding-top: 13px;
	box-sizing: border-box;
}
.fr-car__dot {
	width: 5px;
	height: 5px;
	margin: 0 6px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #000;
	cursor: pointer;
}
.fr-car__dot.is-active { background: #FFC400; }

/* --- Появление --- */
@keyframes fr-fade-up {
	from { opacity: 0; transform: translate3d(0, 100%, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes fr-fade-left {
	from { opacity: 0; transform: translate3d(-100%, 0, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes fr-fade-right {
	from { opacity: 0; transform: translate3d(100%, 0, 0); }
	to   { opacity: 1; transform: none; }
}

/* ===================== ≤1400: ноутбук ===================== */
@media (max-width: 1400px) {
	.fr__bg {
		background-image: url('../img/front/bg-mid.jpg');
		background-position: 0 80px;
	}

	.fr__logo-layer { padding-top: 20px; }
	.fr__logo-widget {
		width: 290px;
		margin-top: 55px;
	}

	.fr__side--left  { padding: 88px 60px 0 20px; }
	.fr__note--left  { margin-right: 100px; font-size: 16px; }

	.fr__side--right { padding: 88px 0 0 40px; }
	.fr__note--right { margin-left: 100px; font-size: 14px; }
}

/* ===================== ≤1024: планшет ===================== */
@media (max-width: 1024px) {
	.fr__bg { background-position: bottom center; }

	.fr__side--left  { top: 165px; padding: 93px 0 0; }
	.fr__note--left  { margin-right: 0; }

	.fr__side--right { top: 187px; padding: 70px 0 0; }
	.fr__note--right { margin-left: 0; }

	.fr-car--bar .fr-car__box { height: 116px; }
}

/* ===================== ≤767: мобильный ===================== */
@media (max-width: 767px) {
	/* Фон переезжает в отдельный слой, прижатый к низу экрана. */
	.fr__bg { display: none; }
	.fr__bg--mobile {
		display: block;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 3;
		width: 100%;
		min-height: 400px;
		background: url('../img/front/bg-wide.png') 50% 100% / 120% auto no-repeat;
	}

	.fr__logo-widget {
		width: 270px;
		margin-top: 20px;
	}

	.fr__side {
		width: 100%;
		min-height: 0;
	}
	.fr__side--left {
		top: 190px;
		left: 4px;
		margin-top: 15px;
		padding: 0;
	}
	.fr__note--left {
		width: 291px;
		margin-right: 0;
		padding: 12px 12px 23px 18px;
		font-size: 14px;
		animation-name: fr-fade-right;
	}
	.fr__side--right {
		top: 203px;
		right: -14px;
		padding: 92px 0 0;
	}
	.fr__note--right {
		width: 305px;
		margin-left: 0;
		padding: 12px 18px 5px 15px;
		font-size: 13px;
	}

	.fr__bar { display: none; }

	/* Лента логотипов. Колонка поднята на -44px — как в макете. */
	.fr__m-logos {
		position: relative;
		z-index: 5;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		margin-top: 520px;
	}
	.fr__m-logos-col {
		width: 100%;
		margin-top: -44px;
		padding: 10px;
		box-sizing: border-box;
	}
	.fr-car--m-logos .fr-car__box {
		width: 290px;
		height: 122px;
	}

	/* Две кнопки: «реклама» и телеграм. Отрицательные поля стягивают их к центру. */
	.fr__m-btns {
		position: relative;
		z-index: 5;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 20px;
	}
	.fr__m-btn {
		width: 45%;
		box-sizing: border-box;
		min-width: 0;
	}
	.fr__m-btn--left  { margin-right: -8px; padding-left: 29px; }
	.fr__m-btn--right { margin-left: -8px;  padding-right: 29px; }

	.fr-car--m-btn .fr-car__box {
		width: 144px;
		height: 110px;
	}
}

/* Уважаем системную настройку: без движения элементы просто стоят на месте. */
@media (prefers-reduced-motion: reduce) {
	.fr__logo-widget,
	.fr__note--left,
	.fr__note--right { animation: none; }
}