/* ================================================
   ФУТЕР
   ================================================
   Брейкпоинты выровнены под Bootstrap 5:
     lg ≥ 992px   — десктоп (4 колонки)
     md ≥ 768px   — планшет (2 колонки)
     sm ≥ 576px   — телефон ландшафт
     xs < 576px   — телефон портрет
   ================================================ */

.footer{
  background-color: var(--color-blue-dark);
  color: var(--background);
  width: 100%;
  margin: 0 auto;
  padding: 48px 0 32px;
  box-sizing: border-box;
  font-family: 'Nunito', Arial, sans-serif;
}

/* Сетка футера: 4 колонки на десктопе */
.footer-container{
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(280px,480px) 1fr minmax(260px,360px) minmax(260px,360px);
  column-gap: 56px;
  align-items: start;
  justify-items: end;
}

.footer-left{ grid-column: 1; }
.footer-nav{ grid-column: 3; }
.footer-contacts{ grid-column: 4; }
.footer-column{ min-width: 240px; }

/* Название компании */
.footer-left h3{
  margin: 0 0 18px;
  font-weight: 600;
  font-size: 36px;
  line-height: 1.2;
}

/* Заголовки навигации и контактов */
.footer-nav h4,
.footer-contacts h4{
  margin: 0 0 10px;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
}

/* Навигационные ссылки */
.footer-nav ul{ margin: 0; padding: 0; list-style: none; }
.footer-nav li{ margin: 0 0 8px; }
.footer-nav a{
  color: var(--background);
  text-decoration: none;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
  opacity: .95;
  transition: opacity .2s;
}
.footer-nav a:hover{ opacity: .8; }

/* Контакты */
.footer-contacts p{
  margin: 0 0 14px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
}

/* Иконки мессенджеров */
.footer-icons{ display: flex; gap: 16px; align-items: center; }
.icon{
  display: inline-block;
  width: 56px; height: 56px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.icon.tg{ background-image: url("../media/Telegram.svg"); }
.icon.wa{ background-image: url("../media/WhatsApp.svg"); }
.icon.av{ background-image: url("../media/avito.svg"); }

/* Нижняя строка с копирайтом */
.footer-bottom{
  margin-top: 24px;
  padding-top: 16px;
  text-align: center;
  font-weight: 400;
  font-size: 14px;
  opacity: .95;
  border-top: 1px solid rgba(255,255,255,.15);
}
.footer-link{ color: inherit; text-decoration: none; font-weight: 600; }
.footer-link:hover{ text-decoration: underline; opacity: .85; }

/* Мобильный номер телефона (скрыт на десктопе, виден на мобилке) */
.footer-phone{
  display: none;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  margin-top: 10px;
}

/* --- xxl → xl (≤ 1400px): уменьшаем gap и заголовок --- */
@media (max-width: 1399.98px){
  .footer-container{
    grid-template-columns: minmax(260px,420px) 1fr minmax(240px,320px) minmax(240px,320px);
    column-gap: 40px;
  }
  .footer-left h3{ font-size: 32px; }
}

/* --- lg → md (≤ 992px): 2 колонки --- */
@media (max-width: 991.98px){
  .footer-container{
    grid-template-columns: 1fr 1fr;
    row-gap: 24px;
    justify-items: start;
  }
  .footer-left{ grid-column: 1 / -1; }
  .footer-nav{ grid-column: 1; }
  .footer-contacts{ grid-column: 2; }
}

/* --- md → sm (≤ 768px): компактный мобильный футер --- */
@media (max-width: 767.98px){
  .footer{ padding: 28px 0 20px; }
  .footer-container{
    grid-template-columns: 1fr 1fr;
    row-gap: 12px;
    padding: 0 16px;
    justify-items: start;
  }
  /* Название компании — по центру, описание скрыто */
  .footer-left h3{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .footer-left p{ display: none; }
  .footer h4{ display: none; }

  .footer-left{ display: block; }
  .footer-nav{
    grid-column: 1;
    text-align: left;
  }
  .footer-nav h4{ margin-bottom: 6px; font-size: 18px; }
  .footer-nav a{ font-size: 15px; }
  .footer-contacts{
    grid-column: 2;
    justify-self: end;
    text-align: right;
  }
  .footer-contacts h4{ display: none; }
  .footer-contacts .phone{ display: none; }
  /* Иконки вертикально, справа */
  .footer-icons{
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
  }
  .icon{ width: 42px; height: 42px; }
  /* Показываем мобильный номер телефона */
  .footer-phone{ display: block; }
  .footer-bottom{ margin-top: 10px; padding-top: 10px; font-size: 12px; }
}

/* --- xs (≤ 576px): ещё меньше иконки --- */
@media (max-width: 575.98px){
  .icon{ width: 36px; height: 36px; }
}