/* -------------------------------------------------------------------------
   Stopka wariantów: nocna oliwka, kompas, kolumny, wielki napis.
   Ładować po propozycja-d.css / home.css, żeby nadpisać cienki stary pasek.
   ------------------------------------------------------------------------- */

.site-footer.site-footer--lux {
  --ft-bg: var(--noc, #1c2610);
  --ft-ink: var(--krem, #f6efe4);
  --ft-sun: var(--sun, #ffc20a);
  --ft-gutter: var(--gutter, max(16px, calc((100vw - 1180px) / 2)));
  --ft-seam: clamp(39px, 3.6vw, 62px);
  --ft-mark-box: 216px;
  --ft-mark: calc(270px * 1.15);
  /* powietrze po obu stronach wielkiego napisu: tyle, żeby czytało się jako
     decyzja, nie jako ucięcie na krawędzi okna */
  --ft-air-side: clamp(10px, 1vw, 18px);
  --ft-rule: color-mix(in srgb, var(--ft-ink) 14%, transparent);
  /* powietrze od kreski do wielkiego napisu: pusta przerwa pod linijką */
  --ft-word-gap: clamp(40px, 4.6vw, 76px);
  /* pełny dystans od kreski do napisu: linijka na kresce + to powietrze */
  --ft-from-rule: calc(var(--ft-word-gap) + clamp(14px, 1.4vw, 20px) + 1.4 * 0.78rem + 1px);
  /* Kaktus z „O” w KAKTO. Pozycję, szerokość i obrót na każdym breakpoincie
     trzyma site/deco/stopka.json (edytor: /?pilot=1&deco=stopka, DECO.md),
     a npm run deco robi z niego site/stopka-deco.css. Te pokrętła działają
     NAD tym układem, od nasady pnia, w em wielkiego napisu (skalują się
     razem z nim): szybka poprawka z CSS bez edytora, np. na jednej stronie. */
  --ft-cactus-scale: 1;
  --ft-cactus-dx: 0em;
  --ft-cactus-dy: 0em;
  --ft-cactus-rotate: 0deg;
  /* Kaktus rośnie z napisem (vw), kolumny nad nim mają stały stopień, więc
     od ~1600 px czubek dochodził do ostatniego linku „Kontakt” (przy 1920
     zostawało 11 px, przy 2560 wchodził w link). Limit wysokości farby trzyma
     ~35 px luzu; nasada zostaje w „O” (object-position: dół). Do 1440 nie
     działa, bo kaktus jest niższy niż limit. */
  --ft-cactus-max-h: none;

  position: relative;
  z-index: 12;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  /* dół optyczny: pod linią pisma wielkiego napisu zostaje jeszcze skrzynka
     tekstu (~0,073em), więc padding trzyma sam margines optyczny */
  padding: clamp(72px, 8vw, 120px) var(--ft-gutter) clamp(8px, 0.8vw, 14px);
  overflow: visible;
  border-top: 0;
  background: var(--ft-bg);
  color: var(--ft-ink);
  isolation: isolate;
}

/* lekka fala wjeżdża w żółte CTA; dolina przy liściu, szczyty po bokach */
.site-footer--lux .site-footer__seam {
  position: absolute;
  left: 0;
  bottom: 100%;
  z-index: 1;
  display: block;
  width: 100%;
  height: var(--ft-seam);
  margin: 0 0 -1px;
  pointer-events: none;
  fill: var(--ft-bg);
}

.site-footer.site-footer--lux::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  opacity: 0.2;
  background-image: url("/assets/footer-grain.svg");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
}

.site-footer--lux .site-footer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  container-name: footer-lux;
}

.site-footer--lux a {
  text-decoration: none;
}

.site-footer--lux .site-footer__top {
  display: flex;
  order: 1;
  justify-content: space-between;
  align-items: center;
  gap: clamp(32px, 4vw, 72px);
  /* tips kompasu wystają ~64 px poniżej rzędu kolumn, więc realny prześwit nad
     kreską jest o tyle mniejszy niż ta wartość */
  padding-bottom: clamp(72px, 7.6vw, 112px);
}

.site-footer--lux .site-footer__brand {
  display: block;
  flex: 0 0 auto;
  color: var(--ft-ink);
  width: max-content;
}

.site-footer--lux .site-footer__brand:hover,
.site-footer--lux .site-footer__brand:focus-visible {
  color: var(--ft-ink);
}

.site-footer--lux .site-footer__mark-wrap {
  display: block;
  width: var(--ft-mark-box);
  height: 0;
  overflow: visible;
}

.site-footer.site-footer--lux .site-footer__mark,
.site-footer--lux .site-footer__mark {
  display: block;
  width: var(--ft-mark);
  height: var(--ft-mark);
  /* pion: środek na linii rzędu (= środek kolumn).
     poziom: lewa krawędź farby tarczy siada na kolumnie treści, tej samej co
     kreska i mała linijka. Ramiona gwiazdy startują 2,24% wewnątrz boxu svg,
     więc tyle wynosi dopłata; centrowanie w boxie ucinało tarczę przy ~1024. */
  margin-block: calc(var(--ft-mark) / -2);
  margin-inline: calc(var(--ft-mark) * -0.0224) 0;
  stroke: var(--ft-ink);
  stroke-width: 1.7;
  fill: none;
  transform-origin: 50% 50%;
}

.site-footer--lux .site-footer__mark path:nth-of-type(1) {
  fill: color-mix(in srgb, var(--ft-sun) 22%, transparent);
}

.site-footer--lux .site-footer__mark path:nth-of-type(2) {
  fill: var(--ft-sun);
}

.has-motion .site-footer--lux .site-footer__mark {
  animation: site-footer-spin 36s linear infinite;
}

.has-motion .site-footer--lux .site-footer__mark.is-paused {
  animation-play-state: paused;
}

.site-footer.site-footer--lux nav.site-footer__dirs,
.site-footer--lux .site-footer__dirs {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: end;
  gap: clamp(28px, 2.6vw, 44px);
  width: max-content;
  max-width: 100%;
  margin-inline-start: auto;
  min-width: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.site-footer--lux .site-footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.site-footer--lux .site-footer__label {
  margin: 0 0 8px;
  color: var(--ft-ink);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.site-footer--lux .site-footer__col a {
  color: color-mix(in srgb, var(--ft-ink) 70%, transparent);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.012em;
  text-decoration: none;
  text-transform: none;
}

.site-footer--lux .site-footer__col a:hover,
.site-footer--lux .site-footer__col a:focus-visible {
  color: var(--ft-sun);
}

.site-footer--lux .site-footer__wordmark {
  display: flex;
  order: 3;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.22em;
  width: calc(100% + 2 * var(--ft-gutter));
  max-width: none;
  margin: var(--ft-word-gap) calc(-1 * var(--ft-gutter)) 0;
  /* prawa strona minus światło własne „O" (0,0106em zmierzone na Roundo przy
     letter-spacing -0,028em), żeby farba liter kończyła się równo z lewą nogą
     „A"; bez tego prawy margines jest o kilka pikseli większy */
  padding: 0.06em calc(var(--ft-air-side) - 0.0106em) 0 var(--ft-air-side);
  overflow: visible;
  color: var(--ft-sun);
  font-family: var(--font);
  font-size: clamp(2.6rem, 14cqw, 14rem);
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -0.028em;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-footer--lux .site-footer__wordmark > span {
  display: block;
  flex: 0 0 auto;
}

/* Kaktus: kotwica = słowo „Kakto”. Jego szerokość idzie za stopniem, który
   ustawia skrypt dopasowania, więc procenty z stopka-deco.css trzymają
   kaktus na „O” przy każdej szerokości. z -1 w motywie: nasada pnia chowa się
   pod farbą górnego łuku litery. Poniżej tylko awaryjny rozmiar (gdyby
   stopka-deco.css się nie wczytał) i pokrętła; pozycję nadpisuje
   generowany CSS (wyższa specyficzność). */
.site-footer--lux .site-footer__kakto {
  position: relative;
}

.site-footer--lux .site-footer__kakto .deco-motif {
  position: absolute;
  top: -0.52em;
  right: 0.14em;
  width: 0.43em;
  line-height: 0;
  pointer-events: none;
}

.site-footer.site-footer--lux .site-footer__kakto .deco-motif img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 100%;
  translate: var(--ft-cactus-dx) var(--ft-cactus-dy);
  rotate: var(--ft-cactus-rotate);
  scale: var(--ft-cactus-scale);
  max-height: var(--ft-cactus-max-h);
  object-fit: contain;
  object-position: 50% 100%;
}

.site-footer--lux .site-footer__note {
  display: flex;
  order: 2;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 28px;
  width: 100%;
  margin: 0;
  padding-top: clamp(14px, 1.4vw, 20px);
  border-top: 1px solid var(--ft-rule);
  color: color-mix(in srgb, var(--ft-ink) 58%, transparent);
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.site-footer--lux .site-footer__note a {
  color: inherit;
}

/* © i polityka prywatności: jedna cicha grupa po lewej, zawija się na wąskim */
.site-footer--lux .site-footer__legal {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px clamp(18px, 2vw, 28px);
}

.site-footer--lux .site-footer__col a,
.site-footer--lux .site-footer__note a {
  transition: color 160ms ease;
}

.site-footer--lux .site-footer__note a:hover,
.site-footer--lux .site-footer__note a:focus-visible {
  color: var(--ft-sun);
}

.site-footer.site-footer--lux :focus-visible {
  outline: 2px solid var(--ft-sun);
  outline-offset: 4px;
}

/* -------------------------------------------------------------------------
   Wariant under: bez kreski. Wielki napis pod kompasem w 37,5% dawnego
   powietrza od kreski do Kakto (połowa, potem jeszcze −25%); pod napisem
   dawna połowa, a © siada pod A, Realizacja pod O.
   ------------------------------------------------------------------------- */

.site-footer.site-footer--under {
  /* dół liczony od małej linijki, nie od optycznego ogona wielkiego napisu */
  padding-bottom: clamp(22px, 2.4vw, 36px);
}

.site-footer--under .site-footer__top {
  /* tips kompasu mają dojść do krawędzi tego paddingu. Dawne powietrze
     pod kreskę zastępuje --ft-from-rule nad napisem. */
  padding-bottom: clamp(72px, 5.7vw, 84px);
}

.site-footer--under .site-footer__wordmark {
  order: 2;
  margin-top: calc(var(--ft-from-rule) * 0.375);
}

.site-footer--under .site-footer__note {
  order: 3;
  width: calc(100% + 2 * var(--ft-gutter));
  max-width: none;
  margin: calc(var(--ft-from-rule) / 2) calc(-1 * var(--ft-gutter)) 0;
  padding: 0 calc(var(--ft-air-side) - 0.0106em) 0 var(--ft-air-side);
  border-top: 0;
}

.site-footer--under .site-footer__note > span:last-child {
  margin-inline-start: auto;
  text-align: right;
}

/* Desktop: prawa krawędź kolumn = prawa krawędź farby „O” i linijki
   „Realizacja”, czyli pełny spad minus --ft-air-side, nie gutter treści.
   Tylko wariant under: w wariancie rule kolumny trzymają koniec kreski. */
@media (min-width: 1280px) {
  .site-footer.site-footer--lux {
    --ft-cactus-max-h: calc(121px + 2.84vw);
  }
}

/* Wariant B (podgląd): na desktopie kolumny zostają w gutterze, a kaktus
   wisi na prawo od „Kontakt”, na wysokości kolumn (od etykiety do ostatniego
   linku). Kaktus z „O” zostaje tylko na tablecie i telefonie. */
@media (min-width: 981px) {
  .site-footer.site-footer--lux nav.site-footer__dirs,
  .site-footer--lux .site-footer__dirs {
    grid-template-columns: repeat(2, max-content) var(--ft-cactus-side-w, clamp(120px, 9.5vw, 160px));
  }

  .site-footer--lux .site-footer__dirs::after {
    content: "";
    /* Stała wysokość z ujemnymi marginesami: kaktus nie wpływa na wysokość
       rzędu (i stopki), wysokość dyktują kolumny. Czubek 20 px nad etykietami. */
    align-self: start;
    height: 200px;
    margin: -20px 0 -100px;
    background: url("/assets/motywy/06-kaktus-kolumnowy.svg") 50% 0 / contain no-repeat;
    pointer-events: none;
  }

  .site-footer.site-footer--lux .site-footer__kakto .deco-motif[data-deco="stopka-kaktus"] {
    display: none;
  }
}

/* Wariant rule (narzędzia): linijka z kreską stoi nad napisem, ~90 px nad
   „O”, a „Realizacja” kończy się nad jego lewą częścią. Mniejszy kaktus
   mieści się pod kreską. */
@media (min-width: 681px) {
  .site-footer.site-footer--lux:not(.site-footer--under) {
    --ft-cactus-scale: 0.6;
  }
}

@keyframes site-footer-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 980px) {
  .site-footer.site-footer--lux {
    /* tablet: kompas ~⅓ szerokości przytłaczał kolumny; 200 px trzyma rytm */
    --ft-mark-box: 164px;
    --ft-mark: 200px;
    width: 100%;
    margin: 0;
    padding-top: 72px;
  }

  .site-footer.site-footer--lux nav.site-footer__dirs,
  .site-footer--lux .site-footer__dirs {
    gap: 28px 32px;
  }
}

@media (max-width: 680px) {
  .site-footer.site-footer--lux {
    /* telefon: kompas jako znak, nie drugi bohater obok wielkiego napisu.
       Tarcza sięga tipsów gwiazdy (0,9375 boxu svg), więc box = znak · 0,9375 */
    --ft-mark-box: 120px;
    --ft-mark: 128px;
    --ft-word-gap: 56px;
    width: 100%;
    margin: 0;
    padding: 56px var(--ft-gutter) calc(28px + env(safe-area-inset-bottom));
  }

  .site-footer.site-footer--under {
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
  }

  /* flow-root, bo inaczej ujemny margines svg zbiega się z marginesem
     rodzica i zjeżdża cały lockup, zamiast wycentrować tarczę w boxie */
  .site-footer--lux .site-footer__mark-wrap {
    display: flow-root;
    height: var(--ft-mark-box);
  }

  .site-footer.site-footer--lux .site-footer__mark,
  .site-footer--lux .site-footer__mark {
    margin-block: calc((var(--ft-mark) - var(--ft-mark-box)) / -2);
    margin-inline: calc(var(--ft-mark) * -0.0224) 0;
    stroke-width: 2.4;
  }

  .site-footer--lux .site-footer__brand {
    margin-top: 0;
  }

  .site-footer--lux .site-footer__top,
  .site-footer--under .site-footer__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 44px;
    padding-bottom: 0;
  }

  /* Oferta | Kontakt obok siebie (mail mieści się w połowie szerokości) */
  .site-footer.site-footer--lux nav.site-footer__dirs,
  .site-footer--lux .site-footer__dirs {
    width: 100%;
    max-width: none;
    margin-inline-start: 0;
    grid-template-columns: 1fr 1fr;
    justify-content: start;
    gap: 32px 24px;
  }

  /* wiersz linku ~40 px: pole dotyku bez rozdmuchanej listy */
  .site-footer--lux .site-footer__col {
    gap: 0;
  }

  .site-footer--lux .site-footer__label {
    margin-bottom: 6px;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
  }

  .site-footer--lux .site-footer__col a {
    display: block;
    padding-block: 9px;
    font-size: 1rem;
    line-height: 1.35;
  }

  /* Wielki napis w marginesie strony, nie od krawędzi do krawędzi:
     skrypt dopasowuje stopień do szerokości kolumny treści. */
  .site-footer--lux .site-footer__wordmark,
  .site-footer--under .site-footer__wordmark {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    margin: var(--ft-word-gap) 0 0;
    padding: 0.06em 0 0;
    font-size: clamp(3.6rem, 22vw, 6rem);
    line-height: 0.88;
    white-space: normal;
  }

  /* lewa noga „A" i „K" ma własne światło; cofamy je, żeby farba liter
     stała na tej samej linii co kolumny nad nią */
  .site-footer--lux .site-footer__wordmark > span {
    margin-left: -0.012em;
  }

  /* prawa: jedna kolumna pod napisem, wyrównana do lewej jak cała stopka */
  .site-footer--lux .site-footer__note,
  .site-footer--under .site-footer__note {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    margin: 28px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--ft-rule);
    font-size: 0.8125rem;
  }

  .site-footer--under .site-footer__note > span:last-child {
    margin-inline-start: 0;
    text-align: left;
  }

  .site-footer--lux .site-footer__note a {
    display: inline-block;
    padding-block: 6px;
    margin-block: -6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .has-motion .site-footer--lux .site-footer__mark,
  .site-footer--lux .site-footer__mark {
    animation: none;
  }
}