/* ==================================================================
   ITB footer — общий подвал сайта.

   Весь файл под .itb-footer. Глобальные селекторы (footer, ul, a, h2,
   .row, .container) не переопределяются: подвал живёт на девяти
   шаблонах, и правка глобального правила задела бы страницы,
   к которым эта задача не относится.

   Значения берутся из itb-design-system.css. Фолбэк у каждого var —
   точное каноническое значение того же токена, а не близкий аналог:
   он нужен там, где общий слой ещё не подключён, и обязан давать
   тот же результат.

   Прежние правила подвала в itb-production.min.css не удалялись, они
   перебиваются по весу: .itb-footer (0-1-0) сильнее footer (0-0-1),
   .itb-footer a (0-1-1) сильнее footer a (0-0-2). Чистка мёртвых
   legacy-правил — отдельная задача.
   ================================================================== */

.itb-footer {
	/* Отступ до контента у общего слоя ступенчатый: 65px от 576px и 40px
	   ниже. Ступень повторяется и в фолбэке — иначе страница без общего
	   слоя получила бы 65px там, где канон даёт 40px. */
	--itb-footer-gutter: var(--itb-gutter, 65px);

	background: var(--itb-color-surface-tint, #f7f8fa);
	border-top: 1px solid var(--itb-color-border, #e5e5e5);
	padding: 72px 0 32px;
	color: var(--itb-color-text-secondary, #393939);
	/* Прежний подвал был тёмным: footer { background:#3e4557; color:white }.
	   Цвет объявлен здесь, чтобы белый текст не наследовался вглубь. */
}

@media (max-width: 575px) {

	.itb-footer {
		--itb-footer-gutter: var(--itb-gutter, 40px);
	}
}

/* Тот же shell, что у главной: width: min(), а не max-width + padding,
   поэтому 1320 — это ширина самого контента и левый край подвала
   совпадает с левым краем текста страницы. */
.itb-footer__inner {
	width: min(var(--itb-container, 1320px), calc(100% - var(--itb-footer-gutter) * 2));
	margin-inline: auto;
}

/* Списки: свой сброс в namespace. Глобальное правило маркеров не трогаем,
   а FA-маркер из .card-body сюда не дотянется — подвал лежит вне него. */
.itb-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.itb-footer li::marker {
	content: none;
}

/* --- верхняя часть: бренд + навигация ------------------------------ */

.itb-footer__top {
	display: grid;
	grid-template-columns: 1.6fr repeat(4, 1fr);
	gap: 48px 40px;
	padding-bottom: 56px;
}

/* --- бренд ---------------------------------------------------------- */

.itb-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	/* Контакты живут здесь, а не пятой колонкой навигации: телефон и почта
	   не являются разделами сайта. */
	max-width: 22rem;
}

.itb-footer__logo {
	display: inline-block;
	line-height: 0;
	transition: opacity var(--itb-motion-fast, .16s ease);
}

.itb-footer__logo:hover {
	opacity: .8;
}

.itb-footer__logo img {
	width: 104px;
	height: auto;
}

.itb-footer__statement {
	margin: 0;
	font-size: 1rem;
	line-height: var(--itb-lh-body, 1.62);
	color: var(--itb-color-text-secondary, #393939);
}

/* --- контакты ------------------------------------------------------- */

.itb-footer__contacts {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: var(--itb-link-size-compact, .92rem);
	line-height: var(--itb-link-lh, 1.35);
}

.itb-footer__contact {
	display: flex;
	gap: .5rem;
	align-items: baseline;
	color: var(--itb-color-muted, #6f6f6f);
}

/* Ширина подписи фиксирована, иначе значения контактов встают лестницей. */
.itb-footer__contact-label {
	flex: 0 0 auto;
	min-width: 5.5rem;
	color: var(--itb-color-muted, #6f6f6f);
}

.itb-footer__contact a {
	color: var(--itb-color-text, #161616);
	text-decoration: none;
	transition: color var(--itb-motion-fast, .16s ease);
}

.itb-footer__contact a:hover,
.itb-footer__contact a:focus {
	color: var(--itb-color-accent, #dc3545);
	text-decoration: none;
}

/* --- соцсети -------------------------------------------------------- */

.itb-footer__social {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 4px;
}

/* Прежние иконки были 35–38px и белыми на тёмном фоне. В спокойном
   подвале это самый второстепенный элемент, поэтому глиф уменьшен до 20px
   и раскрашивается currentColor: ни кругов, ни плашек. */
.itb-footer__social-link {
	display: inline-flex;
	color: var(--itb-color-muted, #6f6f6f);
	transition: color var(--itb-motion-fast, .16s ease);
}

.itb-footer__social-link:hover,
.itb-footer__social-link:focus {
	color: var(--itb-color-accent, #dc3545);
}

.itb-footer__social-link svg {
	width: 20px;
	height: 20px;
	display: block;
}

/* --- навигация ------------------------------------------------------ */

.itb-footer__nav {
	display: grid;
	grid-column: 2 / -1;
	grid-template-columns: subgrid;
}

/* Группа — это <details>: на мобильном она складывается силами браузера,
   без библиотеки. На desktop раскрыта всегда, см. ниже. */
.itb-footer__group {
	min-width: 0;
}

.itb-footer__group-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	/* Маркер-треугольник браузера скрываем: на desktop группа не
	   складывается вовсе, на мобильном свой шеврон. */
	list-style: none;
	cursor: default;
}

.itb-footer__group-head::-webkit-details-marker {
	display: none;
}

/* Заголовок группы — канонический eyebrow (.74rem / 700 / uppercase /
   .08em / muted), тот же примитив, что у секций главной и SC SIEM. */
.itb-footer__group-title {
	/* h2 в itb-production.min.css задаёт font-family с !important, и без
	   такого же !important заголовок группы отрисовался бы другим
	   начертанием Franklin, чем eyebrow на главной. Править глобальный h2
	   в задаче про подвал нельзя — он на каждой странице сайта. */
	font-family: inherit !important;
	margin: 0;
}

.itb-footer__chev {
	display: none;
}

.itb-footer__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: var(--itb-eyebrow-gap, .75rem);
}

/* Ссылка навигации: кегль — ступень --itb-link-size-compact, потому что
   в подвале ссылка это самостоятельная строка списка, а не фрагмент
   абзаца. Наведение уводит в акцент: в плотном списке 14px смена тона
   читается быстрее смены светлоты, а конкурирующих акцентов в подвале нет. */
.itb-footer__link {
	display: inline-block;
	font-size: var(--itb-link-size-compact, .92rem);
	line-height: var(--itb-link-lh, 1.35);
	color: var(--itb-color-text-tertiary, #525252);
	text-decoration: none;
	transition: color var(--itb-motion-fast, .16s ease);
}

.itb-footer__link:hover,
.itb-footer__link:focus {
	color: var(--itb-color-accent, #dc3545);
	text-decoration: none;
}

/* Итоговая ссылка группы («Все услуги») — настоящий примитив .itb-link
   из общего слоя вместе со стрелкой и её сдвигом. Здесь только отступ. */
.itb-footer__more {
	margin-top: 14px;
}

/* --- нижняя полоса -------------------------------------------------- */

.itb-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	padding-top: 24px;
	border-top: 1px solid var(--itb-color-divider, #eceef1);
	font-size: .75rem;
	line-height: 1.5;
}

.itb-footer__copy {
	margin: 0 auto 0 0;
	color: var(--itb-color-muted, #6f6f6f);
}

.itb-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
}

.itb-footer__legal-link {
	font-size: .75rem;
	color: var(--itb-color-muted, #6f6f6f);
	text-decoration: none;
	transition: color var(--itb-motion-fast, .16s ease);
}

.itb-footer__legal-link:hover,
.itb-footer__legal-link:focus {
	color: var(--itb-color-accent, #dc3545);
	text-decoration: none;
}

/* --- узкий desktop и планшет ---------------------------------------- */

/* Ниже 1200px бренд уходит на свою строку. Колонки навигации при этом
   остаются в один ряд до 992px: вариант 2×2 давал подвал высотой около
   1100px, то есть «спокойный финал» превращался в отдельный экран.
   subgrid здесь уже не нужен — сетка перестаёт быть вложенной. */
@media (max-width: 1199.98px) {

	.itb-footer__top {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.itb-footer__brand {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 24px 48px;
		max-width: none;
	}

	.itb-footer__statement {
		max-width: 22rem;
	}

	.itb-footer__contacts {
		margin-top: 0;
	}

	.itb-footer__nav {
		grid-column: 1;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 32px 40px;
	}
}

@media (max-width: 991.98px) {

	.itb-footer__nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --- мобильные ------------------------------------------------------ */

@media (max-width: 767.98px) {

	.itb-footer {
		padding: 56px 0 28px;
	}

	.itb-footer__top {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
		padding-bottom: 32px;
	}

	.itb-footer__nav {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.itb-footer__brand {
		flex-direction: column;
		gap: 20px;
	}

	/* На узком экране логотип не должен занимать четверть первого экрана
	   подвала: эмблема и так самый крупный объект в этом блоке. */
	.itb-footer__logo img {
		width: 88px;
	}

	/* Группа становится строкой-аккордеоном. Атрибут open снимает
	   небольшой скрипт; без скрипта все группы просто раскрыты, и ни одна
	   ссылка не пропадает ни для пользователя, ни для краулера. */
	.itb-footer__group {
		border-bottom: 1px solid var(--itb-color-divider, #eceef1);
	}

	.itb-footer__group-head {
		cursor: pointer;
		padding: 14px 0;
	}

	.itb-footer__chev {
		display: block;
		flex: 0 0 auto;
		width: 8px;
		height: 8px;
		border-right: 1.5px solid var(--itb-color-muted, #6f6f6f);
		border-bottom: 1.5px solid var(--itb-color-muted, #6f6f6f);
		transform: rotate(45deg);
		transform-origin: center;
		transition: transform var(--itb-motion-control, .18s ease);
	}

	.itb-footer__group[open] .itb-footer__chev {
		transform: rotate(-135deg);
	}

	.itb-footer__list {
		margin-top: 0;
		padding-bottom: 16px;
		gap: 12px;
	}

	.itb-footer__brand {
		max-width: none;
	}
}

@media (max-width: 575.98px) {

	/* Ниже 576px общий слой поднимает .itb-link до .92rem — у подвала этот
	   кегль и так основной, поэтому здесь меняется только плотность. */
	.itb-footer__bottom {
		gap: 10px 16px;
	}

	.itb-footer__legal {
		gap: 10px 16px;
	}
}

/* Запасной путь для браузеров без subgrid: колонки навигации получают
   свою сетку из четырёх равных долей. Ширина бренд-колонки при этом
   задаётся долей 1.6fr, как и в основном варианте. */
@supports not (grid-template-columns: subgrid) {

	@media (min-width: 1200px) {

		.itb-footer__nav {
			grid-template-columns: repeat(4, minmax(0, 1fr));
			gap: 40px;
		}
	}
}

@media (prefers-reduced-motion: reduce) {

	.itb-footer__chev,
	.itb-footer__logo,
	.itb-footer__link,
	.itb-footer__legal-link,
	.itb-footer__social-link,
	.itb-footer__contact a {
		transition: none;
	}
}