/* =====================================================================
   БЛОК 8 · Подвал (footer)
   Макет: Section 8, фреймы 1440 / 1440-1200 / 1200-900 / 900-760 / 760-360.

   Раскладка одна на всех ширинах, меняются только направление колонки
   ссылок и отступы:
     ≥1200  — ссылки в строку справа, выровнены по центру кнопки
     900…1199 — ссылки столбиком, прижаты вправо, старт вровень с кнопкой
     760…899  — то же, но поля 16px и меньший верхний отступ
     <760     — всё в один столбец слева: кнопка → копирайт → ссылки → лого

   Лого прижато к низу и всегда во всю ширину контейнера (в макете
   1360 при 1440, 1120 при 1200, 820 при 900 — это ровно ширина
   контейнера минус поля), поэтому масштабируется само через viewBox.

   overflow:hidden на секции — потому что точка в анимации вылетает
   левее и выше логотипа, за пределы его бокса (см. footer.js).
   ===================================================================== */

.ftr {
  position: relative;
  background: var(--bg);
  overflow: hidden;
}

.ftr__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px 40px 24px;
}

.ftr__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

/* Кнопка — тот же .btn.btn--sm, что в шапке, но без стрелки и с
   паддингами из макета (12/16 дают ровно 103×49 при тексте 16px).
   Ховер и клик наследуются от .btn: тень 4px → 6px, при нажатии
   кнопка уезжает на место тени. */
.ftr__btn {
  padding: 12px 16px;
}

/* Копирайт: низ кнопки 129, верх текста 140 → отступ 11px.
   Ширина 322 из макета — на ней текст ложится в две строки. */
.ftr__copy {
  margin: 11px 0 0;
  max-width: 322px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--muted);
}

/* Ссылки: Inter Medium 20px, подчёркнутые, gap 32.
   margin-top 15px ставит их середину (105) вровень с серединой
   кнопки (104.5) — в макете они выровнены именно так, а не по верху. */
.ftr__links {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 15px;
  flex: none;
}

.ftr__link {
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  text-decoration: underline;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  white-space: nowrap;
  transition: color .12s ease;
}

/* По ТЗ: ховер меняет только цвет на синий, клик не меняет ничего —
   поэтому отдельного :active нет, под курсором ссылка так и остаётся
   синей. Подчёркивание синеет вместе с текстом (currentColor). */
@media (hover: hover) {
  .ftr__link:hover { color: var(--accent); }
}
.ftr__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Лого. width:100% + viewBox = масштаб под контейнер.
   overflow:visible нужен точке: её дуги поднимаются на ~118 единиц
   выше верхней кромки логотипа и уходят левее нуля. */
.ftr__logo {
  display: block;
  margin-top: 120px;
}
.ftr__logo svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ============================ АДАПТИВ ============================ */

/* фрейм 1200-900: ссылки столбиком, прижаты вправо, верх вровень с кнопкой */
@media (max-width: 1199.98px) {
  .ftr__links {
    flex-direction: column;
    align-items: flex-end;
    gap: 32px;
    margin-top: 0;
  }
  .ftr__logo { margin-top: 116px; }
}

/* фрейм 900-760: поля 16, блок начинается выше */
@media (max-width: 899.98px) {
  .ftr__inner { padding: 50px 16px 24px; }
}

/* фрейм 760-360: один столбец, ссылки под копирайтом и по левому краю */
@media (max-width: 759.98px) {
  .ftr__inner { padding: 50px 12px 16px; }
  .ftr__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .ftr__links {
    align-items: flex-start;
    margin-top: 32px;
  }
  .ftr__logo { margin-top: 90px; }
}