/*
 * Блок «Подвал». Источник: макет Figma, низ кадра 0:2654 (узлы 0:2869-0:2878).
 * Значения сняты 17.08.2026.
 *
 * Из макета: подложка #1d1d1d на всю ширину экрана, шесть колонок разделов
 * и выходные данные справа - всё цветом #838383, кегль 10px, шаг строк 4px.
 * Логотип подвала отдельный (85x38, серый) - в шапке другой.
 *
 * 🛑 В макете подвала НЕТ трёх вещей, которые есть на сайте и которые
 * терять нельзя: иконки соцсетей (7 штук), нижний SEO-блок ссылок
 * (36 разделов - это база для этапа 4) и рекламный баннер. Они сохранены
 * и размещены по смыслу; куда их по дизайну - вопрос к Заказчику.
 *
 * Блок живёт на страницах СТАРОЙ вёрстки, поэтому - локальный сброс
 * и префикс на каждом правиле, как в blocks/header.css.
 */

.it-footer,
.it-footer *,
.it-footer *::before,
.it-footer *::after {
    box-sizing: border-box;
}

.it-footer {
    /* Тот же #1d1d1d, что и основной цвет текста - в макете он же служит
       фоном подвала. Отдельный токен не заводим, цвет один и тот же. */
    background: var(--c-text);
    color: var(--c-text-secondary);
    font-family: var(--font-main);
    font-size: var(--fs-10);
    line-height: 1.4;
    padding: var(--sp-32) 0 var(--sp-24);
    /* Снизу отбивки нет: подвал - последний блок страницы, и margin показывал
       бы под ним белую полосу фона (проверено 19.08.2026). Воздух внутри
       тёмной подложки даёт padding. */
    margin-top: var(--sp-35);
}

.it-footer .it-container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

/* Планшет: подвал сужается вместе с содержимым страницы (см.
   --container-tablet). Своя копия правила нужна по той же причине, что и в
   шапке: селектор с классом подвала специфичнее общего из layout.css. */
@media (min-width: 700px) and (max-width: 999px) {
    .it-footer .it-container {
        max-width: var(--container-tablet);
    }
}

.it-footer a {
    color: inherit;
    text-decoration: none;
}

.it-footer a:hover {
    color: var(--c-white);
}

.it-footer ul,
.it-footer li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.it-footer p {
    margin: 0 0 var(--sp-8);
}

.it-footer img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ---------- Логотип и соцсети ---------- */

.it-footer__logo {
    display: block;
    width: 85px;
    margin-bottom: var(--sp-12);
}

/* Соцсетей в макете подвала нет, но на сайте их семь - сохраняем.
   Стоят в нижней строке справа: margin-left: auto прижимает их к правому
   краю, у остальных пунктов строки auto быть не должно - иначе свободное
   место поделится между ними и иконки отъедут от края. */
.it-footer .it-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-12);
    margin: 0 0 0 auto;
    text-transform: none;
}

.it-footer__social img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

/* ---------- Колонки разделов ---------- */

.it-footer__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-20);
    margin-bottom: var(--sp-25);
}

.it-footer__group {
    margin-bottom: var(--sp-16);
}

.it-footer__group:last-child {
    margin-bottom: 0;
}

/* Заголовок раздела отличается от ссылок только регистром - в макете
   цвет и кегль у них одинаковые (проверено по get_design_context). */
.it-footer__group-title {
    display: block;
    margin-bottom: var(--sp-4);
    text-transform: uppercase;
}

.it-footer__group li {
    margin-bottom: var(--sp-4);
}

/* ---------- Выходные данные ---------- */

.it-footer__about {
    margin-top: var(--sp-24);
}

/* Блок выходных данных внутри колонки - класс старый, из прежней вёрстки. */
.it-footer .logo__text {
    margin-bottom: var(--sp-15);
}

/* ---------- Нижняя строка ---------- */

/* 🛑 Селектор с .it-footer намеренно: сама нижняя строка - это <ul>, и её
   отступы съедал сброс списков выше (`.it-footer ul, .it-footer li` - класс
   плюс тег специфичнее одного класса). Внешне выглядело как «правка не
   применилась»: рамка сверху рисовалась, а отступы стояли нулевые. */
