/**
 * prose.css — typografia treści z edytora: the_content() wpisu i strony.
 *
 * KOMPONENT, NIE SEKCJA: znacznik pochodzi z EDYTORA WordPressa (akapity,
 * nagłówki, listy, tabele, cytaty, ramki), więc jest to ten sam przypadek
 * co notice.css (znacznik WooCommerce) i pagination.css (znacznik rdzenia)
 * — motyw nie pisze tych elementów, tylko je ubiera. Wołają go dwa widoki
 * od pierwszego dnia (single.php, page.php), a arkusze widoków wczytują się
 * tylko u siebie. Selektory są POTOMKAMI .dc-prose (element bez klasy
 * z edytora nie ma jak nieść klasy .dc-*), co jest jedynym miejscem
 * w motywie, gdzie styl siedzi na gołym znaczniku — dokładnie tak, jak
 * field.css jest jedynym miejscem dla .form-row.
 *
 * POKRĘTŁA (reguła 18: różnice zmiennymi, nie kopią reguły):
 *   --dc-prose-size    rozmiar akapitu   (dom. --dc-text-3xl, 18 px — wpis;
 *                      strona treściowa ustawia --dc-text-xl, 16 px)
 *   --dc-prose-leading interlinia akapitu (dom. 1.75 — makieta 1.78 / 1.72)
 *   --dc-prose-measure szerokość kolumny  (dom. --dc-measure-2xl, 900 px —
 *                      makieta wpisu ma 760; 900 to najbliższy token, a
 *                      strona treściowa i tak ogranicza kolumnę siatką)
 *
 * Makieta wpisu: p 18,5/1,78 #3a3a3a margines 26; h2 32/800 margines 48/18;
 * h3 22/700 margines 36/12; listy padding 26, gap 12–14, li 18/1,72;
 * strong #161616; cytat karta r22; tabela karta r20 z nagłówkiem
 * wersalikowym; ramka uwagi r20 z obwódką złotą a34 i studzienką ikony.
 * Scalenia (reguła 15): 18,5 → --dc-text-3xl (18); h2 32 → --dc-display-4
 * (26→34, sufit o 2 px wyżej); h3 22 → --dc-text-5xl (22, dokładnie);
 * marginesy 26/48/18/36/12 → 24/48/18/40/12 (tokeny odstępu; 26 i 36 nie
 * istnieją, najbliższe 24/28 i 32/40 — 24 i 40 zachowują proporcję „dwa
 * razy więcej nad nagłówkiem niż pod"); #3a3a3a → --dc-text-secondary;
 * interlinia 1,78 zostaje jako liczba pokrętła (skala tokenów kończy się
 * na 1,6 — tekst 900–1400 słów potrzebuje luźniejszej; kandydat na token
 * --dc-leading-loose zgłoszony w raporcie).
 *
 * Wymaga tokens.css i base.css.
 */

/* ==========================================================================
   1. KOLUMNA I AKAPIT
   ========================================================================== */

.dc-prose {
  --dc-prose-size: var(--dc-text-3xl);
  --dc-prose-leading: 1.75;
  --dc-prose-measure: var(--dc-measure-2xl);

  max-width: var(--dc-prose-measure);
  font-size: var(--dc-prose-size);
  line-height: var(--dc-prose-leading);
  color: var(--dc-text-secondary);
}

.dc-prose > * + * {
  margin-block-start: var(--dc-space-24);
}

/* Elementy blokowe z edytora — bez marginesów własnych, rytm daje
   selektor sąsiedztwa wyżej (base.css zeruje p/ul/ol/figure/blockquote,
   tu dochodzą tabela, obraz, hr i bloki Gutenberga). */
.dc-prose figure,
.dc-prose table,
.dc-prose hr,
.dc-prose pre {
  margin: 0;
}

.dc-prose strong {
  color: var(--dc-text);
}

/* Goły odnośnik z base.css: złoto + podkreślenie; najazd na tusz
   (a:not([class]):hover). Tu tylko waga jak w makiecie (600). */
.dc-prose a:not([class]) {
  font-weight: var(--dc-weight-medium);
}

/* ==========================================================================
   2. NAGŁÓWKI
   h2 i h3 biorą krój, wagę i światło z base.css; tu rozmiar (patrz
   nagłówek pliku) i rytm: dwa razy więcej powietrza NAD nagłówkiem niż pod.
   ========================================================================== */

.dc-prose h2 {
  margin-block-start: var(--dc-space-48);
  font-size: var(--dc-display-4);
  color: var(--dc-text);
}

.dc-prose h3 {
  margin-block-start: var(--dc-space-40);
  font-size: var(--dc-text-5xl);
  color: var(--dc-text);
}

.dc-prose h4 {
  margin-block-start: var(--dc-space-32);
  color: var(--dc-text);
}

.dc-prose h2 + *,
.dc-prose h3 + *,
.dc-prose h4 + * {
  margin-block-start: var(--dc-space-12);
}

.dc-prose h2 + h3 {
  margin-block-start: var(--dc-space-18);
}

/* Kotwice nagłówków (regulamin: §1…§9 z id) — przewijanie z odnośnika
   spisu treści zostawia nagłówek pod nagłówkiem strony, nie na krawędzi. */
.dc-prose [id] {
  scroll-margin-block-start: var(--dc-space-80);
}

/* ==========================================================================
   3. LISTY
   Wcięcie na <li>, nie na liście — base.css zeruje padding wyłącznie
   listom z role="list", a listy z edytora go nie mają, więc padding-inline
   na ul/ol działa; zostaje jednak na li dla spójności z regułą z „O nas".
   ========================================================================== */

.dc-prose ul,
.dc-prose ol {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-12);
  padding-inline-start: var(--dc-space-24);
}

