/* ==========================================================================
   14-footer.css — глобальный подвал сайта «Экосфера»
   Desktop: 1920×556  padding: ~60px (s-10) top/bottom, gutter inline.
   Mobile: 375×727    padding: 50px (s-9) top/bottom, gutter inline.
   Префикс BEM: site-footer__*
   ========================================================================== */

/* ── Внешний footer ──────────────────────────────────────────────────────── */

.site-footer {
  background: var(--c-white);
  padding: var(--s-9) var(--gutter);
}

/* ── Внутренний контейнер ────────────────────────────────────────────────── */

.site-footer__inner {
  max-width: var(--w-content);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-5); /* 30px mobile */
}

/* ── Верхняя часть ───────────────────────────────────────────────────────── */

.site-footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
}

/* ── Блок контактов ──────────────────────────────────────────────────────── */

.site-footer__contacts {
  display: flex;
  flex-direction: column;
  gap: var(--s-5); /* 20px mobile */
}

/* Один контактный элемент (метка + значение) */
.site-footer__contact-item {
  display: flex;
  flex-direction: column;
  gap: 0.625rem; /* 10px mobile */
}

.site-footer__contact-label {
  font-family: var(--f-text);
  font-size: 0.8125rem; /* 13px mobile */
  line-height: 1.23;
  color: var(--c-black-40);
}

.site-footer__contact-value {
  font-family: var(--f-display);
  font-size: 1.25rem; /* 20px mobile */
  line-height: 1.2;
  color: var(--c-black);
  font-style: normal; /* убираем курсив у <address> */
}

.site-footer__phone-link,
.site-footer__email-link {
  color: inherit;
  text-decoration: none;
}

.site-footer__phone-link:hover,
.site-footer__phone-link:focus-visible,
.site-footer__email-link:hover,
.site-footer__email-link:focus-visible {
  text-decoration: underline;
}

/* ── Иконки соцсетей ─────────────────────────────────────────────────────── */

.site-footer__social-wrap {
  display: inline-flex;
  transition: opacity var(--dur) var(--ease);
}

.site-footer__social-wrap:hover,
.site-footer__social-wrap:focus-visible {
  opacity: 0.75;
}

/* По умолчанию (mobile): мобильная версия видна */
.site-footer__social-desktop {
  display: none;
}

.site-footer__social-mobile {
  display: block;
}

/* ── Колонки навигации ───────────────────────────────────────────────────── */

.site-footer__nav-columns {
  display: flex;
  flex-direction: row;
  gap: var(--s-14); /* 100px */
  justify-content: space-between;
}

/* ≤1024: колонки навигации без распределения по ширине. */
@media (max-width: 63.9375em) {
  .site-footer__nav-columns {
    justify-content: flex-start;
  }
}

.site-footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9375rem; /* 15px mobile */
}

.site-footer__nav-link {
  font-family: var(--f-display);
  font-size: 1.4375rem; /* 23px mobile */
  line-height: 1.217;
  color: var(--c-black);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.site-footer__nav-link:hover,
.site-footer__nav-link:focus-visible {
  color: var(--c-amber);
}

.site-footer__nav-link--current {
  color: var(--c-amber);
}

/* ── Горизонтальная линия ────────────────────────────────────────────────── */

.site-footer__divider {
  border: none;
  border-top: 1px solid var(--c-black-10);
  margin: 0;
}

/* ── Нижняя полоса ───────────────────────────────────────────────────────── */

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--s-5); /* 20px mobile */
}

/* Копирайт */
.site-footer__copyright {
  font-family: var(--f-text);
  font-size: 0.75rem; /* 12px mobile */
  line-height: 1.25;
  color: var(--c-black-40);
  margin: 0;
}

/* Правовые ссылки */
.site-footer__legal-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: 0.625rem; /* 10px mobile */
  flex-wrap: wrap;
  align-items: center;
}

