/*
 * visual10 - treść opisów z edytora zaplecza (PortalRichText::toHtml, PortalEventPage::richHtml) w kontenerze .p-rich:
 * strona wydarzenia (PortalEventPage), strona terminu (PortalTermPage) - dołączany przez
 * $this->page->addStylesheet('/portal/css/rich.css'). Typografia akapitów, nagłówków h2-h4, list, cytatów i linków;
 * obrazki i filmy YouTube / Vimeo (ramka 16:9) nie wychodzą poza kontener (reflow 320 px, WCAG 1.4.10); tabele przewijane
 * w bok w opakowaniu .p-rich-table (role="region", fokus z klawiatury), a bez opakowania - sama tabela.
 * Kolory wyłącznie z tokenów core.css / marki.
 */

.p-rich {
  font-size: 16px;
  line-height: 1.6;
  color: var(--p-ink);
  overflow-wrap: break-word;
}
.p-rich > :first-child { margin-top: 0; }
.p-rich > :last-child { margin-bottom: 0; }
.p-rich p,
.p-rich ul,
.p-rich ol,
.p-rich blockquote,
.p-rich hr,
.p-rich iframe,
.p-rich .p-rich-table { margin: 0 0 14px; }

.p-body .p-rich h2,
.p-body .p-rich h3,
.p-body .p-rich h4 {
  margin: 22px 0 8px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--p-ink);
}
.p-body .p-rich h2 { font-size: 20px; }
.p-body .p-rich h3 { font-size: 18px; }
.p-body .p-rich h4 { font-size: 16px; }

.p-rich ul,
.p-rich ol { padding-left: 1.5em; }
.p-rich li + li { margin-top: 4px; }
.p-rich li > ul,
.p-rich li > ol { margin: 4px 0 0; }
.p-rich strong,
.p-rich b { font-weight: 700; }
.p-rich a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.p-rich a:hover { text-decoration-thickness: 2px; }
.p-rich blockquote {
  padding: 2px 0 2px 16px;
  border-left: 4px solid var(--brand-line);
  color: var(--p-ink-2);
}
.p-rich hr { height: 0; border: 0; border-top: 1px solid var(--p-line-2); }

/* obrazki i filmy w szerokości kontenera */
.p-rich img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border-radius: var(--p-r-sm, 12px);
}
.p-rich iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--p-r-sm, 12px);
  background: var(--p-ink);
}

/* tabele: przewijane w bok, tabela zachowuje semantykę (opakowanie z PortalEventPage::richHtml) */
.p-rich-table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.p-rich-table:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.p-rich table:not(.p-rich-table > table) {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 14px;
}
.p-rich table {
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.45;
}
.p-rich th,
.p-rich td {
  padding: 8px 12px;
  border: 1px solid var(--p-line-2);
  text-align: left;
  vertical-align: top;
}
.p-rich th { background: var(--p-bg); font-weight: 600; }

@media (forced-colors: active) {
  .p-rich th, .p-rich td { border-color: CanvasText; }
  .p-rich blockquote { border-left-color: CanvasText; }
}