/* ============================================
   Footer
   Figma: 7542:2446 — тёмный #222: лого + соцсети,
   4 колонки ссылок, юр-строка с 18+
   ============================================ */

.footer {
  background: var(--c-dark-gray);
  padding-bottom: 14px;
  padding-top: 80px;
}

/* ---------- Верх: лого + соцсети ---------- */

.footer__top {
  align-items: center;
  border-bottom: 1px solid rgba(239, 237, 232, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  padding-bottom: 24px;
}

.footer__logo img {
  height: 54px;
  width: 200px;
}

.footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Соц-пилюля: рамка + JetBrains Mono Italic 14 терракота (запасной вид для
   соцсети без иконки) */
.footer__social {
  border: 1px solid rgba(239, 237, 232, 0.1);
  color: var(--c-terracotta-dark);
  font-family: var(--font-mono);
  font-size: 14px;
  font-style: italic;
  line-height: normal;
  padding: 8px 24px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.footer__social-icon {
  display: none;
}

.footer__social-icon img {
  display: block;
}

/* Опознанная соцсеть — кнопка 97×44 с иконкой (макет 7879:5839); подпись
   остаётся в разметке доступным именем ссылки. */
.footer__social--icon {
  align-items: center;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  padding: 0;
  width: 97px;
}

.footer__social--icon .footer__social-icon {
  display: inline-flex;
}

.footer__social--icon .footer__social-label {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.footer__social:hover {
  background: rgba(239, 237, 232, 0.08);
  border-color: rgba(239, 237, 232, 0.25);
}

/* ---------- Колонки ссылок ---------- */

/* Колонки по актуальному макету (7879:5846): пять колонок 284/284/284/225/284
   при контейнере 1840, межколонник 120. Узкая четвёртая — «Рекламодателям»
   с кнопкой медиакита. */
.footer__main {
  border-bottom: 1px solid rgba(239, 237, 232, 0.1);
  column-gap: 120px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 284fr)) minmax(0, 225fr) minmax(0, 284fr);
  padding-block: 24px; /* Макет 7879:5846: линия → 24 → колонки → 24 → юр-линия */
  row-gap: 40px;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Кнопка скачивания файла (медиакит) — в макете стоит в колонке
   «Рекламодателям» между заголовком и ссылками, ширина по содержимому. */
.footer__file {
  align-self: flex-start;
  flex-direction: column;
  gap: 4px;
  line-height: 1.2;
  padding: 14px 24px;
}

.footer__file-size {
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0.6;
}

.footer__col-title {
  color: var(--c-terracotta-dark);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: normal;
  text-transform: uppercase;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer__links a,
.footer__links .footer__link-plain {
  color: var(--c-cream);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: normal;
  text-transform: uppercase;
  transition: color 0.2s ease;
  white-space: nowrap; /* Пункты колонок в макете однострочные («портфолио спецпроектов») */
}

/* Пункт без адреса выглядит так же, как остальные, и станет ссылкой, когда
   адрес появится в настройках: «#»-заглушки уводят в никуда. */
.footer__link-plain {
  cursor: default;
}

.footer__links a:hover {
  color: var(--c-terracotta-dark);
}

/* Типы пунктов колонки «Контакты» (макет 7879:5870) */

.footer__link-heading {
  color: var(--c-gray);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: normal;
  text-transform: uppercase;
}

.footer__links .footer__link--phone {
  font-family: var(--font-serif-text);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: -0.03em;
  text-transform: none;
}

.footer__links .footer__link--mail,
.footer__links .footer__link--tg {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: none;
}

.footer__links .footer__link--tg {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.footer__link-tg-icon img {
  display: block;
  width: 22px;
}

/* ---------- Юр-строка ---------- */

.footer__bottom {
  align-items: center;
  color: rgba(214, 214, 214, 0.5);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 14px;
  font-style: italic;
  gap: 8px 24px;
  justify-content: space-between;
  line-height: normal;
  padding-top: 16px;
}

.footer__legal {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.footer__legal a {
  transition: color 0.2s ease;
}

.footer__legal a:hover {
  color: var(--c-cream);
}

.footer__legal span[aria-hidden] {
  color: rgba(214, 214, 214, 0.3);
  font-family: var(--font-sans);
  font-style: normal;
}

/* ---------- Возрастная метка + дисклеймер (макет 7879:5901) ---------- */

.footer__age-row {
  align-items: center;
  display: flex;
  gap: 16px;
  max-width: 1049px;
  padding-top: 24px;
}

.footer__age {
  align-items: center;
  border: 1px solid rgba(214, 214, 214, 0.5);
  border-radius: 50%;
  color: rgba(214, 214, 214, 0.5);
  display: inline-flex;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  height: 34px;
  justify-content: center;
  letter-spacing: -0.02em;
  width: 34px;
}

.footer__disclaimer {
  color: rgba(214, 214, 214, 0.5);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.4;
}

/* ---------- Адаптив ---------- */

@media (max-width: 1024px) {
  .footer {
    padding-top: 56px;
  }

  .footer__main {
    display: grid;
    gap: 40px;
    grid-template-columns: repeat(2, 1fr);
    padding-block: 32px 48px;
  }
}

@media (max-width: 560px) {
  .footer {
    padding-top: 40px;
  }

  .footer__main {
    grid-template-columns: 1fr;
  }

  /* Мобильный макет набирает футер кеглем 14 (Meta text S), а не 16: строка
     выходит ровно 18, колонка — 104, шаг между колонками — 144. На 16px
     строки были по 21-22, и футер вырастал на 162 против макета. */
  .footer__col-title,
  .footer__links a,
  .footer__links .footer__link-plain,
  .footer__link-heading {
    font-size: 14px;
  }

  .footer__social {
    padding: 8px 16px;
  }

  /* Мобильный макет: вместо подписей — плитки 58×26 с иконками (7905:6894).
     Подпись остаётся в разметке доступным именем ссылки. */
  .footer__socials {
    gap: 8px;
  }

  .footer__social--icon {
    align-items: center;
    display: inline-flex;
    height: 26px;
    justify-content: center;
    padding: 0;
    width: 58px;
  }

  .footer__social--icon .footer__social-icon {
    display: inline-flex;
  }

  .footer__social--icon .footer__social-label {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}