/* robotatut.pl - STOPKA "ZLOTA PLYTA".

   Wybor wlasciciela z trzech przedstawionych wariantow. Uklad tez jest
   jego: zloty guzik aplikacji NA GORZE, pod nim trzy kolumny obok siebie,
   kazda we wlasnej zlotej ramce - i tak na KAZDEJ stronie portalu.

   Arkusz jest podpiety JAKO OSTATNI (layouts/site), bo w tym projekcie
   wygrywa nizszy - nowe reguly dopisujemy na koncu, a nie w cudzych
   plikach. Nazwy klas zaczynaja sie od .stopka, zeby nie zderzyly sie
   z niczym w site.css.
*/
/* WARIANT C - "ZLOTA PLYTA".
   Kazdy selektor zaczyna sie od .stopka: trzy warianty stoja na jednej
   stronie i bez tego pobijalyby sie nawzajem. */

/* Jasny motyw jest podstawa - zmienne siedza na .stopka, nie na :root,
   zeby blok dzialal takze wklejony w cudza strone. */
.stopka{
  --sp-tlo:#F2F1EC;
  --sp-plyta1:#EAE7DD;        /* srodek kolumny CIEMNIEJSZY od tla - stad "plyta" */
  --sp-plyta2:#E4E0D4;
  --sp-plyta-mid1:#EFEADC;    /* srodkowa kolumna: ten sam kamien, cieplejszy */
  --sp-plyta-mid2:#E6DFCB;
  --sp-tekst:#17160F;
  --sp-tekst2:#6B6758;
  --sp-kreska:#E2DFD4;
  --sp-zloto:#C9A227;
  --sp-zloto2:#8A6D1F;
  --sp-na-zlocie:#17160F;     /* napis na zlocie jest ZAWSZE ciemny, w obu motywach */
  /* gotowe rgba zamiast color-mix(): nieznana funkcja kasuje w przegladarce
     CALA regule i element po cichu znika, bez sladu w logu */
  --sp-hover:rgba(201,162,39,.12);
  --sp-obrys:rgba(138,109,31,.22);
  --sp-cien:0 1px 2px rgba(23,22,15,.06);
  --sp-cien-mid:0 2px 10px rgba(138,109,31,.14);
}

/* Ciemny motyw z ustawien systemu. Wylaczony, gdy czlowiek recznie
   wybral jasny - inaczej przelacznik motywu przestaje dzialac. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .stopka{
    --sp-tlo:#0B0B0C;
    --sp-plyta1:#08080A;      /* ciemniejsze niz tlo takze tutaj */
    --sp-plyta2:#050506;
    --sp-plyta-mid1:#131008;
    --sp-plyta-mid2:#0B0905;
    --sp-tekst:#F3F0E6;
    --sp-tekst2:#9C9686;
    --sp-kreska:#26251F;
    --sp-zloto:#E3C765;
    --sp-zloto2:#F2DC96;
    --sp-na-zlocie:#17160F;
    --sp-hover:rgba(227,199,101,.10);
    --sp-obrys:rgba(227,199,101,.16);
    --sp-cien:0 1px 2px rgba(0,0,0,.5);
    --sp-cien-mid:0 2px 14px rgba(0,0,0,.55);
  }
}

/* Ten sam ciemny motyw z recznego przelacznika - obie reguly musza byc,
   bo motyw da sie zmienic bez ruszania ustawien systemu. */
:root[data-theme="dark"] .stopka{
  --sp-tlo:#0B0B0C;
  --sp-plyta1:#08080A;
  --sp-plyta2:#050506;
  --sp-plyta-mid1:#131008;
  --sp-plyta-mid2:#0B0905;
  --sp-tekst:#F3F0E6;
  --sp-tekst2:#9C9686;
  --sp-kreska:#26251F;
  --sp-zloto:#E3C765;
  --sp-zloto2:#F2DC96;
  --sp-na-zlocie:#17160F;
  --sp-hover:rgba(227,199,101,.10);
  --sp-obrys:rgba(227,199,101,.16);
  --sp-cien:0 1px 2px rgba(0,0,0,.5);
  --sp-cien-mid:0 2px 14px rgba(0,0,0,.55);
}

