/* =============================================================================
   Blog (/blog, /blog/:slug, podgląd z panelu) · E7, Fala 3, 17.10.2026.
   Styl C „Złota nić”: nagłówki, spis treści i CTA na nocnej scenie (złoto wolno jako tekst tylko na śliwce), karty i tekst artykułu na kremie.
   Typografia: Cormorant (nagłówki), Iwona (tekst). Ruch: karty wchodzą z mgły (rozmycie -> ostrość, expo-out, kaskada 60 ms);
   prefers-reduced-motion: zero ruchu.
   Duo rozłożony 890×626: od 860 do 1023 px dwie połówki z rynną 48 px dokładnie na zgięciu (x 421-469): tekst artykułu w lewej,
   spis treści i CTA w prawej; na liście karty w dwóch kolumnach.
   ============================================================================= */

/* ---------- Zakres KREM (te same role co karty kalkulatora i produktów) ---------- */
body.klient :is(.blog-karta, .wpis__karta, .blog__pusto) {
  color-scheme: light;
  --krem-50: #fbf8f2; --krem-100: #f3ede2; --krem-200: #e7dfd0; --biel: #ffffff;
  --tekst-900: #1d1530; --tekst-600: #5c5470;
  --sliwka-900: #2a0a52; --sliwka-700: #3f1283; --sliwka-500: #5a1fb8; --sliwka-100: #ece4f7; --sliwka-50: #f6f2fb;
  --zloto-500: #e3b422; --zloto-700: #b8901a;
  --na-przycisku: #ffffff; --focus-na-przycisku: #e3b422;
  --zloto-linia: color-mix(in srgb, var(--zloto-700) 75%, transparent);
  --przycisk-tlo: var(--sliwka-900); --przycisk-tlo-hover: var(--sliwka-700); --przycisk-cien: none;
  --przycisk-drugi-ramka: var(--sliwka-900); --focus-przycisku: var(--sliwka-500);
  color: var(--tekst-900);
  background: var(--krem-karty);
  box-shadow: 0 0 0 1px var(--zloto-linia-sceny), 0 30px 60px -32px rgb(0 0 0 / 0.8);
}
:root[data-scena="jasna"] body.klient :is(.blog-karta, .wpis__karta, .blog__pusto) { box-shadow: 0 0 0 1px var(--krem-200), var(--cien); }

/* ---------- Lista /blog ---------- */
.blog { padding-top: 16px; }
.blog__naglowek { max-width: 40rem; margin-top: 12px; }
.blog__naglowek h1 { margin-top: 12px; font-size: clamp(var(--fs-40), 7vw, var(--fs-64)); line-height: 1.04; text-wrap: balance; }
.blog__wstep { margin-top: 12px; color: var(--tekst-600); font-size: var(--fs-17); line-height: 1.6; }
.blog__pusto { display: grid; justify-items: start; gap: 16px; margin-top: 28px; padding: 24px 20px; border-radius: 22px; }
.blog__rss { margin-top: 28px; }
:root:not([data-scena="jasna"]) body.klient :is(.blog__rss, .wpis-tez) .przycisk-tekst { color: var(--krem-karty); text-decoration-color: var(--zloto-linia-sceny); }

