/* Подвал. Скруглён сверху на 50, залит диагональным градиентом из sky/50,
   sky/100 и sand/200 на половинной непрозрачности, поверх — точечная карта
   мира в правом нижнем углу. Под градиентом обязательна своя непрозрачная
   заливка: половинная альфа без неё пропускает сквозную точечную сетку с
   body, и подвал выглядит выцветшим. Приём тот же, что у .page-header. */

.footer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  overflow: hidden;
  padding: 40px var(--grid-margin);
  border-radius: 50px 50px 0 0;
  background-color: var(--bg-page);
  background-image: linear-gradient(
    162.1deg,
    rgba(242, 247, 251, 0.5) 14.644%,
    rgba(225, 237, 246, 0.5) 50%,
    rgba(239, 227, 217, 0.5) 85.356%
  );
}

.footer__globe {
  position: absolute;
  inset-inline-end: -140px;
  bottom: -220px;
  width: 520px;
  height: 520px;
  opacity: 0.55;
  background-image: var(--decor-image, url("../../img/footer-globe.webp"));
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

.footer__top {
  position: relative;
  display: grid;
  width: 100%;
  max-width: var(--grid-container);
  margin-inline: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-6) var(--space-4);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  grid-column: 1 / -1;
}

.footer__logo {
  display: flex;
  justify-content: center;
  align-self: flex-start;
  width: 199px;
}

.footer__logo img {
  width: auto;
  height: 48px;
}

.footer__tagline { color: var(--text-body); }

.footer__about {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

/* На мобильном кнопки магазинов делят строку поровну, с планшета встают
   по своей ширине. */
.footer__stores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-top: var(--space-2);
}

/* Кнопка магазина: глиф 22 и двухстрочная подпись. */
.footer__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__column-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-2xs);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-overline);
  color: var(--text-body);
}

.footer__link {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-body);
}

.footer__link:hover { color: var(--text-strong); }

.footer__divider {
  position: relative;
  max-width: var(--grid-container);
  margin-inline: auto;
  height: var(--border-hairline);
  border: 0;
  background: var(--action-sky-bg-hover);
}

.footer__bottom {
  position: relative;
  display: flex;
  width: 100%;
  max-width: var(--grid-container);
  margin-inline: auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.footer__copyright {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

/* В подвале переключатель языка мельче и без глобуса. */
.footer .lang__toggle {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* Подвал внизу страницы: список открывается вверх, иначе нижние языки
   уходят за край страницы. */
.footer .lang__list {
  top: auto;
  bottom: calc(100% + var(--space-2));
}

@media (min-width: 768px) {
  .footer {
    padding: 64px var(--grid-margin) 32px;
  }

  .footer__globe {
    inset-inline-end: 32px;
    bottom: 0;
    width: 300px;
    height: 300px;
  }

  .footer__top {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-8) var(--space-6);
  }

  .footer__stores {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .store { justify-content: flex-start; }
}

@media (min-width: 1024px) {
  .footer {
    padding: 72px var(--grid-margin) 40px;
  }

  .footer__globe {
    inset-inline-end: -140px;
    bottom: -220px;
    width: 520px;
    height: 520px;
  }

  .footer__top {
    grid-template-columns: minmax(0, 360fr) repeat(4, minmax(0, 176fr));
    gap: var(--space-16);
  }

  .footer__brand { grid-column: auto; }
}