/* Stopka — task01.21 (styl per komponent — docs/podejscie-css.md).
   Wg FeuerDS: komponent footer 5318:10800 — desktop 5318:10799 (1440×796),
   mobile 5318:10798 (393×1348). Wartości px z Figmy zapisane w rem (baza 16).
   Tablet (640–1023) bez projektu — układ mobile, jak w sekcjach otwierających.
   Trzy części: pas certyfikatów (biały, na desktopie z ukośnym cięciem z lewej),
   przycisk „Do góry" (atom A61, atomy.css) na styku pasa i części ciemnej,
   część ciemna (klasa tła .tlo-ciemne z tokeny.css). */

/* „Do góry" — natywne przewinięcie do kotwicy (href="#"), płynne dzięki scroll-behavior. */
html { scroll-behavior: smooth; }

.stopka {
  max-width: 90rem;                 /* stop skali z task01.06 — jak .hero */
  margin-inline: auto;
}

/* ---- Pas certyfikatów ---- */

/* Desktop: pas 160 px; biały kształt 880 px przy prawej krawędzi, z lewej
   ukośne cięcie (biały trójkąt 160×160: Vector 5318:7803). Lewa część pasa
   przezroczysta — widać tło poprzedzającej sekcji. */
.stopka-certyfikaty {
  display: flex;
  justify-content: flex-end;
  height: 10rem;                    /* 160 px */
}

.stopka-certyfikaty-pas {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;                           /* odstępy siedzą w plikach PNG (marginesy wokół znaków);
                                       z gap 0 znaki wypadają najbliżej pozycji z projektu */
  box-sizing: border-box;
  width: 55rem;                     /* 880 px = 160 trójkąt + 720 pas */
  padding-right: 5.375rem;          /* 86 px = 118 − 32 marginesu w pliku PNG: prawa krawędź ZNAKU EcoVadis
                                       w linii treści (1322), jak w projekcie */
  background: var(--kolor-tla);
  clip-path: polygon(10rem 0, 100% 0, 100% 100%, 0 100%);
}

.stopka-certyfikaty img {
  display: block;
  width: 9.9375rem;                 /* 159 px — jedna kwadratowa ramka dla trzech logotypów;
                                       znaki w proporcjach z renderu (ISO 99×74, PARP 127×70,
                                       EcoVadis 94×94) siedzą w plikach PNG 318² na białym */
  height: 9.9375rem;
}

/* ---- Część ciemna ---- */

.stopka-glowna .kontener {
  position: relative;               /* baza dla przycisku „Do góry" */
  display: grid;
  grid-template-columns: 16.25rem minmax(0, 1fr);  /* lewa kolumna 260 px; minmax(0) — kolumny oferty (915) wystają
                                                       z obszaru, nie rozpychają siatki: linia paska prawnego zostaje 1204 */
  grid-template-areas:
    "firma oferta"
    "pomocnicze oferta"
    "prawne prawne";
  column-gap: 3.375rem;             /* 54 px */
  padding-block: 5rem;              /* 80 px */
}

/* Przycisk „Do góry": lewa krawędź w linii treści (118 px od krawędzi na
   desktopie; w Figmie 121 — 3 px odchyłki czytane jako niedokładność),
   wyśrodkowany na styku pasa i części ciemnej (56 px → 28 nad, 28 pod). */
.stopka-do-gory {
  position: absolute;
  top: -1.75rem;                    /* -28 px */
  left: 0;
}

@media (max-width: 1023px) {
  .stopka-do-gory { left: var(--odstep-4); }  /* = padding .kontener na tablecie */
}

@media (max-width: 639px) {
  .stopka-do-gory { left: var(--odstep-2); }  /* 16 px */
}

/* Firma: logo, e-mail, social */
.stopka-firma {
  grid-area: firma;
  margin-bottom: 3.5rem;            /* 56 px do linków pomocniczych */
}

.stopka-logo {
  display: block;
  width: 9.125rem;                  /* 146 px */
  height: 1.5rem;                   /* 24 px */
  color: var(--kolor-tekstu-odwrocony);
}

.stopka-logo svg { display: block; width: 100%; height: 100%; }

.stopka-email {
  display: inline-block;
  margin-top: 2.5rem;               /* 40 px */
  color: var(--kolor-tekstu);
  font-size: var(--tekst-18);
  line-height: 1.375rem;            /* 22 px */
  font-weight: var(--waga-zwykla);
  text-decoration: underline;
}

.stopka-social {
  display: flex;
  gap: 1.5rem;                      /* 24 px */
  margin: 2.5rem 0 0;               /* 40 px */
  padding: 0;
  list-style: none;
}

.stopka-social a {
  display: block;
  color: var(--kolor-tekstu);
}

/* Linki pomocnicze i pozycje oferty — tekst 14/19.6, biały, bez podkreślenia.
   Stany hover/pressed w DS niezaprojektowane (task01.19). */
.stopka a { color: var(--kolor-tekstu); text-decoration: none; }
.stopka-email { text-decoration: underline; }

.stopka-pomocnicze {
  grid-area: pomocnicze;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 1rem;                        /* 16 px */
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--tekst-14);
  line-height: var(--interlinia-14);
  font-weight: var(--waga-gruba);
}

/* Oferta: tytuł + 3 kolumny grup (druga kolumna mieści dwie grupy) */
.stopka-oferta { grid-area: oferta; }

