/* Callouty procedur — wzorzec z opieka.farm, kolory 3PG.
   Użycie: w edytorze wpisz w polu „Dodatkowe klasy CSS" bloku (akapit, lista, grupa)
   jedną z klas: uwaga | wskazowka | krytyczne. Etykieta dorysuje się sama, redaktor
   wpisuje tylko treść. Ten sam arkusz ładuje się w edytorze i na froncie, więc blok
   wygląda tak samo w obu miejscach.

   ⚠️ Etykieta pochodzi z CSS, więc NIE przechodzi do Markdownu dla skilla w Cowork.
   Dlatego konwersja dokłada ją tekstem (inc/markdown.php w wtyczce) — bez tego procedura
   czytana przez API gubiłaby informację, że akapit jest ostrzeżeniem. To ta sama zasada,
   co przy kroku krytycznym: znaczenie nie może siedzieć w samym kolorze. */

:root{
  --uwaga-fg:#7a4a00; --uwaga-br:transparent; --uwaga-bg:color-mix(in srgb,#f5a623 16%,#fff);
  --wsk-fg:#0b6b97;   --wsk-br:transparent;   --wsk-bg:color-mix(in srgb,#159BD6 13%,#fff);
  --kryt-fg:#8e2418;  --kryt-br:transparent;  --kryt-bg:color-mix(in srgb,#c8102e 10%,#fff);
}

/* Ramka dookoła zdjęta (21.09.2026, decyzja użytkownika) — callout wydziela tło i pasek
   przy lewej krawędzi, obwódka niczego już nie dokładała. Stopień pisma i etykieta w górę,
   bo przy treści procedury 17 px callout w 14 px wyglądał jak przypis, a nie jak ostrzeżenie. */
/* 01.10.2026 (wariant C rundy 5): pasek przy lewej krawędzi zdjęty, callout niesie samo tonalne
   tło z promieniem 14 px, jak blok ostrzeżenia w dokumentacji AdsManagera. */
.uwaga,.wskazowka,.krytyczne{
  position:relative;border:0;border-radius:14px;
  padding:14px 18px 15px;margin:20px 0;font-size:16px;line-height:1.6;
}
.uwaga::before,.wskazowka::before,.krytyczne::before{
  display:block;font-size:13.5px;font-weight:700;letter-spacing:.01em;
  margin-bottom:8px;text-transform:none;
}
.uwaga{border-color:var(--uwaga-br);background:var(--uwaga-bg);color:var(--uwaga-fg)}
.uwaga::before{content:"Ważne"}
.wskazowka{border-color:var(--wsk-br);background:var(--wsk-bg);color:var(--wsk-fg)}
.wskazowka::before{content:"Wskazówka"}
.krytyczne{border-color:var(--kryt-br);background:var(--kryt-bg);color:var(--kryt-fg)}
.krytyczne::before{content:"Uwaga!"}

/* Treść w środku calloutu czyta się jak zwykły tekst, tylko w kolorze ramki. */
.uwaga p,.wskazowka p,.krytyczne p{margin:0 0 8px;color:inherit;font-size:inherit}
.uwaga p:last-child,.wskazowka p:last-child,.krytyczne p:last-child{margin-bottom:0}
.uwaga ul,.wskazowka ul,.krytyczne ul,
.uwaga ol,.wskazowka ol,.krytyczne ol{margin:6px 0 0;padding-left:20px;color:inherit;font-size:inherit}
.uwaga a,.wskazowka a,.krytyczne a{color:inherit;text-decoration:underline}
.uwaga strong,.wskazowka strong,.krytyczne strong{color:inherit}

/* W edytorze bloki mają własne marginesy — bez tego etykieta kleiłaby się do treści. */
.editor-styles-wrapper .uwaga,
.editor-styles-wrapper .wskazowka,
.editor-styles-wrapper .krytyczne{margin:18px 0}

/* Callout wstawiony jako grupa dostaje w edytorze pełną szerokość kanwy, przez co stoi szerzej
   niż akapity wokół i wygląda na przesunięty. Zrównujemy go z kolumną treści. */
.editor-styles-wrapper .uwaga,
.editor-styles-wrapper .wskazowka,

/* Ramka neutralna: wyróżnia blok, ale nie krzyczy ostrzeżeniem. Dla treści, które w źródle
   miały własną nazwę („Treść maila”, „Zasada”, „Sens rozdziału”) — nazwa zostaje w treści,
   bo to ona niesie znaczenie, a nie kolor. */
.ramka{border:0;border-radius:14px;padding:14px 18px 15px;margin:20px 0;font-size:16px;line-height:1.6;background:#ffffff}
.ramka p{margin:0 0 8px}
.ramka p:last-child{margin-bottom:0}
.ramka p:first-child strong{color:var(--navy,#16323F)}

/* W edytorze callout ma być tak szeroki i tak duży jak tekst wokół niego — inaczej redaktor
   pisze w węższej kolumnie mniejszym krojem niż reszta dokumentu i nie widzi, jak to wygląda
   na froncie (31.08.2026). Wcześniejsze ograniczenie do content-size było zbędne: rozpychała
   je grupa pełnej szerokości, a nie sam callout. */
/* Szerokości NIE ustawiamy własną wartością: edytor sam nadaje blokom szerokość kolumny
   treści. Każda liczba wpisana tutaj rozjeżdża się z akapitami — 650 px było za wąskie,
   „none” dało pełną kanwę. Zostaje sam krój i wielkość pisma. */
/* Szerokość ustala edytor, ale WYŚRODKOWANIE trzeba powtórzyć: akapity dostają margines auto
   z reguł Gutenberga, a nasz callout ma własny `margin`, który go nadpisuje i przykleja blok
   do lewej krawędzi kanwy (31.08.2026). */
.editor-styles-wrapper .uwaga,
.editor-styles-wrapper .wskazowka,
.editor-styles-wrapper .krytyczne,
.editor-styles-wrapper .ramka{font-size:inherit;margin-left:auto;margin-right:auto}
.editor-styles-wrapper .uwaga p,
.editor-styles-wrapper .wskazowka p,
.editor-styles-wrapper .krytyczne p,
.editor-styles-wrapper .ramka p{font-size:inherit;line-height:1.6}