/**
 * Contact Form + Info — общий блок Contact (About, Download; якорь #contact).
 *
 * Значения из макета Figma: desktop узел 10300:3091, mobile узлы
 * 10300:5028 (form) и 10300:5068 (info).
 * Таблица значений — в _workflow/tasks/step-contact-form-info.md.
 *
 * @package AJ1MOTO.COM
 */

/* Якорь #contact (About): отступ при переходе, как у dealer-form. */
.contact-fi {
	display: flex;
	align-items: stretch;
	background: var(--color-light);
	scroll-margin-top: var(--space-20);
}

/* Левая колонка — форма (тянется, разделитель справа). */
.contact-fi__form {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
	padding: var(--space-60) calc(49 / var(--vw-base) * 100vw) var(--space-60) var(--container-gutter);
	border-right: calc(1 / var(--vw-base) * 100vw) solid var(--color-grey-90);
}

/* Правая колонка — контактная информация. */
.contact-fi__info {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
	width: calc(480 / var(--vw-base) * 100vw);
	padding: var(--space-60) var(--container-gutter);
}

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

.contact-fi__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-13);
	line-height: var(--lh-115); /* макет: h15 при fs13 (иначе body 1.56 раздувает) */
	letter-spacing: calc(3 / var(--vw-base) * 100vw);
	text-transform: uppercase;
	color: var(--color-accent);
}

.contact-fi__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);
}

/* Подзаголовок (ТЗ V4, п. 6.6) — типографика подзаголовка Team той же страницы. */
.contact-fi__lead {
	font-size: var(--fs-16);
	line-height: var(--lh-156);
	color: var(--color-grey-31);
}

/* Карточка формы (десктоп): белый бокс со скруглением. */
.contact-fi__form-card {
	padding: calc(26 / var(--vw-base) * 100vw) calc(28 / var(--vw-base) * 100vw);
	border: calc(1 / var(--vw-base) * 100vw) solid var(--color-grey-90);
	border-radius: var(--radius-14);
	background: var(--color-white);
}

/* ===== Форма Contact Form 7 ===== */

/*
 * Вертикальные интервалы формы — явными margin на блоках (18 из макета), а не
 * flex-gap: разметка CF7 содержит служебные блоки (fieldset, ответы), которые
 * при gap создают лишние промежутки. Так высота карточки точна (450).
 */
.contact-fi__form-card .contact-form__row + .contact-form__row,
.contact-fi__form-card .contact-form__row + .contact-form__field,
.contact-fi__form-card form > .contact-form__field + .contact-form__field,
.contact-fi__form-card .contact-form__field + .contact-form__submit-wrap {
	margin-top: var(--space-18);
}

.contact-fi__form-card .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

/* Служебные блоки CF7 (скрин-ридер, скрытые поля) — вне потока. */
.contact-fi__form-card .screen-reader-response,
.contact-fi__form-card .hidden-fields-container {
	display: none;
}

/*
 * Блок ответа (валидация/успех): при init скрыт (не занимает высоту в макете);
 * показывается только когда форма в статусе с сообщением — тогда с отступом.
 */
.contact-fi__form-card .wpcf7-response-output {
	display: none;
	margin-top: var(--space-18);
}

.contact-fi__form-card .wpcf7-form.sent .wpcf7-response-output,
.contact-fi__form-card .wpcf7-form.failed .wpcf7-response-output,
.contact-fi__form-card .wpcf7-form.invalid .wpcf7-response-output,
.contact-fi__form-card .wpcf7-form.unaccepted .wpcf7-response-output,
.contact-fi__form-card .wpcf7-form.aborted .wpcf7-response-output {
	display: block;
}

/* Автоформат CF7 отключён на фронте (functions.php), <br> в форме не появляются;
   правило-подстраховка на случай включения autop. */
.contact-fi__form-card .wpcf7-form br {
	display: none;
}

/* Ряд из двух полей (Name/Company, Email/Phone). */
.contact-form__row {
	display: flex;
	gap: var(--space-20);
}

.contact-form__field {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	gap: var(--space-10);
	margin: 0;
}

.contact-form__label {
	font-family: var(--font-mono);
	font-size: var(--fs-10);
	/* Макет: высота лейбла 13 при fs 10 → line-height 1.3 (иначе body 1.56
	   раздувает лейбл до 16 и накапливает лишнюю высоту по всем полям). */
	line-height: var(--lh-130);
	letter-spacing: calc(2 / var(--vw-base) * 100vw);
	text-transform: uppercase;
	color: var(--color-grey-31);
}

/* Message-поле: лейбл крупнее (fs 11, макет h15), зазор до textarea 7. */
.contact-form__field--full {
	gap: calc(7 / var(--vw-base) * 100vw);
}

.contact-form__field--full .contact-form__label {
	font-size: var(--fs-11);
}

