/**
 * Meet the Team — страница About (page-about.php).
 *
 * Значения из макета Figma: desktop узел 10300:3232, mobile узел 10300:5143.
 * Таблица значений — в _workflow/tasks/step-contact-team.md.
 *
 * @package AJ1MOTO.COM
 */

/*
 * padding-top 60, а не 61: в макете обводка рисуется внутрь фрейма и не влияет
 * на раскладку, в CSS border-box граница прибавляется к padding. 1 + 60 = 61
 * до контента (макет) и высота секции 797 (макет), а не 798.
 */
.team {
	padding-top: var(--space-60);
	padding-bottom: var(--space-60);
	border-top: calc(1 / var(--vw-base) * 100vw) solid var(--color-grey-90);
	background: var(--color-grey-93);
}

.team__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
}

/* Заголовочный ряд: слева надзаголовок + H2, справа текст, по нижнему краю. */
.team__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-40);
}

.team__head-main {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-20);
}

.team__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-13);
	line-height: var(--lh-115); /* макет: бокс 15 при fs13 */
	letter-spacing: calc(3 / var(--vw-base) * 100vw);
	text-transform: uppercase;
	color: var(--color-accent);
}

.team__title {
	font-family: var(--font-display);
	font-size: var(--fs-52);
	font-weight: var(--fw-display);
	line-height: var(--lh-100);
	letter-spacing: var(--ls-display);
	text-transform: uppercase;
	color: var(--color-dark);
}

.team__lead {
	max-width: calc(360 / var(--vw-base) * 100vw);
	font-size: var(--fs-16);
	line-height: var(--lh-156); /* макет: бокс 50 на 2 строки при fs16 */
	color: var(--color-grey-31);
}

/* Карточки: 3 равные колонки (432 × 3 + 24 × 2 = 1344 контейнера). */
.team__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-24);
}

.team__member {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-14);
	background: var(--color-white);
	overflow: hidden;
}

.team__photo {
	width: 100%;
	height: auto;
	aspect-ratio: 432 / 350;
	object-fit: cover;
}

.team__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-5);
	padding: var(--space-20);
}

.team__member-eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-10);
	line-height: var(--lh-130); /* макет: бокс 13 при fs10 */
	letter-spacing: calc(2 / var(--vw-base) * 100vw);
	text-transform: uppercase;
	color: var(--color-accent); /* макет #e60012 → #e10600 по решению пользователя */
}

.team__name {
	width: 100%;
	padding-top: var(--space-5);
	font-family: var(--font-display);
	font-size: var(--fs-28);
	font-weight: var(--fw-display);
	line-height: var(--lh-100);
	text-transform: uppercase;
	color: var(--color-dark);
}

.team__role {
	width: 100%;
	padding-bottom: var(--space-5);
	font-size: var(--fs-17);
	line-height: var(--lh-165); /* макет: бокс 28 при fs17 */
	color: var(--color-grey-35);
}

/* padding-top 14 + граница 1 = 15 до контента (макет), высота блока 65. */
.team__contacts {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	width: 100%;
	padding-top: var(--space-14);
	border-top: calc(1 / var(--vw-base) * 100vw) solid var(--color-grey-90);
}

/* Ховер ссылок — глобальный (base.css, rules-interactive §2). */
.team__contact {
	font-size: var(--fs-14);
	font-weight: 600;
	line-height: var(--lh-157); /* макет: бокс 22 при fs14 */
	color: var(--color-dark);
}

@media (max-width: 767px) {
	.team {
		padding-top: var(--space-40);
		padding-bottom: var(--space-40);
		border-top: 0;
	}

	.team__inner {
		gap: var(--space-30);
	}

	.team__head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-15);
	}

	.team__head-main {
		gap: var(--space-15);
	}

	.team__eyebrow {
		font-size: var(--fs-10);
		line-height: var(--lh-130); /* макет: бокс 13 при fs10 */
		letter-spacing: calc(2 / var(--vw-base) * 100vw);
	}

	.team__title {
		font-size: var(--fs-30);
	}

	.team__lead {
		max-width: 100%;
		font-size: var(--fs-15);
		line-height: var(--lh-160); /* макет: бокс 48 на 2 строки при fs15 */
	}

	.team__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-20);
	}

	.team__member {
		border-radius: var(--radius-12);
	}
}