/* =============================================
   FOOTER — Used on: ALL pages
   ============================================= */
.footer {
  background-color: var(--dark-bg);
  padding: 120px 24px 0;
  color: var(--white);
  overflow: hidden;
}

.footer__container {
  max-width: var(--max-width-wide);
  width: 100%;
  margin: 0 auto;
}

/* ---- Top row: 3 link cols + quote col ---- */
.footer__top {
  display: grid;
  grid-template-columns: 1fr 0.75fr 1fr 1.7fr;
  gap: 56px;
  padding-bottom: 60px;
}

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

.footer__col--quote {
  justify-self: stretch;
  gap: 0;
}

.footer__heading {
  font-family: var(--font-family);
  font-size: 20px;
  font-weight: 500;
  color: var(--white);
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  white-space: nowrap;
}

.footer__address {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-style: normal;
}

.footer__address span {
  font-family: var(--font-family);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(249, 246, 244, 0.9);
}

/* Shared link style (all cols 1–3) */
.footer__link {
  font-family: var(--font-family);
  font-size: 17px;
  font-weight: 400;
  color: rgba(249, 246, 244, 0.9);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  line-height: 1.6;
  transition: opacity 0.2s ease, transform 0.2s ease;
  width: fit-content;
}

/* Hover: dim + slide right. Gated to real pointers — touch browsers latch
   :hover onto the last tapped element and would leave a link stuck dimmed. */
@media (hover: hover) {
  .footer__link:not(.footer__link--plain):hover {
    opacity: 0.6;
    transform: translateX(0.25em);
  }
}

.footer__link:not(.footer__link--plain):active {
  opacity: 0.6;
}

/* Contact details (col 1) — no dim, no slide, just a brightness step */
.footer__link--plain {
  transition: color 0.2s ease;
}

@media (hover: hover) {
  .footer__link--plain:hover {
    color: var(--white);
  }
}

.footer__link--plain:active {
  color: var(--white);
}

@media (prefers-reduced-motion: reduce) {
  .footer__link:hover {
    transform: none;
  }
}

/* ---- Social links with icons ---- */
.footer__social-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.footer__social-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: inherit;
}

.footer__link:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
  border-radius: 3px;
}

/* ---- Quote (replaces old CTA) ---- */
.footer__quote {
  font-family: var(--font-family);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(249, 246, 244, 0.9);
  letter-spacing: -0.005em;
  margin: 0;
}

/* Shortened copy renders only on mobile — see the ≤768px block */
.footer__quote--mobile {
  display: none;
}

/* ---- Back to top ----
   Przycisk lezy WEWNATRZ `.footer__credit` i jest `position: absolute`, zeby
   staly na jednej linii z „Realizacja: Climbly" (ktore jest wyrownane do PRAWEJ),
   a mimo to byl wysrodkowany wzgledem calego kontenera. Ukladu „jeden element
   wysrodkowany, drugi przy prawej krawedzi" nie da sie zrobic w jednym wierszu
   flex/grid bez zalozenia, ze tekst po prawej ma stala szerokosc — dlatego
   absolut, a nie `justify-content`.
   `.footer__credit` ma juz `position: relative` (i `transform`, ktory i tak
   tworzy blok zawierajacy), wiec nic tam nie trzeba bylo dokladac.

   Sam tekst + strzalka — bez ramki, bez tla i BEZ POMARANCZU (zyczenie klienta);
   strzalka ma `stroke: currentColor`, wiec jest zawsze w kolorze napisu.
   Zachowanie kolorystyczne jest kopia `.footer__link--plain` (telefon/e-mail):
   spoczynek `rgba(249,246,244,0.9)`, hover/`:active` → pelna biel. */
.footer__back-to-top {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: none;
  color: rgba(249, 246, 244, 0.9);
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

.footer__back-to-top-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

/* Gated to real pointers — same reason as .footer__link above: touch
   browsers latch :hover onto the last tapped element and never release it. */
@media (hover: hover) {
  .footer__back-to-top:hover {
    color: var(--white);
  }

  .footer__back-to-top:hover .footer__back-to-top-icon {
    transform: translateY(-3px);
  }
}

/* Jedyna reakcja na dotyk — base.css v130 wylacza globalnie podswietlenie
   dotkniecia, wiec bez tego przycisk bylby na telefonie calkiem bez reakcji. */
.footer__back-to-top:active {
  color: var(--white);
}

/* Obwodka focusu ZOSTAJE pomaranczowa — to konwencja calego serwisu
   (`.footer__link:focus-visible` tuz wyzej ma dokladnie to samo) i widzi ja
   wylacznie uzytkownik klawiatury; zakaz pomaranczu dotyczyl wygladu przycisku. */
.footer__back-to-top:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .footer__back-to-top,
  .footer__back-to-top-icon {
    transition: none;
  }

  .footer__back-to-top:hover .footer__back-to-top-icon {
    transform: none;
  }
}

