/* ============================================================================
   Подвал кабинета (views/layouts/footer.php).

   ПОЧЕМУ ВСЁ ЗДЕСЬ, А НЕ В РАЗМЕТКЕ. Раньше цвет и отступы стояли инлайном:
   `style="color: white"` на самом <footer> и класс .text-white примерно на
   пятнадцати строках. При любой правке половина копий отставала — это и есть
   рассинхрон, который видно глазами как «разъехавшийся дизайн».

   ПРО !important. В site.css живут `* { color:#0D1017 }`, `a { color:#0D1017
   !important }` и `a:hover { color:#0077FF !important }`. Без !important любая
   ссылка в подвале станет почти чёрной на почти чёрном — то есть исчезнет.
   Ставим ТОЛЬКО на color ссылок и только там, где перебиваем эту глобальную мину.

   ПРО ЦВЕТ ТЕКСТА. Чисто-белый мелкий текст на #1B1E25 даёт контраст ~15:1 —
   он «звенит» и утомляет на длинных списках. Белый оставлен заголовкам колонок
   и телефону (там он работает как акцент), ссылки — приглушённые #A9B2C0
   (≈7:1, с запасом к норме 4.5:1), подписи — #7E8798.

   ПРО ШРИФТ. Никакой новой гарнитуры: сайт живёт на Inter, подвал тоже.
   Иерархия строится размером, насыщенностью и трекингом, а не вторым шрифтом —
   лишняя гарнитура в подвале читается как чужая вставка.
   ========================================================================== */

.fo {
    /* Токены заперты в .fo — наружу не текут, внутрь глобальные не лезут. */
    --fo-bg:      #1B1E25;
    --fo-strong:  #FFFFFF;
    --fo-text:    #A9B2C0;
    --fo-muted:   #7E8798;
    --fo-line:    rgba(255, 255, 255, .09);
    --fo-accent:  #ED1C24;   /* фирменный красный ЭПОТОС */

    background: var(--fo-bg);
    color: var(--fo-text);
    padding: 56px 0 0;
}

/* --- Сетка ---------------------------------------------------------------
   Бренд-колонка шире прочих: в ней телефон крупным кеглем и адрес — самый
   длинный текст подвала. Равные колонки рвали бы номер на две строки. */
.fo-grid {
    display: grid;
    grid-template-columns: 1.5fr 1.15fr 1fr 1.35fr;
    gap: 40px 36px;
    padding-bottom: 44px;
}

/* --- Заголовки колонок ---------------------------------------------------
   12px + капитель + разрядка: заголовок обязан читаться как ярлык раздела, а
   не как первая строка списка. Разрядка нужна именно из-за капители — без неё
   прописные слипаются. */
.fo-h {
    margin: 0 0 18px;
    font-size: 12px !important;   /* перебивает `* { font-size:14px }` из site.css */
    font-weight: 700;
    line-height: 16px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fo-strong);
}

/* --- Ссылки --------------------------------------------------------------
   Наведение = белый + подчёркивание, а не смена цвета на фирменный красный:
   красный на тёмном даёт ~4.3:1 и на 14px уже на грани читаемости, а
   подчёркивание работает и для тех, кто цвет не различает. */
.fo-link {
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    color: var(--fo-text) !important;
    text-decoration: none !important;
    transition: color .15s ease;
}
.fo-link:hover {
    color: var(--fo-strong) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}
.fo-link:focus-visible {
    outline: 2px solid var(--fo-strong);
    outline-offset: 3px;
    border-radius: 4px;
}

.fo-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fo-list li { margin-bottom: 11px; }
.fo-list li:last-child { margin-bottom: 0; }

.fo-link--all {
    color: var(--fo-strong) !important;
    font-weight: 500;
}
.fo-link--all .bi {
    width: auto;
    height: auto;
    font-size: 13px;
    vertical-align: -1px;
    transition: transform .15s ease;
}
.fo-link--all:hover .bi { transform: translateX(3px); }

/* --- Раздел «скоро» ------------------------------------------------------
   Отделён от рабочих ссылок линией и приглушён: обещание не должно выглядеть
   так же, как работающий раздел. Метка словом, а не только цветом, — цвет
   один читает как «важное», другой не видит вовсе. */
.fo-list--soon {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--fo-line);
}
.fo-link--soon { color: var(--fo-muted) !important; }
.fo-soon {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(237, 28, 36, .14);
    color: #FF8B8F;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 15px;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: 1px;
}

