/* Prosty, czytelny arkusz. Adres zachowany z oryginalu, bo byl linkowany
   z zewnatrz — tresc wlasna. */
:root{--t:#16202b;--s:#5b6b7c;--l:#dfe5ec;--a:#1d4ed8;--tlo:#fff}
@media(prefers-color-scheme:dark){
  :root{--t:#e8edf3;--s:#9aa8b8;--l:#2a3643;--a:#7aa2ff;--tlo:#0f151c}
}
*{box-sizing:border-box}
body{margin:0;background:var(--tlo);color:var(--t);
     font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.in{max-width:72ch;margin:0 auto;padding:0 20px}
.top{border-bottom:1px solid var(--l);padding:14px 0;margin-bottom:34px}
.top .in{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;
         justify-content:space-between}
.znak{font-weight:700;font-size:1.05rem;color:var(--t);text-decoration:none;
      letter-spacing:-.01em}
nav a{color:var(--a);text-decoration:none;margin-left:16px;font-size:.93rem}
nav a:hover,a:hover{text-decoration:underline}
h1{font-size:clamp(1.5rem,3.4vw,2.05rem);line-height:1.2;margin:0 0 .55em;
   letter-spacing:-.015em}
h2{font-size:1.2rem;margin:0 0 .7em}
p{margin:0 0 1.05em}
a{color:var(--a)}
.karta{border:1px solid var(--l);border-radius:12px;padding:clamp(18px,3.4vw,30px);
       margin-bottom:26px}
.nad{font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--s);
     margin-bottom:.5em}
.wstep{font-size:1.06rem}
.dalej{margin:1.4em 0 0;font-size:.95rem}
.spis{margin:0;padding-left:1.6em;columns:2;column-gap:34px}
.spis li{margin-bottom:.42em;break-inside:avoid}
@media(max-width:620px){.spis{columns:1}}
.stopka{border-top:1px solid var(--l);margin-top:44px;padding:26px 0 40px;
        color:var(--s);font-size:.9rem}
.stopka p{margin:0 0 .8em}
.drobne{font-size:.84rem}

/* ───── strony przypadkow z oryginalna trescia (8.10.2026) ─────
   Klasy uzyte w index.php, ktorych arkusz wczesniej nie znal. Wszystko
   na zmiennych --t/--s/--l/--a/--tlo, wiec dziala w jasnym i ciemnym
   motywie bez osobnych regul. */

/* pytanie postawione czytelnikom — wyrozniony blok */
.pytanie{border-left:3px solid var(--a);padding:2px 0 2px 16px;margin:1.6em 0}
.pytanie h2{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
            color:var(--s);margin:0 0 .4em;font-weight:600}
.pytanie p{margin:0;font-size:1.04rem}

/* rozpoznanie */
.diagnoza{font-size:1.12rem;font-weight:600;margin:.2em 0 1em}

/* tresc merytoryczna: roznicowka, dyskusja, pismiennictwo */
.tresc{margin-top:.6em}
.tresc p{margin:0 0 .9em;line-height:1.62}
.tresc b,.tresc strong{color:var(--t)}
.tresc ul,.tresc ol{margin:.2em 0 1.1em;padding-left:1.5em}
.tresc li{margin-bottom:.32em;line-height:1.55}
.tresc li>ul,.tresc li>ol{margin:.3em 0 .4em}

/* zdjecia radiologiczne */
.zdjecia{display:grid;gap:18px;
         grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.zdjecia figure{margin:0}
.zdjecia img{width:100%;height:auto;display:block;border-radius:8px;
             border:1px solid var(--l);background:#000}
.zdjecia figcaption{font-size:.84rem;color:var(--s);margin-top:.45em}

/* atrybucja i zastrzezenia */
.zrodlo{margin-top:1.8em;padding-top:1.1em;border-top:1px solid var(--l);
        font-size:.9rem;color:var(--s)}
.uwaga{margin:1.4em 0;padding:12px 16px;border:1px dashed var(--l);
       border-radius:8px;font-size:.95rem;color:var(--s)}

/* na waskim ekranie spis w jednej kolumnie — inaczej robi sie przewijanie w bok */
@media(max-width:620px){
  .spis{columns:1}
  .zdjecia{grid-template-columns:1fr}
}

/* ───── szerokosc i nawigacja (8.10) ─────
   Problem: `.in{max-width:72ch}` ograniczalo CALA strone do szerokosci
   wiersza tekstu — na ekranie 1546 px karta mierzyla 581 px, czyli 38 %.
   Przy archiwum radiologicznym to najgorsze mozliwe miejsce na oszczedzanie
   szerokosci, bo najwazniejsze sa zdjecia.

   Rozwiazanie: kontener szeroki, ale **dlugosc wiersza ograniczona osobno**
   na akapitach. Zdjecia dostaja cala szerokosc karty. */

.in{max-width:1180px}

/* tekst czytelny mimo szerokiego kontenera */
.karta > p,
.karta > ul,
.karta > ol,
.karta .tresc > p,
.karta .tresc > ul,
.karta .tresc > ol,
.wstep{max-width:74ch}

/* zdjecia RTG na calej szerokosci — po to byla ta zmiana */
.zdjecia{grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));
         gap:20px}
.zdjecia img{max-height:none}

/* spis przypadkow: wiecej kolumn na szerokim ekranie */
.spis{columns:3}
@media(max-width:900px){.spis{columns:2}}
@media(max-width:620px){.spis{columns:1}}

/* ───── nawigacja jezykowa ─────
   36 linkow w naglowku zajmowalo 132 px i lamalo sie na cztery wiersze.
   Teraz zwijane <details> — bez JS, dziala tez gdy skrypty nie wstana. */
.top .in{align-items:center}
.jezyk-wybor{position:relative;margin-left:auto}
.jezyk-wybor > summary{cursor:pointer;list-style:none;font-size:.93rem;
   color:var(--a);padding:6px 12px;border:1px solid var(--l);border-radius:8px;
   display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.jezyk-wybor > summary::-webkit-details-marker{display:none}
.jezyk-wybor > summary::after{content:"";width:7px;height:7px;
   border-right:2px solid currentColor;border-bottom:2px solid currentColor;
   transform:rotate(45deg);margin-top:-3px}
.jezyk-wybor[open] > summary::after{transform:rotate(-135deg);margin-top:2px}
.jezyk-wybor > summary:hover{border-color:var(--a)}
.jezyk-lista{position:absolute;right:0;top:calc(100% + 8px);z-index:50;
   background:var(--tlo);border:1px solid var(--l);border-radius:12px;
   padding:14px 16px;min-width:min(92vw,560px);
   box-shadow:0 10px 30px rgba(0,0,0,.28);
   display:grid;gap:4px 18px;
   grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.jezyk-lista a{margin:0;padding:4px 2px;font-size:.9rem;display:block}
@media(max-width:620px){
  .jezyk-wybor{margin-left:0;width:100%}
  .jezyk-lista{position:static;min-width:0;box-shadow:none;margin-top:8px}
}

/* ───── korekta szerokosci kart (8.10, po zrzucie z PC) ─────
   Po poszerzeniu kontenera do 1180 px tekst konczyl sie w polowie karty:
   akapity mialy limit 74 znakow, a karta 1140 px — prawa polowa zostawala
   pusta i wygladalo to na blad, a nie na decyzje.

   Rozwiazanie: **karta dopasowuje sie do tresci, nie odwrotnie.** Karty
   z tekstem sa wezsze (tekst je wypelnia), a sekcja ze zdjeciami zostaje
   na pelnej szerokosci — bo w archiwum radiologicznym to obrazy sa trescia
   glowna. */

.karta{max-width:880px;margin-left:auto;margin-right:auto}
.karta-szeroka{max-width:none}

/* skoro karta ma 880 px, limit na akapicie jest juz zbedny */
.karta > p,
.karta > ul,
.karta > ol,
.karta .tresc > p,
.karta .tresc > ul,
.karta .tresc > ol,
.wstep{max-width:none}

/* zdjecia: dwa w rzedzie przy 1180 px zamiast trzech ciasnych */
.zdjecia{grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr))}
/* rowna gora kafelkow — skany maja rozne proporcje i siatka sie rwala */
.zdjecia figure{display:flex;flex-direction:column}
.zdjecia img{object-fit:contain;max-height:420px;background:#000}

/* stopka i naglowek trzymaja sie szerokosci tresci */
.stopka .in > p{max-width:880px;margin-left:auto;margin-right:auto}

/* ───── sekcja ze zdjeciami bez wlasnej ramki (8.10, po zrzucie w ciemnym motywie) ─────
   Karty tekstowe maja 880 px, sekcja ze zdjeciami 1180 px. W jasnym motywie
   roznica byla ledwo widoczna, ale na ciemnym tle obie karty maja wyrazne
   krawedzie — i dwa prostokaty o roznej szerokosci czytaly sie jak blad
   skladu, a nie jak decyzja.

   Zamiast zwezac zdjecia (w archiwum radiologicznym to one sa trescia)
   zdejmujemy ramke z ich sekcji. Zostaje kolumna tekstu i szersze zdjecia
   wychodzace na marginesy — uklad redakcyjny zamiast dwoch pudelek. */
.karta-szeroka{
  border:0;
  padding-left:0;
  padding-right:0;
  background:none;
}
/* Naglowek siada nad LEWA KRAWEDZIA pierwszego zdjecia. Probowalem
   trzymac go w linii kolumny tekstu - wygladal wtedy na przesuniety
   wzgledem siatki, ktora opisuje. Podpis nalezy do zdjec, nie do tekstu. */
.karta-szeroka > h2{margin-left:0;margin-right:0;max-width:none}

/* ───── szerzej (8.10, Krzysiek: „taki wąski bardzo ten kontener") ─────
   Karta miala 880 px w oknie 1546 px — 57 % szerokosci ekranu, reszta
   pusta. Wrazenie: strona zwezona, a nie zaprojektowana.

   Poszerzam kontener do 1340 px i daje karcie CALA jego szerokosc.
   Zeby wiersz nie zrobil sie przy tym meczacy, idzie w gore ROZMIAR PISMA
   i odstep miedzy wierszami — dluzszy wiersz przy wiekszym kroju czyta sie
   lepiej niz dlugi wiersz przy malym. */
.in{max-width:1340px}
.karta{max-width:none;padding:clamp(20px,2.6vw,34px)}

/* wieksze pismo i luzniejsza interlinia — rekompensata za dlugi wiersz */
body{font-size:17px;line-height:1.72}
.karta .tresc li{margin-bottom:.4em}
h2{font-size:1.32rem}
.wstep{font-size:1.12rem}

/* zdjecia: przy 1340 px mieszcza sie dwa duze w rzedzie */
.zdjecia{grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr))}
.zdjecia img{max-height:520px}

/* sekcja zdjec ma juz te sama szerokosc co karty — ramka moze wrocic,
   zeby strona nie rozpadla sie na „pudelka i nie-pudelka" */
.karta-szeroka{border:1px solid var(--l);
  padding-left:clamp(20px,2.6vw,34px);padding-right:clamp(20px,2.6vw,34px)}
.karta-szeroka > h2{margin-left:0}