/* ============================================================
   Футер сайта — ЕДИНСТВЕННЫЙ источник его стилей.

   Футер рисуют три стека: Flask-шаблоны (base.html), SPA портала (Footer.jsx) и SSR-страницы
   portal-api (place_ssr._FOOTER: места, хабы, новости, блог, тарифы, поддержка). Раньше у каждого
   была своя копия CSS, и они разошлись: на SSR-страницах футер шёл системным шрифтом, со своими
   отступами, рамкой у дисклеймера и значком ⧗ вместо логотипа; в SPA слоган переносился из-за
   старого max-width. Теперь все три подключают этот файл:
     · Flask — в составе _bundle.css (main.py, build_static_bundles, после v2.css);
     · SPA и SSR — <link href="/static/css/footer.css?v=<sha256[:8] файла>"> (тест сверяет хэш,
       иначе правка застрянет в 7-дневном кэше /static/ без ?v=).

   Файл САМОДОСТАТОЧЕН: всё, что футер раньше наследовал от body.v2, .v2-container, .v2-brand
   и .logo-hg из v2.css/main.css, задано здесь и ограничено .v2-footer — чужой CSS страницы
   (SSR-страницы, SPA) не должен ни менять футер, ни меняться сам. Шрифты — _fonts-google.css (Inter) и _fonts-local.css (Cabinet Grotesk).
   Размеры в px, а не в rem: корневой шрифт у стеков разный (Flask 108%, SPA 100%), и 2.2rem
   давали разный футер. 38.016px = 2.2rem при корне Flask — эталон главной.
   ============================================================ */

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

.v2-footer {
  display: block;
  background: #1e212f;
  color: #cbd5e1;
  font-family: 'Inter', -apple-system, system-ui, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.55;
  letter-spacing: normal;
  text-align: start;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Футер заходит под предыдущую секцию на радиус скругления, чтобы скруглённые углы
     открывали фон этой секции, а не белый body; padding-top компенсирует заход. */
  padding: calc(60px + 38.016px) 0 24px;
  margin: -38.016px 0 0;
  border: 0;
  border-top-left-radius: 38.016px;
  border-top-right-radius: 38.016px;
  overflow: hidden;
}

.v2-footer .v2-container { max-width: 1300px; margin: 0 auto; padding: 0 24px; }