/* --- Бренд-колонка ------------------------------------------------------- */
.fo-logo {
    display: block;
    width: 148px;
    height: auto;
    margin-bottom: 16px;
}
.fo-tagline {
    margin: 0 0 26px;
    font-size: 13px;
    line-height: 19px;
    color: var(--fo-muted);
}

/* Телефон — самый крупный текст подвала: это главное действие колонки.
   tabular-nums не даёт цифрам «плясать» по ширине. */
.fo-phone { margin-bottom: 18px; }
.fo-phone__num {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 20px !important;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    color: var(--fo-strong) !important;
    text-decoration: none !important;
    white-space: nowrap;
}
.fo-phone__num:hover {
    color: var(--fo-strong) !important;
    text-decoration: underline !important;
    text-underline-offset: 4px;
}
.fo-phone__num .bi {
    width: auto;
    height: auto;
    font-size: 14px;
    color: var(--fo-accent);   /* единственное место, где красный работает точкой входа */
}
.fo-phone__label {
    margin-top: 4px;
    padding-left: 23px;        /* по левому краю цифр, а не иконки */
    font-size: 12.5px;
    line-height: 17px;
    color: var(--fo-muted);
}

/* Часы стоят под номером и в его колонке — потому что отвечают на вопрос
   «дозвонюсь ли я сейчас», а не живут сами по себе. */
.fo-hours {
    display: flex;
    gap: 9px;
    font-size: 13px;
    line-height: 19px;
    color: var(--fo-muted);
}
.fo-hours .bi {
    width: auto;
    height: auto;
    font-size: 13px;
    color: var(--fo-muted);
    flex: 0 0 auto;
    margin-top: 2px;
}
/* Цвет продублирован НА обоих вложенных элементах, а не задан один раз на
   .fo-hours: `* { color:#0D1017 }` из site.css красит каждый элемент напрямую,
   поэтому наследование до <div> внутри не доходит и часы становятся чёрными на
   чёрном. Это не избыточность — это обход известной мины (см. site.css:5). */
.fo-hours__body { color: var(--fo-muted); }
.fo-hours__line {
    white-space: pre;
    font-variant-numeric: tabular-nums;
    color: var(--fo-muted);
}

/* --- Контакты ------------------------------------------------------------ */
.fo-addr {
    display: flex;
    gap: 9px;
    margin-bottom: 22px;
}
.fo-addr .bi {
    width: auto;
    height: auto;
    font-size: 14px;
    color: var(--fo-muted);
    flex: 0 0 auto;
    margin-top: 2px;
}
.fo-addr__body {
    margin: 0;
    font-style: normal;        /* <address> курсивом по умолчанию — здесь это шум */
    font-size: 13.5px;
    line-height: 20px;
    color: var(--fo-text);
}

.fo-mails { list-style: none; margin: 0; padding: 0; }
.fo-mail { margin-bottom: 14px; }
.fo-mail:last-child { margin-bottom: 0; }
.fo-mail__purpose {
    display: block;
    font-size: 12px;
    line-height: 16px;
    color: var(--fo-muted);
    margin-bottom: 2px;
}
.fo-mail__addr { font-size: 13.5px; }

/* --- Нижняя полоса ------------------------------------------------------- */
.fo-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0 22px;
    border-top: 1px solid var(--fo-line);
}
.fo-copy {
    font-size: 12.5px;
    line-height: 18px;
    color: var(--fo-muted);
}
.fo-bottom__link {
    font-size: 12.5px;
    color: var(--fo-muted) !important;
}
.fo-bottom__link .bi {
    width: auto;
    height: auto;
    font-size: 12px;
    vertical-align: -1px;
    transition: transform .15s ease;
}
.fo-bottom__link:hover .bi { transform: translateX(3px); }

/* --- Адаптив -------------------------------------------------------------
   Без JS и без аккордеона: на узком экране подвал листают, а не изучают.
   Бренд-колонка на планшете занимает всю ширину — иначе телефон переносится. */
@media (max-width: 991px) {
    .fo { padding-top: 44px; }
    .fo-grid {
        grid-template-columns: 1fr 1fr;
        gap: 34px 28px;
    }
    .fo-col--brand { grid-column: 1 / -1; }
}

@media (max-width: 575px) {
    .fo { padding-top: 36px; }
    .fo-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-bottom: 32px;
    }
    .fo-h { margin-bottom: 14px; }
    .fo-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}