.site-footer__legal-link {
  font-family: var(--f-text);
  font-size: 0.75rem; /* 12px mobile */
  line-height: 1.25;
  color: var(--c-black-40);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.site-footer__legal-link:hover,
.site-footer__legal-link:focus-visible {
  color: var(--c-black);
  text-decoration: underline;
}

/* «Сделано в RUSO» */
.site-footer__made-by {
  display: flex;
  flex-direction: row;
  gap: 0.625rem; /* 10px */
  align-items: center;
  margin: 0;
}

.site-footer__made-by-text {
  font-family: var(--f-text);
  font-size: 0.75rem; /* 12px mobile */
  line-height: 1.25;
  color: var(--c-black-40);
}

.site-footer__ruso-link {
  display: inline-flex;
  transition: opacity var(--dur) var(--ease);
}

.site-footer__ruso-link:hover,
.site-footer__ruso-link:focus-visible {
  opacity: 0.75;
}

.site-footer__ruso-link img {
  display: block;
}

/* ==========================================================================
   Desktop ≥ 1024px
   ========================================================================== */

@media (min-width: 64em) {
  .site-footer {
    padding-block: var(--s-10); /* ~60px */
  }

  .site-footer__inner {
    gap: var(--s-8); /* 40px */
  }

  /* Верхняя часть: контакты слева, навигация справа — в одной строке */
  .site-footer__top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .site-footer__contacts {
    gap: var(--s-7); /* 30px */
    flex: 0 0 auto;
    min-width: 27.5rem; /* ~441px */
  }

  .site-footer__contact-item {
    gap: 0.9375rem; /* 15px */
  }

  .site-footer__contact-label {
    font-size: 0.9375rem; /* 15px */
    line-height: 1.267;
  }

  .site-footer__contact-value {
    font-size: 2.1875rem; /* 35px */
    line-height: 1.286;
  }

  /* Десктоп: показываем большую иконку соцсетей */
  .site-footer__social-desktop {
    display: block;
  }

  .site-footer__social-mobile {
    display: none;
  }

  .site-footer__nav-columns {
    gap: var(--s-14); /* 100px */
    align-items: flex-start;
  }

  .site-footer__nav-list {
    gap: var(--s-6); /* 25px */
  }

  .site-footer__nav-link {
    font-size: 2.375rem; /* 38px */
    line-height: 1.21;
  }

  /* Нижняя полоса: всё в одну строку */
  .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0; /* space-between распределяет само */
  }

  .site-footer__copyright {
    font-size: 0.875rem; /* 14px */
    line-height: 1.286;
    max-width: 30.375rem; /* ~486px */
  }

  .site-footer__legal-links {
    gap: 2.1875rem; /* 35px */
    flex-wrap: nowrap;
  }

  .site-footer__legal-link {
    font-size: 0.9375rem; /* 15px */
    line-height: 1.267;
  }

  .site-footer__made-by {
    gap: 0.625rem; /* 10px */
  }

  .site-footer__made-by-text {
    font-size: 0.9375rem; /* 15px */
    line-height: 1.267;
  }
}

/* ==========================================================================
   Подвал: контакты в два ряда, соцсети отдельными кнопками
   ========================================================================== */

/* Столбец контактов остаётся прежним — три пункта друг под другом с тем же
   шагом. Соцсети уходят во второй трек справа, на линию первого пункта:
   в макете кадр иконок (Frame 399, 205x65) отстоит на 486 от левого края
   блока и на 6 ниже его верха. */
@media (min-width: 64em) {
  .site-footer__contacts {
    display: grid;
    grid-template-columns: 30.375rem auto; /* 486 до иконок */
    column-gap: 0;
    row-gap: var(--s-7); /* 30 — как было между пунктами */
    justify-content: start;
    align-items: start;
  }

  .site-footer__contact-item {
    grid-column: 1;
  }

  .site-footer__social-desktop {
    grid-column: 2;
    grid-row: 1;
    margin-block-start: 0.375rem; /* 6 */
  }
}

/*
   ≤ 1439px («после 1440» = 1440 и меньше): первую колонку контактов
   уменьшаем (30.375rem → 27.5rem), чтобы блок не разрастался.
*/
@media (min-width: 64em) and (max-width: 89.9375em) {
  .site-footer__contacts {
    grid-template-columns: 27.5rem auto; /* 440px (было 486px) */
  }
}