.blog-karty { display: grid; gap: 20px; margin: 28px 0 0; padding: 0; list-style: none; min-width: 0; }
.blog-karta { min-width: 0; border-radius: 22px; overflow: hidden; transition: transform 0.5s var(--krzywa-c), box-shadow 0.4s var(--krzywa-c); }
.blog-karta__link { display: grid; height: 100%; color: inherit; text-decoration: none; }
.blog-karta__link:focus-visible { outline: 3px solid var(--zloto-na-sliwce, #f0c010); outline-offset: 3px; border-radius: 22px; }
.blog-karta__obraz { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--krem-100); }
.blog-karta__obraz--brak { background: radial-gradient(120% 120% at 20% 0%, #3f1283 0%, #22054f 60%, #13022c 100%); }
.blog-karta__tekst { display: grid; align-content: start; gap: 8px; padding: 18px 18px 20px; }
.blog-karta__temat { font-size: var(--fs-13); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sliwka-700); }
.blog-karta__tytul { margin: 0; font-family: var(--czcionka-naglowki); font-size: var(--fs-28); font-weight: 600; line-height: 1.12; color: var(--sliwka-900); text-wrap: balance; }
.blog-karta__zajawka { color: var(--tekst-600); font-size: var(--fs-16); line-height: 1.55; }
.blog-karta__meta { font-size: var(--fs-14); color: var(--tekst-600); font-variant-numeric: tabular-nums; }
.blog-karta__link:hover .blog-karta__tytul { text-decoration: underline; text-decoration-color: var(--zloto-linia); text-underline-offset: 4px; }
@media (hover: hover) { .blog-karta:hover { transform: translateY(-3px); } }

.blog-strony { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 28px; }
.blog-strony__ktora { color: var(--tekst-600); font-size: var(--fs-15); }
.blog-strony__starsze { margin-left: auto; }

/* ---------- Artykuł ---------- */
.wpis { padding-top: 16px; }
.wpis__siatka { display: grid; gap: 24px; min-width: 0; }
.wpis__glowna, .wpis__boczna { display: contents; }
.wpis__glowna > .okruszki { order: 1; }
.wpis__naglowek { order: 2; min-width: 0; }
.wpis__okladka { order: 3; margin: 0; min-width: 0; }
.wpis-spis { order: 4; }
.wpis__karta { order: 5; }
.wpis-cta { order: 6; }

.wpis__naglowek h1 { margin-top: 12px; font-size: clamp(var(--fs-32), 6.4vw, var(--fs-48)); line-height: 1.08; text-wrap: balance; overflow-wrap: anywhere; }
.wpis__meta { margin-top: 12px; color: var(--tekst-600); font-size: var(--fs-15); font-variant-numeric: tabular-nums; }
.wpis__okladka img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 22px; box-shadow: 0 0 0 1px var(--zloto-linia-sceny), 0 30px 60px -32px rgb(0 0 0 / 0.8); }

.wpis__karta { min-width: 0; padding: 24px 18px 28px; border-radius: 22px; }
.wpis__zajawka { font-family: var(--czcionka-naglowki); font-size: var(--fs-24); font-weight: 500; line-height: 1.35; color: var(--sliwka-900); }
.wpis__zajawka + .wpis__tresc { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--zloto-linia); }

.wpis__tresc { font-size: var(--fs-17); line-height: 1.72; overflow-wrap: break-word; }
.wpis__tresc > * + * { margin-top: 1em; }
.wpis__tresc h2 { margin-top: 1.6em; font-family: var(--czcionka-naglowki); font-size: var(--fs-32); font-weight: 600; line-height: 1.15; color: var(--sliwka-900); scroll-margin-top: 96px; text-wrap: balance; }
.wpis__tresc h3 { margin-top: 1.4em; font-size: var(--fs-18); font-weight: 700; line-height: 1.3; color: var(--sliwka-900); scroll-margin-top: 96px; }
.wpis__tresc :is(ul, ol) { padding-left: 1.3em; }
/* Lista samych odnośników (np. „Źródła”): cel dotykowy ≥ 44 px (WCAG 2.5.5); odnośniki w zdaniach zostają w linii */
.wpis__tresc li > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }
.wpis__tresc ul { list-style: disc; }
.wpis__tresc ol { list-style: decimal; }
.wpis__tresc ul ul { list-style: circle; }
.wpis__tresc li + li { margin-top: 0.35em; }
.wpis__tresc li > :is(ul, ol) { margin-top: 0.35em; }
.wpis__tresc ul li::marker { color: var(--zloto-700); }
.wpis__tresc a { color: var(--sliwka-700); font-weight: 600; text-decoration: underline; text-decoration-color: var(--zloto-linia); text-underline-offset: 3px; }
.wpis__tresc a:hover { text-decoration-color: currentColor; }
.wpis__tresc a:focus-visible { outline: 3px solid var(--sliwka-500); outline-offset: 2px; border-radius: 3px; }
.wpis__tresc strong { font-weight: 700; color: var(--sliwka-900); }
.wpis__tresc blockquote { margin-inline: 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--zloto-700); font-family: var(--czcionka-naglowki); font-size: var(--fs-24); line-height: 1.4; color: var(--sliwka-900); }
.wpis__tresc mark.do-uzupelnienia { padding: 1px 4px; border-radius: 4px; background: #fff1b8; color: var(--tekst-900); outline: 1px dashed var(--zloto-700); }
.wpis-tabela { overflow-x: auto; border-radius: 14px; border: 1px solid var(--krem-200); background: var(--biel); }
.wpis-tabela table { width: 100%; border-collapse: collapse; font-size: var(--fs-16); font-variant-numeric: tabular-nums; }
.wpis-tabela :is(th, td) { padding: 10px 14px; text-align: left; vertical-align: top; }
.wpis-tabela th { background: var(--sliwka-50); color: var(--sliwka-900); font-weight: 700; }
.wpis-tabela tr + tr td, .wpis-tabela tbody tr:first-child td { border-top: 1px solid var(--krem-200); }
.wpis-obraz { margin: 1.4em 0 0; }
.wpis-obraz img { display: block; width: 100%; height: auto; border-radius: 16px; }
.wpis-obraz figcaption { margin-top: 8px; font-size: var(--fs-14); color: var(--tekst-600); }
.wpis-infografika { margin: 1.4em 0 0; }
.wpis-infografika__svg { display: block; width: 100%; max-width: 480px; height: auto; margin-inline: auto; }

/* spis treści i CTA na nocnej scenie */
.wpis-spis { min-width: 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--zloto-linia-sceny); }
.wpis-spis__tytul { font-size: var(--fs-13); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tekst-600); }
.wpis-spis ol { display: grid; gap: 2px; margin: 8px 0 0; padding: 0; list-style: none; counter-reset: spis; }
.wpis-spis li { counter-increment: spis; }
.wpis-spis a { display: flex; gap: 10px; align-items: baseline; min-height: 44px; padding: 10px 0; color: var(--tekst-900); font-size: var(--fs-16); line-height: 1.35; text-decoration: none; }
.wpis-spis a::before { content: counter(spis, decimal-leading-zero); flex: 0 0 auto; font-size: var(--fs-13); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--zloto-700); }
:root:not([data-scena="jasna"]) body.klient .wpis-spis a::before { color: var(--zloto-na-sliwce); }
.wpis-spis a:hover { text-decoration: underline; text-decoration-color: var(--zloto-linia-sceny); text-underline-offset: 4px; }

