/* ==========================================================================
   STOPKA  (prefiks .ftr-)
   Ciepłe, spokojne zamknięcie strony: falista krawędź + 4 kolumny + dolny pasek.
   Mobile-first, wyłącznie tokeny z css/tokens.css.
   ========================================================================== */

.ftr {
  position: relative;
  background: var(--c-surface-2);
  border-top: 1px solid var(--c-line);
  color: var(--c-ink-2);
}

.ftr .container {
  padding-bottom: var(--sp-8);
}

/* ---------- Falista krawędź (dekoracja) ---------- */
.ftr-wave {
  color: var(--c-primary-soft);
  line-height: 0;
  pointer-events: none;
}

.ftr-wave svg {
  display: block;
  width: 100%;
  height: 2.25rem;
}

/* ---------- Siatka kolumn ---------- */
.ftr-grid {
  display: grid;
  gap: var(--sp-7);
  padding-top: var(--sp-8);
}

@media (min-width: 700px) {
  .ftr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-7) var(--sp-6);
  }
  .ftr-col--brand { grid-column: 1 / -1; }
}

@media (min-width: 1100px) {
  .ftr-grid {
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: var(--sp-8) var(--sp-6);
    padding-top: var(--sp-9);
  }
  .ftr-col--brand { grid-column: auto; }
}

.ftr-col { min-width: 0; }

/* ---------- Kolumna marki ---------- */
.ftr-col--brand { max-width: 26rem; }

.ftr-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 2.75rem;
  color: var(--c-ink);
}

.ftr-logo:hover { color: var(--c-primary-strong); }

.ftr-logo__mark {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: var(--r-md);
  background: var(--c-secondary-soft);
  color: var(--c-secondary);
}

.ftr-logo__mark svg {
  width: 1.5rem;
  height: 1.5rem;
}

.ftr-logo__text {
  font-family: var(--f-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-tight);
  color: inherit;
}

.ftr-tagline {
  margin-top: var(--sp-4);
  max-width: 32ch;
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}

.ftr-meta {
  display: grid;
  gap: var(--sp-1);
  margin: var(--sp-4) 0 0;
}

.ftr-meta__item {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* Dane identyfikacyjne usługodawcy (art. 5 ust. 2 uśude) */
.ftr-entity {
  display: grid;
  gap: 0.15rem;
  margin: var(--sp-5) 0 0;
  font-style: normal;
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--c-muted);
}

.ftr-entity__name {
  font-weight: var(--fw-medium);
  color: var(--c-ink-2);
}

/* ---------- Nagłówki i listy kolumn ---------- */
.ftr-title {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--sp-2);
}

.ftr-links {
  display: grid;
  gap: 0;
  margin: 0;
}

.ftr-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  overflow-wrap: anywhere;
  transition: color var(--t-base) var(--ease);
}

.ftr-link:hover { color: var(--c-primary-strong); }

.ftr-cta { margin-top: var(--sp-4); }

/* ---------- Dolny pasek ---------- */
.ftr-bottom {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-line);
}

@media (min-width: 900px) {
  .ftr-bottom {
    grid-template-columns: auto auto 1fr auto;
    gap: var(--sp-5);
  }
}

.ftr-copy {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}

.ftr-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin: 0;
}

.ftr-link--legal { color: var(--c-muted); }

/* Powrót na górę */
.ftr-top {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  justify-self: end;
  border-radius: var(--r-full);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: var(--sh-sm);
  transition: background-color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-base) var(--ease);
}

.ftr-top svg {
  width: 1.25rem;
  height: 1.25rem;
}

.ftr-top:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-on-primary);
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}