.it-footer .it-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    /* Ссылки и иконки соцсетей разной высоты - равняем по центру строки */
    align-items: center;
    gap: var(--sp-12) var(--sp-20);
    padding: var(--sp-14) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-transform: uppercase;
}

/* ---------- SEO-блок ссылок ---------- */

/* В макете его нет, но он есть на сайте и нужен для этапа 4 - оставляем
   ниже всего и приглушаем, чтобы не спорил с основными разделами. */
/* Внутри SEO-блока лежит .linksbar из старой вёрстки - в main.css у него
   свои поля по 35px, снимаем: контейнер уже задал поля страницы. */
.it-footer .linksbar {
    padding: 0;
}

/* У самих ссылок в main.css поля по 5px - от них разъезжались разделители «|» */
.it-footer .linksbar a {
    padding: 0;
}

.it-footer__seo {
    margin-top: 0;
    padding-top: var(--sp-16);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--c-text-muted);
    font-size: var(--fs-9);
    line-height: 1.8;
}

.it-footer__banner {
    margin-top: var(--sp-20);
}

/*
 * ---------- Мобильная (макет 0:6, узлы 0:295-0:297, снято 20.08.2026) ----------
 *
 * В мобильном макете подвал состоит из двух вещей: логотип 85×38 и выходные
 * данные кеглем 12px цветом #838383. Поля подложки 20px, от логотипа до
 * текста 10px, группы выходных данных разделены пустой строкой.
 *
 * 🛑 Карта сайта, служебные ссылки, соцсети и SEO-блок остаются (решение
 * Дмитрия 20.08.2026 - того, чего в мобильном макете нет, не прячем). Они
 * уходят НИЖЕ выходных данных: в разметке карта сайта лежит рядом с
 * логотипом, и без этого блока текст выходных данных оказывался под всеми
 * 885px ссылок - то есть на телефоне его никто не видел.
 *
 * Порядок задан теми же средствами, что на главной: обёртка логотипа с
 * картой сайта получает `display: contents`, дальше `order`.
 */
@media (max-width: 999px) {
    .it-footer {
        padding: var(--sp-20) 0 var(--sp-24);
    }

    .it-footer__top {
        display: flex;
        flex-direction: column;
    }

    /* Логотип и карта сайта лежат в общей обёртке - разбираем её, чтобы
       развести их порядком. */
    .it-footer__top > div:first-child {
        display: contents;
    }

    .it-footer__logo {
        order: 1;
        /* до выходных данных в макете 10px */
        margin-bottom: var(--sp-10);
    }

    .it-footer__about {
        order: 2;
        margin-top: 0;
    }

    .it-footer__nav {
        order: 3;
        margin-bottom: 0;
    }

    /* Кегль выходных данных на мобильной свой - 12px против 10 на десктопе:
       это единственный текст подвала, который в макете читают, а не
       просматривают. */
    .it-footer__about {
        font-size: var(--fs-12);
        line-height: 1.45;
    }

    /* Группы («Учредитель», «Телефон редакции», регистрация) разделены в
       макете пустой строкой - её и даёт отбивка в одну строку текста. */
    .it-footer .logo__text p {
        margin-bottom: var(--sp-16);
    }

    .it-footer .logo__text p:last-child {
        margin-bottom: 0;
    }

    .it-footer .logo__text {
        margin-bottom: var(--sp-24);
    }
}

/* ---------- Десктоп ---------- */

@media (min-width: 1000px) {
    .it-footer {
        padding: var(--sp-40) 0 var(--sp-32);
    }

    .it-footer .it-container {
        padding: 0 var(--container-pad-desktop);
    }

    /* Слева логотип и разделы, справа выходные данные - как в макете
       (колонки от 80px, выходные данные шириной 256 у правого края). */
    .it-footer__top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 256px;
        gap: var(--sp-40);
    }

    .it-footer__nav {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: var(--sp-16);
    }

    .it-footer__about {
        margin-top: 0;
    }
}