/* =====================================================================
   SZEROKO - WSPOLNY ROZKLAD PLANSZETU (768) I LAPTOPA (od 1024)
   dla ekranow, ktore mialy tylko kolumne telefonu (prawki wlasciciela
   213 i 249, 31.10: "na laptopie bez waskiej polosy posrodku").
   Wzor wziety z rysunku laptopowego (`ekrany-laptop.css`, `el-*`):
   listy = szeroka siatka, zakladki/sito = boczne menu z lewej.

   TELEFON (<768) TEGO NIE WIDZI: owijki `lw-bok` i `lw-siatka` maja
   display:contents, a klasa `lw` na korzeniu bloku nic nie zmienia.
   Tokeny kolorow zostaja z bloku (`--b-*`, `--p-*`, `--s-*` ...) -
   ten arkusz rusza tylko uklad.

   Klasy (przedrostek `lw-`):
     .lw           korzen ekranu: od 768 cala szerokosc z bokami,
                   od 1024 tresc do 1200 px na srodku;
     .lw-bok       zakladki/sito ekranu (dziecko .lw): od 1024 kolumna
                   240 px z lewej, reszta ekranu obok (naglowek nad obiema);
     .lw-siatka    lista kart: od 768 dwie kolumny, od 1280 (bez boku) trzy.
   Arkusz podpina `parts/lw/_arkusz` (@pushOnce) PO arkuszu bloku.
===================================================================== */
@media (max-width:767px){.lw-siatka{display:contents}}
@media (max-width:1023px){.lw-bok{display:contents}}

@media (min-width:768px){
  /* Karkas 05.11: boki, szerokosc, kolumny i odstepy z sekcji KARKAS (`--kr-*`). */
  .lw.lw{max-width:none;width:100%;box-sizing:border-box;padding-left:var(--kr-pole);padding-right:var(--kr-pole);display:flow-root}
  .lw-siatka{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--kr-odstep);margin:12px 0}
  .lw-siatka>*{margin:0 !important;min-width:0}
  /* Zagniezdzone .lw (zewnetrzna rama bloku + wewnetrzna tresc) - boki tylko raz. */
  .lw .lw.lw{padding-left:0;padding-right:0;max-width:none}
}

@media (min-width:1024px){
  .lw.lw{max-width:calc(var(--kr-tresc) + 2 * var(--kr-pole));margin-left:auto;margin-right:auto}
  /* Boczne menu: siatka 240 px + tresc. Co stoi PRZED .lw-bok (naglowek), idzie
     przez obie kolumny; reszta w prawej. Bez float - guziki 100% wychodzily w bok. */
  .lw.lw:has(>.lw-bok){display:grid;grid-template-columns:var(--kr-filtry) minmax(0,1fr);column-gap:calc(var(--kr-odstep) + 8px);align-content:start;align-items:start}
  .lw:has(>.lw-bok)>*{grid-column:2;min-width:0}
  .lw:has(>.lw-bok)>:has(~.lw-bok){grid-column:1/-1}
  .lw:has(>.lw-bok)>.lw-bok{grid-column:1;grid-row:span 30;position:sticky;top:84px;margin:12px 0 24px;display:flex;flex-direction:column;gap:12px}
  .lw-bok>*{display:grid !important;grid-template-columns:1fr !important;gap:6px;margin:0 !important;padding:0 !important;overflow:visible}
  .lw-bok>*>a{width:auto;min-width:0;justify-content:flex-start !important;white-space:normal;overflow-wrap:anywhere}
  .lw-bok a:focus-visible,.lw-siatka a:focus-visible{outline:2px solid currentColor;outline-offset:2px}
}

@media (min-width:1024px){
  .lw:not(:has(.lw-bok)) .lw-siatka{grid-template-columns:repeat(var(--kr-kol),minmax(0,1fr))}
}