/* ==========================================================================
   Vincent Footer — stopka jako zaokraglony, kolorowy panel "card"
   (jak assets/css/site/footer.css Vincenta: .footer-inner-main), zamiast
   pelnoszerokiego, delikatnego gradientu Hanoi.

   Kolor tla = akcent marki (--color-accent), NIE fiolet Vincenta —
   przenosimy uklad, nie palete kolorow marki. Kontrast tekstu liczony
   automatycznie przez wbudowany system Hanoi (assets/js/lib/contrast.js).

   WAZNE (naprawiony blad): samo data-contrast="accent" NIE WYSTARCZY —
   ten atrybut wymaga JAWNEGO --color-accent wpisanego inline (bo Strategy
   A w contrast.js celowo ignoruje odziedziczony/globalny --color-accent
   dla elementow oznaczonych data-contrast="accent", zeby nie liczyc
   kontrastu przypadkiem na zlym tle). Bez inline stylu kontrast po cichu
   sie nie liczyl i zostawal domyslny ciemny tekst (--color-text) mimo
   brazowego tla. Naprawione przez powielenie DOKLADNIE tego samego,
   juz dzialajacego wzorca co w partials/components/archive-hero.hbs:
   style="--color-accent: {{ @site.accent_color }}" + data-theme="tag"
   + data-contrast="accent" razem, wszystkie trzy.

   Zachowujemy sticky-reveal (position:sticky) i strukture Hanoi — zmieniamy
   tylko wyglad powierzchni. --- */

.c-footer {
  background: var(--color-accent);
  color: var(--color-on-accent, var(--color-background));
  border-radius: 24px;
  margin-inline: var(--grid-margin);
  margin-bottom: var(--grid-margin);
  overflow: hidden;
}

/* Cienka linia nad paskiem z prawami autorskimi (natywna w Hanoi:
   _footer.scss ma tam border-top na osobnym, jasnym tle) — na kolorowym
   panelu Vincenta wyglada jak zbedna, przypadkowa kreska. Usunieta.

   Odstep miedzy social media a data: natywny Hanoi sumuje TU dwa osobne
   paddingi zaprojektowane dla duzej, pelnoszerokiej stopki —
   --footer-spacing-y-desktop (dol .c-footer__main, 96px) +
   --footer-bar-spacing-y-desktop (gora .c-footer__bar, 24px) = 120px
   na desktopie (64+16=80px na mobile). Za duzo na kompaktowy panel —
   zmniejszone ponizej do stalych, mniejszych wartosci (nie rosnie juz
   na szerszych ekranach). */
.c-footer__bar {
  border-top: 0;
  padding-top: var(--space-16);
}

.c-footer__main {
  padding-bottom: var(--space-32);
}

.c-footer__links-item a,
.c-footer__copy a {
  color: inherit;
}

/* --- Responsywny uklad wielokolumnowy linkow w stopce: 1 kolumna na
   mobile (wszystko pod soba, bez ryzyka nachodzenia elementow na
   siebie), 2 kolumny od tabletu, do 3 kolumn od desktopa — dokladnie
   jak prosiles. Wlasna implementacja (nie kopia ukladu z demo Vincenta
   z naglowkami grup — patrz wczesniejsza analiza: to byla tresc
   specyficzna dla strony demo sprzedawcy, nie funkcja samego motywu).
   CSS Grid zamiast natywnego flex-wrap Hanoi — kazdy link ma wlasna,
   stala komorke, wiec nic sie nie "miesza" niezaleznie od dlugosci
   tekstu czy liczby pozycji. --- */
.c-footer__links {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: start;
  gap: 12px 40px;
  text-align: left;
  width: 100%;
  max-width: 640px;
}

@media (min-width: 640px) {
  .c-footer__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .c-footer__links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 900px;
  }
}

/* --- Wielkosc/font linkow w menu stopki: 1:1 z Vincenta
   (assets/css/site/footer.css: .footer-nav .nav li — 2.4rem/600/1.25,
   font naglowkowy zamiast body). Wczesniej dziedziczyly zwykly, mniejszy
   tekst body (20px/500/Geist) z natywnych stylow Hanoi. --- */
.c-footer__links-item a {
  font-family: var(--gh-font-heading, 'Bricolage', serif);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
}

/* --- Duzy "wordmark" na samym dole (jak Vincent: #site-title-footer).
   Kolor = --color-background (kolor TLA STRONY, nie akcentu) — na tle
   kolorowego panelu stopki to daje efekt subtelnego, "widmowego" napisu,
   dokladnie jak w oryginale.

   "Wtopienie" w dol: w Vincencie kontener stopki (.footer-inner-main)
   ma padding:6.4rem 6.4rem 0 (ZERO na dole) + overflow:hidden — dolna
   krawedz zaokraglonego panelu dosl. obcina dol liter. Replikujemy to:
   .c-footer (nasz odpowiednik) juz ma overflow:hidden, wordmark jest
   ostatnim elementem bez zadnego marginesu/paddingu po nim, a ujemny
   margin-bottom celowo "wypycha" tekst w dol, poza naturalna granice,
   zeby overflow:hidden go realnie przycial (tak jak margin-bottom:
   -0.25em w oryginale Vincenta).

   Dokladny rozmiar liczy assets/js/vincent-footer-wordmark.js (mierzy
   rzeczywista szerokosc tekstu i dopasowuje do kontenera — dziala dla
   kazdej dlugosci nazwy strony). font-size ponizej to tylko bezpieczny,
   NIEWIELKI fallback zanim JS zdazy policzyc dokladna wartosc (albo gdy
   JS jest wylaczony) — celowo konserwatywny, zeby nigdy nie ucinac
   dluzszych nazw w poziomie. --- */
/* --- Okragla ikona (Site Icon) nad wordmarkiem — na wyrazna prosbe
   (2026-08-15). Rozmiar: dosc duza, zeby bylo widac szczegoly
   (drzewo + liscie + petla nieskonczonosci — skomplikowany rysunek),
   ale plynnie skalowana, zeby nie zdominowac reszty stopki na malych
   ekranach. Kolor: czarny/bialy, DOKLADNIE tak jak reszta tekstu w
   stopce — NIE na sztywno, tylko czytany na biezaco z tej samej
   zmiennej --color-on-accent, ktora juz liczy wbudowany system
   kontrastu Hanoi (contrast.js) dla calej stopki. Dzieki temu jesli
   kiedys zmienisz kolor wyrozniajacy w Ghost Admin, ikona automatycznie
   dopasuje sie do nowego koloru, bez zadnej recznej zmiany kodu (patrz
   assets/js/vincent-footer-icon-contrast.js). --- */
.c-footer__icon {
  display: flex;
  justify-content: center;
  padding-top: var(--space-32);
}

.c-footer__icon-img {
  display: block;
  height: clamp(64px, 7vw, 100px);
  width: auto;
}

.c-footer__icon-img.lp-logo-icon-black {
  filter: brightness(0) !important;
}

.c-footer__icon-img.lp-logo-icon-white {
  filter: brightness(0) invert(1) !important;
}

.c-footer__wordmark {
  display: block;
  padding-top: var(--space-32);
  margin-bottom: -0.25em;
  font-family: var(--gh-font-heading, 'Bricolage', serif);
  font-size: clamp(20px, 4vw, 48px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-background);
  text-align: center;
  white-space: nowrap;
}