/**
 * Подвал.
 *
 * Пять колонок: бренд с описанием и четыре списка ссылок.
 * Реквизиты ИП в нижней строке обязательны по закону и работают
 * на поисковую выдачу (ТЗ 22.2).
 */

.foot {
  border-top: 1px solid var(--line);
  margin-top: 60px;
  padding: 44px 0 var(--s8);
  font-size: 13.5px;
}

.foot__in {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.foot__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 28px;
}

.foot__brand .about {
  color: var(--mut);
  max-width: 34ch;
  margin: 14px 0 0;
}

.foot__col-title {
  margin: 0 0 var(--s3);
  font-size: 12px;
  color: var(--tx2);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Ссылка списка — блочная. Селектор намеренно не .foot a:
   иначе логотип потеряет свой flex и развалится. */
.foot__col a {
  display: block;
  padding: var(--s1) 0;
  color: var(--mut);
}

.foot__col a:hover {
  color: var(--tx2);
}

.foot__bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  padding-top: var(--s6);
  margin-top: 28px;
  border-top: 1px solid var(--line);
  color: var(--mut);
  font-size: 12.5px;
}

@media (max-width: 980px) {
  .foot__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s6);
  }
}

@media (max-width: 760px) {
  .foot__grid {
    grid-template-columns: 1fr;
  }

  .foot__brand .about {
    max-width: 100%;
  }
}

/* --- Согласие на cookies (ТЗ 22.3) --- */

/* Полоса внизу экрана, а не модалка: баннер не должен закрывать
   собой сайт при первом визите. */
.cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: var(--s3);
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.cookies[hidden] {
  display: none;
}

.cookies__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s3);
  max-width: 1180px;
  margin: 0 auto;
}

.cookies__text {
  margin: 0;
  max-width: 78ch;
  color: var(--tx2);
  font-size: 12.5px;
  line-height: 1.55;
}

/* Кнопки не расходятся по краям: отказ и согласие стоят рядом
   и выглядят одинаково значимыми. */
.cookies__acts {
  display: flex;
  gap: var(--s2);
}

@media (max-width: 640px) {
  .cookies__acts {
    width: 100%;
  }

  .cookies__acts .btn {
    flex: 1;
  }
}