.contact-form__input,
.contact-form__textarea {
	/* display:block — иначе inline-block контрол внутри <p> даёт baseline-зазор
	   под собой (textarea «съедала» +8px к высоте поля). */
	display: block;
	width: 100%;
	border: calc(1 / var(--vw-base) * 100vw) solid var(--color-grey-90);
	border-radius: var(--radius-7);
	font-family: var(--font-base);
	font-size: var(--fs-14);
	color: var(--color-dark);
	background: var(--color-light);
	transition: border-color var(--transition-base);
}

/* Однострочное поле: жёсткая высота 48 (макет), горизонтальный паддинг. */
.contact-form__input {
	height: calc(48 / var(--vw-base) * 100vw);
	padding: 0 var(--space-15);
}

/* Textarea: высота 120 (макет), вертикальный паддинг как у поля. */
.contact-form__textarea {
	height: calc(120 / var(--vw-base) * 100vw);
	padding: calc(13 / var(--vw-base) * 100vw) var(--space-15);
	resize: vertical;
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
	color: var(--color-grey-67);
}

.contact-form__input:focus,
.contact-form__textarea:focus {
	outline: none;
	border-color: var(--color-accent);
}

/* Кнопка отправки: акцентная, как .btn (Saira Condensed Bold). */
.contact-form__submit {
	display: inline-flex;
	align-items: center;
	gap: var(--space-10);
	min-height: calc(60 / var(--vw-base) * 100vw);
	padding: calc(17 / var(--vw-base) * 100vw) var(--space-30);
	border: 0;
	border-radius: var(--radius-7);
	font-family: var(--font-condensed);
	font-size: var(--fs-19);
	font-weight: 700;
	letter-spacing: calc(1 / var(--vw-base) * 100vw);
	text-transform: uppercase;
	color: var(--color-white);
	background: var(--color-accent);
	cursor: pointer;
	transition: background-color var(--transition-base);
}

.contact-form__submit:hover {
	background: var(--color-accent-hover);
}

.contact-form__submit-wrap {
	margin: 0;
}

/* ===== Info: контактные строки ===== */

.contact-fi__lines {
	display: flex;
	flex-direction: column;
	gap: var(--space-15);
}

.contact-fi__line {
	display: flex;
	align-items: flex-start;
	gap: var(--space-16);
}

/* Иконка в акцентном квадрате. */
.contact-fi__line-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: calc(44 / var(--vw-base) * 100vw);
	height: calc(44 / var(--vw-base) * 100vw);
	border: calc(1 / var(--vw-base) * 100vw) solid var(--color-accent-30);
	border-radius: var(--radius-8);
	color: var(--color-accent);
	background: var(--color-accent-10);
}

/* Размер иконки — из макета для каждого типа (ширина 22 общая, высота своя). */
.contact-fi__line-icon svg {
	width: calc(22 / var(--vw-base) * 100vw);
}

.contact-fi__line-icon--pin svg {
	height: calc(24 / var(--vw-base) * 100vw);
}

.contact-fi__line-icon--phone svg {
	height: calc(22 / var(--vw-base) * 100vw);
}

.contact-fi__line-icon--mail svg {
	height: calc(19 / var(--vw-base) * 100vw);
}

.contact-fi__line-body {
	display: flex;
	flex-direction: column;
	gap: calc(4 / var(--vw-base) * 100vw);
}

.contact-fi__line-label {
	font-family: var(--font-mono);
	font-size: var(--fs-13);
	line-height: var(--lh-131); /* макет: h17 при fs13 (иначе body 1.56 раздувает строку) */
	letter-spacing: calc(3 / var(--vw-base) * 100vw);
	text-transform: uppercase;
	color: var(--color-grey-60);
}

.contact-fi__line-value {
	font-family: var(--font-base);
	font-size: var(--fs-14);
	font-weight: 600;
	color: var(--color-dark);
}

a.contact-fi__line-value {
	transition: color var(--transition-base);
}

a.contact-fi__line-value:hover {
	color: var(--color-accent);
}

/* Блок с верхним разделителем (мессенджеры, часы). */
.contact-fi__block {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
	padding-top: var(--space-25);
	border-top: calc(1 / var(--vw-base) * 100vw) solid var(--color-grey-85);
}

.contact-fi__block-title {
	font-family: var(--font-mono);
	font-size: var(--fs-13);
	line-height: var(--lh-131); /* макет: h17 при fs13 */
	letter-spacing: calc(3 / var(--vw-base) * 100vw);
	text-transform: uppercase;
	color: var(--color-grey-67);
}

/* Мессенджеры: сетка 2×N цветных кнопок. */
.contact-fi__messengers {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-10);
}

.contact-fi__messenger-link {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	min-height: calc(44 / var(--vw-base) * 100vw);
	padding: var(--space-10) calc(13 / var(--vw-base) * 100vw);
	border-radius: var(--radius-8);
	color: var(--color-white);
	transition: opacity var(--transition-base);
}

.contact-fi__messenger-link:hover {
	color: var(--color-white);
	opacity: 0.85;
}

