/* =========================================================
   Section 8 — Footer
   Figma node 2132:1324 (desktop 1512 × 794)
   Uses the hero circuit background, faded in from #0D1117.
   ========================================================= */

.footer {
  position: relative;
  padding: 136px 0 40px;
  --container-max: 1344px;          /* 1280px content, like Figma */
  background:
    linear-gradient(180deg, var(--color-bg-fade) 0, rgba(13, 17, 23, 0) 170px),
    url("../../assets/images/hero-bg.webp") center -16px / cover no-repeat,
    #020d18;
}

/* ---------- Brand ---------- */
.footer__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 42.54px;
}

.footer__logo-icon {
  width: 272.25px;
  height: 220px;
}

.footer__logo-wordmark {
  width: 557.26px;
  height: 136.46px;
}

.footer__desc {
  max-width: 1140px;
  margin: 56px auto 0;
  font-size: 18px;
  line-height: 1.8;
  text-align: center;
  color: var(--color-text-muted);
}

/* ---------- Contact details (address · phone · email) ---------- */
.footer__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 16px;
  margin-top: 40px;
  font-style: normal;
}

.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 5px 18px 5px 5px;
  border: 1px solid #30363d;
  border-radius: 999px;
  background:
    radial-gradient(50% 100% at 50% 0, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0)),
    rgba(255, 255, 255, 0.02);
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  transition: border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.contact-chip__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1.543px solid #414141;
  border-radius: 50%;
  background: radial-gradient(circle 16.1px at 50% 0, #202020, #141414);
  box-shadow: inset 0 0.159px 0 #777, 0 3.492px 0.794px rgba(0, 0, 0, 0.3);
  color: var(--color-amber);
}

.contact-chip__icon svg { width: 18px; height: 18px; }

.contact-chip:hover {
  border-color: rgba(255, 179, 0, 0.6);
  color: var(--color-white);
  box-shadow: 0 0 18px rgba(255, 179, 0, 0.15);
}

/* ---------- Links + store badges ---------- */
.footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  margin-top: 56px;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  min-height: 56px;
}

.footer__link {
  position: relative;
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.footer__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: var(--color-amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}

@media (hover: hover) {
  .footer__link:hover { color: var(--color-amber); }
  .footer__link:hover::after { transform: scaleX(1); }
}

.footer__link:focus-visible { color: var(--color-amber); }

.footer__stores {
  flex: none;
}

/* ---------- Bottom bar ---------- */
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 30px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__copy {
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.7);
}

.footer__social {
  display: flex;
  gap: 12px;
}

.social-link {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid #30363d;
  border-radius: 50%;
  background:
    radial-gradient(50% 100% at 50% 0, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0)),
    rgba(255, 255, 255, 0.02);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s var(--ease-out);
}

.social-link img { width: 24px; height: 24px; object-fit: contain; }

.social-link:hover {
  border-color: var(--color-amber);
  box-shadow: 0 0 18px rgba(255, 179, 0, 0.3);
  transform: translateY(-2px);
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1199px) {
  .footer__logo-icon     { width: 204px; height: 165px; }
  .footer__logo-wordmark { width: 418px; height: 102.3px; }
  .footer__brand         { gap: 32px; }

  .footer__row {
    flex-direction: column;
    gap: 24px;
  }

  .footer__links { justify-content: center; }
}

@media (max-width: 991px) {
  .footer { padding-top: 96px; }
  .footer__logo-icon     { width: 150px; height: 121px; }
  .footer__logo-wordmark { width: 307px; height: 75.2px; }
  .footer__brand         { gap: 24px; }
  .footer__desc          { font-size: 16px; }
}

/* Mobile — matches section_8_mobile.png (430 wide) */
@media (max-width: 767px) {
  .footer {
    --container-pad: 16px;
    padding: 47px 0 40px;
    background:
      linear-gradient(180deg, var(--color-bg-fade) 0, rgba(13, 17, 23, 0) 120px),
      url("../../assets/images/hero-bg.webp") 72% 0 / auto 100% no-repeat,
      #020d18;
  }

  .footer__brand { gap: 15px; }
  .footer__logo-icon     { width: 96px;  height: 77.6px; }
  .footer__logo-wordmark { width: 197px; height: 48.2px; }

  .footer__desc {
    margin-top: 20px;
    padding-inline: 8px;
    font-size: 14px;
  }

  .footer__contact {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 24px;
    padding-inline: 8px;
  }

  .contact-chip {
    gap: 10px;
    min-height: 44px;
    padding: 4px 16px 4px 4px;
    border-radius: 22px;
    font-size: 13px;
  }

  .contact-chip__icon { width: 34px; height: 34px; }
  .contact-chip__icon svg { width: 16px; height: 16px; }

  .footer__row {
    gap: 22px;
    margin-top: 26px;
  }

  .footer__links {
    gap: 12px 28px;
    min-height: 0;
    max-width: 340px;
  }

  .footer__stores { gap: 9px; }
  .footer__stores .store-badge { --badge-h: 41.7px; }

  .footer__bottom {
    flex-direction: column;
    gap: 16px;
    margin-top: 28px;
    padding-top: 24px;
  }

  .footer__copy { font-size: 13px; line-height: 1.4; }

  .footer__social { gap: 12px; }

  .social-link { width: 36px; height: 36px; }
  .social-link img { width: 13px; height: 13px; }
}