/* ===== Contacts Page - Start ===== */

/* Contacts - Start */
/* Макет: 1920 `471:35042`, 1480 `476:53179`, 375 `471:40793`.

   Дві колонки лягають на тему без свого CSS: `.container` + два `col-6` дають 930 на 1920
   і 710 на 1480 — рівно ширини макета. Форма цілком на компоненті з `components/02-forms.css`
   (поле 56/48, крок 12/10, textarea 120/104, чекбокс 24×24 і блокування кнопки до відмітки) —
   там нічого не правимо.

   Блок «підпис + значення» — той самий, що в футері, тільки темним по кремовому:
   числа взяті звідти (16/22 → 14/20 підпис, 24/36 → 20/30 → 18/27 значення Light 300,
   іконка 56×56 з проміжком 8 і гліфом 20), щоб два місця не розійшлися. */

.contact-page .contacts-section {
	/* Порожнє поле до футера: макет дає 160 на 1920 і 150 на 1480 — різниця в межах
	   похибки дизайнера, беремо 150 на обидва ПК-тири; на 375 намальовано 80. */
	padding-bottom: 150px;
}

.contact-page .contacts-section h1 {
	margin-bottom: 24px;
}

/* Ліва колонка: підзаголовок і блок способів звʼязку. Крок 44 знято з обох ПК-тирів. */
.contact-page .contacts-info-col {
	gap: 44px;
}

.contact-page .contacts-groups {
	display: flex;
	flex-direction: column;
	/* Автолейаут макета: між групами 32 на всіх трьох тирах (`Frame 2087325534`). */
	gap: 32px;
}

.contact-page .contacts-label {
	color: var(--black);
	/* Підпис приглушений чорним 64% — те саме, що білі 64% у футері (471:35047). */
	opacity: 0.64;
	font-family: var(--font-family-1);
	font-size: 16px;
	line-height: 22px;
	font-weight: 400;
	margin-bottom: 10px;
}

.contact-page .contacts-socials-group .contacts-label {
	margin-bottom: 11px;
}

.contact-page .contacts-value {
	display: inline-block;
	color: var(--black);
	font-family: var(--font-family-1);
	font-size: 24px;
	line-height: 36px;
	font-weight: 300;
	transition: opacity 0.3s ease;
}

.contact-page .contacts-value:hover {
	opacity: 0.7;
}

.contact-page .contacts-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.contact-page .contacts-social-link {
	--icon-box: 56px;
	transition: opacity 0.3s ease;
}

.contact-page .contacts-social-link:hover {
	opacity: 0.7;
}

.contact-page .contacts-social-link .icon-mask {
	--icon-base: 20px;
}

/* Права колонка: заголовок форми і опис — Manrope, не Forum (471:35095), тому `.text-up-1`,
   а не заголовок теми. Між ними 16, від опису до форми 40. */
.contact-page .contacts-form-col {
	gap: 16px;
}

.contact-page .contacts-form-col .form-fields {
	margin-top: 24px;
}

@media (max-width: 1680px) {
	.contact-page .contacts-value {
		font-size: 20px;
		line-height: 30px;
	}
}

@media (max-width: 1279px) {
	.contact-page .contacts-section {
		padding-bottom: 80px;
	}

	.contact-page .contacts-section h1 {
		margin-bottom: 16px;
	}

	.contact-page .contacts-info-col {
		gap: 40px;
	}

	.contact-page .contacts-label {
		font-size: 14px;
		line-height: 20px;
		margin-bottom: 12px;
	}

	.contact-page .contacts-socials-group .contacts-label {
		margin-bottom: 6px;
	}

	.contact-page .contacts-value {
		font-size: 18px;
		line-height: 27px;
	}

	.contact-page .contacts-social-link {
		--icon-box: 48px;
	}

	.contact-page .contacts-social-link .icon-mask {
		--icon-base: 17px;
	}

	.contact-page .contacts-form-col .form-fields {
		margin-top: 16px;
	}
}
/* Contacts - End */

/* ===== Contacts Page - End ===== */