/*
 * ГЛАВНАЯ СТРАНИЦА, БЛОК 2 — «ЧЕМ МОГУ ПОМОЧЬ».
 * Разметка: sections/lp-home-services.php. Зависит от landing/tokens.css и
 * landing/base.css, подключается после них.
 *
 * ШИРИНА — КАК У ОСТАЛЬНЫХ БЛОКОВ: сетка карточек занимает весь контейнер,
 * левым краем на одной вертикали с логотипом шапки, правым — с её последней
 * кнопкой.
 *
 * ОДНА ЕДИНИЦА НА БЛОК. Макет нарисован на 1672×941, содержимое занимает
 * 1537 по ширине, и размеры внутри карточек — доли `--sv-u` («один пиксель
 * макета»), который считается от ширины контейнера:
 *
 *     --sv-u = ширина контейнера / 1537
 *
 * Заголовок набран на 0.8 от макетного кегля: при растяжке макета на всю
 * ширину он выходил громче заголовка первого экрана, а на странице
 * монумент должен быть один.
 *
 * НА УЗКОМ ЭКРАНЕ (до 1024px) раскладка другая: две колонки, потом одна,
 * размеры — в rem. Чертёж остаётся, но тише и целиком в нижнем углу.
 */

/* ---------------------------------------------------------------------- */
/* Каркас и локальные токены                                              */
/* ---------------------------------------------------------------------- */

.lp .lp-home-services {
	/*
	 * Цвета, кегли и линии — только токены посадочной (tokens.css). Красный
	 * текст на графите — алый сигнал, заливки (кнопка, дуга, шестая карточка)
	 * — бордовый и его панель, границы нажимаемого — --lp-line-control.
	 */
	--sv-pad-b: var(--lp-section-y);

	padding-top: var(--lp-section-y);
	padding-bottom: var(--sv-pad-b);
	border-top: 1px solid var(--lp-line);
}

.lp .lp-home-services__stage {
	/*
	 * Единица считается потомками: cqw разрешается относительно предка-
	 * контейнера, а не самого контейнера, поэтому сама стадия её не использует.
	 */
	--sv-u: calc(100cqw / 1537);

	position: relative;
	container-type: inline-size;
}

/* Всё содержимое выше чертежа. */
.lp .lp-home-services__top,
.lp .lp-home-services__list,
.lp .lp-home-services__cta {
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------------------- */
/* Чертёж                                                                 */
/* ---------------------------------------------------------------------- */

/*
 * Рисунок привязан к низу блока, а не к верху: высота между заголовком и
 * карточками при перекомпоновке меняется, а дуга должна стоять на нижнем
 * краю. Нижнее поле блока (--sv-pad-b) в расчёт входит, поэтому низ рисунка
 * совпадает с низом блока, где его и обрезает overflow секции.
 */
.lp .lp-home-services__decor {
	position: absolute;
	left: 0;
	bottom: calc(-1 * var(--sv-pad-b));
	z-index: 0;
	width: 100%;
	height: auto;
	overflow: visible;
	pointer-events: none;
	fill: none;
}

.lp .lp-home-services__grid-lines path {
	stroke: var(--lp-line);
	stroke-width: 1;
}

.lp .lp-home-services__ring {
	stroke: var(--lp-burgundy);
	stroke-width: 105;
}

.lp .lp-home-services__curves circle,
.lp .lp-home-services__curves path {
	stroke: var(--lp-ink-muted);
	stroke-width: 1.5;
}

.lp .lp-home-services__dot {
	fill: var(--lp-crimson);
	stroke: var(--lp-ink);
	stroke-width: 1.5;
}

/* ---------------------------------------------------------------------- */
/* Верхняя полоса                                                         */
/* ---------------------------------------------------------------------- */

.lp .lp-home-services__index {
	display: flex;
	align-items: center;
	gap: calc(18 * var(--sv-u));
	margin-bottom: calc(18 * var(--sv-u));
}

.lp .lp-home-services__index-num {
	font-size: var(--lp-text-label);
	font-weight: var(--lp-weight-medium);
	letter-spacing: var(--lp-tracking-label);
	line-height: 1;
	color: var(--lp-ink);
}

.lp .lp-home-services__index-line {
	flex: 1;
	height: 1px;
	background-color: var(--lp-line-strong);
}

.lp .lp-home-services__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(60 * var(--sv-u));
}

