/* ===============================
   bottom.css
   ONLY FOOTER (SAFE)
   НИЧЕГО ГЛОБАЛЬНОГО НЕ ТРОГАЕМ
   =============================== */

/* ФУТЕР: 80px ниже последнего контента (на всех страницах) */
.bottom{
  position: relative;
  z-index: 1;

  /* критично: отступ строго 80px от контента */
  margin: 80px auto 0;

  width: 100%;
  max-width: 1440px;
  box-sizing: border-box;
  padding: 24px 24px 32px;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 80px);
  flex-wrap: nowrap;

  /* весь текст футера берём из переменной темы */
  color: var(--bottom-text);

  /* броня от mobile.css (он подключён ПОСЛЕ bottom.css) */
  background: transparent !important;

  /* на всякий: ничего не режем внутри футера */
  overflow: visible;
}

/* ✅ Full-bleed градиент под футером на всю ширину экрана
   ВАЖНО: НЕ масштабируем через scaleX(1/zoom) — это и давало сдвиги.
   Центруем классически: 100vw + translateX(-50%).
*/
/* ✅ Full-bleed градиент под футером: НЕ зависит от zoom/vw */
.bottom::before{
  content:"";
  position:absolute;
  inset:0;

  left:50%;
  transform: translateX(-50%);

  /* КЛЮЧ: огромная ширина, чтобы перекрыть любой экран */
  width: 10000px;

  background: var(--grad-bottom);
  z-index:-1;
  pointer-events:none;
}



/* ✅ чтобы контент был поверх ::before всегда */
.bottom > *{
  position: relative;
  z-index: 1;
}

/* Главная: если футер внутри абсолютного макета (hero) — оставляем “прибивку”
   Включается только когда ВНУТРИ .stage есть .card-3 (как на главной)
   ВАЖНО: центрируем БЕЗ transform, чтобы не конфликтовало с ::before.
*/
.stage .card-3 ~ .bottom{
  position: absolute;
  top: 2698px;

  left: 0;
  right: 0;
  margin: 0 auto;

  width: 1440px;
  max-width: none;

  transform: none; /* ← ключевой фикс */
}

/* Типографика футера */
.b-col{
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.25vw, 22px);
  line-height: 1.4;

  color: inherit;

  white-space: pre-line;
  text-align: left;
}
.b-legal{
  max-width: 150px;
  opacity: .85;
}
.b-legal small{
  display: block;
  font-size: 15px;
  line-height: 1.35;
}

.b-social{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  flex:0 0 auto;
}
.b-social-text{ margin:0 0 15px 0; }
.b-social-icons{ display:flex; align-items:center; gap:16px; }

.b-phones,
.b-address,
.b-hours{ flex:0 0 auto; }

.b-hours{ line-height:1.3; }

/* Соц-иконки в футере */
.bottom .soc{
  position: static;
  width: clamp(28px, 2.2vw, 36px);
  height: clamp(28px, 2.2vw, 36px);
  display: block;
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}
.bottom .soc img{ width:100%; height:100%; display:block; }
.bottom .soc:hover{ transform: scale(1.04); opacity: .95; }

/* ссылки внутри футера — всегда цвет как текст */
.bottom a,
.b-address{
  text-decoration: none !important;
  color: inherit !important;
}
.bottom a:hover,
.b-address:hover{
  text-decoration: none !important;
}

/* На узких экранах разрешаем перенос, чтобы не было “огрызка” */
@media (max-width: 900px){
  .bottom{
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}