/* ============================================================
   footer.css — Подвал сайта МФОК
   База = дизайн 1920 (node 79:2356). Ниже перекрытия:
   max-width:1919 (1440) / 1023 (768) / 767 (360).
   Значения — из Figma get_design_context.
   ============================================================ */

/* ---------- Корень: тёмная карточка со скруглением сверху ---------- */
.s-footer {
  background: var(--c-dark-soft); /* #2a3b45 */
  border-radius: var(--r24) var(--r24) 0 0;
  color: var(--c-white);
}

/* Контейнер задаёт горизонтальные поля (40px) + кап 1920;
   вертикальные поля футера — здесь */
.s-footer__container {
  padding-top: 60px;
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ---------- Верхняя зона ---------- */
.s-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
}

/* Десктоп: лого · меню · контакты · соцсети = 4 равномерные колонки.
   brand и aside «растворяем» (display:contents), чтобы их дети стали
   прямыми колонками .s-footer__top и ровно распределились justify-between. */
.s-footer__brand { display: contents; }

.s-footer__logo { display: block; }
.s-footer__logo img { width: 176px; height: 66px; }
/* EN-логотип футера (UNITED CULTURES) — другое соотношение сторон,
   масштабируем по высоте, чтобы не растягивало */
html[lang="en"] .s-footer__logo img { width: auto; }

/* Навигация подвала */
.s-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 95px;
  flex: none;
}
.s-footer__nav-link {
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 28px;
  color: var(--c-white);
  opacity: .7;
  transition: opacity .2s ease;
}
.s-footer__nav-link:hover { opacity: 1; }

/* Правая зона тоже «растворяется» на десктопе (см. brand) */
.s-footer__aside { display: contents; }

/* Контакты */
.s-footer__contacts {
  display: flex;
  flex-direction: column;
  gap: 40px;
  flex: 0 1 auto;          /* по содержимому: email — одна строка, не схлопывается */
}
.s-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.s-footer__contact-label {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 24px;
  color: var(--c-white);
  opacity: .7;
}
.s-footer__contact-value {
  font-family: var(--font-display);
  /* Текучий кегль: крупно на десктопе, мельче на узких экранах.
     nowrap + clamp = email никогда не встаёт в 2 строки и не вылезает за колонку. */
  font-size: clamp(14px, 1.5vw, 24px);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--c-white);
  white-space: nowrap;
}
.s-footer__contact-value a { color: inherit; white-space: nowrap; }

/* Соцсети */
.s-footer__social {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 210px;
  flex: none;
}
.s-footer__social-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.s-footer__social-title {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  color: var(--c-white);
}
.s-footer__social-list {
  display: flex;
  align-items: center;
  gap: 8px;
}
.s-footer__social-link {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: var(--r8);
  transition: filter .2s ease;
}
.s-footer__social-link:hover { filter: brightness(1.1); }
.s-footer__social-icon { width: 40px; height: 40px; }

/* ---------- Нижняя строка ---------- */
.s-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 24px;
  border-top: 1px solid rgba(214, 191, 163, .2);
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  color: var(--c-white);
}
.s-footer__copy { opacity: .8; }
.s-footer__legal {
  display: flex;
  align-items: center;
  gap: 40px;
}
.s-footer__legal-link {
  opacity: .7;
  transition: opacity .2s ease;
}
.s-footer__legal-link:hover { opacity: 1; }

/* ============================================================
   1440 (node 79:1151): сужаются правые колонки, меньше gap
   ============================================================ */
@media (max-width: 1919px) {
  .s-footer__aside { gap: 20px; }
  .s-footer__contacts { max-width: 440px; }
}

/* ============================================================
   768 (node 79:1910): лого над ссылками, ссылки в строку,
   контакты крупнее соцсетей, значения контактов 20/28
   ============================================================ */
@media (max-width: 1023px) {
  /* Верх — лого+ссылки и контакты+соцсети в колонку, gap 80 */
  .s-footer__top {
    flex-direction: column;
    gap: 80px;
  }

  /* Лого+ссылки: вертикально, ссылки строкой */
  .s-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
  }
  .s-footer__nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    gap: 40px;
  }
  .s-footer__nav-link {
    font-size: 16px;
    line-height: 24px;
  }

  /* Контакты + соцсети в строку на всю ширину */
  .s-footer__aside {
    display: flex;
    align-items: flex-start;
    width: 100%;
    gap: 20px;
  }
  .s-footer__contacts {
    width: 100%;
    max-width: 511px;
    flex: 1 1 auto;
  }
}

/* ============================================================
   360 (node 79:3015): всё в колонку, контакты Cochin 16/24,
   соцсети двумя равными колонками, низ — список из 3 строк
   ============================================================ */
@media (max-width: 767px) {
  .s-footer__container {
    padding-top: 40px;
    padding-bottom: 24px;
  }

  /* Верх в колонку, gap 40 */
  .s-footer__top { gap: 40px; }
  .s-footer__brand { gap: 24px; }

  /* Лого масштабируется до 171×64 (node 79:3018) */
  .s-footer__logo img { width: 171px; height: 64px; }

  /* Ссылки снова в колонку */
  .s-footer__nav {
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }

  /* Контакты + соцсети в колонку */
  .s-footer__aside {
    flex-direction: column;
    gap: 40px;
  }
  .s-footer__contacts {
    width: 100%;
    gap: 24px;
  }

  /* Соцсети: две равные колонки в строку, gap 32 */
  .s-footer__social {
    flex-direction: row;
    gap: 32px;
    width: 100%;
  }
  .s-footer__social-group {
    flex: 1 0 0;
    min-width: 0;
  }

  /* Низ: колонка из трёх строк, высота 120, распределение по краям.
     Порядок макета 360: Правила, Политика, © (копирайт последним).
     .s-footer__legal разворачиваем через display:contents,
     чтобы две ссылки стали прямыми flex-детьми и дали ровно 3 строки */
  .s-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .s-footer__copy { order: 3; }
  .s-footer__legal { display: contents; }
  .s-footer__legal-link {
    opacity: .8;
    white-space: nowrap;
  }
  .s-footer__legal-link:nth-of-type(1) { order: 1; }
  .s-footer__legal-link:nth-of-type(2) { order: 2; }
}