/*
 * Zawijanie tresci na waskich ekranach.
 *
 * Zrodla frontu (Astro) sa poza tym serwerem, a katalog public/ jest w calosci
 * nadpisywany przy kazdym wgraniu builda - arkusz trzymany w nim zniknalby przy
 * najblizszym wdrozeniu. Dlatego lezy obok, a do stron dokleja go filtr
 * Substitute z wirtualnego hosta. Gdy zrodla frontu beda dostepne, wlasciwym
 * miejscem sa klasy w komponentach; co dokladnie poprawic - opisuje
 * /opt/awansik-api/PRZECZYTAJ-PRZED-WDROZENIEM.md.
 *
 * Nigdzie nie zaslaniamy przelewu przez overflow-x na body ani html: to nie
 * naprawia wiersza, tylko ucina jego prawy koniec. Kazda regula ponizej
 * rozbraja konkretny element, ktory rozpycha strone.
 */

/* Wiersze list kategorii: nazwa dzialu z lewej, podstawa prawna z prawej.
 * Podstawa ma shrink-0, wiec nie kurczy sie i nie zawija. Przy dlugiej
 * sygnaturze („art. 9b ust. 1 pkt 5 Karty Nauczyciela; § 10 rozporzadzenia
 * z 6 wrzesnia 2022 r.") wiersz rozpychal /baza-pytan/ do 739 px, a
 * /mapa-serwisu/ do 656 px w oknie 360 px - obie strony trzeba bylo przesuwac
 * w bok. Na waskim ekranie pozwalamy sygnaturze zjechac do drugiej linii;
 * na szerokim zostaje po prawej, tak jak byla zaprojektowana.
 */
@media (max-width: 640px) {
  li.flex.items-baseline.justify-between {
    flex-wrap: wrap;
  }

  /* Bez tego oba dzieci maja min-width: auto i zadne nie chce sie zwezic,
   * wiec zawijanie wiersza samo z siebie by nie wystarczylo. */
  li.flex.items-baseline.justify-between > * {
    min-width: 0;
  }

  li.flex.items-baseline.justify-between > span.shrink-0 {
    flex-shrink: 1;
    overflow-wrap: anywhere;
  }
}

/* Tabela ukryta pod „Pokaz dane w tabeli" (/statystyki/wynagrodzenia/).
 * Tabelom w tresci serwis daje wlasny pasek przewijania regula
 * `.proza table { display: block; overflow-x: auto }`, ale ta stoi w figure
 * z not-prose, wiec regula jej nie obejmuje i po rozwinieciu bloku wystawala
 * o 34 px poza ekran. Powtarzamy tu ten sam zabieg, zamiast obcinac kolumny.
 * Bez zakresu szerokosci, bo na szerokim ekranie tabela i tak sie miesci,
 * a overflow-x: auto nic wtedy nie zmienia.
 */
details > table {
  display: block;
  overflow-x: auto;
}

/* Kafle „Od czego zaczac": ilustracja 88 px, a obok naglowek serii.
 * Naglowek nie ma gdzie zlamac dlugiego wyrazu („dyplomowanego"), wiec jego
 * szerokosc minimalna rozpycha kafel, kafel rozpycha siatke, a siatka strone.
 * Przy 360 px jeszcze sie miesci, przy 320 px strona jechala do 358 px.
 * Ponizej 400 px wolno zlamac wyraz - to mniejsza strata niz przewijanie
 * calej strony w bok.
 */
@media (max-width: 400px) {
  .karta > .flex > * {
    min-width: 0;
  }

  .karta h2,
  .karta h3 {
    overflow-wrap: anywhere;
  }
}