.lp .lp-home-services__title {
	flex: none;
	font-family: var(--lp-font-display);
	font-size: calc(100 * var(--sv-u));
	font-weight: var(--lp-display-weight);
	line-height: calc(150 * var(--sv-u));
	letter-spacing: var(--lp-tracking-display);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--lp-ink);
}

/* Красный текст на графите — только алый сигнал (5.05:1). */
.lp .lp-home-services__title-part--accent {
	color: var(--lp-crimson);
}

.lp .lp-home-services__lead {
	flex: 0 1 calc(560 * var(--sv-u));
	padding-left: calc(46 * var(--sv-u));
	font-size: max(var(--lp-text-body), calc(26 * var(--sv-u)));
	line-height: var(--lp-leading-normal);
	color: var(--lp-ink);
	border-left: 1px solid var(--lp-line-control);
}

/* ---------------------------------------------------------------------- */
/* Карточки                                                               */
/* ---------------------------------------------------------------------- */

.lp .lp-home-services__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: calc(18 * var(--sv-u));
	margin-top: calc(40 * var(--sv-u));
}

.lp .lp-home-services__card {
	display: grid;
	grid-template-columns: calc(106 * var(--sv-u)) minmax(0, 1fr);
	grid-template-rows: 1fr auto;
	column-gap: 0;
	height: 100%;
	min-height: calc(218 * var(--sv-u));
	padding: calc(34 * var(--sv-u)) calc(32 * var(--sv-u)) calc(34 * var(--sv-u)) calc(34 * var(--sv-u));
	color: var(--lp-ink);
	text-decoration: none;
	background-color: var(--lp-field-deep);
	border: 1px solid var(--lp-line-control);
	transition:
		background-color var(--lp-duration) var(--lp-ease),
		border-color var(--lp-duration) var(--lp-ease);
}

.lp .lp-home-services__num {
	align-self: start;
	font-family: var(--lp-font-display);
	font-size: calc(108 * var(--sv-u));
	font-weight: var(--lp-display-weight);
	line-height: 0.95;
	letter-spacing: var(--lp-tracking-display);
	color: var(--lp-crimson);
	transition: color var(--lp-duration) var(--lp-ease);
}

.lp .lp-home-services__copy {
	display: flex;
	flex-direction: column;
	gap: calc(12 * var(--sv-u));
	min-width: 0;
	padding-top: calc(8 * var(--sv-u));
}

.lp .lp-home-services__name {
	font-family: var(--lp-font-display);
	font-size: calc(42 * var(--sv-u));
	font-weight: var(--lp-display-weight);
	line-height: 1;
	letter-spacing: var(--lp-tracking-display);
	text-transform: uppercase;
	color: var(--lp-ink);
}

.lp .lp-home-services__text {
	font-size: max(var(--lp-text-sm), calc(24 * var(--sv-u)));
	line-height: var(--lp-leading-normal);
	color: var(--lp-ink);
}

.lp .lp-home-services__foot {
	display: flex;
	grid-column: 1 / -1;
	align-items: center;
	gap: calc(28 * var(--sv-u));
	margin-top: calc(22 * var(--sv-u));
}

.lp .lp-home-services__foot-line {
	flex: 1;
	height: 1px;
	background-color: var(--lp-line-control);
	transition: background-color var(--lp-duration) var(--lp-ease);
}

.lp .lp-home-services__arrow {
	flex: none;
	width: max(1.25rem, calc(31 * var(--sv-u)));
	height: auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	transition: transform var(--lp-duration) var(--lp-ease);
}

