/* DLUGI TEKST: ZWINIETY DO KILKU WIERSZY, Z PLYNNYM ZEJSCIEM W TLO.

   Caly mechanizm siedzi w schowanym polu wyboru - dzieki temu rozwijanie
   dziala takze wtedy, gdy JavaScript sie nie wczytal. Skrypt dokłada
   tylko to, czego w CSS zrobic sie nie da: chowa linijke "Rozwiń" przy
   krotkim tekscie i wyglądza samo rozwiniecie.

   Kolor, w ktory tekst schodzi, bierze sie z `--zwin-tlo`. Domyslnie to
   tlo karty; strona, ktora ma inne tlo pod tekstem, przestawia te jedna
   nazwe u siebie - inaczej gradient konczylby sie plama w kolorze, ktorego
   w tym miejscu nie ma. */

.zwin{position:relative}

/* Pole chowamy WZROKOWO, nie atrybutem `hidden`: schowane atrybutem
   wypada z porzadku klawiatury i rozwiniecie przestaje byc dostepne
   inaczej niz palcem. */
.zwin-pole{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  border:0;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}

/* WIELKOSCI PISMA I KOLORU TU NIE MA - i to nie jest niedopatrzenie.
   Ten arkusz stoi w layoucie NIZEJ od `firma-strona.css` i `firma.css`,
   wiec `font-size` postawiony tutaj przykrylby wyglad wszystkich pieciu
   miejsc naraz. Wyglad niesie klasa przekazana do `parts/_zwin`
   (`fs-opis`, `fl-txt`, ...); tutaj zostaje samo zwijanie. */
.zwin-tekst{white-space:pre-line;overflow-wrap:anywhere}

/* Tresc ogloszenia i "szukam pracy" nie mialy wlasnej klasy - stal tam
   styl wpisany wprost w znacznik. Dostaja ja tutaj, zeby oba miejsca
   wygladaly tak samo. */
.zwin-tresc{font-size:16px;line-height:1.55}

/* Zwiniety: tyle wierszy, ile powie `--zwin-wierszy`. Na szerokim ekranie
   o jeden wiecej - wiersz jest tam dluzszy, wiec trzy wyglada na scinek. */
.zwin-pole:not(:checked) ~ .zwin-tekst{
  display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:var(--zwin-wierszy,3);line-clamp:var(--zwin-wierszy,3);
  overflow:hidden}

@media (min-width:760px){
  .zwin-pole:not(:checked) ~ .zwin-tekst{
    -webkit-line-clamp:calc(var(--zwin-wierszy,3) + 1);
    line-clamp:calc(var(--zwin-wierszy,3) + 1)}
}

/* Linijka "Rozwiń" - cienka i zlota, nie guzik-cegla. */
.zwin-go{position:relative;display:inline-flex;align-items:center;gap:5px;
  margin-top:7px;padding:2px 0;cursor:pointer;user-select:none;
  font-size:13.5px;font-weight:600;letter-spacing:.02em;
  color:var(--yl,#FFD100)}
.zwin-go:hover{text-decoration:underline}

/* Pole wyboru chodzi klawiatura, ale ramke ogniska widac na NIM, czyli
   na czyms niewidocznym. Przerzucamy ja na linijke. */
.zwin-pole:focus-visible ~ .zwin-go{outline:2px solid var(--yl,#FFD100);
  outline-offset:3px;border-radius:4px}

.zwin-strz{width:15px;height:15px;flex:0 0 auto}

/* OSTATNI WIERSZ SCHODZI W TLO, a nie urywa sie w polowie litery.

   Gradient stoi na LINIJCE, a nie w tekscie - i to nie jest drobiazg:
   `-webkit-line-clamp` obcina takze tresc pseudoelementu, wiec `::after`
   postawiony w samym tekscie znikalby razem z wierszem, ktory ma
   przyciemnic. Ta sama grabie, co przy strzalce w podpisie rolki. */
.zwin-pole:not(:checked) ~ .zwin-go::before{
  content:'';position:absolute;left:0;right:0;bottom:100%;height:2.2em;
  pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--zwin-tlo,var(--card,#14130F)))}

/* Dwa napisy stoja w stronie naraz - pokazuje sie ten, ktory pasuje do
   stanu pola. Bez jednej linijki skryptu. */
.zwin-mniej{display:none}
.zwin-pole:checked ~ .zwin-go .zwin-wiecej{display:none}
.zwin-pole:checked ~ .zwin-go .zwin-mniej{display:inline-flex;align-items:center;gap:5px}
.zwin-wiecej{display:inline-flex;align-items:center;gap:5px}

/* TEKST, KTORY I TAK SIE MIESCI, nie dostaje ani linijki, ani gradientu.
   Pusty "Rozwiń" pod dwoma wierszami wyglada glupio. Klase stawia skrypt,
   bo sam CSS nie umie zapytac, czy tekst wystaje - bez skryptu linijka
   zostaje i to jest uczciwa cena za dzialanie bez niego. */
.zwin-caly .zwin-go{display:none}
.zwin-caly .zwin-tekst{-webkit-line-clamp:unset;line-clamp:unset;display:block}

/* Plynne rozwijanie dokłada skrypt (mierzy wysokosc). Bez niego tekst
   po prostu staje caly - natychmiast, ale poprawnie. */
.zwin-plynnie .zwin-tekst{transition:max-height .28s ease}

@media (prefers-reduced-motion:reduce){
  .zwin-plynnie .zwin-tekst{transition:none}
}

/* W JAKI KOLOR SCHODZI OSTATNI WIERSZ.

   Gradient konczy sie kolorem, ktory NAPRAWDE lezy pod tekstem - inaczej
   zostawia w tym miejscu plame w kolorze, ktorego tam nie ma. Domyslnie
   jest to tlo karty (`--card`), bo w karcie stoi tresc ogloszenia o prace.
   Trzy pozostale miejsca leza na czyms innym i mowia to tutaj - zeby
   odpowiedz na pytanie "w co ten tekst schodzi" byla w JEDNYM miejscu,
   a nie rozsypana po czterech arkuszach. */
.pbp-box{--zwin-tlo:var(--paper,#EDEDEA)}
.fl-fakty{--zwin-tlo:var(--paper,#EDEDEA)}
.fl-karta{--zwin-tlo:#111014}