/* ══════════════════════════════════════════════════════════════════════════
   ARTICLE BODY — tresc newsa (/xx/news/<slug>)

   PO CO OSOBNY PLIK: `site.css` daje `.article-body { white-space: pre-wrap }`
   i NIC wiecej — zero regul dla tabel, cytatow, blokow kodu i obrazkow.
   Efekt (zgloszony przez uzytkownika na newsie ELO): tresc WYCHODZILA POZA
   karte newsa. Ten plik domyka te luki. Trzymamy go osobno, zeby nie ruszac
   ogromnego `site.tactical.css` (ktory i tak jest inny na produkcji niz w repo).

   ⚠️ DIAGNOZA TAMTEGO PRZYPADKU (zmierzona na tresci newsa #10):
   post byl wklejony jako Markdown Z PODSWIETLANIEM SKLADNI, czyli HTML typu
      <div style="... white-space: pre; font-family: Consolas ...">
        <div><span style="color: #79c0ff"># Naglowek</span></div>
   `white-space: pre` (inline!) wylacza ZAWIJANIE, wiec kazda dluga linia
   wychodzila poza karte. `.article-body` z site.css nie mial szans, bo
   styl inline wygrywa z arkuszem. Dlatego sekcja "NEUTRALIZACJA" nizej
   nadpisuje to `!important` — swiadomie, bo inaczej nie da sie tego ruszyc.
   Wlasciwym lekarstwem na taki post jest przycisk Markdown w panelu admina
   (patrz markdownService.js) — ponizsze reguly to tylko siatka bezpieczenstwa.
   ══════════════════════════════════════════════════════════════════════════ */

