/*
	Главная страница: уникальный дизайн поверх типовых компонентов.
	Подключается в `widgets/project/front.php` после стилей модулей, поэтому перекрывает их.
	Цвета - от темы: всё основное действие - `accent` (кнопки), ссылки и акценты заголовков - `brand`.
*/
.main_front {
	--front-text: var(--color-footer);
	--front-section-alt: #F5F7F9;
	--front-card-shadow: 0 3px 8px color-mix(in srgb, var(--color-footer) 24%, transparent);
	--front-card-shadow-hover: 0 6px 16px color-mix(in srgb, var(--color-footer) 30%, transparent);
	--main-section-padding: clamp(var(--space-8), 3.5vw, var(--space-16));
	font-size: var(--text-md);
}
.main_front > .front-request + .main__section {
	padding-top: var(--main-section-padding);
}

/* Заголовки: без полосы бренда, крупнее типовых */
.main_front .module-widget__heading {
	--module-widget-title-size: clamp(1.625rem, 1.25rem + 1.4vw, 2.625rem);
}
.main_front .module-widget__heading_striped .module-widget__title {
	border-left: 0;
	padding-left: 0;
}
.main_front .module-widget__heading_striped .module-widget__subtitle {
	padding-left: 0;
}
.main_front .module-widget__title,
.front-request__title {
	color: var(--front-text);
	font-weight: 700;
}
.main_front .module-widget__link {
	color: var(--color-brand-ink);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.main_front .module-widget__link:hover {
	text-decoration: none;
}

.front-button {
	align-items: center;
	column-gap: var(--space-3);
	display: inline-flex;
	font-size: var(--text-md);
	font-weight: 600;
	height: 52px;
	justify-content: center;
	line-height: 1.2;
	padding: 0 var(--space-6);
}
.front-button.button_fw {
	display: flex;
}
.front-button__icon {
	height: 12px;
	width: 20px;
}
.front-button_outline {
	background-color: var(--color-surface);
	border-color: var(--color-brand-ink);
	color: var(--color-brand-ink);
}
.front-button_outline:hover {
	background-color: var(--color-brand-soft);
}

/* Баннер: на телефоне текст над картинкой, с 768px - рядом с ней */
.front-hero {
	display: flex;
	flex-direction: column;
}
.front-hero__image {
	aspect-ratio: 16 / 9;
	display: block;
	height: auto;
	object-fit: cover;
	object-position: 85% 50%;
	order: 1;
	width: 100%;
}
.front-hero__content {
	padding: var(--space-6) 0;
}
.front-hero__container {
	position: relative;
}
.front-hero__eyebrow {
	color: #587390;
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: .15em;
	margin: 0 0 var(--space-3);
	text-transform: uppercase;
}
.front-hero__title {
	color: var(--front-text);
	font-size: clamp(1.625rem, 1rem + 1.35vw, 2.5rem);
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
}
.front-hero__title > span {
	color: var(--color-brand-ink);
}
.front-hero__text {
	color: var(--color-text);
	font-size: var(--text-md);
	line-height: 1.5;
	margin: var(--space-4) 0 0;
}
.front-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

/* Преимущества и «Почему мы?»: разделители - только когда все колонки в один ряд */
.front-features {
	display: grid;
	gap: var(--space-8) var(--space-6);
	grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}
.front-features__icon {
	display: block;
	height: 72px;
	width: 72px;
}
.front-features__title {
	color: var(--front-text);
	font-size: var(--text-lg);
	font-weight: 700;
	line-height: 1.3;
	margin: var(--space-3) 0 0;
}
.front-features__text {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: 1.5;
	margin: var(--space-2) 0 0;
}

/* Каталог: секция на сером, три колонки категорий; обложка 2:1 на белом целиком, фон - у подписи */
.main_front > .main__section.front-catalog {
	background-color: var(--front-section-alt);
	padding-top: var(--main-section-padding);
}
.main_front .shop-categories {
	border-bottom: 0;
	gap: var(--space-5);
	grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
	padding-bottom: 0;
}
.main_front .shop-category-card {
	border: 0;
	border-radius: var(--radius-md);
	box-shadow: var(--front-card-shadow);
	overflow: hidden;
	padding: 0;
}
.main_front .shop-category-card:hover {
	box-shadow: var(--front-card-shadow-hover);
}
.main_front .shop-category-card__image {
	aspect-ratio: 2 / 1;
	box-sizing: border-box;
	padding: var(--space-3);
}
.main_front .shop-category-card__name {
	align-items: center;
	background-color: #E9EEF3;
	color: var(--front-text);
	column-gap: var(--space-3);
	display: flex;
	flex: 1 1 auto;
	font-size: var(--text-lg);
	font-weight: 600;
	justify-content: space-between;
	line-height: 1.3;
	margin-top: 0;
	padding: var(--space-4) var(--space-5);
}
.shop-category-card__arrow {
	color: var(--color-brand-ink);
	height: 12px;
	width: 20px;
}

/* Достижения: фото во всю ширину с тёмным переходом, текст на тёмной части */
.front-achievements {
	background-color: var(--color-footer);
	color: var(--color-surface);
	overflow: hidden;
	position: relative;
}
.front-achievements__image {
	height: 100%;
	inset: 0;
	object-fit: cover;
	object-position: 100% 50%;
	opacity: .35;
	position: absolute;
	width: 100%;
}
.front-achievements__container {
	position: relative;
}
.front-achievements__content {
	padding: var(--space-8) 0;
}
.front-achievements__title {
	color: inherit;
	font-size: clamp(1.625rem, 1.25rem + 1.4vw, 2.625rem);
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}
.front-achievements__title > span {
	color: color-mix(in oklch, var(--color-brand), white 35%);
}
.front-achievements__list {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: var(--space-6) 0 0;
}
.front-achievements__value {
	font-size: clamp(2rem, 1.5rem + 1.8vw, 3.25rem);
	font-weight: 700;
	line-height: 1.1;
}
.front-achievements__label {
	font-size: var(--text-sm);
	line-height: 1.4;
	margin: var(--space-2) 0 0;
	opacity: .85;
}

/* Форма подбора */
.main_front > .front-request {
	background-color: var(--front-section-alt);
	padding-top: var(--main-section-padding);
	scroll-margin-top: var(--space-4);
}
.front-request__container {
	display: grid;
	gap: var(--space-6);
}
.front-request__title {
	font-size: clamp(1.625rem, 1.25rem + 1.4vw, 2.625rem);
	line-height: 1.2;
	margin: 0;
}
.front-request__title > span {
	color: var(--color-brand-ink);
}
.front-request__text {
	color: var(--color-text);
	line-height: 1.5;
	margin: var(--space-4) 0 0;
	max-width: 36rem;
}
.front-request__benefits {
	display: grid;
	gap: var(--space-3);
	list-style: none;
	margin: var(--space-5) 0 0;
	padding: 0;
}
.front-request__benefits > li {
	align-items: center;
	color: var(--front-text);
	column-gap: var(--space-3);
	display: flex;
	font-weight: 500;
}
/* Галочка - белым по кругу цвета бренда */
.front-request__benefits > li::before {
	background: var(--color-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
	border-radius: var(--radius-round);
	content: '';
	flex: none;
	height: 24px;
	width: 24px;
}
.front-request__form {
	background-color: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	box-sizing: border-box;
	padding: var(--space-5);
}
.front-request__note {
	align-items: center;
	color: var(--color-text-muted);
	column-gap: var(--space-2);
	display: flex;
	font-size: var(--text-xs);
	margin: 0;
}
.front-request__note::before {
	content: '🔒︎';
	font-size: var(--text-sm);
}

/* Новости: обложка на всю ширину карточки, текст с отступом */
.main_front .news-list {
	column-gap: var(--space-5);
	grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
}
.main_front .news-card {
	border: 0;
	border-radius: var(--radius-md);
	box-shadow: var(--front-card-shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0 0 var(--space-5);
}
.main_front .news-card:hover {
	box-shadow: var(--front-card-shadow-hover);
}
/* В макете обложка около 5:1: на случайных фото такая полоса срежет сюжет, поэтому компромисс */
.main_front .news-card__image > img {
	aspect-ratio: 5 / 2;
}
.main_front .news-card__title {
	color: var(--front-text);
	font-size: var(--text-lg);
	font-weight: 700;
	line-height: 1.3;
	margin-top: var(--space-4);
	padding: 0 var(--space-5);
	text-decoration: none;
}
.main_front .news-card__preview {
	flex: 1 1 auto;
	line-height: 1.5;
	margin-top: var(--space-2);
	padding: 0 var(--space-5);
}
.main_front .news-card__more {
	align-self: flex-start;
	color: var(--color-brand-ink);
	margin: var(--space-3) var(--space-5) 0;
}

@media (min-width: 768px) {
	/* Фото занимает правую часть и растворяется влево: техника не попадает под текст ни на какой ширине */
	.front-hero {
		align-items: center;
		background-color: var(--front-section-alt);
		flex-direction: row;
		min-height: clamp(24rem, 26vw, 33rem);
		position: relative;
	}
	.front-hero__image {
		aspect-ratio: auto;
		height: 100%;
		inset: 0 0 0 auto;
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 22%);
		mask-image: linear-gradient(90deg, transparent, #000 22%);
		object-position: 100% 50%;
		position: absolute;
		width: 55%;
	}
	.front-hero__content {
		max-width: 50%;
		padding: var(--space-8) 0;
	}
	.front-hero__eyebrow {
		font-size: var(--text-sm);
	}
	.front-hero__text {
		font-size: var(--text-lg);
	}

	.front-achievements__item:nth-child(even) {
		border-left: 1px solid rgba(255, 255, 255, .25);
		padding-left: var(--space-6);
	}

	.front-request__form {
		padding: var(--space-8);
	}
}

@media (min-width: 1024px) {
	.front-achievements__image {
		opacity: 1;
	}
	.front-achievements {
		min-height: clamp(26rem, 28vw, 34rem);
	}
	.front-achievements__content {
		max-width: 44%;
		padding: var(--space-12) 0;
	}

	.front-request__container {
		align-items: center;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		column-gap: var(--space-16);
	}
}

@media (min-width: 1280px) {
	.front-features {
		column-gap: 0;
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
	.front-features_four {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.front-features__item {
		padding: 0 var(--space-6);
	}
	.front-features__item:first-child {
		padding-left: 0;
	}
	.front-features__item + .front-features__item {
		border-left: 1px solid var(--color-border);
	}
	.front-features__icon {
		height: 88px;
		width: 88px;
	}

	.main_front .shop-categories,
	.main_front .news-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}