@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* =========================================
   ОСНОВНЫЕ ПАРАМЕТРЫ ПОДВАЛА
   ========================================= */

.sf-footer {
  --sf-footer-bg: #333333;
  --sf-footer-text: #e6e7ea;
  --sf-footer-link: #bfc2ca;
  --sf-footer-muted: #adb1bc;
  --sf-footer-border: rgba(255, 255, 255, 0.12);

  display: block;

  width: 100%;
  min-width: 0;
  max-width: 100%;

  /* Расстояние от контента страницы до подвала. */
  margin: 40px 0 0;

  padding: 28px 0 18px;

  background: var(--sf-footer-bg);
  color: var(--sf-footer-text);

  font: 400 14px/1.5 Inter, "Segoe UI", Arial, sans-serif;

  text-align: left;

  -webkit-box-shadow: none;
  box-shadow: none;
}

.sf-footer,
.sf-footer *,
.sf-footer *::before,
.sf-footer *::after {
  box-sizing: border-box;
}

.sf-footer :is(p, li, nav, address) {
  font-family: inherit;
}

.sf-footer a {
  color: var(--sf-footer-text);

  text-decoration: none;
  text-underline-offset: 3px;

  overflow-wrap: anywhere;
}

.sf-footer a:focus-visible {
  outline: 2px solid #ffe400;
  outline-offset: 4px;

  border-radius: 2px;
}


/* =========================================
   ОБЩАЯ ШИРИНА КОНТЕНТА
   ========================================= */

/*
  Используем существующие настройки сайта:
  --sf-content-width
  --sf-content-gutter
  --sf-notices-space
*/

.sf-footer .sf-container {
  width: 100% !important;
  min-width: 0 !important;

  max-width: var(--sf-content-width, 1520px) !important;

  margin-left: auto !important;
  margin-right: auto !important;

  /* Такое же место для кружков, как у основного контента. */
  padding-left: max(
    var(--sf-content-gutter, clamp(16px, 2.5vw, 32px)),
    calc(
      var(--sf-notices-space, 0px) -
      max(
        0px,
        calc(
          (100% - var(--sf-content-width, 1520px)) / 2
        )
      )
    )
  ) !important;

  padding-right:
    var(--sf-content-gutter, clamp(16px, 2.5vw, 32px)) !important;
}


/* =========================================
   ВЕРХНЯЯ ЧАСТЬ: НАВИГАЦИЯ
   ========================================= */

.sf-footer .sf-footer__top {
  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(0, 0.8fr)
    minmax(0, 1.65fr);

  grid-template-areas:
    "resources cooperation popular";

  align-items: start;

  gap: 24px 32px;

  padding-top: 0;
  padding-bottom: 22px;

  border-bottom: 1px solid var(--sf-footer-border);
}

.sf-footer .sf-footer__top > .sf-footer__col:nth-child(1) {
  grid-area: resources;
}

.sf-footer .sf-footer__top > .sf-footer__col:nth-child(2) {
  grid-area: cooperation;
}

.sf-footer .sf-footer__top > .sf-footer__col:nth-child(3) {
  grid-area: popular;
}

.sf-footer .sf-footer__col,
.sf-footer .sf-footer__middle > div {
  min-width: 0;
}


/* Заголовки разделов. */

.sf-footer .sf-footer__title {
  margin: 0 0 8px;
  padding: 0 0 9px;

  border: 0;
  border-bottom: 1px solid var(--sf-footer-border);

  color: var(--sf-footer-text);

  font: 600 17px/1.35 Inter, "Segoe UI", Arial, sans-serif;

  letter-spacing: -0.015em;
  text-transform: none;
}

.sf-footer .sf-footer__title a {
  color: inherit;
}


/* Списки ссылок. */

.sf-footer .sf-footer__list {
  margin: 0;
  padding: 0;

  list-style: none;

  font-size: 14px;
  line-height: 1.5;
}

.sf-footer .sf-footer__list li {
  margin: 0;
  padding: 0;

  font-size: inherit;
  line-height: inherit;
}

.sf-footer .sf-footer__list a {
  display: block;

  width: fit-content;
  max-width: 100%;

  min-height: 26px;

  padding: 2px 0;

  color: var(--sf-footer-link);

  font-size: inherit;
  line-height: inherit;
}


/* Популярные направления: две колонки. */

.sf-footer .sf-footer__popular-wrap {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0 20px;
}


/* =========================================
   КОНТАКТЫ, ЛИЦЕНЗИЯ, КОМПАНИЯ
   ========================================= */

.sf-footer .sf-footer__middle {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1.3fr)
    auto;

  align-items: start;

  gap: 16px 32px;

  padding-top: 18px;
  padding-bottom: 18px;

  border-bottom: 1px solid var(--sf-footer-border);
}

