/* Stopka Ciepluszka, wspólna dla wszystkich stron.
   Treść jest w stopka.html, a build.ps1 wkleja ją w miejsce znacznika na każdej stronie.
   Tu jest też znak marki, bo ten plik wczytuje każda strona. */

/* ═══════════════  ZNAK MARKI  ═══════════════
   Cztery opadające kropki w kolorach otulaczy (projekt 2A). Sam rysunek SVG wkleja
   build.ps1 w miejsce znacznika ZNAK w nagłówku i w stopce. */
.mark,.st-marka{display:inline-flex;align-items:center;gap:10px}
.znak{width:1.4rem;height:1.4rem;flex:none;overflow:visible}
.znak .z1{fill:#232020}
.znak .z2{fill:#9C9A99}
.znak .z3{fill:#2B3A57}
.znak .z4{fill:#E4A3B2}
/* po najechaniu kropki lekko opadają jedna po drugiej, jak liście */
.znak circle{transform-box:fill-box;transform-origin:center;transition:transform .4s var(--ease)}
.znak .z2{transition-delay:.04s}
.znak .z3{transition-delay:.08s}
.znak .z4{transition-delay:.12s}
a:hover > .znak circle{transform:translateY(24%)}
/* ciemny motyw: dwie najciemniejsze kropki rozjaśniamy */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .znak .z1{fill:#5B5757}
  :root:not([data-theme="light"]) .znak .z3{fill:#4C6390}
}
:root[data-theme="dark"] .znak .z1{fill:#5B5757}
:root[data-theme="dark"] .znak .z3{fill:#4C6390}
.stopka{
  border-top:1px solid var(--rule);
  background:var(--veil);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:clamp(48px,6vw,68px) 0 26px;
  font-family:var(--sans);
}
.stopka p{margin:0}

.st-siatka{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,3fr);gap:clamp(36px,5vw,64px)}

/* marka w stopce: ten sam znak co w nagłówku */
.st-marka{text-decoration:none;color:var(--ink)}
.st-nazwa{font-size:1.28rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.st-haslo{font-family:var(--serif);font-size:.98rem;line-height:1.55;color:var(--ink-2);margin-top:16px;max-width:26ch}

/* kolumny linków */
.st-kolumny{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:32px 24px}
.stopka .st-tytul{
  font-family:var(--sans);font-size:.72rem;font-weight:600;line-height:1.2;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:3px 0 20px;
}
.st-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.st-lista a{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.95rem;line-height:1.3;color:var(--ink-2);text-decoration:none;
  transition:color .25s ease;
}
.st-lista a:hover{color:var(--ink)}
.st-lista a span{position:relative}
.st-lista a span::after{
  content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px;
  background:currentColor;transition:right .3s var(--ease);
}
.st-lista a:hover span::after{right:0}
.st-kropka{
  width:11px;height:11px;border-radius:50%;flex:none;
  background:var(--c);box-shadow:inset 0 0 0 1px var(--rule-2);
  transition:transform .3s var(--ease);
}
.st-lista a:hover .st-kropka{transform:scale(1.3)}
.st-ikona{width:20px;height:20px;flex:none}

/* dolna linia */
.st-dol{
  display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px 24px;
  margin-top:clamp(40px,5vw,56px);padding-top:22px;border-top:1px solid var(--rule);
  font-size:var(--t-xs);color:var(--muted);
}
.st-dol a{color:inherit;text-decoration:none;transition:color .25s ease}
.st-dol a:hover{color:var(--ink)}

@media (max-width:900px){
  .st-siatka{grid-template-columns:1fr}
}
@media (max-width:600px){
  .st-kolumny{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 18px}
  .st-dol{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .znak circle,.st-lista a,.st-lista a span::after,.st-kropka{transition:none}
}