/* Подвал. Десктоп - фрейм a713cQ (1440x418), мобильный - l6PNx2 (390x678).
   Фон - фото педагога у доски под тёмно-синим слоем: на десктопе #16233DD6,
   на мобильной плотнее, #16233DE6.

   В макете рамка подвала была нарисована 379 при содержимом 418 - нижняя строка
   с копирайтом и политикой оказывалась срезана. Исправлено в самом макете
   (фрейм и слой подняты до 418), эталон переснят. */

.footer {
  position: relative;
  isolation: isolate;
  background: var(--ink) center / cover no-repeat;
  color: var(--white);
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #16233DD6;
}

.footer__in {
  display: flex;
  flex-direction: column;
  gap: 42px;
  padding-top: 44px;
  padding-bottom: 26px;
}

.footer__top {
  display: flex;
  gap: 60px;
}

/* Бренд */
.footer__brand {
  flex: none;
  width: 330px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer .logo__text { color: var(--white); }

.footer__about {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 25px;   /* 14 x 1.8 = 25.2, в макете строка 25 */
  color: #FFFFFF99;
}

.footer__soc {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 4px;
}

.footer__soc .ico {
  width: 21px;
  height: 21px;
  color: var(--sun);
  transition: opacity .15s ease;
}

.footer__soc .soc__link:hover .ico { opacity: .75; }

/* Колонки ссылок */
.footer__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.footer__col--contacts {
  flex: none;
  width: 250px;
}

.footer__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  line-height: 13px;
  letter-spacing: 2px;
  color: var(--sun);
}

.footer__link,
.footer__fact {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 26px;   /* 14 x 1.85 = 25.9, в макете строка 26 */
  color: #FFFFFFCC;
}

.footer__link { transition: color .15s ease; }
.footer__link:hover { color: var(--white); }

.footer__fact { white-space: pre-line; }

.footer__line {
  height: 1px;
  background: #FFFFFF26;
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 16px;
  color: #FFFFFF80;
}

.footer__bottom a { transition: color .15s ease; }
.footer__bottom a:hover { color: var(--white); }

/* Планшет: в макете нарисованы только 1440 и 390, но между ними подвал
   обязан как-то стоять. Пять блоков в ряд (330 + три колонки + 250 и четыре
   зазора по 60) перестают помещаться около 1100, поэтому бренд уходит на
   свою строку, а колонки делят остаток. */
@media (min-width: 861px) and (max-width: 1159px) {
  .footer__top {
    flex-wrap: wrap;
    gap: 32px 40px;
  }

  .footer__brand { width: 100%; }

  .footer__col--contacts { width: 220px; }
}

/* На десктопе три колонки ссылок стоят в общем ряду подвала - обёртка
   растворяется. На мобильной в макете нарисован другой, сокращённый набор
   из двух колонок, поэтому наборы разные и управляются раздельно. */
.footer__cols--d { display: contents; }
.footer__cols--m { display: none; }

/* Мобильная раскладка: две колонки ссылок, контакты отдельным блоком,
   между блоками - линии. */
.footer__line--m { display: none; }

@media (max-width: 860px) {
  .footer::before { background: #16233DE6; }

  .footer__in {
    gap: 24px;
    padding-top: 36px;
    padding-bottom: 22px;
  }

  .footer__top {
    flex-direction: column;
    gap: 24px;
  }

  .footer__brand {
    width: auto;
    gap: 14px;
  }

  .footer .logo { gap: 10px; }

  .footer .logo__mark {
    width: 34px;
    height: 34px;
    border-radius: 6px;
  }

  .footer .logo__text {
    font-family: var(--font-head);
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 1.2px;
  }

  .footer__about {
    font-size: 13px;
    line-height: 22px;   /* 13 x 1.7 = 22.1 */
    color: #FFFFFFB3;
  }

  /* Отступ сверху у мессенджеров есть только в десктопном макете. */
  .footer__soc { gap: 14px; padding-top: 0; }
  .footer__soc .ico { width: 20px; height: 20px; }

  .footer__line--m { display: block; }

  .footer__cols--d { display: none; }

  .footer__cols--m {
    display: flex;
    gap: 20px;
  }

  .footer__col {
    gap: 11px;
  }

  .footer__col--contacts {
    width: auto;
    gap: 8px;
  }

  .footer__title {
    font-size: 10px;
    line-height: 12px;
  }

  .footer__link,
  .footer__fact {
    font-size: 13px;
    line-height: 22px;   /* 13 x 1.7 = 22.1 */
  }

  /* В колонке контактов у адреса своя высота строки: в макете 1.6. */
  .footer__col--contacts .footer__fact { line-height: 21px; }

  .footer__phone {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    line-height: 18px;
    color: var(--white);
  }

  /* У часов работы в макете высота строки не задана: Inter считает её
     по метрикам шрифта, 13 x 1.21 = 16. */
  .footer__col--contacts .footer__fact--hours { line-height: 16px; }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    line-height: 15px;
  }
}