/* ==========================================================================
   MIROLINE — подвал
   ========================================================================== */

.footer {
  padding-block: var(--sp-16) var(--sp-8);
  font-size: var(--fs-sm);
}

/* На «О компании», FAQ и «Условиях» страница кончается тёмной секцией того же
   цвета, что и подвал: без линии они сливались в одно пятно, и подвал начинался
   не там, где на светлых страницах. Линия возвращает ему одинаковую границу. */
main > .on-dark:last-child { border-bottom: 1px solid var(--c-line-on-dark); }

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 5rem;
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid var(--c-line-on-dark);
}

.footer__tagline {
  margin-top: var(--sp-6);
  color: var(--c-on-dark-2);
  font-size: var(--fs-xs);
  line-height: 1.7;
}

.footer__cols {
  display: grid;
  /* каталогу отданы две доли из четырёх: внутри он идёт в два столбика */
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--sp-8);
}

.footer__col--catalog ul {
  columns: 2;
  column-gap: var(--sp-8);
}

.footer__title {
  /* подпись колонки, а не заголовок страницы — набирается основным шрифтом */
  font-family: var(--f-text);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-white);
}

.footer__col li + li { margin-top: var(--sp-3); }

.footer__col a,
.footer__col li {
  color: var(--c-on-dark-2);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

.footer__col a:hover { color: var(--c-white); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-6);
  padding-top: var(--sp-8);
  font-size: var(--fs-xs);
  color: var(--c-on-dark-2);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
}

.footer__legal { margin-left: auto; }

.footer__legal a {
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

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

/* --- Логотип разработчика ---------------------------------------------------- */

/* логотип и подпись студии — колонкой у правого края, на отдельной строке
   под остальным содержимым */
.footer__made {
  display: grid;
  justify-items: end;
  gap: var(--sp-2);
  margin-left: auto;
}

.footer__studio {
  color: var(--c-on-dark-2);
  font-weight: bold;
  font-size: 1.07em;
}

.footer__dev {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  /* без opacity: она опускала контраст подписи ниже нормы AA */
  color: var(--c-on-dark-2);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

.footer__dev:hover { color: var(--c-white); }

/* логотип залит текущим цветом через маску: так он монохромный
   и подсвечивается вместе со ссылкой при наведении */
.footer__dev-logo {
  width: 5.5rem;
  aspect-ratio: 533 / 81;
  /* знак декоративный, к нему требования по контрасту не применяются */
  opacity: .85;
  background: currentColor;
  -webkit-mask: url('../images/codi-way.svg') center / contain no-repeat;
  mask: url('../images/codi-way.svg') center / contain no-repeat;
}