/* Treść z edytora bloków.
   Wpisy są pisane w Gutenbergu i tego nie zmieniamy — ten arkusz sprawia,
   że bloki wyglądają jak elementy z mockupu, bez przepisywania treści. */

/* ---------- tabele ---------- */
/* Blok tabeli owija się w <figure>, więc to on przejmuje rolę .table-scroll:
   na wąskim ekranie tabela przewija się w swojej ramce, a nie rozpycha strony. */
.art-body .wp-block-table{
  overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);margin:32px 0;box-shadow:var(--shadow)
}
.art-body .wp-block-table table{width:100%;border-collapse:collapse;min-width:560px;font-size:.93rem}
.art-body .wp-block-table th,
.art-body .wp-block-table td{padding:15px 17px;text-align:left;border-bottom:1px solid var(--line);color:var(--muted)}
.art-body .wp-block-table thead th{
  background:var(--surface-2);font-size:.75rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--dim);font-weight:800;white-space:nowrap
}
.art-body .wp-block-table tbody tr:last-child td{border-bottom:0}
.art-body .wp-block-table td strong,
.art-body .wp-block-table td b{color:#fff}
/* Paski z is-style-stripes na ciemnym tle robią się mętne — zastępujemy je
   subtelniejszym rozjaśnieniem co drugi wiersz. */
.art-body .wp-block-table.is-style-stripes tbody tr:nth-child(odd){background:rgba(255,255,255,.02)}
.art-body .wp-block-table.is-style-stripes{border-color:var(--line)}

/* ---------- obrazy ---------- */
.art-body .wp-block-image{margin:32px 0}
.art-body .wp-block-image img{border-radius:var(--radius-sm);border:1px solid var(--line-2)}
.art-body .wp-block-image figcaption{
  font-size:.79rem;color:var(--dim);text-align:center;margin-top:10px
}
.art-body .aligncenter{margin-left:auto;margin-right:auto}

/* ---------- cytaty i listy ---------- */
.art-body .wp-block-quote{
  border-left:3px solid var(--rose);padding:6px 0 6px 26px;margin:32px 0;
  font-size:clamp(1.05rem,2.2vw,1.3rem);line-height:1.5;color:var(--text);font-style:normal
}
.art-body .wp-block-quote cite{
  display:block;font-size:.84rem;font-style:normal;color:var(--dim);margin-top:12px
}
.art-body .wp-block-list{color:var(--muted);padding-left:22px;margin:0 0 1.1em}
.art-body .wp-block-list li{margin-bottom:9px}
.art-body .wp-block-list li::marker{color:var(--rose)}

/* ---------- przyciski z edytora ---------- */
/* Część starszych wpisów ma CTA wklejone w treści jako grupa z przyciskiem.
   Nadajemy im wygląd naszych przycisków, zamiast zostawiać domyślne niebieskie. */
.art-body .wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 28px;border-radius:999px;font-weight:700;font-size:1rem;border:0;
  background:linear-gradient(135deg,#ff5c93,var(--rose) 48%,#d92b8a);color:#fff;
  box-shadow:0 12px 34px -12px rgba(255,61,127,.75),inset 0 1px 0 rgba(255,255,255,.22)
}
.art-body .wp-block-button__link:hover{text-decoration:none;transform:translateY(-2px)}
.art-body .wp-block-group.has-base-2-background-color,
.art-body .wp-block-group.has-background{
  background:linear-gradient(150deg,rgba(255,61,127,.14),rgba(157,92,255,.1)) !important;
  border:1px solid var(--line-2);border-radius:var(--radius);
  padding:clamp(22px,3.4vw,34px);margin:36px 0;text-align:center
}
.art-body .wp-block-group.has-background p{color:var(--muted)}

/* ---------- FAQ Yoasta ---------- */
/* inc/content.php zamienia <div class="schema-faq-section"> na <details>,
   więc wystarczy nadać kontenerowi rytm listy FAQ z mockupu.
   Reguły .schema-faq-section niżej to zabezpieczenie na wypadek, gdyby
   zamiana się nie powiodła (np. po zmianie znaczników w Yoaście). */
.art-body .schema-faq{display:grid;gap:11px;margin:26px 0}
.art-body .schema-faq details{margin:0}
.art-body .schema-faq .answer p{margin:0}
.art-body .schema-faq-section{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 22px
}
.art-body .schema-faq-question{display:block;font-weight:650;margin-bottom:8px;color:var(--text)}
.art-body .schema-faq-answer{color:var(--muted);font-size:.95rem;margin:0}

/* ---------- pozostałe ---------- */
.art-body .wp-block-separator{border:0;border-top:1px solid var(--line-2);margin:40px 0}
.art-body .wp-block-embed{margin:32px 0}
.art-body iframe{max-width:100%;border-radius:var(--radius-sm)}

/* Portrety 768×1024 wstawiane jako hero w treści (konwencja z CLAUDE.md)
   zajmowały cały ekran telefonu i spychały tekst poniżej folda.
   Ograniczamy wysokość, zamiast zmieniać treść wpisów. */
.art-body .wp-block-image.aligncenter img{
  max-height:min(620px,72vh);width:auto;margin-left:auto;margin-right:auto
}