/* ==========================================================================
   ARM-GARANT — подвал

   Макет: инстанс 1:830 (1840×707), в Figma по ошибке назван `header`.
   Панель: padding 64, радиус 32, градиент bg_blue_gradient,
   вертикальный зазор между контентом и нижней строкой — 82.
   Колонки: Компания 482 · Навигация 282 · Продукция 278 · Контакты 395.
   ========================================================================== */

/* До подвала в макете 190 (--section-gap), из которых 95 даёт секция
   выше — значит собственный отступ подвала тоже 95, а не 64. */
.site-footer {
  padding-block: calc(var(--section-gap) / 2) var(--space-32);
}

.site-footer__panel {
  display: flex;
  flex-direction: column;
  gap: 82px;
  padding: var(--space-64);
  border-radius: var(--radius-xl);
  background: var(--grad-blue-cta);
  color: var(--color-text-invert);
}

/* Ряд колонок разложен space-between. В макете у фрейма `Content` стоит
   жёсткая ширина 1723 при внутренней ширине панели 1712 (1840 − 2×64),
   а у нижней строки — 1708: инстанс не пересобрали после того, как панель
   ужали. Оба числа противоречат друг другу и падингу 64, поэтому берём
   симметричные 64 с обеих сторон, как в остальных панелях макета
   (например `Right card` 1:801: 910 − 2×64 = 782). Из-за этого зазор
   между колонками 91.7 вместо 95.3, а колонка «Контакты» стоит левее
   макетной на 11 px — расхождение вынесено в отчёт. */
.site-footer__content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-48);
}

/* --- Колонка компании: 482 px -------------------------------------------- */

.footer-company {
  display: flex;
  flex-direction: column;
  gap: 52px;
  width: 482px;
  flex-shrink: 0;
}

/* Внутри группы «логотип + описание» зазор 48, а между этой группой
   и блоком контактов — 52. Поэтому группа своя. */
.footer-company__desc {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.footer-company__logo {
  display: block;
  width: 100%;
}

.footer-company__logo-svg {
  display: block;
  width: 100%;
  height: auto;
}

.footer-company__about {
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
}

.footer-company__contact {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Как и в шапке: фрейм `Social Media Icons` (нода I1:830;1:4092) жёстко
   135 px при кружках 128 (60 + 8 + 60), прижатых влево. Из-за этих 7 px
   телефон в макете стоит на 149, а не на 142. */
.footer-company__contact .social-icons { width: 135px; }

.header-phone--footer .header-phone__number { color: var(--color-text-invert); }
.header-phone--footer { gap: var(--space-8); }

/* --- Колонки ссылок ------------------------------------------------------ */

.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  flex-shrink: 0;
}

.footer-col--nav      { width: 282px; }
.footer-col--products { width: 278px; }
.footer-col--contacts { width: 395px; }

.footer-col__title {
  font-size: var(--fs-32);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-32);
}

.footer-col__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  /* В макете список ссылок приглушён до 70 % (opacity группы `Navigation
     Links` / `Primary Contacts`, ноды I1:830;1:4100 и 1:4119). Содержимое
     группы — только текст, поэтому 70 % прозрачности группы и белый
     с альфой 0.7 дают ровно один и тот же пиксель, но альфу можно снять
     на hover, а групповую прозрачность — нет. */
  color: rgb(255 255 255 / 70%);
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-24);
}

.footer-col__list a {
  transition: color var(--dur-fast) var(--ease-out);
}

/* Hover в макете не нарисован. Возвращаем полный белый — раньше ссылка
   на наведении гасла до 49 % и читалась как выключенная. */
.footer-col__list a:hover { color: var(--color-text-invert); }

/* --- Контакты: адрес и плашка карты -------------------------------------- */

.footer-col--contacts .footer-col__list { gap: var(--space-16); }

/* Группа `Secondary Contact Info` (нода I1:830;1:4122): адрес и карта
   стоят на 24 друг от друга, а не на общих 32 колонки. */
.footer-col__secondary {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.footer-address {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-4);
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-24);
}

/* Адрес стал ссылкой на маршрут 2ГИС (2026-08-18): наследует цвет, лёгкий
   ховер как у остальных ссылок подвала. */
a.footer-address { color: inherit; text-decoration: none; transition: opacity var(--dur-card, 0.3s) ease; }
a.footer-address:hover { opacity: 0.75; }

/* В подвале пин белый (нода I1:830;1:4124), в шапке — синий.
   Цвет задаём явно: в SVG стоит currentColor. */
.footer-address__pin {
  display: flex;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-text-invert);
}

.footer-address__pin svg { width: 24px; height: 24px; }

/* Плашка карты: 395×202, #999, радиус 32, надпись «карта» по центру.
   Это заглушка дизайнера — карту сюда подключат отдельно. */
.footer-map {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 202px;
  padding: var(--space-32);
  border-radius: var(--radius-xl);
  background: #999999;
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-24);
}

/* Карта занимает ту же коробку, что и плашка, но своего отступа ей не надо —
   иначе тайлы вжимаются в рамку. */
.ag-map.footer-map { padding: 0; }
.ag-map.footer-map .ag-map__fallback { color: var(--color-text-invert); }

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

.site-footer__bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-24);
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-24);
}

.site-footer__privacy {
  transition: opacity var(--dur-fast) var(--ease-out);
}

a.site-footer__privacy:hover { opacity: .7; }

/* --- Ниже 1920 px ---------------------------------------------------------
   Мобильного подвала в макете нет. Колонки переносятся, ширины снимаются —
   решение вёрстки, согласовать с дизайнером. */

@media (max-width: 1600px) {
  .site-footer__content { flex-wrap: wrap; gap: var(--space-48); }
  .footer-company,
  .footer-col--nav,
  .footer-col--products,
  .footer-col--contacts { width: auto; flex: 1 1 260px; }
  .footer-company { flex-basis: 100%; }
}

@media (max-width: 768px) {
  .site-footer__panel { padding: var(--space-32); gap: var(--space-48); }
  .site-footer__bottom { flex-direction: column; gap: var(--space-16); }

  /* Строка «иконки + телефон» в 390 px не помещается: 135 + 14 + номер
     без переносов дают 325 при 231 доступных, и колонка компании тянула
     подвал за край экрана. Макетный запас 135 здесь не нужен. */
  .footer-company__contact { flex-wrap: wrap; }
  .footer-company__contact .social-icons { width: auto; }
}


/* --- Плавающий WhatsApp (2026-08-28) ---------------------------------------
   Фирменный зелёный круг поверх всего, иконка темы icon-whatsapp уже с
   заливкой бренда — белый круг из неё вырезан самим SVG. Лёгкое всплытие
   при наведении; на телефоне чуть меньше и ближе к краю. */

.wa-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 950;   /* ниже мобильного меню (1000), выше контента */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(14, 21, 52, .28);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.wa-float svg {
  width: 100%;
  height: 100%;
  display: block;
}

.wa-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(14, 21, 52, .34);
}

@media (max-width: 700px) {
  .wa-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}