/*
 * footer-services.css — лента услуг в подвале (`Container` 163:3175).
 *
 * Вынесено из site.css вместе с `js/footer-services.js`: тот же блок живым
 * предпросмотром показывает админка, а site.css она не подключает — там своя
 * палитра, и притащить её целиком значило бы перекрасить всю страницу.
 *
 * Цвет берётся из токена страницы с запасным значением: на сайте выигрывает
 * его `--color-muted`, в админке работает запасное #9d9d9d — то самое
 * `text/secondary` из макета.
 */

/* УСЛУГИ В ПОДВАЛЕ (`Container` 163:3175). Одна центрированная лента: имя
   услуги, круглая точка 9px, имя, точка... На переносе строки точка
   ПРОПАДАЕТ — в макете между «Automotive & Action» и «Event Coverage» её
   нет, хотя между соседями в строке есть. Разбиение на строки считает
   браузер, поэтому какие точки лишние, известно только ПОСЛЕ укладки; это
   делает theme.js, сравнивая середины соседей.

   Кегль 32 — это `Secondary/Site_3 Mobile MainText`, и на ПК тоже: в макете
   лента набрана крупно, а копирайт под ней остаётся шестнадцатым. */
.footer-top {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 calc(var(--g-gutter) + 40px);
}
/* РЯДЫ РАСКЛАДЫВАЕТ theme.js, А НЕ ПЕРЕНОС СТРОК. Почему не отдать браузеру:
   точка между услугами должна ПРОПАДАТЬ на переносе, а стоит её спрятать —
   исчезает и сама возможность переноса в этом месте (атомарная строчная
   коробка и была единственной точкой разрыва: пробелов между услугами нет).
   Лента схлопывалась в одну строку. `text-wrap: balance` эту петлю не
   развязывает, он лишь выбирает, где рвать.

   В макете (164:3332) это и нарисовано двумя отдельными рядами в колонке с
   зазором 6 — так и делаем. */
.footer-services {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 32px 0 42px;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 32px;
  line-height: 32px;
  color: var(--color-muted, #9d9d9d);
}
.footer-services-row {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}
/* Прячем точку целиком, а не прозрачностью: иначе на краю строки остаётся
   её место и зазоры вокруг. */
.footer-services [hidden] { display: none; }
/* Услуга не разрывается посередине: ряды считаются по её полной ширине. */
.footer-service { white-space: nowrap; }
/* Если одна услуга шире строки, переносить внутри неё всё-таки придётся. */
.footer-services.is-tight .footer-service { white-space: normal; }
.footer-dot {
  flex: 0 0 auto;
  /* 16 с каждой стороны — зазор из макета; между двумя услугами выходит
     16 + 9 + 16. */
  margin: 0 16px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}
/* Линия идёт по краю ленты, своих полей у неё нет. */
.footer-divider { margin: 0; }

@media (max-width: 1079px) {
  /* Те же 52 = поле страницы 12 плюс собственное поле подвала 40. На
     телефоне лента и копирайт одного кегля — в макете оба 32. */
  .footer-top {
    max-width: none;
    padding: 0 calc(52 * var(--s));
  }
  .footer-services {
    gap: calc(6 * var(--s));
    padding: calc(32 * var(--s)) 0 calc(42 * var(--s));
    font-size: calc(32 * var(--s));
    line-height: calc(32 * var(--s));
  }
  .footer-dot {
    margin: 0 calc(16 * var(--s));
    width: calc(9 * var(--s));
    height: calc(9 * var(--s));
  }
}