.article-body {
  /* `overflow-wrap` na korzeniu: kazdy dlugi token (URL, identyfikator)
     lamie sie, zamiast rozepchnac kolumne. */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ⚠️ PELNA SZEROKOSC KARTY.
   `site.tactical.css` ustawia `body.theme-tactical .article-body { max-width: 74ch }`
   — dobre dla czystej prozy, ale przy karcie 1080 px zostawialo ~300 px pustego
   miejsca po prawej (zgloszone przez uzytkownika). Selektorem o TEJ SAMEJ
   specyficznosci, ale ladowanym POZ NIEJ (article.css jest dolaczany po
   site.tactical.css), zdejmujemy limit. */
body.theme-tactical .article-body { max-width: none; }

/* ── Rytm pionowy tekstu ─────────────────────────────────────────────── */
.article-body p { margin: 0 0 1.05em; }
.article-body p:last-child { margin-bottom: 0; }
.article-body h2 { margin: 1.9em 0 0.7em; font-size: 1.5rem; }
.article-body h3 { margin: 1.6em 0 0.6em; font-size: 1.2rem; }
.article-body h4 { margin: 1.4em 0 0.5em; font-size: 1.05rem; }
.article-body h1, .article-body h2, .article-body h3, .article-body h4 { scroll-margin-top: 90px; }
.article-body > *:first-child { margin-top: 0; }

.article-body a { color: var(--signal, #ff8a2b); text-decoration: none; border-bottom: 1px solid rgba(255, 138, 43, 0.35); }
.article-body a:hover { color: #fff; border-bottom-color: #fff; }

.article-body hr {
  border: 0;
  border-top: 1px solid var(--hair, #222834);
  margin: 2em 0;
}

.article-body strong { color: #fff; font-weight: 600; }
.article-body em { font-style: italic; }

/* ── Listy ───────────────────────────────────────────────────────────── */
/* `white-space: pre-wrap` z `.article-body` dziedziczy na <li> i potrafi
   rozjechac wciecia — listy ustawiamy jawnie na `normal`. */
.article-body ul, .article-body ol { margin: 0 0 1.05em; padding-left: 1.5em; white-space: normal; }
.article-body li { margin: 0.3em 0; }
.article-body li > ul, .article-body li > ol { margin: 0.3em 0; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }

/* ── Cytaty ──────────────────────────────────────────────────────────── */
/* Wczesniej ZERO stylowania — cytaty z posta ELO zlewaly sie z tekstem. */
.article-body blockquote {
  margin: 1.4em 0;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--signal, #ff8a2b);
  background: linear-gradient(90deg, rgba(255, 138, 43, 0.07), transparent 60%);
  color: #dbe3ef;
  white-space: normal;
}
.article-body blockquote p { margin: 0 0 0.6em; }
.article-body blockquote p:last-child { margin-bottom: 0; }

/* ── TABELE — glowna przyczyna wychodzenia poza karte ────────────────── */
/* Sztuczka jak w GitHub Flavored Markdown: tabela staje sie blokiem
   z wlasnym paskiem przewijania, wiec NIGDY nie rozpycha rodzica.
   Bez tego `table { width: 100% }` + dlugie komorki = przelewanie sie
   tresci poza `.article-card`. */
.article-body table {
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: 0.94rem;
  white-space: normal;
}
.article-body thead { display: table-header-group; }
.article-body tbody { display: table-row-group; }
.article-body th,
.article-body td {
  border: 1px solid var(--hair, #222834);
  padding: 8px 12px;
  white-space: normal;
  vertical-align: top;
  text-align: left;
}
.article-body thead th {
  background: var(--panel-2, #12161e);
  color: #fff;
  font-weight: 600;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: none;
}
.article-body tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.022); }
.article-body tbody tr:hover td { background: rgba(255, 138, 43, 0.06); }

/* ── Kod ─────────────────────────────────────────────────────────────── */
.article-body pre {
  max-width: 100%;
  overflow-x: auto;
  margin: 1.4em 0;
  padding: 14px 16px;
  background: var(--ink, #06070a);
  border: 1px solid var(--hair, #222834);
  border-radius: 0;
  font-family: 'IBM Plex Mono', Consolas, 'Courier New', monospace;
  font-size: 0.84rem;
  line-height: 1.6;
  color: #c8d2e0;
  /* ⚠️ `pre` (bez zawijania) + wlasny pasek przewijania — tak ma byc dla
     diagramow ASCII i kodu. Wazne, zeby `pre` NIE dziedziczyl pre-wrap. */
  white-space: pre;
  tab-size: 4;
}
.article-body pre code {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
  white-space: inherit;
}
.article-body code {
  background: rgba(255, 138, 43, 0.09);
  border: 1px solid rgba(255, 138, 43, 0.22);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: 'IBM Plex Mono', Consolas, 'Courier New', monospace;
  font-size: 0.88em;
  color: #ffc98f;
  white-space: normal;
}

/* Kolory tokenow wstawiane przez /js/codesample.js.
   ⚠️ TE KLASY NIE MIALY DOTAD ZADNEGO CSS — `codesample.js` produkowal
   <span class="cs-kw"> itd. bez stylu, wiec podswietlanie bylo niewidoczne
   (funkcja zrobiona do polowy). Ponizsze reguly ja domykaja. */
.article-body .cs-comment { color: #6a9955; font-style: italic; }
.article-body .cs-str     { color: #7ee787; }
.article-body .cs-tag     { color: #79c0ff; }
.article-body .cs-attr    { color: #d2a8ff; }
.article-body .cs-fn      { color: #ffd66b; }
.article-body .cs-kw      { color: #ff7b72; font-weight: 600; }
.article-body .cs-num     { color: #f2cc60; }
.article-body .cs-op      { color: #ff9e64; }
.article-body .cs-punct   { color: #8a92a3; }

/* ── Media ───────────────────────────────────────────────────────────── */
.article-body img,
.article-body video,
.article-body iframe {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.4em auto;
  border: 1px solid var(--hair, #222834);
}
.article-body iframe { aspect-ratio: 16 / 9; width: 100%; }
.article-body figure { margin: 1.4em 0; }
.article-body figcaption {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--muted, #8a92a3);
  text-align: center;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}
.article-body details {
  margin: 1.2em 0;
  padding: 12px 16px;
  border: 1px solid var(--hair, #222834);
  background: var(--panel, #0d1016);
}
.article-body summary { cursor: pointer; color: #fff; font-weight: 600; }

/* ── NEUTRALIZACJA WKLEJONEGO PODSWIETLANIA (patrz naglowek pliku) ────── */
/* Bloki wklejone z podgladu Markdowna maja INLINE `white-space: pre`, ktore
   wylacza zawijanie i wypycha tresc poza karte newsa. `!important` jest tu
   konieczny (styl inline ma wyzszy priorytet niz arkusz).

   ⚠️ Poza zawijaniem zdejmujemy TAKZE wyglad "bloku kodu", ktory przykleja sie
   przy takim wklejeniu: ciemne tlo (`background-color: #121314`),
   monospace, wlasny kolor i odstepy. Efekt (zgloszony): pol strony bylo
   ciemniejsze niz karta, a tekst konczyl sie na 74ch, wiec widac bylo
   "pusty" pas po prawej.

   ZAKRES JEST CELOWO WASKI: lapie WYLACZNIE element niosacy
   `white-space: pre`, czyli sygnature wklejki. Tekst, ktoremu autor swiadomie
   nadal tlo w edytorze (przycisk `backcolor`), NIE ma tego atrybutu i nie
   zostanie ruszony. */
.article-body [style*="white-space: pre"] {
  /* ⚠️ `normal`, NIE `pre-wrap` — i to jest istotne.
     `white-space` dziedziczy sie na WSZYSTKIE teksty potomne, takze na
     biale znaki POMIEDZY `<div>`-ami, ktore wklejka ma w zrodle HTML.
     Przy `pre-wrap` kazdy taki znak nowej linii renderowal sie jako REALNA
     pusta linia — pojedyncze `<br>` w tresci dawaly podwojne, a akapity
     rozjezdzaly sie na ~80 px. Zmierzone na tresci newsa #10.
     `normal` zwija te smieciowe biale znaki, a wciecia kazdej linii
     zachowujemy na DZIECIACH (regula nizej) — kazda linia wklejki jest
     osobnym `<div>`, wiec struktura linii i tak sie nie gubi. */
  white-space: normal !important;
  overflow-wrap: anywhere;
  max-width: 100%;
  overflow-x: auto;
  background: none !important;
  background-color: transparent !important;
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Wciecia wewnatrz linii (diagramy ASCII!) musza przetrwac, dlatego dzieci
   dostaja `pre-wrap`. Blokowosc `<div>` daje lamanie linii, wiec nie
   potrzebujemy do tego `pre-wrap` na calym kontenerze. */
.article-body [style*="white-space: pre"] > * {
  white-space: pre-wrap;
}
/* ⚠️ Kolory podswietlania skladni przebijaly przez zniesiony kolor kontenera:
   wklejka zostawala zielono-niebieska mimo ze reszta tresci byla normalna.
   Zerujemy je TYLKO wewnatrz wklejki (sygnatura `white-space: pre`), wiec
   tekst swiadomie pokolorowany przez autora w edytorze zostaje bez zmian. */
.article-body [style*="white-space: pre"] * {
  color: inherit !important;
  background-color: transparent !important;
}
/* Wewnetrzne <div> po wklejeniu dzialaja jak akapity — dostaja oddech. */
.article-body [style*="white-space: pre"] > div { margin: 0 0 0.55em; }
.article-body [style*="white-space: pre"] > div:last-child { margin-bottom: 0; }
/* Strona podgladu (admin) uzywa tych samych arkuszy co portal, wiec nie
   potrzebuje wlasnych regul tresci. Ten selektor istnieje tylko po to, zeby
   bylo jasne, ze podglad NIE ma osobnego stylu — inaczej "w podgladzie
   ladnie, po publikacji inaczej". */
/* ── Responsywnosc ───────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .article-body table { font-size: 0.86rem; }
  .article-body th, .article-body td { padding: 6px 9px; }
  .article-body pre { font-size: 0.76rem; padding: 12px; }
  .article-body blockquote { padding-left: 12px; }
}