.stopka-oferta h2 {
  margin: 0 0 1.5rem;               /* 24 px */
  font-size: var(--tekst-20);
  line-height: var(--interlinia-20);
  font-weight: var(--waga-gruba);
}

.stopka-oferta-kolumny {
  display: grid;
  /* W Figmie kolumny 265 z odstępem 54, ale pola tekstowe pozycji mają 277 px
     (wystają poza kolumnę) — 277 + 42 daje ten sam krok 319 i te same łamania
     wierszy; prawa kolumna wystaje 13 px poza kontener, niewidocznie na ciemnym tle. */
  grid-template-columns: repeat(3, 17.3125rem);
  gap: 2.625rem;                    /* 42 px */
}

.stopka-oferta-kolumna {
  display: flex;
  flex-direction: column;
  gap: 2rem;                        /* 32 px między grupami */
}

/* Nagłówek grupy: na desktopie zwykły nagłówek, na mobile przycisk akordeonu
   (data-rozwijane="akordeon", js/rozwijane.js) — ten sam element <button>. */
.stopka-grupa-naglowek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 1rem;                 /* 16 px do pozycji */
  padding: 0;
  border: 0;
  background: none;
  color: var(--kolor-tekstu);
  font-family: var(--font-podstawowy);
  font-size: var(--tekst-14);
  line-height: var(--interlinia-14);
  font-weight: var(--waga-gruba);
  text-align: left;
  cursor: pointer;
}

.stopka-grupa-naglowek .ikona { display: none; }

@media (min-width: 1024px) {
  .stopka-grupa-naglowek { pointer-events: none; }   /* desktop: bez akordeonu */
}

.stopka-grupa ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;                      /* 8 px */
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--tekst-14);
  line-height: var(--interlinia-14);
}

/* Pasek prawny: linia, 40 px, copyright z lewej, linki z prawej */
.stopka-prawne {
  grid-area: prawne;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 5rem;                 /* 80 px */
  padding-top: 2.5rem;              /* 40 px */
  border-top: 1px solid var(--kolor-tla-nieaktywnego);   /* Figma desktop: #e3e8f1 */
  font-size: var(--tekst-14);
  line-height: 1.375rem;            /* 22 px */
}

.stopka-prawne p { margin: 0; }

.stopka-prawne-linki {
  display: flex;
  gap: 2.5rem;                      /* 40 px */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- Mobile (i tablet bez projektu): 5318:10798 ---- */

@media (max-width: 1023px) {
  /* Pas 71 px na całą szerokość, bez cięcia; logotypy mniejsze, odstęp 24, padding 16 */
  .stopka-certyfikaty { height: 4.4375rem; }        /* 71 px */
  .stopka-certyfikaty-pas {
    width: 100%;
    padding-right: 0.09375rem;      /* 1,5 px = 16 − 14,5 marginesu w pliku: znak EcoVadis kończy się na 377 jak w projekcie;
                                       ramki 3×71 od x 178 — przycisk „Do góry" kończy się na 147 */
    clip-path: none;
  }
  .stopka-certyfikaty img { width: 4.4375rem; height: 4.4375rem; }  /* 71 px — ramka mobile ISO z projektu; znaki wychodzą 45×33 / 57×31 / 42×42 jak w renderze */

  /* Jedna kolumna: oferta → linki pomocnicze → firma (wyśrodkowana) → prawne;
     bloki co 40 px, między blokami linia 1 px (biała w projekcie mobile). */
  .stopka-glowna .kontener {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;                    /* 40 px */
    padding-top: 3.5rem;            /* 56 px (28 pod przyciskiem + 28) */
    padding-bottom: 2.0625rem;      /* 33 px — jak w projekcie */
  }

  .stopka-oferta { order: 1; }
  .stopka-pomocnicze { order: 2; }
  .stopka-firma { order: 3; }
  .stopka-prawne { order: 4; }

  .stopka-pomocnicze,
  .stopka-firma,
  .stopka-prawne {
    align-self: stretch;            /* linia na całą szerokość */
    margin: 0;
    padding-top: 2.5rem;            /* 40 px pod linią */
    border-top: 1px solid var(--kolor-tekstu-odwrocony);
  }

  .stopka-oferta-kolumny { display: contents; }     /* grupy jedna pod drugą */
  .stopka-oferta { display: flex; flex-direction: column; gap: 2rem; }
  .stopka-oferta h2 { margin-bottom: -0.5rem; }      /* 24 px do pierwszej grupy (gap 32 − 8) */
  .stopka-oferta-kolumna { display: contents; }

  /* Akordeon: nagłówek z chevronem (w górę = rozwinięte), klik przełącza aria-expanded */
  .stopka-grupa-naglowek .ikona { display: block; transition: transform 0.2s; }
  .stopka-grupa-naglowek[aria-expanded="false"] { margin-bottom: 0; }
  .stopka-grupa-naglowek[aria-expanded="false"] .ikona { transform: rotate(180deg); }
  .stopka-grupa-naglowek[aria-expanded="false"] + ul { display: none; }

  .stopka-firma { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .stopka-social { gap: 2.5rem; margin-top: 2rem; }  /* 40 px między ikonami, 32 px pod e-mailem */

  .stopka-prawne {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;                    /* 24 px */
  }
  .stopka-prawne p { order: 2; line-height: var(--interlinia-14); }
  .stopka-prawne-linki { order: 1; gap: 2.1875rem; }  /* 35 px — z pól tekstowych projektu */
}