/* ==========================================================================
   Экосистема 99Percentile – подвал

   Источник: Figma нода 32177:137 (инстанс на странице – 32702:4820).
   Значения сняты через get_design_context.

   ЗАМЕРЫ ИЗ МАКЕТА:
     подвал целиком   1840×471, две панели через gap 8
     левая панель     1376×471, фон #F2F2F8, радиус 32
                      padding: 40 сверху/снизу, 40 слева, 64 справа
     логотип          106×106
     слоган           Inter Regular 20 / 1.3 / −1px (−5%), ширина 315
     дисклеймер       Inter Regular 14 / 1.2 / −0.42px (−3%), ширина 440,
                      прозрачность 40 %
     колонки меню     прозрачность 80 %, между группами gap 32
     заголовок группы Inter BOLD 18 / 1.2 / −0.9px (−5%)
     ссылка           Inter Medium 18 / 1.2 / −0.9px, прозрачность 70 %,
                      между ссылками gap 4, от заголовка до ссылок gap 8
     нижняя строка    Inter Medium 18 / 1.2 / −0.9px, без прозрачности
     плитки соцсетей  правая панель, сетка 2×2, gap 8,
                      фон #2597FF, радиус 32, padding 12, иконка 48×48

   ДВЕ ПОПРАВКИ К РАЗБОРУ (обе найдены здесь, при вёрстке):

   1. Начертание Bold 700. В разборе было записано, что макет использует
      только 400/500/600. Неверно: заголовки колонок подвала набраны
      Inter Bold. Значит в шрифтовой пак нужен и 700 – см. fonts.css.

   2. Кегль 14px. Дисклеймер набран 14px с трекингом −3 %. Такого размера
      нет ни в одной переменной Figma – это частный случай, а не система.

   ЧТО НАМЕРЕННО НЕ ВОСПРОИЗВЕДЕНО:
   почти все текстовые ноды подвала в макете повёрнуты на 0.36°
   (rotate-[0.36deg] в выгрузке). Это случайный поворот группы, а не приём:
   подписи в шапке и на главной не повёрнуты. Воспроизводить не стал –
   наклонённый текст даёт мыльный рендер. Дизайнеру сообщить.
   ========================================================================== */

.site-footer {
  padding-block: var(--section-gap) var(--space-48);
}

.site-footer__grid {
  display: flex;
  align-items: stretch;
  gap: var(--space-8);
  min-height: var(--footer-height);
}

/* --- Левая панель --------------------------------------------------------- */

.site-footer__main {
  /* База 1376 из макета, но панель СЖИМАЕМАЯ (1 1, а не 0 0): с жёсткой
     шириной на 1441–1800 соцпанели оставалась щель в пару десятков
     пикселей, и плитки соцсетей сливались в вертикальные полоски
     (заказчик, 2026-08-07). Минимум соцпанели – см. .site-footer__social. */
  flex: 1 1 1376px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 40px 64px 40px 40px;
  background: var(--color-bg-soft);
  border-radius: var(--radius-2xl);
}

.site-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-32);
  flex: 1 1 auto;
  /* Выше 1860 ряд помещается целиком, и переносить нечего. nowrap здесь
     страховка от «падения» одной колонки вниз, если клиент переименует
     пункты и ряд перестанет помещаться: колонки сожмутся (у них min-width:
     0), а раскладка останется предсказуемой. Ниже 1860 включается
     управляемый перенос – блок в конце файла. */
  flex-wrap: nowrap;
  row-gap: var(--space-32);
}

/* --- Блок бренда ---------------------------------------------------------- */

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  /* Сжатие разрешено (0 1, не 0 0): фикс-ширина выталкивала колонки меню
     за панель на плитки соцсетей при сжатом подвале. */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.site-footer__logo img,
.site-footer__logo .custom-logo {
  width: 106px;
  height: 106px;
  object-fit: contain;
}

.site-footer__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
}

.site-footer__slogan {
  max-width: 315px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.site-footer__disclaimer {
  max-width: 440px;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-text);
  opacity: .4;
}

/* --- Контакты ------------------------------------------------------------- */
/*
   В макете контактов нет – телефон и почта добавлены по требованию
   заказчика 2026-08-07 (значения из бэкапа старого сайта). Стиль повторяет
   ссылки меню подвала: Medium 18, прозрачность 70 %.
*/
.site-footer__contacts {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.site-footer__contacts a {
  font-size: var(--fs-small);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-text);
  opacity: .7;
  transition: color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.site-footer__contacts a:hover {
  color: var(--color-link);
  opacity: 1;
}

/* --- Меню подвала --------------------------------------------------------- */
/*
   В макете пять групп разложены в три колонки: 2 + 2 + 1, и эти колонки –
   СОСЕДИ блока бренда внутри одного justify-between. Поэтому в разметке они
   выводятся отдельными .site-footer__col, а не одним списком: только так
   промежутки между брендом и колонками считаются как в макете.

   Первая попытка была на одном grid с column-gap 64px – колонки вставали
   на 581 / 845.9 / 1197.5 вместо распределения по ширине панели. Замена
   на реальные соседние блоки убрала подгонку числом.
*/
.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  opacity: .8;
}

