/* ==========================================================================
   Sekcja: treść z edytora
   ========================================================================== */

.fc-wysiwyg > .fc-container > * + * {
  margin-top: var(--fc-space-4);
}

.fc-wysiwyg h2,
.fc-wysiwyg h3,
.fc-wysiwyg h4 {
  margin-top: var(--fc-space-6);
}

.fc-wysiwyg ul,
.fc-wysiwyg ol {
  padding-left: var(--fc-space-5);
}

.fc-wysiwyg li + li {
  margin-top: var(--fc-space-2);
}

.fc-wysiwyg img,
.fc-wysiwyg .wp-block-image img {
  border-radius: var(--fc-radius-md);
}

/* Szerokie bloki Gutenberga wychodzą poza kolumnę tekstu. */
.fc-wysiwyg .alignwide {
  max-width: var(--fc-container);
  margin-inline: calc(50% - 50vw);
  margin-inline: auto;
  width: min(var(--fc-container), 100%);
}

.fc-wysiwyg .alignfull {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  max-width: none;
}

.fc-wysiwyg blockquote {
  padding-left: var(--fc-space-4);
  border-left: 3px solid var(--fc-color-brand);
  color: var(--fc-color-text-muted);
  font-style: italic;
}

/* Blok Wideo - INTERPRETACJA, BRAK W DESIGNIE.
   wp-block-library rozciąga wideo na `width: 100%`. Pionowy klip z telefonu
   (406 × 720) dostałby wtedy całą kolumnę 840 px i ~1490 px wysokości.
   Wideo stoi więc w naturalnym rozmiarze, zmniejsza się tylko na wąskim
   ekranie (max-width z reset.css), wyśrodkowane, z promieniem zdjęć w treści. */
.fc-wysiwyg .wp-block-video video {
  width: auto;
  margin-inline: auto;
  border-radius: var(--fc-radius-md);
  background: var(--fc-color-media-bg);
}

/* Osadzenia (YouTube, Vimeo) mają zachować proporcje. */
.fc-wysiwyg iframe {
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: var(--fc-radius-md);
}

/* ==========================================================================
   DOKUMENTY PRAWNE — INTERPRETACJA, BRAK W DESIGNIE
   --------------------------------------------------------------------------
   Makieta „FLY CONCEPT" (v6) nie obejmuje polityki prywatności ani polityki
   cookies. Poniższe reguły składają się wyłącznie z tokenów, które design
   już wprowadził gdzie indziej — nie dokładamy tu ani jednej nowej wartości.

   DLACZEGO NAGŁÓWKI SĄ MNIEJSZE NIŻ DOMYŚLNE
   typography.css daje h2 rozmiar --fc-fs-h2 (44 px), bo taki mają nagłówki
   sekcji na stronie głównej — czyli 2-4 słowa na całą szerokość 1280 px.
   Tutaj nagłówkiem jest pełne zdanie („JAKIE PRZYSŁUGUJĄ CI PRAWA…") w
   kolumnie 840 px: przy 44 px łamie się na trzy wiersze i przestaje być
   nagłówkiem, a staje się drugim akapitem. Schodzimy o dwa kroki skali
   designu — h2 na --fc-fs-h3-md (32 px), h3 na --fc-fs-h5 (24 px) —
   zachowując proporcję nagłówek/tekst z pozostałych podstron.
   ========================================================================== */

.fc-wysiwyg h2 {
  font-size: var(--fc-fs-h3-md);
  line-height: var(--fc-lh-h3-md);
}

.fc-wysiwyg h3 {
  font-size: var(--fc-fs-h5);
  line-height: var(--fc-lh-h5);
}

/* Wiersz pod tytułem: „poprzednia wersja … jeszcze nie była wydana".
   Ta sama waga co data wpisu w karcie aktualności, bo pełni tę samą rolę —
   metryczka dokumentu, nie jego treść. */
