/* ==========================================================================
   Подвал сайта (.footer), разметка — template-parts/site-footer.php.
   Mobile-first: база 375, затем min-width 1024 / 1440 / 1920.
   Сам промо-блок .promo — компонент kit (ui-kit.css); здесь только
   модификатор .promo--gradera с фоновым фото подвала.

   Важно: подвал НЕ использует .container — по макету панели идут почти
   от края до края (поля 5px на 375 и 10px начиная с 1024).
   ========================================================================== */

.footer {
  background-color: var(--color-white-bg);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-inline: auto;
  padding: 5px;
}

.footer__panel {
  background-color: var(--color-grey);
  border-radius: 10px;   /* в макете у панелей подвала радиус 10, не --radius-md */
}

/* --- Контакты -------------------------------------------------------------*/
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 15px;
}

.footer__contact-main {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.footer__logo {
  flex: 0 0 auto;
  width: 76px;
  height: auto;
}

.footer__contact-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer__phone,
.footer__email {
  color: var(--color-black);
  text-transform: uppercase;
}

/* На 375 почта мельче телефона; с 1024 обе строки — H2 (класс .h2) */
.footer__email {
  font-size: 20px;
}

.footer__address {
  font-size: var(--fs-xxs);
  color: var(--text-muted);
}

/* --- Меню + промо ---------------------------------------------------------*/
.footer__menu {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer__columns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 15px;
}

.footer__col-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-black);
}

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

.footer__link {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  transition: color var(--transition);
}

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

.footer__promo { padding: 0 15px 15px; }

/* --- Реквизиты ------------------------------------------------------------*/
.footer__legal {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 15px;
}

.footer__legal-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--fs-xxs);
  color: var(--text-muted);
}

.footer__dev {
  font-size: var(--fs-xxs);
  color: var(--text-muted);
  transition: color var(--transition);
}

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

/* ==========================================================================
   Планшет ≥1024: контакты и реквизиты — в строку, меню в 3 колонки,
   промо остаётся под колонками на всю ширину.
   ========================================================================== */
@media (min-width: 768px) {
  .footer__inner { padding: 10px; }

  .footer__contact {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    padding: 20px;
  }

  .footer__contact-main { gap: 40px; }
  .footer__email { font-size: var(--fs-h2); }   /* с 1024 почта того же размера, что и телефон */
  .footer__address { font-size: var(--fs-xs); }

  .footer__menu { gap: 0; }

  .footer__columns {
    flex-direction: row;
    gap: 0;
  }

  .footer__col {
    flex: 1 1 0;
    min-width: 0;
    padding: 20px;
  }

  .footer__col-title { font-size: var(--fs-xs); }

  .footer__promo { padding: 20px; }

  .footer__legal {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px;
  }

  .footer__legal-info { font-size: var(--fs-xs); }
  .footer__dev { font-size: var(--fs-xs); }

  /* Промо GRADERA: чёрная плашка + фото, сдвинутое вправо (как в макете) */
  .promo--gradera { background-color: #000100; }

  .promo--gradera::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      linear-gradient(90deg,
        #000100 0%,
        #000100 33%,
        rgba(0, 1, 0, 0.6) 52%,
        rgba(0, 1, 0, 0.2) 75%,
        rgba(0, 1, 0, 0) 90%),
      var(--img-promo-gradera) right center / cover no-repeat;
  }
}

/* ==========================================================================
   Ноутбук ≥1440: меню и промо встают в строку 50/50
   ========================================================================== */
@media (min-width: 1025px) {
  .footer__contact { padding: 30px 40px; }
  .footer__address { font-size: var(--fs-s); }

  .footer__menu {
    flex-direction: row;
    gap: 20px;
  }

  .footer__columns {
    flex: 1 1 0;
    min-width: 0;
  }

  .footer__col { padding: 40px; }

  .footer__promo {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    padding: 20px 40px 20px 0;
  }

  .footer__legal { padding: 20px 40px; }
}