.wpis-cta { display: grid; justify-items: start; gap: 10px; min-width: 0; padding: 22px 20px 24px; border-radius: 22px; background: radial-gradient(120% 140% at 10% 0%, #3f1283 0%, #22054f 55%, #1d0347 100%); box-shadow: 0 0 0 1px var(--zloto-linia-sceny), 0 30px 60px -32px rgb(0 0 0 / 0.8); color: #faf6ee; }
.wpis-cta__tytul { font-family: var(--czcionka-naglowki); font-size: var(--fs-28); font-weight: 600; line-height: 1.12; color: #faf6ee; }
.wpis-cta__tekst { color: #e4dcef; font-size: var(--fs-16); line-height: 1.55; }
.wpis-cta__przycisk { margin-top: 6px; }

/* pasek podglądu z panelu */
.wpis-podglad { background: #fff1b8; color: #1d1530; border-bottom: 1px solid #b8901a; }
.wpis-podglad__wnetrze { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; min-height: 48px; padding-block: 6px; }
.wpis-podglad .przycisk-tekst { color: #2a0a52; display: inline-flex; align-items: center; min-height: 44px; }

/* „Przeczytaj też” */
.wpis-tez__tytul { font-size: clamp(var(--fs-28), 4vw, var(--fs-40)); }

/* ---------- Ruch: wejście z mgły ---------- */
@media (prefers-reduced-motion: no-preference) {
  .blog-karta, .wpis__okladka, .wpis__karta { animation: blog-mgla 0.9s var(--krzywa-c) both; }
  .blog-karta:nth-child(2) { animation-delay: 60ms; }
  .blog-karta:nth-child(3) { animation-delay: 120ms; }
  .blog-karta:nth-child(4) { animation-delay: 180ms; }
  .blog-karta:nth-child(n+5) { animation-delay: 240ms; }
  .wpis__karta { animation-delay: 80ms; }
}
@media (prefers-reduced-motion: reduce) { .blog-karta { transition: none; } }
@keyframes blog-mgla { from { opacity: 0; filter: blur(8px); transform: translateY(14px); } to { opacity: 1; filter: none; transform: none; } }

/* ---------- Układy szersze ---------- */
@media (min-width: 560px) { .wpis__karta { padding: 32px 28px 36px; } }
@media (min-width: 768px) {
  .blog-karty { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; row-gap: 32px; }
}
/* Duo rozłożony i tablety poziome: dwie połówki, rynna 48 px na zgięciu */
@media (min-width: 860px) {
  .wpis__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; align-items: start; }
  .wpis__glowna { display: grid; gap: 24px; min-width: 0; }
  .wpis__boczna { display: grid; gap: 24px; min-width: 0; position: sticky; top: 24px; }
  .wpis__glowna > .okruszki, .wpis__naglowek, .wpis__okladka, .wpis-spis, .wpis__karta, .wpis-cta { order: 0; }
  .wpis__karta { padding: 24px 20px 28px; }
}
@media (min-width: 1024px) {
  .blog-karty { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
  .wpis__siatka { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 64px; }
  .wpis__glowna { max-width: 760px; }
  .wpis__boczna { padding-top: 96px; }
  .wpis__karta { padding: 40px 48px 44px; }
  .wpis__tresc { font-size: var(--fs-18); }
}