/* ============================================================
   FOOTER «подвал» (Figma node 924:3700) — последний блок главной.
   Скруглённая сверху панель с тёмным фото-гаражом: соцсети + меню +
   «DO GÓRY» → лого + копирайт → политика/«Stworzone z». Снизу авто
   (Porsche) и лента caution-tape. Десктоп pixel-perfect к 1440.
   ============================================================ */
.ft {
  width: 100%;
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.08) 100%),
    var(--dark-1100);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 0 0;          /* без боковых отступов — панель во всю ширину */
  box-sizing: border-box;
  font-family: var(--ff-body);
}

/* ── Панель (rounded top 32, фото-фон) ──────────────────────── */
.ft__panel {
  align-self: stretch;
  position: relative;
  height: 775.7px;
  border-radius: 32px 32px 0 0;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* готовый фон-артборд из Figma (assets/Footer bg.png) — единственный фон */
.ft__bg {
  position: absolute; inset: 0; z-index: 0;
  background: var(--dark-1100) url('../../public/assets/footer/footer-bg.png') center bottom / cover no-repeat;
  border-radius: 32px 32px 0 0;
  pointer-events: none;
}

/* ── Основной контент (1392, по центру) ─────────────────────── */
.ft__main {
  width: 1392px; max-width: 100%;
  display: flex; flex-direction: column; align-items: center;
  position: relative; z-index: 1;
}

/* шапка: соцсети | меню | «do góry» */
.ft__header {
  align-self: stretch;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 64px; gap: 20px; box-sizing: border-box;
}

/* соцсети (пилюля из 3 кнопок) */
.ft__social {
  height: 48px; border-radius: 8px; overflow: hidden;
  display: flex; align-items: center;
}
.ft__soc {
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 12px 16px;
  background: var(--light-40);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-right: 1px solid var(--light-40);
  transition: background .2s ease;
}
.ft__soc:last-child { border-right: 0; }
.ft__soc:hover { background: var(--light-80); }
/* иконки приглушённо-серые, по ховеру — ЧИСТО БЕЛЫЕ.
   filter brightness(0)+invert нормализует любой исходный цвет иконки:
   invert(.62) = серый, invert(1) = чистый белый #fff */
.ft__soc img { width: 20px; height: 20px; display: block; filter: brightness(0) invert(.62); transition: filter .2s ease; }
.ft__soc:hover img { filter: brightness(0) invert(1); }
/* Facebook чуть меньше, TikTok чуть больше */
.ft__soc[aria-label="Facebook"] img { width: 21px; height: 21px; }
.ft__soc[aria-label="TikTok"] img  { width: 22px; height: 22px; }

/* меню-пилюля */
.ft__nav {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px; border-radius: 8px;
  background: var(--light-40);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.ft__nav a {
  font-family: var(--ff-body); font-weight: 400;
  font-size: 13px; line-height: 20px; letter-spacing: var(--ls-body);
  text-transform: uppercase; color: var(--light-600);
  white-space: nowrap; transition: color .2s ease;
}
.ft__nav a:hover { color: var(--light-1000); }
.ft__sep { width: 1px; height: 8px; flex: none; background: var(--light-80); }

/* «do góry» */
.ft__totop { width: 156px; display: flex; justify-content: flex-end; }
.ft__totop-btn {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px; border-radius: 8px;
  background: var(--light-40);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: var(--light-600);
  transition: background .2s ease, color .2s ease;
}
.ft__totop-btn span {
  font-family: var(--ff-body); font-weight: 400;
  font-size: 13px; line-height: 20px; letter-spacing: var(--ls-body);
  text-transform: uppercase; white-space: nowrap;
}
.ft__totop-btn:hover { background: var(--light-80); color: var(--light-1000); }
.ft__arrow {
  width: 11px; height: 11px; flex: none; display: block;
  transform: rotate(-90deg);          /* » → ↑ (наверх) */
}

/* лого + копирайт */
.ft__logo-sec {
  align-self: stretch;
  display: flex; flex-direction: column; align-items: center;
  padding: 104px 0; gap: 52px; text-align: center;
}
.ft__logo {
  width: 89.08px; height: auto;
  object-fit: contain; display: block;
}
.ft__copy {
  margin: 0;
  font-family: var(--ff-body); font-weight: 400;
  font-size: 14px; line-height: 24px; letter-spacing: var(--ls-body);
  color: rgba(255,255,255,0.48); white-space: nowrap;
}

/* ── Низ: политика + «stworzone z» ──────────────────────────── */
.ft__bottom {
  align-self: stretch; flex: 1;
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 40px 64px; gap: 20px; box-sizing: border-box;
}
.ft__policy {
  margin: 0;
  font-family: var(--ff-body); font-size: 14px; line-height: 24px;
  letter-spacing: var(--ls-body); color: rgba(255,255,255,0.48);
  text-decoration: none; transition: color .2s ease;
}
.ft__policy:hover { color: var(--light-1000); }   /* по наведению — белый */
.ft__legal { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ft__legal-sep { width: 1px; height: 12px; background: rgba(255,255,255,0.2); flex: none; }
.ft__made {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--ff-body); font-size: 14px; color: var(--light-600);
}
/* логотип vent studio — единый svg из Figma (без подмены шрифтов) */
.ft__vent-logo { height: 28px; width: auto; display: block; }

/* ── Декор: тонкая рамка-glow + авто ────────────────────────── */
.ft__glow {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 1292.73px; height: 732px; z-index: 3; pointer-events: none;
}
.ft__car {
  position: absolute; top: 546.67px; left: 50%; transform: translateX(-50%);
  width: 574.55px; height: auto; z-index: 4;
  object-fit: contain; pointer-events: none;
}

/* ── Лента caution-tape по всей нижней грани (вне паддинга .ft) ── */
.ft__tape {
  position: absolute; bottom: 0; left: 0; right: 0;
  width: auto; height: 16px; overflow: hidden; z-index: 6;
  display: flex; align-items: flex-end;
}
.ft__tape img {
  flex: 1 1 0; min-width: 0; height: 63px;
  object-fit: cover; object-position: center; display: block;
}

/* ── Адаптив ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  /* планшет: поджимаем низ — панель ниже, низ-блок без flex:1 (меньше пустого места) */
  .ft__panel { height: auto; min-height: 0; }
  .ft__header { flex-wrap: wrap; padding: 40px; gap: 16px; justify-content: center; }
  .ft__totop { width: auto; }
  .ft__logo-sec { padding: 48px 0 24px; gap: 32px; }
  .ft__bottom { flex: none; padding: 24px 40px 40px; }
  .ft__car { position: static; width: 360px; margin: 8px auto -8px; transform: none; }
  .ft__glow { display: none; }
}
@media (max-width: 768px) {
  /* мобайл pixel-perfect (Figma 492:736): pad 16, меню — вертикальная пилюля, соц-ряд, лого 72 */
  .ft { padding: 16px; }
  .ft__panel { height: auto; min-height: 660px; border-radius: 16px; }   /* компактнее — меньше пустого места до авто */
  /* фон футера на мобайле = вертикальное фото Footer_mob_bg.png;
     якорим по низу, чтобы машина (внизу фото) была видна целиком, а не обрезалась */
  .ft__bg {
    background: var(--dark-1100) url('../../public/assets/footer/footer-mob-bg.png') center bottom / cover no-repeat;
    border-radius: 16px;
  }
  /* лента caution-tape уже впечатана в мобильный фон — убираем дубль (он давал лишний отступ снизу) */
  .ft__tape { display: none; }
  /* затемняющий градиент сверху над фото — контент-карта (как .container в макете) */
  .ft__main {
    align-self: stretch; border-radius: 16px;
    background: linear-gradient(180deg, #0f0f0f 0%, rgba(15,15,15,0) 55%);
    padding: 12px;
  }
  .ft__header { flex-direction: column; align-items: stretch; padding: 0; gap: 10px; }
  .ft__totop { display: none; }                 /* в мобильном дизайне «do góry» нет */
  .ft__nav { order: 0; flex-direction: column; align-items: center; gap: 12px; }
  .ft__sep { width: 9px; height: 1px; }          /* разделители горизонтальные */
  .ft__social { order: 1; align-self: stretch; }
  .ft__soc { flex: 1; }
  .ft__logo-sec { padding: 24px 0 16px; gap: 16px; }
  .ft__logo { width: 72px; height: auto; }
  .ft__copy { white-space: normal; font-size: 13px; }
  /* политика + «stworzone z» — сразу под копирайтом (как в макете), не растягиваем flex:1 */
  .ft__bottom { flex: none; flex-direction: column; align-items: center; gap: 8px; padding: 8px 12px 0; text-align: center; }
  .ft__car { display: none; }   /* машина уже есть на фоне Footer_mob_bg — убираем дубль-наложение */
}