/* Ряд кнопок. В макете Frame 399: три иконки по 65 с зазором 5. */
.site-footer__social-desktop {
  display: flex;
  flex-direction: row;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Каждая кнопка показывает свою треть общего файла иконок. Отдельных файлов в
   выгрузке нет, а ссылки нужны разные — поэтому спрайт, а не одна картинка. */
.site-footer__social-btn {
  display: block;
  width: 4.0625rem; /* 65 */
  height: 4.0625rem;
  background-image: url('../icons/frame-399.svg');
  background-repeat: no-repeat;
  background-size: 12.8125rem 4.0625rem; /* 205x65 — размер кадра из макета */
  transition: opacity var(--dur) var(--ease);
}

.site-footer__social-btn:hover {
  opacity: 0.75;
}

.site-footer__social-btn--whatsapp {
  background-position: 0 0;
}

.site-footer__social-btn--instagram {
  background-position: -4.375rem 0; /* 65 + 5 */
}

/*
   ≤ 1439px («после 1440» = 1440 и меньше): шрифты футера чуть уменьшаем.
   Уменьшаются: ссылки навигации, контактные значения и мелкие подписи.
*/
@media (max-width: 89.9375em) {
  .site-footer__nav-columns {
    gap: 5rem; /* 80px (было 100px) */
  }

  .site-footer__nav-link {
    font-size: 2.25rem; /* 36px (было 38px) */
  }

  .site-footer__contact-value {
    font-size: 2.0625rem; /* 33px (было 35px) */
  }

  .site-footer__contact-label,
  .site-footer__legal-link,
  .site-footer__made-by-text {
    font-size: 0.875rem; /* 14px (было 15px) */
  }
}

/*
   1024–1279px («после 1280» = 1280 и меньше): футер значительно ужимаем,
   чтобы до 1024 он не ломался — меньше шрифты, отступы и колонки.
*/
@media (min-width: 64em) and (max-width: 79.9375em) {
  .site-footer {
    padding-block: var(--s-7); /* 56px (было 60px) */
  }

  .site-footer__inner {
    gap: var(--s-5); /* 30px */
  }

  .site-footer__top {
    gap: var(--s-6); /* 40px */
  }

  .site-footer__contacts {
    min-width: 0; /* позволяем колонке сжиматься */
    grid-template-columns: 21.875rem auto; /* 350px */
  }

  .site-footer__contact-item {
    gap: 0.5rem;
  }

  .site-footer__contact-label {
    font-size: 0.8125rem; /* 13px */
  }

  .site-footer__contact-value {
    font-size: 1.75rem; /* 28px (было 33px) */
  }

  .site-footer__nav-columns {
    gap: 3.125rem; /* 50px (было 80px) */
  }

  .site-footer__nav-list {
    gap: var(--s-4); /* 20px */
  }

  .site-footer__nav-link {
    font-size: 1.75rem; /* 28px (было 36px) */
  }

  .site-footer__bottom {
    gap: var(--s-4);
  }

  .site-footer__legal-links {
    gap: 1.375rem; /* 22px */
  }

  .site-footer__copyright,
  .site-footer__legal-link,
  .site-footer__made-by-text {
    font-size: 0.8125rem; /* 13px */
  }
}

.site-footer__social-btn--telegram {
  background-position: -8.75rem 0; /* (65 + 5) * 2 */
}

/* ==========================================================================
   Телефоны (≤640px): футер компактнее.
   ========================================================================== */

@media (max-width: 40em) {
  .site-footer {
    padding-block: var(--s-7); /* 40 вместо 50 */
  }

  .site-footer__inner {
    gap: var(--s-4);
  }

  .site-footer__top {
    gap: var(--s-5);
  }

  .site-footer__contacts {
    gap: var(--s-4);
  }

  .site-footer__contact-item {
    gap: 0.375rem; /* 6px */
  }

  .site-footer__contact-value {
    font-size: 1.0625rem; /* 17 вместо 20 */
  }

  /* Колонки навигации: базовый gap 100px на телефоне разрывает блок. */
  .site-footer__nav-columns {
    gap: var(--s-6); /* 25px */
    flex-wrap: wrap;
  }

  .site-footer__nav-list {
    gap: 0.625rem; /* 10px */
  }

  .site-footer__nav-link {
    font-size: 1.125rem; /* 18 вместо 23 */
  }

  .site-footer__bottom {
    gap: var(--s-4);
  }
}