.site-footer__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.site-footer__group-title {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;          /* Bold – так в макете */
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.site-footer__links a {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-text);
  opacity: .7;
  transition: opacity var(--dur-fast) var(--ease-out);
}

/* [ВЫВЕДЕН] hover ссылок подвала в макете не нарисован. */
.site-footer__links a:hover {
  opacity: 1;
}

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

.site-footer__legal {
  padding-top: var(--space-24);
}

.site-footer__legal a {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.site-footer__legal a:hover {
  color: var(--color-link);
}

/* --- Плитки соцсетей ------------------------------------------------------ */

.site-footer__social {
  /* База 456 = 1840 − 1376 − 8 (макет), минимум не даёт панели
     схлопнуться в полоску при сжатии подвала. */
  flex: 1 1 456px;
  min-width: 280px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: var(--space-8);
}

.site-footer__social-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12);

  background: var(--color-brand);
  border-radius: var(--radius-2xl);

  transition: background var(--dur-base) var(--ease-out);
}

/* [ВЫВЕДЕН] hover плиток в макете не нарисован. */
.site-footer__social-tile:hover {
  background: var(--color-brand-hover);
}

.site-footer__social-tile img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

/*
   Плиток может быть меньше четырёх: плитка без ссылки не выводится вовсе
   (footer.php). Сейчас реальных адресов два – Telegram и WhatsApp из
   бэкапа старого сайта. При ровно двух плитках они ложатся друг над
   другом на всю ширину панели – две широкие кнопки. Вариант «две колонки
   на всю высоту» давал узкие вертикальные полоски при сжатом подвале.
*/
.site-footer__social:has(> :first-child:nth-last-child(2)) {
  grid-template-columns: 1fr;
}

/* ==========================================================================
   АДАПТИВ – заглушка, а не решение

   Мобильной версии подвала в макете НЕТ. Правила ниже не дают панелям
   разъехаться, но раскладка 2+2+1 на узком экране дизайнером не решена.
   ========================================================================== */

/* Порог управляемого переноса: 1860, а не 1440 (правка 2026-08-22).

   Замер: ряду нужно 1216px (бренд 440 + три колонки 213/304/163 + три
   зазора по 32), а контент левой панели даёт столько только от ~1860px
   ширины окна. На 1500–1800 места не хватало, и flex-wrap ронял ВНИЗ одну
   последнюю колонку – «Компания» повисала под дисклеймером слева, ровно
   как на скриншотах заказчика. Ниже 1860 работает та же управляемая
   раскладка, что раньше включалась с 1440: бренд занимает всю первую
   строку, три колонки меню встают ровным рядом под ним. */
@media (max-width: 1860px) {
  /* Колонки обязаны уметь сжиматься уже здесь, а не с 900px.
     Раньше правило стояло ниже, и на 1024–1180 четыре блока
     (бренд 440 + три колонки ~640) не влезали в контент панели ~840
     и давали горизонтальную прокрутку на ВСЕХ страницах сайта.
     Поймано при проверке страницы «О нас».

     Перенос управляемый (2026-08-20, замечание заказчика): раньше при
     нехватке места вниз падала только последняя колонка («Компания»)
     и повисала под дисклеймером. Теперь бренд занимает всю первую
     строку, а ТРИ колонки меню встают ровным рядом ниже. */
  .site-footer__top { flex-wrap: wrap; row-gap: var(--space-32); }

  .site-footer__brand {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
  }

  .site-footer__col {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
  }

  .site-footer__slogan,
  .site-footer__disclaimer { max-width: 100%; }
}

@media (max-width: 1180px) {
  .site-footer__grid { flex-direction: column; }

  .site-footer__social {
    /* В колонке flex-базис 456px стал бы ВЫСОТОЙ – плитки вытягивались
       на весь базис. Здесь высоту задаёт min-height. */
    flex: 0 0 auto;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    min-height: 160px;
  }

  /* В горизонтальной ленте при двух плитках – две колонки рядом. */
  .site-footer__social:has(> :first-child:nth-last-child(2)) {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .site-footer__top {
    flex-wrap: wrap;
    row-gap: var(--space-32);
  }

  .site-footer__main { padding: var(--space-24); }

  /* Блок бренда в макете шириной 440 (по дисклеймеру) и стоит flex:0 0 auto.
     На узком экране это давало горизонтальный скролл: блок не сжимался
     ниже 440 при доступных ~342. Разрешаем сжатие; колонки меню – в
     столбик по одной (ряд из трёх здесь уже не читается). */
  .site-footer__brand,
  .site-footer__col {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
  }

  .site-footer__slogan,
  .site-footer__disclaimer { max-width: 100%; }
}