/**
 * Страница «Контакты» — заглушка до утверждения макета.
 *
 * Собственных величин здесь нет: всё берётся из общих токенов темы.
 * Когда появится утверждённый макет, этот файл заменяется вёрсткой по
 * нему, а не дополняется.
 */

.tri-contacts__title {
	font-family: var(--tri-font-display);
	font-size: var(--tri-fs-44);
	font-weight: var(--tri-fw-800);
	line-height: var(--tri-lh-1-15);
	letter-spacing: var(--tri-ls-n0-028);
	color: var(--tri-color-ink);
	margin: var(--tri-space-24) 0 0;
}

.tri-contacts__lead {
	font-size: var(--tri-fs-17);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-muted);
	margin: var(--tri-space-16) 0 0;
	max-width: 72ch;
}

.tri-contacts__list {
	list-style: none;
	margin: var(--tri-space-32) 0 0;
	padding: 0;
	display: grid;
	gap: var(--tri-space-16);
}

.tri-contacts__card {
	border: var(--tri-border-width) solid var(--tri-color-border);
	border-radius: var(--tri-radius-16);
	padding: var(--tri-space-24);
	background: var(--tri-color-white);
	display: grid;
	gap: var(--tri-space-8);
}

.tri-contacts__label {
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-08);
	text-transform: uppercase;
	color: var(--tri-color-muted-soft);
}

.tri-contacts__value {
	font-size: var(--tri-fs-18);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-ink);
	text-decoration: none;
}

a.tri-contacts__value:hover,
a.tri-contacts__value:focus-visible {
	color: var(--tri-color-link-2a56b8);
}

.tri-contacts__actions {
	margin-top: var(--tri-space-28);
}

.tri-contacts__body {
	margin-top: var(--tri-space-32);
	max-width: var(--tri-measure, 780px);
	font-size: var(--tri-fs-16-5);
	line-height: var(--tri-lh-1-7);
	color: var(--tri-color-ink-secondary);
}

@media (min-width: 768px) {
	.tri-contacts__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.tri-contacts__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}