/* ============================================================
   Сквозной футер (components/footer.php). Подключается из sidebar.php,
   поэтому действует на всех страницах сайта.
   Нейтральный: без своей заливки, на фоне страницы — чтобы не спорить
   с яркой CTA-секцией над ним.
   ============================================================ */

.ft {
    padding: 40px 0 24px;
    font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
}

/* верхняя строка: логотип слева, соцсети справа */
.ft-top {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding-bottom: 24px; border-bottom: 0.9px solid rgba(6, 42, 44, 0.24);
}
/* лого + вертикальный разделитель + мелкая приписка */
.ft-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ft-logo { display: inline-flex; flex: none; }
.ft-logo img { height: 31px; width: auto; display: block; }

/* тот же цвет и толщина, что у линии под шапкой футера */
.ft-sep { flex: none; width: 0.9px; height: 22px; background: rgba(6, 42, 44, 0.24); }
.ft-tagline { margin: 0; font-size: 12px; line-height: 1.35; color: #6E827A; max-width: 34ch; }

/* Док соцсетей: общая прямоугольная плашка с контуром, иконки без своих
   подложек. При наведении на ряд он чуть раздвигается (анимация gap),
   активная иконка получает квадратную подложку со скруглением.
   Чистый CSS — JS не нужен, в отличие от magicui/dock на framer-motion. */
.ft-social {
    display: inline-flex; align-items: center;
    gap: 8px; padding: 6px 6px;
    /* 0.9px: на Retina даёт линию тоньше пикселя, при этом углы не рвутся,
       как на 0.7px. На обычных экранах округляется до 1px. */
    border: 0.9px solid rgba(6, 42, 44, 0.24);
    border-radius: 16px;
    transition: padding 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.3s ease;
}
/* плашка раздаётся вширь, чтобы вытолкнутым крайним иконкам было куда уйти:
   максимальный толчок 8px = ровно прирост паддинга, за границу никто не вылезет.
   Из-за анимации padding элемент помечен data-no-sq — см. footer.php */
.ft-social:hover { padding: 6px 14px; border-color: rgba(6, 42, 44, 0.36); }

.ft-social-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 12px;
    color: #3D5853; background: transparent;
    transition: background 0.22s ease, color 0.22s ease,
                transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.ft-social-link:hover { background: rgba(6, 42, 44, 0.09); color: #052A2C; }

/* Наведённая иконка расталкивает соседей: волна затухает с расстоянием
   8 → 4 → 2px. Соседи справа — цепочкой `+`, слева — через :has(),
   поскольку селектора «предыдущий брат» в CSS нет. */
.ft-social-link:hover + .ft-social-link { transform: translateX(8px); }
.ft-social-link:hover + .ft-social-link + .ft-social-link { transform: translateX(4px); }
.ft-social-link:hover + .ft-social-link + .ft-social-link + .ft-social-link { transform: translateX(2px); }
.ft-social-link:hover + .ft-social-link + .ft-social-link + .ft-social-link + .ft-social-link { transform: translateX(1px); }
.ft-social-link:has(+ .ft-social-link:hover) { transform: translateX(-8px); }
.ft-social-link:has(+ .ft-social-link + .ft-social-link:hover) { transform: translateX(-4px); }
.ft-social-link:has(+ .ft-social-link + .ft-social-link + .ft-social-link:hover) { transform: translateX(-2px); }
.ft-social-link:has(+ .ft-social-link + .ft-social-link + .ft-social-link + .ft-social-link:hover) { transform: translateX(-1px); }

@media (prefers-reduced-motion: reduce) {
    .ft-social, .ft-social-link { transition: none; }
    .ft-social:hover { padding: 6px; }
    .ft-social-link { transform: none !important; }
}

/* нижняя строка: копирайт, правовые ссылки, авторство */
.ft-bottom {
    display: flex; align-items: center; justify-content: space-between; gap: 20px 32px;
    flex-wrap: wrap; padding-top: 20px;
}
.ft-copy, .ft-by { font-size: 13px; color: #6E827A; margin: 0; }
.ft-by a { color: #3D5853; font-weight: 600; text-decoration: none; }
.ft-by a:hover { text-decoration: underline; }

.ft-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ft-legal a { font-size: 13px; color: #3D5853; text-decoration: none; }
.ft-legal a:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .ft { padding: 32px 0 20px; }
    .ft-top { flex-direction: column; align-items: flex-start; gap: 20px; }
    /* приписка остаётся справа от лого и на мобилке — только зазоры уже */
    .ft-brand { gap: 10px; }
    /* на мобилке лого крупнее: рядом с ним нет ничего, кроме мелкой приписки */
    .ft-logo img { height: 36px; }
    .ft-tagline { max-width: none; }
    .ft-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
}