/* ===== STOPKA (2026-09) =========================================================
   Szablon: home/templates/home/includes/stopka.html (ladowany z base.html jednym
   {% include %}). Ten arkusz jest wciagany z tego samego include, wiec stoi PO
   nowa.css, telefon.css, menu.css i social.css i nadpisuje ich stare reguly stopki.

   Paleta ksiegi znaku na granacie --granat #171B2B:
     naglowki kolumn  #99C5E2 (--nieb-200)
     linki            #c9d3dc, hover #fff
     hairline         biel 14% (odpowiednik --linia na ciemnym tle)
   Kroje: Poppins w naglowkach kolumn, Roboto w linkach. Bez zaokraglen.

   Kolumny to <details open>. Bez JS zostaja rozwiniete na kazdej szerokosci;
   ponizej 640 px skrypt z include zwija je w sekcje rozwijane.
   ============================================================================== */

.stopka{--st-naglowek:#99C5E2;--st-tekst:#c9d3dc;--st-linia:rgba(255,255,255,.14);
  background:var(--granat)!important;color:var(--st-tekst);
  font-family:Roboto,Arial,sans-serif;font-size:15px;padding:64px 0 26px}

/* --- siatka ---------------------------------------------------------------- */
.stopka .stopka-siatka{display:grid;grid-template-columns:1.9fr 1.35fr 1fr 1fr 1.05fr;
  gap:44px 44px;align-items:start}

/* --- kolumna marki --------------------------------------------------------- */
.stopka .stopka-marka{display:block}
.stopka .brand--footer{display:block;margin-bottom:18px}
.stopka .stopka-marka p{color:var(--st-tekst);font-size:15px;line-height:1.55;max-width:40ch;margin:0}
.stopka .stopka-marka>span{display:block;color:var(--st-naglowek);font-size:13px;margin-top:8px;max-width:40ch}

/* --- kolumny linkow -------------------------------------------------------- */
/* stare arkusze (strama.css) ustawiaja .footer-contact{grid-column:2/4}, co tworzylo
   widmowa trzecia kolumne; kolumny stopki maja same wybierac swoje miejsce w siatce */
.stopka .stopka-kol{margin:0;padding:0;border:0;grid-column:auto;min-width:0}
.stopka .stopka-kol>summary{display:block;list-style:none;cursor:default;
  font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--st-naglowek);
  margin:0 0 14px;padding:0}
.stopka .stopka-kol>summary::-webkit-details-marker{display:none}
.stopka .stopka-kol>summary::marker{content:""}

.stopka .stopka-linki{display:flex;flex-direction:column;align-items:flex-start}
.stopka .stopka-linki a{display:inline-block;width:auto;max-width:100%;
  font-family:Roboto,Arial,sans-serif;font-size:15px;line-height:1.4;
  color:var(--st-tekst);margin:0 0 9px;padding:0;
  border-bottom:1px solid transparent;transition:color .18s var(--ease),border-color .18s var(--ease)}
.stopka .stopka-linki a:hover,.stopka .stopka-linki a:focus-visible{color:#fff;text-decoration:none;border-bottom-color:rgba(255,255,255,.5);transform:none}
.stopka .stopka-linki a:focus-visible{outline:2px solid var(--st-naglowek);outline-offset:3px}

/* kolumna kontaktu: numer telefonu wyrozniony, adres pod spodem */
.stopka .stopka-kol--kontakt .footer-phone{font:500 17px/1.25 Poppins,Arial,sans-serif!important;
  color:#fff!important;margin:2px 0 10px!important;border-bottom-color:transparent}
.stopka .stopka-kol--kontakt address{font-style:normal;color:var(--st-tekst);
  font-size:14px;line-height:1.65;margin:16px 0 0;padding-top:16px;border-top:1px solid var(--st-linia)}

/* ikony spolecznosciowe: reguly z social.css zostaja, tu tylko odstep */
.stopka .footer-soc{margin-top:18px;margin-left:-10px}

/* --- pasek dolny ----------------------------------------------------------- */
.stopka .stopka-dol{display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px 24px;border-top:1px solid var(--st-linia);
  margin-top:44px;padding:18px 0 0;font-size:13px;color:var(--st-tekst)}
.stopka .stopka-dol .footer-legal{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.stopka .stopka-dol a,.stopka .stopka-dol .footer-privacy-btn{color:var(--st-tekst);
  background:none;border:0;padding:0;font:inherit;cursor:pointer}
.stopka .stopka-dol a:hover,.stopka .stopka-dol .footer-privacy-btn:hover{color:#fff;text-decoration:underline}

/* --- tablet: marka na calej szerokosci, linki 2 x 2 ------------------------- */
@media (max-width:1100px){
  .stopka .stopka-siatka{grid-template-columns:1fr 1fr;gap:34px 32px}
  .stopka .stopka-marka{grid-column:1/-1}
  .stopka .stopka-marka p{max-width:56ch}
}

/* --- telefon: jedna kolumna, sekcje rozwijane ------------------------------ */
@media (max-width:640px){
  .stopka{padding:48px 0 22px}
  .stopka .stopka-siatka{grid-template-columns:1fr;gap:0}
  .stopka .stopka-marka{margin-bottom:26px}
  .stopka .stopka-kol{border-top:1px solid var(--st-linia)}
  .stopka .stopka-kol>summary{cursor:pointer;position:relative;
    margin:0;padding:16px 34px 16px 0;
    -webkit-tap-highlight-color:transparent;user-select:none}
  .stopka .stopka-kol>summary::after{content:"";position:absolute;right:6px;top:50%;
    width:9px;height:9px;margin-top:-6px;border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;transform:rotate(45deg);
    transition:transform .2s var(--ease)}
  .stopka .stopka-kol[open]>summary::after{transform:rotate(-135deg);margin-top:-2px}
  .stopka .stopka-linki{padding:2px 0 18px}
  .stopka .stopka-linki a{margin-bottom:12px;font-size:16px}
  /* kolumna kontaktu nie zwija sie na telefonie: numer i adres maja byc widoczne od razu */
  .stopka .stopka-kol--kontakt>summary{cursor:default;padding-bottom:12px}
  .stopka .stopka-kol--kontakt>summary::after{display:none}
  .stopka .stopka-kol--kontakt address{margin-top:6px;padding-top:14px}
  .stopka .stopka-dol{margin-top:24px;flex-direction:column;align-items:flex-start;gap:10px}
}

@media (prefers-reduced-motion:reduce){
  .stopka .stopka-linki a,.stopka .stopka-kol>summary::after{transition:none}
}