.stopka{
  background:var(--sp-tlo);
  color:var(--sp-tekst);
  font-family:var(--f-body);
  border-top:1px solid var(--sp-kreska);
  /* boki dajemy raz, tutaj; pion osobno, zeby skrot nie wyzerowal bokow */
  padding-inline:clamp(12px,3.6vw,20px);
  padding-block:clamp(18px,4vw,26px);
}
.stopka *{box-sizing:border-box}
.stopka-srodek{max-width:960px;margin:0 auto}

/* --- guzik nad kolumnami: pelna szerokosc, zloto jak na guzikach portalu --- */
.stopka-apka{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;
  padding:13px 14px;
  border-radius:12px;
  border:1px solid rgba(23,22,15,.30);
  background:linear-gradient(135deg,#C79A2A,#F2DC96 46%,#D9B34F 72%,#A6790F);
  color:var(--sp-na-zlocie);
  text-decoration:none;
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(14px,3.6vw,16px);
  line-height:1.15;
  text-align:center;
  box-shadow:var(--sp-cien);
}
.stopka-apka svg{
  width:19px;height:19px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.6;
}
.stopka-apka:hover{filter:brightness(1.06)}
.stopka-apka:focus-visible{outline:2px solid var(--sp-zloto);outline-offset:3px}

/* --- trzy kolumny: OBOK SIEBIE na kazdej szerokosci, takze na 360px ---
   minmax(0,1fr) zamiast 1fr, bo domyslne min-width:auto pozwoliloby
   dlugiemu wyrazowi rozepchnac kolumne i zrobic poziome przewijanie. */
.stopka-siatka{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(6px,1.8vw,14px);
  align-items:stretch;          /* trzy plyty rownej wysokosci */
  margin-top:clamp(14px,3vw,20px);
}

/* Ramka to CIENKA linia w zlotym gradiencie. Dwa tla: srodek kolumny
   rysowany do padding-box, gradient do border-box - dziala w obu
   motywach i nie gubi zaokraglenia rogow (inaczej niz border-image). */
.stopka-plyta{
  position:relative;
  display:flex;flex-direction:column;
  min-width:0;                  /* rodzenstwo w gridzie: bez tego tekst rozpycha */
  border:1px solid transparent;
  border-radius:12px;
  padding:clamp(8px,2.2vw,14px);
  background:
    linear-gradient(180deg,var(--sp-plyta1),var(--sp-plyta2)) padding-box,
    linear-gradient(150deg,#A6790F,#F2DC96 46%,#D9B34F 68%,#A6790F) border-box;
  box-shadow:var(--sp-cien);
}

/* Srodkowa kolumna - to strona, ktora kiedys placi. Wyroznienie jest
   celowo male: cieplejszy kamien i glebszy cien, bez drugiego koloru. */
.stopka-plyta.jest-glowna{
  background:
    linear-gradient(180deg,var(--sp-plyta-mid1),var(--sp-plyta-mid2)) padding-box,
    linear-gradient(150deg,#C79A2A,#F2DC96 44%,#D9B34F 70%,#A6790F) border-box;
  box-shadow:var(--sp-cien-mid);
}

/* --- naglowek grupy: zlota plakietka wpisana w gorna czesc kolumny ---
   Rzecz ZMIERZONA, nie do zgadywania: na telefonie 320px kolumna daje
   71px w srodku plakietki, a "РАБОТОДАТЕЛЬ" wersalikami chce w jednym
   wierszu 8.6px pisma nawet BEZ rozstrzelki - czyli ponizej czytelnosci.
   Waski Roboto Condensed tego nie ratuje i zadna inna czcionka nie
   uratuje; jednowierszowa plakietka po prostu sie tu nie miesci.
   Dlatego plakietka jest na telefonie wysoka na DWA wiersze: dluzsza
   nazwa lamie sie na dwa, krotsza stoi w pionie na srodku, a wszystkie
   trzy maja te sama wysokosc. GDZIE wyraz ma peknac, mowi niewidzialny
   miekki dywiz (U+00AD) wpisany w tresc w lang/<jezyk>/site.php -
   "РАБОТО-ДАТЕЛЬ", a nie "РАБОТОДАТЕЛ-Ь". Od 520px w gore wszystko
   wchodzi w jeden wiersz i plakietka jest nizsza - media query nizej. */
.stopka-plyta h3{
  display:flex;align-items:center;justify-content:center;
  min-height:calc(2.3em + 8px);   /* dokladnie dwa wiersze plus padding */
  margin:0 0 clamp(8px,2vw,12px);
  /* boki plakietki celowo waskie: na 360px "РАБОТОДАТЕЛЬ" z rozstrzelka
     .14em potrzebuje 74 z 78 dostepnych pikseli - kazdy oddany na margines
     zrzuca napis do drugiego wiersza */
  padding:4px 3px;
  border-radius:7px;
  background:linear-gradient(135deg,#C79A2A,#F2DC96 46%,#D9B34F 72%,#A6790F);
  color:var(--sp-na-zlocie);
  font-family:var(--f-cond);
  font-weight:600;
  /* dwa wiersze daja miejsce na czytelny stopien: zmierzone, ze przy 12px
     najdluzszy nierozerwalny kawalek ("РАБОТО-") chce 60 z 71px, ktore
     kolumna daje na 320px */
  font-size:clamp(10.5px,3vw,12px);
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
  line-height:1.15;
  /* "anywhere", nie "break-word": break-word nie zmniejsza rozmiaru
     min-content, wiec w kontenerze flex napis nie lamal sie wcale, tylko
     wystawal poza zlota plytke (zmierzone: 98px napisu w 91px plytki).
     Miejsce pekniecia i tak wskazuje miekki dywiz z tresci - hyphens:auto
     kaze go uszanowac - a "anywhere" jest tylko siatka pod nim. */
  -webkit-hyphens:auto;hyphens:auto;
  overflow-wrap:anywhere;
  box-shadow:0 1px 0 rgba(23,22,15,.25);
}
/* Rozstrzelka .14em dokleja sie TAKZE za ostatnia litera i liczy sie
   przy lamaniu wiersza. To nie jest drobiazg: na 360px "РАБОТОДАТЕЛЬ"
   potrzebuje 76.8 z 78 dostepnych pikseli, a ten doklejony ogonek
   (1.3px) zrzucal caly napis do drugiego wiersza. Ujemny margines go
   zdejmuje - przy okazji napis stoi na plakietce naprawde na srodku. */
.stopka-plyta h3 span{margin-inline-end:-.14em}  /* zdejmuje rozstrzelke doklejona za ostatnia litera */

/* Od 520px kazda nazwa grupy wchodzi w jeden wiersz - plakietka moze
   byc nizsza, zeby na duzym ekranie nie byla nienaturalnie gruba. */
@media (min-width: 520px){
  .stopka-plyta h3{min-height:calc(1.15em + 8px)}
}

/* --- pozycje ---
   Lista rozciaga sie na cala wysokosc plyty, a kazda pozycja rosnie
   po rowno (flex:1). Dzieki temu kolumna z pieciu pozycjami i kolumna
   z czterema koncza sie w tej samej linii, a odstepy zostaja rowne -
   bez space-between, ktory robilby dziury roznej wielkosci. */
.stopka-plyta ul{
  list-style:none;margin:0;padding:0;
  flex:1 1 auto;
  display:flex;flex-direction:column;
}
.stopka-plyta li{display:flex;flex:1 1 auto}
.stopka-plyta li + li{border-top:1px solid var(--sp-obrys)}

.stopka-plyta a{
  flex:1 1 auto;
  display:flex;align-items:center;
  min-height:34px;
  padding:7px 5px;
  border-radius:6px;
  color:var(--sp-tekst);
  text-decoration:none;
  /* maly stopien pisma: na 360px kolumna ma okolo 105px i dluzszy
     napis musi sie zmiescic w dwoch wierszach, a nie w czterech */
  font-size:clamp(12px,3.25vw,13.5px);
  line-height:1.25;
  /* Lamanie: break-word, NIE anywhere. Zmierzone na 360px - "anywhere"
     pozwala urwac wyraz w dowolnym miejscu, wiec przegladarka dopycha
     wiersz i zostawia w nastepnym jedna litere ("объявлени|е",
     "приватност|и"). break-word rozrywa wyraz dopiero wtedy, gdy sam
     nie wchodzi w wiersz - a tu kazdy wyraz osobno sie miesci, wiec
     napisy lamia sie po spacji, tam gdzie czlowiek by je zlamal.
     hyphens:auto (dziala dzieki lang="ru" na stopce) daje jeszcze
     lepszy podzial tam, gdzie przegladarka ma slownik. */
  -webkit-hyphens:auto;hyphens:auto;
  overflow-wrap:break-word;
}
.stopka-plyta a:hover{background:var(--sp-hover);color:var(--sp-zloto)}
.stopka-plyta a:focus-visible{outline:2px solid var(--sp-zloto);outline-offset:-2px}

/* Ponizej 340px (stare telefony, 320px) nawet pojedynczy wyraz bywa
   szerszy od kolumny, a break-word w kontenerze flex go wtedy nie
   przelamie - tekst wyszedlby poza zlota ramke. Na tej szerokosci
   wolimy twarde lamanie od wylewu. Powyzej 340px, czyli w calym
   zakresie 360-400px, zostaje ladniejsze lamanie po spacji. */
@media (max-width: 339px){
  .stopka-plyta a{overflow-wrap:anywhere}
}

/* --- drobny druk pod kolumnami --- */
.stopka-dane,.stopka-kraz{
  margin:0;
  text-align:center;
  color:var(--sp-tekst2);
  /* break-word, nie anywhere: numer KRS ma sie przeniesc caly do
     nastepnego wiersza, a nie pekac w polowie na dwie cyfry */
  overflow-wrap:break-word;
}
.stopka-dane{
  margin-top:clamp(14px,3vw,20px);
  padding-top:clamp(10px,2.4vw,14px);
  border-top:1px solid var(--sp-kreska);
  font-size:clamp(10.5px,2.6vw,12px);
  line-height:1.55;
}
.stopka-kraz{
  margin-top:5px;
  font-family:var(--f-cond);
  font-weight:600;
  font-size:clamp(10px,2.5vw,11.5px);
  letter-spacing:.06em;
  color:var(--sp-zloto2);
}
:root[data-theme="dark"] .stopka-kraz{color:var(--sp-zloto)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .stopka-kraz{color:var(--sp-zloto)}
}

/* ---------------------------------------------------------------------
   HISTORIA, zeby nikt nie wrocil do obejscia.

   Dopoki portal chodzil na Archivo/Barlow/Barlow Condensed, cyrylicy
   w tych krojach NIE BYLO (Google Fonts dawal same latin/latin-ext/
   vietnamese), wiec rosyjskie i ukrainskie napisy rysowala czcionka
   systemowa telefonu - szersza niz waskie Condensed, na ktore liczyl
   uklad plakietki. "РАБОТОДАТЕЛЬ" lamalo sie wtedy tak, ze samo "Ь"
   zjezdzalo do drugiego wiersza, i trzeba to bylo ratowac nowrap plus
   zmniejszaniem stopnia pisma.

   Dzis portal stoi na Manrope / Inter / Roboto Condensed i KAZDY z tych
   krojow ma podzestaw cyrillic. Napis jest wiec naprawde zwezony,
   miesci sie w jednym wierszu i obejscie zostalo zdjete.
--------------------------------------------------------------------- */