.v2-footer a { color: #cbd5e1; text-decoration: none; }
.v2-footer p { margin: 0; }

/* ── Бренд ─────────────────────────────────────────────── */
/* Цвет бренда — с селектором через .v2-footer__brand (специфичность 0,3,0). В v2.css есть
   body.v2-on-hero/.v2-on-footer .v2-brand{color:var(--v2-ink)} (0,2,1) для плавающего навбара,
   и он задевал бренд в самом футере: на мобильном, стоило долистать до футера, «Smart Longevity»
   становился тёмным на тёмном фоне. */
.v2-footer .v2-footer__brand .v2-brand,
.v2-footer .v2-footer__brand .v2-brand__mark,
.v2-footer .v2-footer__brand .v2-brand__text { color: #fff; }
.v2-footer .v2-brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: #fff; font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
}
.v2-footer .v2-brand__mark {
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  width: auto; height: auto;
  background: transparent;
  border-radius: 0;
}
.v2-footer .v2-brand__text {
  font-family: 'Cabinet Grotesk Variable', 'Cabinet Grotesk', 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 16px;
  letter-spacing: -.005em;
  color: #fff;
  white-space: nowrap;
}
.v2-footer .v2-brand__text b { font-weight: 700; }

/* Логотип «песочные часы» с анимацией переворота — та же, что у навбара (main.css). */
/* Три класса в селекторе: у SPA в nav.css есть .v2-brand__mark .logo-hg{height:26px} той же
   специфичности, и исход решал бы порядок подключения файлов. */
.v2-footer .v2-brand__mark .logo-hg {
  display: inline-block;
  height: 24px;
  width: auto;
  vertical-align: -0.12em;
  transform-box: fill-box;
  transform-origin: center;
  animation: logo-hg-rot 10s linear infinite;
}
.v2-footer .hg-sand-top { transform-box: fill-box; transform-origin: 50% 100%; animation: logo-hg-top 10s linear infinite; }
.v2-footer .hg-sand-bot { transform-box: fill-box; transform-origin: 50% 0%; animation: logo-hg-bot 10s linear infinite; }
.v2-footer .hg-stream { animation: logo-hg-strm 10s linear infinite; }

/* ── Раскладка ─────────────────────────────────────────── */
.v2-footer .v2-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 48px;
  align-items: flex-start;
}
.v2-footer .v2-footer__tagline { margin: 12px 0 6px; color: #94a3b8; font-size: 14px; }
.v2-footer .v2-footer__disclaimer { margin: 0 0 12px; color: #64748b; font-size: 12.5px; max-width: 360px; }
.v2-footer .v2-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.v2-footer .v2-footer__title {
  font-family: 'Cabinet Grotesk Variable', 'Cabinet Grotesk', 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  color: #fff; text-transform: uppercase; margin-bottom: 14px;
}
.v2-footer .v2-footer__cols ul { list-style: none; padding: 0; margin: 0; }
.v2-footer .v2-footer__cols li { margin-bottom: 6px; }
.v2-footer .v2-footer__cols a { color: #cbd5e1; font-size: 13.5px; }
.v2-footer .v2-footer__cols a:hover { color: #fff; }
.v2-footer .v2-footer__bottom {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; justify-content: space-between;
  font-size: 12px; color: #64748b;
}

/* ── Адаптив ───────────────────────────────────────────── */
@media (max-width: 880px) {
  .v2-footer .v2-footer__inner { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .v2-footer .v2-footer__brand { display: flex; flex-direction: column; align-items: center; }
  .v2-footer .v2-footer__brand .v2-brand { justify-content: center; }
  .v2-footer .v2-footer__tagline,
  .v2-footer .v2-footer__disclaimer { max-width: none; margin-left: auto; margin-right: auto; }
  .v2-footer .v2-footer__cols { grid-template-columns: repeat(2, 1fr); text-align: center; }
  .v2-footer .v2-footer__cols ul { padding: 0; }
  .v2-footer .v2-footer__bottom { flex-direction: column; gap: 6px; justify-content: center; text-align: center; }
}
/* Боковые поля контейнера на узких экранах — как у .v2-container в v2.css. Сокращённая запись
   padding заодно обнуляет padding-top у .v2-footer__bottom: на главной именно так, поэтому
   воспроизводим, а не «чиним» — футер обязан совпадать с главной. */
@media (max-width: 768px) {
  .v2-footer .v2-container { padding: 0 20px; }
}
@media (max-width: 480px) {
  .v2-footer .v2-container { padding: 0 16px; }
  /* Одна колонка секций, но пункты внутри секции в 2 столбика (ниже по высоте) */
  .v2-footer { padding: calc(44px + 38.016px) 0 20px; margin-top: -38.016px; }
  .v2-footer .v2-footer__cols { grid-template-columns: 1fr; gap: 18px; }
  .v2-footer .v2-footer__cols ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 24px;
    max-width: 320px;
    margin: 0 auto;
    text-align: left;
  }
}

/* Кадры анимации логотипа — копия из main.css (там они нужны навбару статей). SPA и SSR-страницы
   main.css не грузят, поэтому футер несёт их с собой; в _bundle.css одинаковые @keyframes
   с тем же именем просто перекрывают друг друга. */
@keyframes logo-hg-rot {
  0%,  40%  { transform: rotate(0deg);   animation-timing-function: cubic-bezier(.4,0,.2,1); }
  50%, 90%  { transform: rotate(180deg); animation-timing-function: cubic-bezier(.4,0,.2,1); }
  100%      { transform: rotate(360deg); }
}
@keyframes logo-hg-top {
  0%   { transform: scaleY(0); animation-timing-function: ease-in; }
  38%  { transform: scaleY(1); animation-timing-function: linear; }
  50%  { transform: scaleY(1); animation-timing-function: ease-in; }
  88%  { transform: scaleY(0); animation-timing-function: linear; }
  100% { transform: scaleY(0); }
}
@keyframes logo-hg-bot {
  0%   { transform: scaleY(1); animation-timing-function: ease-in; }
  38%  { transform: scaleY(0); animation-timing-function: linear; }
  50%  { transform: scaleY(0); animation-timing-function: ease-in; }
  88%  { transform: scaleY(1); animation-timing-function: linear; }
  100% { transform: scaleY(1); }
}
@keyframes logo-hg-strm {
  0%,  4%   { opacity: 0; }
  7%,  36%  { opacity: 0.9; }
  40%, 54%  { opacity: 0; }
  57%, 86%  { opacity: 0.9; }
  90%, 100% { opacity: 0; }
}