/* ==========================================================================
   Підвал
   ========================================================================== */

.footer {
  padding: 96rem 0;
  background: var(--c-bg);
}

.footer .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24rem;
}

.footer__divider {
  display: block;
  width: 100%;
  height: 1rem;
  background: var(--c-line);
}

.footer__cols {
  display: flex;
  align-items: flex-start;
  gap: 194rem;
  width: 100%;
}

/* у макеті колонка — заголовок 24, відступ 14, далі рядки по 22 з кроком 14 */
.footer__col {
  display: flex;
  flex-direction: column;
  gap: 14rem;
}

/* ширини колонок з макета — щоб проміжки 194 давали ті самі позиції */
.footer__col:nth-child(1) { width: 233rem; }
.footer__col:nth-child(2) { width: 152.45rem; }
.footer__col:nth-child(3) { width: 159.97rem; }
.footer__col:nth-child(4) { width: 117.02rem; }

.footer__heading {
  font-weight: 600;
  font-size: 20rem;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--c-red);
}

/* відступ згори дає gap колонки: власний margin тут не спрацював би —
   скидання `ul[class] { margin: 0 }` в base.css специфічніше за клас */
.footer__list {
  display: flex;
  flex-direction: column;
  gap: 14rem;
  /* висота рядка потрібна саме тут: посилання інлайнове, і рядковий бокс
     усе одно рахується від line-height самого li */
  line-height: 22rem;
}

.footer__list a {
  font-weight: 500;
  font-size: 16rem;
  line-height: 22rem;
  letter-spacing: 0.8rem;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.footer__list a:hover {
  color: var(--c-red);
}

.footer__copy {
  width: 100%;
  font-weight: 500;
  font-size: 16rem;
  line-height: 22rem;
  letter-spacing: 0.8rem;
  text-align: center;
}

/* ========================================================== мобільна версія */
@media (max-width: 479px) {
  .footer {
    padding: 60rem 0;
  }

  .footer .container {
    align-items: center;
    gap: 40rem;
    padding-inline: 16rem;
  }

  .footer__logo {
    width: 171rem;
    height: 98.7rem;
  }

  .footer__cols {
    flex-direction: column;
    align-items: center;
    gap: 40rem;
  }

  .footer__col,
  .footer__col:nth-child(1),
  .footer__col:nth-child(2),
  .footer__col:nth-child(3),
  .footer__col:nth-child(4) {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
  }

  .footer__heading,
  .footer__list {
    text-align: center;
  }

  .footer__list {
    align-items: center;
  }
}