/* ---- Giant wordmark ---- */
.footer__wordmark {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: clamp(64px, 19vw, 283px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--white);
  white-space: nowrap;
  text-align: left;
  user-select: none;
  padding-top: 24px;
  padding-bottom: 4px;
  transform: translateY(-0.117em);
  pointer-events: none; /* decorative (aria-hidden) — must never intercept clicks on copyright/credit above it */
}

/* ---- Copyright watermark (sits above wordmark, right-aligned) ---- */
.footer__copyright {
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 400;
  /* 0.55, nie 0.4 — na #151515 alpha 0.4 dawala kontrast 3.6:1 (WCAG dla malego
     tekstu wymaga 4.5:1; 0.55 daje 5.8:1). Zmierzone, nie zgadywane. */
  color: rgba(249, 246, 244, 0.55);
  text-align: right;
  letter-spacing: 0.01em;
  margin-bottom: 12px;
  transform: translateY(calc(clamp(64px, 19vw, 283px) * -0.117));
}

.footer__credit {
  position: relative;
  z-index: 1; /* keep above the giant decorative wordmark so the link stays clickable */
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 400;
  /* 0.55 jak w .footer__copyright — kontrast 5.8:1 (bylo 0.45 = 4.3:1, za malo). */
  color: rgba(249, 246, 244, 0.55);
  text-align: right;
  letter-spacing: 0.01em;
  margin-bottom: 12px;
  transform: translateY(calc(clamp(64px, 19vw, 283px) * -0.117));
}

.footer__credit-link {
  color: rgba(249, 246, 244, 0.78);
  /* Podkreslenie, nie sam kolor — link w srodku zdania musi byc odroznialny
     bez rozpoznawania barw (audyt dostepnosci: link-in-text-block). */
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.footer__credit-link:hover,
.footer__credit-link:focus-visible {
  color: rgba(249, 246, 244, 1);
}

/* ---- Responsive ---- */
/* === Tablet (≤1024px) === */
@media (max-width: 1024px) {
  .footer {
    padding: 80px 24px 32px;
  }

  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 48px 40px;
    padding-bottom: 40px;
  }

  .footer__wordmark {
    font-size: clamp(64px, 19.2vw, 220px);
    letter-spacing: -0.04em;
  }

  .footer__copyright,
  .footer__credit {
    transform: translateY(calc(clamp(64px, 19.2vw, 220px) * -0.117));
  }
}

/* === Mobile (≤768px) === */
@media (max-width: 768px) {
  .footer {
    padding: 64px 20px 28px;
  }

  /* Układ wzorowany na stopce climbly.pl: dwie kolumny linków w jednym rzędzie,
     pod nimi kontakt na pełną szerokość, a na końcu cytat. Kolejność robi `order`,
     a nie kolejność w DOM — HTML musi zostać w porządku desktopowym. */
  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 48px 20px;
    padding-bottom: 28px;
    align-items: start;
  }

  .footer__col--nav {
    order: 1;
  }

  .footer__col--social {
    order: 2;
  }

  .footer__col--firma {
    order: 3;
    grid-column: 1 / -1;
  }

  .footer__col--quote {
    order: 4;
    grid-column: 1 / -1;
  }

  /* Linki ciaśniej niż na desktopie — w wąskiej kolumnie 18px czyta się jak luki */
  .footer__col {
    gap: 12px;
  }

  .footer__heading {
    font-size: 18px;
    margin-bottom: 4px;
    white-space: normal;
  }

  .footer__back-to-top {
    font-size: 14px;
    gap: 6px;
  }

  .footer__back-to-top-icon {
    width: 13px;
    height: 13px;
  }

  .footer__quote--full {
    display: none;
  }

  .footer__quote--mobile {
    display: block;
  }

  .footer__link,
  .footer__address span {
    font-size: 16px;
  }

  .footer__wordmark {
    font-size: clamp(56px, 18vw, 140px);
    letter-spacing: -0.04em;
  }

  .footer__copyright,
  .footer__credit {
    font-size: 12px;
    transform: translateY(calc(clamp(56px, 18vw, 140px) * -0.117));
  }
}

/* === Bardzo waskie telefony (≤359px, m.in. iPhone SE 1. gen) === */
/* Zmierzone: przycisk 75px + tekst creditu 113px + marginesy nie mieszcza sie
   w jednym wierszu ponizej 360px — realny luz to −1px @340 i −11px @320, czyli
   napisy zachodza na siebie. Tutaj przycisk wraca wiec na WLASNA linie (nadal
   wysrodkowany), a credit zostaje pod nim po prawej. Blok MUSI stac po bloku
   `≤768px` — ta sama specyficznosc, decyduje kolejnosc w zrodle. */
@media (max-width: 359px) {
  .footer__back-to-top {
    position: static;
    transform: none;
    display: flex;
    width: fit-content;
    margin: 0 auto 10px;
  }
}