.contact-fi__messenger-icon {
	flex-shrink: 0;
	width: calc(20 / var(--vw-base) * 100vw);
	height: calc(20 / var(--vw-base) * 100vw);
}

.contact-fi__messenger-name {
	font-family: var(--font-base);
	font-size: var(--fs-14);
	font-weight: 600;
}

.contact-fi__messenger--instagram .contact-fi__messenger-link {
	background: var(--gradient-social-instagram);
}

.contact-fi__messenger--facebook .contact-fi__messenger-link {
	background: var(--color-social-facebook);
}

.contact-fi__messenger--youtube .contact-fi__messenger-link {
	background: var(--color-social-youtube);
}

/* Часы работы: строки «день — время». */
.contact-fi__hours {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.contact-fi__hours-row {
	display: flex;
	justify-content: space-between;
	font-family: var(--font-base);
	font-size: var(--fs-14);
	font-weight: 600;
	color: var(--color-dark);
}

.contact-fi__hours-note {
	margin-top: var(--space-5);
	font-family: var(--font-mono);
	font-size: var(--fs-10);
	letter-spacing: calc(2 / var(--vw-base) * 100vw);
	text-transform: uppercase;
	color: var(--color-accent);
}

@media (max-width: 767px) {
	/* Мобильный: две колонки → один столбец (форма, затем info). */
	.contact-fi {
		flex-direction: column;
	}

	.contact-fi__form {
		gap: var(--space-30);
		padding: var(--space-40) var(--container-gutter);
		border-right: 0;
	}

	.contact-fi__info {
		width: 100%;
		padding: var(--space-40) var(--container-gutter);
	}

	.contact-fi__head {
		gap: var(--space-15);
	}

	/* Надзаголовок на мобильном — fs10, ls2 (макет: form 10300:5030,
	   info 10300:5069, оба h13 при fs10); на десктопе fs13. */
	.contact-fi__eyebrow {
		font-size: var(--fs-10);
		line-height: var(--lh-130);
		letter-spacing: calc(2 / var(--vw-base) * 100vw);
	}

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

	.contact-fi__lead {
		font-size: var(--fs-15);
		line-height: var(--lh-160);
	}

	/* Мобильный: без карточки-обёртки — поля прямо на фоне. */
	.contact-fi__form-card {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
	}

	/* Поля в один столбец; интервал между полями/блоками — 14 (макет). */
	.contact-form__row {
		flex-direction: column;
		gap: var(--space-14);
	}

	.contact-fi__form-card .contact-form__row + .contact-form__row,
	.contact-fi__form-card .contact-form__row + .contact-form__field,
	.contact-fi__form-card form > .contact-form__field + .contact-form__field,
	.contact-fi__form-card .contact-form__field + .contact-form__submit-wrap {
		margin-top: var(--space-14);
	}

	/* Мобильный: textarea ниже 108; Message-лейбл как обычный (13, gap 10). */
	.contact-form__textarea {
		height: calc(108 / var(--vw-base) * 100vw);
	}

	.contact-form__field--full {
		gap: var(--space-10);
	}

	.contact-form__field--full .contact-form__label {
		font-size: var(--fs-10);
	}

	/*
	 * Спиннер CF7 (base.css: absolute без координат) вставал за кнопкой
	 * шириной 100% и давал горизонтальный скролл на 29px — внутрь кнопки справа.
	 */
	.contact-form__submit-wrap {
		position: relative;
	}

	.contact-form__submit-wrap .wpcf7-spinner {
		top: 50%;
		right: var(--space-15);
		margin: 0;
		transform: translateY(-50%);
	}

	.contact-form__submit {
		width: 100%;
		justify-content: center;
		min-height: calc(52 / var(--vw-base) * 100vw);
		padding-top: calc(11 / var(--vw-base) * 100vw);
		padding-bottom: calc(11 / var(--vw-base) * 100vw);
	}

	/* Иконки контактов на мобильном — 40×40 (макет). */
	.contact-fi__line-icon {
		width: calc(40 / var(--vw-base) * 100vw);
		height: calc(40 / var(--vw-base) * 100vw);
	}

	.contact-fi__line-label {
		font-size: var(--fs-10);
		letter-spacing: calc(2 / var(--vw-base) * 100vw);
	}

	/* Отступ над блоком (мессенджеры/часы) на мобильном — 16 (макет:
	   span:margin 10300:5100/5122 y=16); на десктопе 25. Внутренний зазор
	   title→контент — 15 (макет: title bottom 33, сетка y48); десктоп 20. */
	.contact-fi__block {
		gap: var(--space-15);
		padding-top: var(--space-16);
	}

	/* Зазор иконка→тело строки — 14 (макет: иконка 40, тело x54); десктоп 16. */
	.contact-fi__line {
		gap: var(--space-14);
	}

	/* Зазор label→value внутри строки — 2 (макет 10300:5075/5077); десктоп 4. */
	.contact-fi__line-body {
		gap: calc(2 / var(--vw-base) * 100vw);
	}
}