.fc-wysiwyg .fc-doc-note {
  color: var(--fc-color-text-muted);
  font-size: var(--fc-fs-sm);
  line-height: var(--fc-lh-sm);
}

/* --------------------------------------------------------------------------
   TABELE

   Trzykolumnowa tabela podstaw prawnych ma w najdłuższej komórce ~40 słów.
   W kolumnie tekstu (840 px, patrz .fc-container--narrow) mieści się bez
   przewijania, ale na wąskim ekranie jej szerokość minimalna przekracza
   szerokość okna. Dlatego przewija się POZIOMO WE WŁASNYM KONTENERZE
   (figure.fc-table) — strona jako całość nigdy nie dostaje poziomego paska.

   Świadomie BEZ min-width: kontener ma 1px obramowania, więc na treść
   zostaje 838 px. Wymuszone 840 px dałoby dwupikselowy pasek przewijania
   na desktopie, czyli usterkę widoczną dokładnie tam, gdzie makieta wymaga
   zgodności co do piksela.
   -------------------------------------------------------------------------- */

.fc-wysiwyg .fc-table,
.fc-wysiwyg .wp-block-table {
  overflow-x: auto;
  border: 1px solid var(--fc-color-border);
  border-radius: var(--fc-radius-xl);
  background: var(--fc-color-surface-alt);
}

.fc-wysiwyg table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fc-fs-sm);
  line-height: var(--fc-lh-sm);
}

.fc-wysiwyg th,
.fc-wysiwyg td {
  padding: var(--fc-space-3) var(--fc-space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--fc-color-border);
}

.fc-wysiwyg thead th {
  font-family: var(--fc-font-heading);
  font-weight: var(--fc-fw-semibold);
  color: var(--fc-color-text);
  white-space: nowrap;
}

.fc-wysiwyg tbody td {
  color: var(--fc-color-text-bright);
}

/* Ostatni wiersz nie potrzebuje kreski — ma pod sobą obramowanie kontenera. */
.fc-wysiwyg tbody tr:last-child th,
.fc-wysiwyg tbody tr:last-child td {
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   ODNOŚNIKI W TREŚCI

   typography.css koloruje `p a` i `.fc-rte a`. Polityka cookies ma jednak
   komplet odnośników W PUNKTACH LISTY — te wypadały poza oba selektory
   i renderowały się kolorem tekstu, czyli nie wyglądały na klikalne.
   Domykamy to na całej treści edytora: w liście, w tabeli i w akapicie
   odnośnik ma wyglądać tak samo.

   overflow-wrap, bo adresy do EUR-Lexu mają po ~90 znaków bez spacji —
   bez tego jeden URL rozpycha kolumnę tekstu i wywala poziomy pasek na całą
   stronę, dokładnie ten błąd, przed którym broni figure.fc-table wyżej.
   -------------------------------------------------------------------------- */
.fc-wysiwyg a {
  color: var(--fc-color-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  overflow-wrap: anywhere;
}

.fc-wysiwyg a:hover {
  color: var(--fc-color-accent-alt);
}

/* INTERPRETACJA — BRAK W DESIGNIE.
   Próg 720 px, a nie 768: to szerokość okna, przy której kolumna tekstu
   (okno − 2 × --fc-container-pad) schodzi poniżej ~670 px, czyli poniżej
   szerokości minimalnej trzykolumnowej tabeli podstaw prawnych. Od tego
   miejsca tabela i tak się przewija, więc zmniejszamy wypełnienie komórek
   i skalę pisma — żeby przewijanie odsłaniało ostatnią kolumnę po jednym
   geście, a nie po trzech. */
@media (max-width: 719.98px) {

  .fc-wysiwyg table {
    font-size: var(--fc-fs-xs);
  }

  .fc-wysiwyg th,
  .fc-wysiwyg td {
    padding: var(--fc-space-2) var(--fc-space-3);
  }

  .fc-wysiwyg thead th {
    white-space: normal;
  }
}