/* ==========================================================================
   See Beyond Horizon – treść z edytora tekstu (T04)
   Ten sam plik ładuje strona publiczna (po site.css) i edytor w panelu,
   dzięki czemu tekst w panelu wygląda tak samo jak na stronie.

   Kontener: .sbh-rich (dodaje go t_rich() w szablonach i edytor w panelu).
   Formatowanie zapisywane jest wyłącznie jako klasy – wartości pochodzą
   z tokenów (tokens.css), więc zmiana tokenu zmienia cały serwis:
     sbh-font-serif | sans                 czcionka
     sbh-size-xs | s | m | l | xl | xxl    rozmiar (--text-*)
     sbh-color-teal | accent | text | grey kolor (paleta marki)
     sbh-align-center | right | justify    wyrównanie akapitu
     sbh-indent-1 … 8                      wcięcie akapitu
     sbh-space-before-1 … 8                odstęp przed akapitem (--space-*)
     sbh-space-after-1 … 8                 odstęp po akapicie (--space-*)
   Reguły elementów odpowiadają układowi artykułu z site.css (.article-body),
   więc istniejące podstrony wyglądają bez zmian.
   ========================================================================== */

/* ---------- Elementy ---------- */
.sbh-rich > :first-child { margin-top: 0; }
.sbh-rich > :last-child { margin-bottom: 0; }

.sbh-rich p {
  font-size: var(--text-m); line-height: 1.8;
  margin: 0 0 var(--space-4); color: rgba(26, 26, 24, .86);
}
.sbh-rich h2 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: var(--text-xl); line-height: 1.25; color: var(--color-teal);
  margin: 36px 0 var(--space-3);
}
.sbh-rich h3 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: var(--text-l); line-height: 1.3; color: var(--color-teal);
  margin: 28px 0 var(--space-2);
}
.sbh-rich h4 {
  font-family: var(--font-sans); font-weight: 500;
  font-size: var(--text-s); line-height: 1.5; letter-spacing: .15em; text-transform: uppercase;
  color: var(--color-text); margin: var(--space-5) 0 var(--space-2);
}
.sbh-rich ul, .sbh-rich ol { margin: 0 0 var(--space-4) 22px; padding: 0; }
.sbh-rich li {
  font-size: var(--text-m); line-height: 1.75;
  margin-bottom: var(--space-2); color: rgba(26, 26, 24, .86);
}
.sbh-rich li > ul, .sbh-rich li > ol { margin-top: var(--space-2); margin-bottom: 0; }
.sbh-rich ul ul { list-style-type: circle; }
.sbh-rich ol ol { list-style-type: lower-alpha; }
.sbh-rich ol ol ol { list-style-type: lower-roman; }
.sbh-rich blockquote {
  margin: var(--space-5) 0; padding: 0 0 0 var(--space-5);
  border-left: var(--line-medium) solid var(--color-accent);
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.6; color: var(--color-text);
}
.sbh-rich a {
  color: var(--color-accent); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: .18em;
  transition: color .3s;
}
.sbh-rich a:hover { color: var(--color-teal); }
.sbh-rich strong { font-weight: 500; }
.sbh-rich h2 strong, .sbh-rich h3 strong { font-weight: 600; }
.sbh-rich em { font-style: italic; }
.sbh-rich img { display: block; max-width: 100%; height: auto; margin: var(--space-5) 0; }
/* T05: obraz z biblioteki mediów (<picture> z wersjami WebP/JPEG) */
.sbh-rich picture.sbh-img { display: block; margin: var(--space-5) 0; }
.sbh-rich picture.sbh-img img { margin: 0; width: 100%; }

/* ---------- Czcionka ---------- */
.sbh-rich .sbh-font-serif { font-family: var(--font-serif); }
.sbh-rich .sbh-font-sans  { font-family: var(--font-sans); }

/* ---------- Rozmiar (skala z tokenów) ---------- */
.sbh-rich .sbh-size-xs  { font-size: var(--text-xs); }
.sbh-rich .sbh-size-s   { font-size: var(--text-s); }
.sbh-rich .sbh-size-m   { font-size: var(--text-m); }
.sbh-rich .sbh-size-l   { font-size: var(--text-l); }
.sbh-rich .sbh-size-xl  { font-size: var(--text-xl); line-height: 1.4; }
.sbh-rich .sbh-size-xxl { font-size: var(--text-xxl); line-height: 1.15; }

/* ---------- Kolor (paleta marki) ---------- */
.sbh-rich .sbh-color-teal   { color: var(--color-teal); }
.sbh-rich .sbh-color-accent { color: var(--color-accent); }
.sbh-rich .sbh-color-text   { color: var(--color-text); }
.sbh-rich .sbh-color-grey   { color: var(--color-grey); }

/* ---------- Wyrównanie ---------- */
.sbh-rich .sbh-align-center  { text-align: center; }
.sbh-rich .sbh-align-right   { text-align: right; }
.sbh-rich .sbh-align-justify { text-align: justify; }

/* ---------- Wcięcia akapitów (krok = --space-6) ---------- */
.sbh-rich .sbh-indent-1 { padding-left: calc(var(--space-6) * 1); }
.sbh-rich .sbh-indent-2 { padding-left: calc(var(--space-6) * 2); }
.sbh-rich .sbh-indent-3 { padding-left: calc(var(--space-6) * 3); }
.sbh-rich .sbh-indent-4 { padding-left: calc(var(--space-6) * 4); }
.sbh-rich .sbh-indent-5 { padding-left: calc(var(--space-6) * 5); }
.sbh-rich .sbh-indent-6 { padding-left: calc(var(--space-6) * 6); }
.sbh-rich .sbh-indent-7 { padding-left: calc(var(--space-6) * 7); }
.sbh-rich .sbh-indent-8 { padding-left: calc(var(--space-6) * 8); }

/* ---------- Odstęp przed akapitem (skala --space-1 … --space-8) ---------- */
.sbh-rich .sbh-space-before-1 { margin-top: var(--space-1); }
.sbh-rich .sbh-space-before-2 { margin-top: var(--space-2); }
.sbh-rich .sbh-space-before-3 { margin-top: var(--space-3); }
.sbh-rich .sbh-space-before-4 { margin-top: var(--space-4); }
.sbh-rich .sbh-space-before-5 { margin-top: var(--space-5); }
.sbh-rich .sbh-space-before-6 { margin-top: var(--space-6); }
.sbh-rich .sbh-space-before-7 { margin-top: var(--space-7); }
.sbh-rich .sbh-space-before-8 { margin-top: var(--space-8); }

/* ---------- Odstęp po akapicie ---------- */
.sbh-rich .sbh-space-after-1 { margin-bottom: var(--space-1); }
.sbh-rich .sbh-space-after-2 { margin-bottom: var(--space-2); }
.sbh-rich .sbh-space-after-3 { margin-bottom: var(--space-3); }
.sbh-rich .sbh-space-after-4 { margin-bottom: var(--space-4); }
.sbh-rich .sbh-space-after-5 { margin-bottom: var(--space-5); }
.sbh-rich .sbh-space-after-6 { margin-bottom: var(--space-6); }
.sbh-rich .sbh-space-after-7 { margin-bottom: var(--space-7); }
.sbh-rich .sbh-space-after-8 { margin-bottom: var(--space-8); }

@media (max-width: 600px) {
  /* na telefonie głębokie wcięcia nie mogą zjadać całej szerokości */
  .sbh-rich [class*="sbh-indent-"] { padding-left: var(--space-5); }
  .sbh-rich .sbh-indent-1 { padding-left: var(--space-4); }
}