/*
 * Наведение и последняя карточка выглядят одинаково: бордовая плита с красной
 * рамкой и белым номером. В макете так нарисована шестая; на остальных тот же
 * вид появляется по наведению, чтобы было понятно, что плитка нажимается.
 */
.lp .lp-home-services__card:hover,
.lp .lp-home-services__card--featured {
	background-color: var(--lp-burgundy-panel);
	border-color: var(--lp-crimson);
}

.lp .lp-home-services__card:hover .lp-home-services__num,
.lp .lp-home-services__card--featured .lp-home-services__num {
	color: var(--lp-ink);
}

.lp .lp-home-services__card:hover .lp-home-services__foot-line {
	background-color: var(--lp-ink);
}

.lp .lp-home-services__card:hover .lp-home-services__arrow {
	transform: translateX(6px);
}

/* ---------------------------------------------------------------------- */
/* Кнопка                                                                 */
/* ---------------------------------------------------------------------- */

.lp .lp-home-services__cta {
	display: flex;
	justify-content: flex-end;
	margin-top: calc(26 * var(--sv-u));
}

.lp .lp-home-services__btn {
	gap: calc(24 * var(--sv-u));
	min-width: calc(420 * var(--sv-u));
	min-height: 62px;
	padding-inline: calc(40 * var(--sv-u));
	white-space: nowrap;
}

/* ---------------------------------------------------------------------- */
/* Планшет и телефон                                                      */
/* ---------------------------------------------------------------------- */

@media (max-width: 63.99em) {
	.lp .lp-home-services__index {
		gap: 1rem;
		margin-bottom: 1rem;
	}

	.lp .lp-home-services__index-num {
	}

	.lp .lp-home-services__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
	}

	.lp .lp-home-services__title {
		font-size: min(calc(100cqw / 3.6), 7rem);
		line-height: 0.9;
		white-space: normal;
	}

	/* На узком экране заголовок в две строки: «Чем могу» и красное слово. */
	.lp .lp-home-services__title-part {
		display: block;
	}

	.lp .lp-home-services__lead {
		flex: none;
		max-width: 34rem;
		padding-left: 0;
		font-size: var(--lp-text-lead);
		border-left: 0;
	}

	.lp .lp-home-services__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
		margin-top: 1.75rem;
	}

	.lp .lp-home-services__card {
		grid-template-columns: 4.25rem minmax(0, 1fr);
		min-height: 13rem;
		padding: 1.25rem;
	}

	.lp .lp-home-services__num {
		font-size: 3.5rem;
	}

	.lp .lp-home-services__copy {
		gap: 0.5rem;
		padding-top: 0.25rem;
	}

	.lp .lp-home-services__name {
		font-size: 1.75rem;
	}

	.lp .lp-home-services__text {
		font-size: var(--lp-text-body);
	}

	.lp .lp-home-services__foot {
		gap: 1rem;
		margin-top: 1rem;
	}

	.lp .lp-home-services__arrow {
		width: 1.75rem;
	}

	.lp .lp-home-services__cta {
		margin-top: 1rem;
	}

	.lp .lp-home-services__btn {
		min-width: 0;
		min-height: 3.5rem;
		gap: 1rem;
		padding-inline: 1.5rem;
	}

	/* Дуга уходит в нижний угол и тише: под карточками ей места нет. */
	.lp .lp-home-services__decor {
		opacity: 0.45;
	}
}

@media (max-width: 39.99em) {
	.lp .lp-home-services__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.lp .lp-home-services__card {
		min-height: 0;
	}

	.lp .lp-home-services__cta {
		display: block;
	}

	.lp .lp-home-services__btn {
		display: flex;
		width: 100%;
		justify-content: space-between;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp .lp-home-services__card,
	.lp .lp-home-services__arrow {
		transition: none;
	}
}