/**
 * Компонент: Site footer.
 *
 * Содержимое подвала во всех четырёх макетах ИДЕНТИЧНО (различается лишь
 * идентификатор встроенного логотипа) — поэтому это один переиспользуемый
 * компонент. Различается только верхняя обёртка:
 *
 *   главная  background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 88px,
 *            #0E1F47 88px,#0E1F47 100%); пустой отступ 144px + контент 56px
 *   услуга   background:#0E1F47; margin-top:128px; контент 64px
 *   проекты  то же
 *   wiki     background:#0E1F47; контент 64px, без margin-top
 *
 * reference (содержимое):
 *   сетка    grid-template-columns:1.4fr repeat(4,1fr); gap:40px; padding-bottom:52px
 *   логотип  height:32px
 *   о нас    14px/1.55 #9AA1AE; max-width:280px; margin-top:16px
 *   телефон  17px/800 #FFFFFF; margin-top:20px
 *   e-mail   14px/600 #9AA1AE; margin-top:6px
 *   колонка  заголовок 13px/800 ls0.06em uppercase #FFFFFF;
 *            ссылки 14px/500 #9AA1AE; gap:10px; margin-top:16px
 *   низ      border-top:1px solid rgba(255,255,255,0.08); padding:22px 0 26px
 *   копирайт 12.5px/500 #9AA1AE; юр. ссылки те же, gap:24px
 */

.tri-site-footer {
	background-color: var(--tri-color-navy-deep);
	color: var(--tri-color-on-dark-9aa1ae);
}

/* Кнопки исключены — у них своя цветовая пара. */
.tri-site-footer a:not(.tri-btn) {
	color: var(--tri-color-on-dark-9aa1ae);
	text-decoration: none;
}

.tri-site-footer a:not(.tri-btn):hover,
.tri-site-footer a:not(.tri-btn):focus-visible {
	color: var(--tri-color-white);
}

/* Отступ над содержимым подвала. reference: 64px. */
.tri-footer__inner {
	padding-block-start: var(--tri-space-64);
}

/* --- Вариант главной ------------------------------------------------
 * reference: белая полоса 88px, затем тёмный фон; пустой отступ 144px,
 * после него содержимое с отступом 56px.
 * ------------------------------------------------------------------ */

.tri-site-footer--home {
	background-color: var(--tri-color-navy-deep);
	background-image: linear-gradient(
		180deg,
		var(--tri-color-white) 0%,
		var(--tri-color-white) 88px,
		var(--tri-color-navy-deep) 88px,
		var(--tri-color-navy-deep) 100%
	);
}

.tri-site-footer--home .tri-footer__spacer {
	height: var(--tri-space-144);
}

.tri-site-footer--home .tri-footer__inner {
	padding-block-start: var(--tri-space-56);
}

/* --- Вариант с отбивкой (услуга, проекты) --------------------------- */

.tri-site-footer--offset {
	margin-block-start: var(--tri-space-128);
}

/* --- Верхняя часть --------------------------------------------------- */

.tri-footer__top {
	display: grid;
	gap: var(--tri-space-40);
	padding-block-end: var(--tri-space-52);
	grid-template-columns: minmax(0, 1fr);
}

.tri-footer__brand img,
.tri-footer__brand svg {
	height: 32px;
	width: auto;
}

.tri-footer__about {
	margin-block-start: var(--tri-space-16);
	max-width: 280px;
	font-size: var(--tri-fs-14);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-on-dark-9aa1ae);
}

/* Селектор ссылок подвала имеет специфичность (0,2,1), поэтому телефон
   должен перебить его — иначе белый цвет из макета не применится. */
.tri-site-footer a.tri-footer__phone {
	display: block;
	margin-block-start: var(--tri-space-20);
	font-size: var(--tri-fs-17);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-white);
}

.tri-footer__email {
	display: block;
	margin-block-start: var(--tri-space-6);
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-600);
}

/* --- Низ подвала ----------------------------------------------------- */

.tri-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--tri-space-16);
	padding-block: var(--tri-space-22) var(--tri-space-26);
	border-top: var(--tri-border-width) solid rgba(255, 255, 255, 0.08);
}

.tri-footer__copyright {
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-500);
	color: var(--tri-color-on-dark-9aa1ae);
	margin: 0;
}

/* --- Планшет и десктоп ------------------------------------------------ */

@media (min-width: 768px) {
	/*
	 * reference: 1.4fr repeat(4,1fr).
	 * Чтобы колонки меню были РЕАЛЬНЫМИ ячейками сетки (иначе ширина
	 * блока компании расходится с макетом примерно на 100px), <nav> и <ul>
	 * растворяются через display:contents, а пункты становятся
	 * элементами сетки.
	 */
	.tri-footer__top {
		grid-template-columns: 1.4fr repeat(4, 1fr);
	}

	.tri-footer__nav,
	.tri-footer__nav .tri-menu--footer {
		display: contents;
	}
}

/* ------------------------------------------------------------------
 * ПОДВАЛ НА ТЕЛЕФОНЕ (мобильный этап 14.09)
 *
 * Четыре раздела меню шли в один столбик, и подвал вырастал в стену
 * ссылок высотой больше экрана в три раза. Разделы встают по два в
 * ряд: группы не рвутся, а высота сокращается вдвое. Пункт получает
 * нормальную высоту нажатия — при двух колонках это по карману.
 * ---------------------------------------------------------------- */
@media (max-width: 767px) {
	.tri-footer__nav .tri-menu--footer {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--tri-space-26) var(--tri-space-20);
	}

	.tri-footer__nav .tri-menu__item {
		min-width: 0;
	}

	.tri-site-footer a:not(.tri-btn) {
		display: inline-flex;
		align-items: center;
		min-block-size: 36px;
	}

	.tri-site-footer a.tri-footer__phone,
	.tri-footer__email {
		min-block-size: 44px;
	}
}