.dc-prose li {
  padding-inline-start: var(--dc-space-4);
}

.dc-prose li::marker {
  color: var(--dc-accent-strong);
  font-weight: var(--dc-weight-bold);
}

/* Lista zagnieżdżona (regulamin: a, b, c pod punktem) — mniejsza,
   przygaszona, bliżej rodzica. */
.dc-prose li > ul,
.dc-prose li > ol {
  margin-block-start: var(--dc-space-10);
  gap: var(--dc-space-8);
  font-size: calc(var(--dc-prose-size) - var(--dc-space-2));
  color: var(--dc-text-muted);
}

.dc-prose li > ol {
  list-style-type: lower-alpha;
}

/* ==========================================================================
   4. CYTAT — karta (makieta: r22, szkło .7, cień 0 16 44 .12 + inset)
   Cudzysłów rysowany ::before w złocie a30 — jak w reviews.css.
   ========================================================================== */

.dc-prose blockquote {
  position: relative;
  padding: var(--dc-space-28) var(--dc-space-32);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-22);
  background-color: var(--dc-surface-glass);
  box-shadow: var(--dc-shadow-xl), var(--dc-shadow-inset-top);
}

.dc-prose blockquote::before {
  content: '\201C';
  display: block;
  margin-block-end: var(--dc-space-8);
  font-family: var(--dc-font-display);
  font-size: var(--dc-numeral-lg);
  font-weight: var(--dc-weight-black);
  line-height: var(--dc-leading-icon);
  color: var(--dc-accent-a30);
}

.dc-prose blockquote p {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-5xl);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-snug);
  letter-spacing: var(--dc-tracking-tight);
  color: var(--dc-text);
}

.dc-prose blockquote p + p,
.dc-prose blockquote cite,
.dc-prose blockquote footer {
  display: block;
  margin-block-start: var(--dc-space-14);
  font-family: var(--dc-font-body);
  font-size: var(--dc-text-base);
  font-weight: 400;
  font-style: normal;
  letter-spacing: var(--dc-tracking-normal);
  line-height: var(--dc-leading-normal);
  color: var(--dc-text-subtle);
}

/* ==========================================================================
   5. RAMKA Z UWAGĄ
   Edytor nie ma znacznika „uwaga"; umowa: <div class="dc-callout"> (albo
   <p class="dc-callout">) w treści. Ten sam przepis co komunikat
   informacyjny (notice.css --info): obwódka złota, tło a10, tytuł
   krojem wystawowym w <strong> na początku.
   ========================================================================== */

.dc-prose .dc-callout {
  padding: var(--dc-space-22) var(--dc-space-24);
  border: var(--dc-border) solid var(--dc-border-accent);
  border-radius: var(--dc-radius-18);
  background-color: color-mix(in srgb, var(--dc-accent) 10%, var(--dc-surface));
  box-shadow: var(--dc-shadow-md);
  font-size: var(--dc-text-xl);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-muted);
}

.dc-prose .dc-callout > strong:first-child {
  display: block;
  margin-block-end: var(--dc-space-8);
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-xl);
  color: var(--dc-text);
}

/* ==========================================================================
   6. TABELA — karta (makieta: r20, szkło .62, nagłówek wersalikowy)
   Reguła 19: to prawdziwa <table> z edytora; tu tylko wygląd. Blok
   Gutenberga owija ją w <figure class="wp-block-table">, tabela klasyczna
   stoi sama — obie dostają to samo.
   ========================================================================== */

.dc-prose table {
  width: 100%;
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-22);
  border-spacing: 0;
  border-collapse: separate;
  overflow: hidden;
  background-color: var(--dc-surface-glass-soft);
  box-shadow: var(--dc-shadow-xl), var(--dc-shadow-inset-top);
  font-size: var(--dc-text-lg);
  line-height: var(--dc-leading-snug);
}

.dc-prose th,
.dc-prose td {
  padding: var(--dc-space-16) var(--dc-space-24);
  border-block-end: var(--dc-border) solid var(--dc-border-line);
  text-align: start;
  vertical-align: top;
}

.dc-prose thead th {
  font-size: var(--dc-text-xs);
  font-weight: var(--dc-weight-medium);
  letter-spacing: var(--dc-tracking-wide);
  text-transform: uppercase;
  color: var(--dc-text-subtle);
}

.dc-prose tbody th {
  font-weight: var(--dc-weight-medium);
  color: var(--dc-text);
}

.dc-prose td {
  color: var(--dc-text-muted);
  font-variant-numeric: tabular-nums;
}

.dc-prose tbody tr:last-child th,
.dc-prose tbody tr:last-child td {
  border-block-end: 0;
}

/* Blok tabeli Gutenberga: szerokie tabele przewijają się w figurze,
   nie rozpychają strony (wymóg z listy weryfikacji: bez przewijania
   poziomego dokumentu). */
.dc-prose .wp-block-table {
  overflow-x: auto;
}

/* ==========================================================================
   7. OBRAZ, PODPIS, LINIA
   ========================================================================== */

.dc-prose img {
  border-radius: var(--dc-radius-18);
}

.dc-prose figcaption {
  margin-block-start: var(--dc-space-12);
  font-size: var(--dc-text-base);
  text-align: center;
  color: var(--dc-text-subtle);
}

.dc-prose hr {
  border: 0;
  border-block-start: var(--dc-border) solid var(--dc-border-line);
}

.dc-prose code {
  padding: var(--dc-space-2) var(--dc-space-6);
  border-radius: var(--dc-radius-6);
  background-color: var(--dc-surface-sunken);
  font-size: calc(var(--dc-prose-size) - var(--dc-space-2));
}