.sf-footer .sf-footer__middle address {
  margin: 0;
  padding: 0;

  color: var(--sf-footer-text);

  font: 600 15px/1.65 Inter, "Segoe UI", Arial, sans-serif;
  font-style: normal;
}

.sf-footer .sf-footer__muted {
  margin: 0;
  padding: 0;

  color: var(--sf-footer-muted);

  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;

  overflow-wrap: anywhere;
}

.sf-footer .sf-footer__badges {
  display: flex;
  flex-wrap: wrap;

  align-items: center;
  justify-content: flex-end;

  gap: 8px;

  color: var(--sf-footer-muted);

  font-size: 13px;
  line-height: 1.5;
}

.sf-footer .sf-footer__badges p {
  margin: 0;

  font: inherit;
  color: inherit;

  text-align: right;
}


/* =========================================
   ССЫЛКА НА ТЕХНИЧЕСКУЮ ПОДДЕРЖКУ
   ========================================= */

.sf-footer .sf-footer__support-link {
  padding-top: 14px;
  padding-bottom: 14px;

  color: var(--sf-footer-link);

  font-size: 13px;
  line-height: 1.5;
}

.sf-footer .sf-footer__support-link a {
  color: inherit;

  text-decoration: underline;
  text-decoration-thickness: 1px;
}


/* =========================================
   ЮРИДИЧЕСКАЯ ИНФОРМАЦИЯ
   ========================================= */

.sf-footer .sf-footer__legal {
  padding-top: 0;
  padding-bottom: 0;

  color: var(--sf-footer-muted);

  font-size: 12px;
  line-height: 1.65;

  overflow-wrap: anywhere;
}

.sf-footer .sf-footer__legal p {
  margin: 0 0 8px;

  font: inherit;
  color: inherit;
}


/* =========================================
   ТЕХНИЧЕСКИЕ ТРЕБОВАНИЯ
   ========================================= */

.sf-footer .sf-footer__tech {
  margin-top: 14px;

  color: inherit;
}

.sf-footer .sf-footer__tech-title {
  margin: 0 0 7px;
  padding: 0;

  color: var(--sf-footer-text);

  font: 600 13px/1.4 Inter, "Segoe UI", Arial, sans-serif;

  text-transform: none;
}

.sf-footer .sf-footer__tech p:last-child {
  margin-bottom: 0;
}

.sf-footer .sf-footer__tech-list,
.sf-footer .sf-footer__tech-sublist {
  margin: 0;
  padding-left: 18px;

  font: inherit;
}

.sf-footer .sf-footer__tech-list > li + li {
  margin-top: 6px;
}

.sf-footer .sf-footer__tech-sublist {
  margin-top: 4px;
}

.sf-footer .sf-footer__nowrap {
  white-space: nowrap;
}


/* Служебные заголовки для экранных дикторов. */

.sf-footer .sr-only {
  position: absolute !important;

  width: 1px;
  height: 1px;

  margin: -1px;
  padding: 0;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);

  white-space: nowrap;

  border: 0;
}


/* Наведение на ссылки. */

.sf-footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}


/* =========================================
   ПЛАНШЕТЫ
   ========================================= */

@media (max-width: 1099px) {
  /*
    Ресурсы остаются слева.
    Сотрудничество и направления располагаются справа.
  */

  .sf-footer .sf-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    grid-template-areas:
      "resources cooperation"
      "resources popular";

    gap: 20px 28px;
  }

  .sf-footer .sf-footer__popular-wrap {
    column-gap: 16px;
  }
}

@media (max-width: 768px) {
  .sf-footer .sf-footer__middle {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px 24px;
  }

  .sf-footer .sf-footer__badges {
    grid-column: 1 / -1;

    justify-content: flex-start;
  }

  .sf-footer .sf-footer__badges p {
    text-align: left;
  }
}


/* =========================================
   ТЕЛЕФОНЫ
   ========================================= */

@media (max-width: 640px) {
  .sf-footer {
    margin-top: 24px;

    padding-top: 24px;

    padding-bottom: calc(
      18px + env(safe-area-inset-bottom, 0px)
    );
  }

  .sf-footer .sf-footer__top {
    grid-template-columns: minmax(0, 1fr);

    grid-template-areas:
      "resources"
      "cooperation"
      "popular";

    gap: 22px;

    padding-bottom: 18px;
  }

  .sf-footer .sf-footer__title {
    font-size: 16px;
  }

  .sf-footer .sf-footer__list a {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .sf-footer .sf-footer__middle {
    grid-template-columns: minmax(0, 1fr);

    gap: 12px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .sf-footer .sf-footer__support-link {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}