/* Blog — lista wpisów i pojedynczy wpis. Kolory, czcionki i wymiary tylko ze zmiennych motyw.css. */
.blog-glowa{padding:calc(var(--tb) + clamp(36px,7vw,80px)) 0 clamp(18px,3vw,32px)}
.blog-glowa .lead{max-width:60ch}
.blog-filtry{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.blog-filtry .pill{text-decoration:none;display:inline-block}
.blog-filtry .pill:hover{border-color:var(--acc)}
.blog-filtry .pill.on{background:var(--acc);border-color:var(--acc);color:var(--acc-fg)}
.blog-lista{padding:clamp(18px,3vw,32px) 0 clamp(80px,10vw,130px)}
.blog-pusto{margin:0;padding:40px 24px;border:1px solid var(--line);border-radius:22px;background:var(--card);color:var(--muted);text-align:center;font-size:18px}
.blog-siatka{display:grid;grid-template-columns:1fr;gap:16px}
.blog-karta{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:transform .25s,border-color .25s}
.blog-karta:hover{transform:translateY(-3px);border-color:var(--brand)}
/* pojawianie przy przewijaniu: klasę rv dodaje strona.js (bez JS karty są widoczne od razu) */
.blog-karta.rv{transition:opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1),border-color .25s}
.blog-foto{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bg2)}
.blog-foto img{width:100%;height:100%;object-fit:cover}
.blog-tekst{display:flex;flex-direction:column;gap:10px;padding:20px 20px 24px;flex:1}
.blog-meta{font-size:13px;font-weight:700;color:var(--muted)}
.blog-nw{white-space:nowrap}
.blog-kat{color:var(--txt);text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;font-weight:800}
.blog-tekst h2{font-size:21px;font-weight:800;line-height:1.2;letter-spacing:-.02em}
.blog-tekst h2 a{text-decoration:none}
.blog-karta-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.blog-karta:hover h2 a{color:var(--txt2)}
.blog-karta:focus-within{border-color:var(--acc)}
.blog-karta-link:focus-visible{outline:none}
.blog-tekst p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.blog-strony{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:36px}
.blog-strony .pill{text-decoration:none;display:inline-block;min-width:40px;text-align:center}
.blog-strony .strony-luka{display:inline-flex;align-items:center;min-height:40px;padding:0 2px;color:var(--muted);font-weight:700}
.blog-strony a.pill:hover{border-color:var(--acc)}
.blog-strony .pill.on{background:var(--acc);border-color:var(--acc);color:var(--acc-fg);cursor:default}
.blog-przyciski{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

/* pojedynczy wpis */
.blog-wpis{padding:calc(var(--tb) + clamp(28px,5vw,60px)) 0 clamp(80px,10vw,130px)}
.blog-waski{max-width:820px}
.blog-wstecz{display:inline-block;margin-bottom:22px;font-weight:700;font-size:14px;color:var(--txt);text-decoration:none}
.blog-wstecz:hover{color:var(--txt2)}
.blog-wpis h1{font-size:clamp(30px,5.4vw,52px)}
.blog-wpis .blog-meta{margin-top:16px}
.blog-glowne{margin-top:28px;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:var(--bg2)}
.blog-glowne img{width:100%;height:auto}
.blog-tresc{margin-top:32px;max-width:70ch;font-size:clamp(16px,1.5vw,18px);line-height:1.75;color:var(--fg);overflow-wrap:anywhere}
.blog-tresc>*:first-child{margin-top:0}
.blog-tresc p{margin:0 0 1.2em}
.blog-tresc h2,.blog-tresc h3,.blog-tresc h4{margin:1.9em 0 .6em;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.blog-tresc h2{font-size:clamp(24px,3vw,31px)}
.blog-tresc h3{font-size:clamp(20px,2.4vw,24px)}
.blog-tresc h4{font-size:18px}
.blog-tresc ul,.blog-tresc ol{margin:0 0 1.2em;padding-left:1.4em}
.blog-tresc li{margin:.35em 0}
.blog-tresc li::marker{color:var(--txt)}
.blog-tresc a{color:var(--txt);text-underline-offset:3px}
.blog-tresc a:hover{color:var(--txt2)}
.blog-tresc strong{font-weight:800}
.blog-tresc img{max-width:100%;height:auto;border-radius:14px;margin:1.2em 0}
.blog-tresc blockquote{margin:1.4em 0;padding:4px 0 4px 20px;border-left:3px solid var(--acc);color:var(--muted)}
.blog-tresc blockquote p:last-child{margin-bottom:0}
.blog-tresc hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.blog-tresc code{font-size:.9em;padding:2px 6px;border-radius:6px;background:var(--card2)}
.blog-tresc pre{overflow-x:auto;padding:16px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.blog-tresc pre code{padding:0;background:none}
.blog-tresc table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:1.4em 0;font-size:.95em}
.blog-tresc th,.blog-tresc td{padding:10px 14px;border:1px solid var(--line);text-align:left}
.blog-tresc th{background:var(--card2)}
.blog-wycena{margin-top:48px;padding:clamp(22px,4vw,36px);border-radius:22px;border:1px solid var(--line);background:var(--card)}
.blog-wycena h2{font-size:clamp(24px,3.4vw,32px);font-weight:800;letter-spacing:-.02em}
.blog-wycena p{margin:10px 0 0;color:var(--muted);max-width:52ch}
.blog-form{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.blog-form .choices{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.blog-form .choice-r{min-height:48px}
.blog-form .blog-przyciski{margin-top:6px}
.blog-dzieki{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.blog-dzieki h3{font-size:clamp(18px,2.6vw,22px);line-height:1.3}
/* formularz w miejscu klocka „pomiar”: ten sam wygląd, bez stylów tekstu artykułu */
.blog-tresc .blog-wycena{margin:18px 0 0;font-size:16px;line-height:1.5;background:var(--bg2)}
.blog-tresc .blog-wycena h2{margin:0}
.blog-tresc .blog-wycena .btn{text-decoration:none}
.blog-tresc .blog-wycena .btn.pri{color:var(--acc-fg)}
.blog-tresc .blog-wycena .btn.ghost{color:var(--fg)}
.klocek-pomiar .blog-wycena{margin-top:14px;padding:0;border:0;background:none}
.blog-form .agree a{display:inline}
@media (max-width:479px){.blog-form .row2{grid-template-columns:1fr}}
/* pasek „Zadzwoń / Wycena” na telefonie (na komputerze jest stały przycisk .dock z układu) */
.blog-pasek{display:none}
@media (max-width:819px){
  .blog-pasek{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom,0px));z-index:40;display:flex;gap:8px;padding:8px;border-radius:99px;background:var(--card);border:1px solid var(--line);box-shadow:0 14px 40px -10px var(--bg);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  .blog-pasek .btn{flex:1;padding:13px 10px;text-decoration:none;justify-content:center}
  .blog-pasek .btn.ghost{color:var(--fg)}
  .blog-pasek .btn.pri{color:var(--acc-fg)}
  .blog-wpis{padding-bottom:calc(clamp(80px,10vw,130px) + 84px)}
  body:has(.blog-pasek) .dock{display:none}
  /* baner zgody (z-index 60) ma pierwszeństwo: gdy jest otwarty, pasek się chowa — jak .dock */
  body.zg-otwarty .blog-pasek{transform:translateY(160%);pointer-events:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.blog-pasek{transition:none}}

@media (min-width:640px){.blog-siatka{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.blog-siatka{grid-template-columns:repeat(3,1fr)}.blog-karta{border-radius:22px}}
/* telefon: numery stron w jednym rzędzie, „Poprzednia/Następna” pod nimi */
@media (max-width:479px){.blog-strony{gap:6px}.blog-strony .pill{min-width:36px;padding:9px 10px}.blog-strony::after{content:"";flex-basis:100%;height:0;margin-top:-6px;order:0}.blog-strony a[rel=prev],.blog-strony a[rel=next]{order:1}}
@media (max-width:380px){.blog-przyciski .btn{width:100%}.blog-tekst{padding:18px}}
@media (prefers-reduced-motion:reduce){.blog-karta,.blog-karta.rv,.klocek.rv{transition:none;opacity:1;transform:none}.blog-karta:hover{transform:none}.klocek-pytania summary::after{transition:none}}

/* klocki we wpisach (składnia: plan/klocki.md) */
.klocek{margin:2em 0;padding:clamp(18px,3vw,26px);border:1px solid var(--line);border-radius:22px;background:var(--card);line-height:1.6;font-size:.95em}
.klocek.rv{transition:opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1)}
.klocek>*:last-child,.klocek-opis>*:last-child{margin-bottom:0}
.klocek p,.klocek ul,.klocek ol{margin:0 0 .8em}
.klocek h3{margin:0 0 .5em;font-size:1.1em}
.klocek-tytul{margin:0 0 .7em;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--txt)}
.klocek-akcja{margin:1.1em 0 0}
.klocek-akcja .btn{text-decoration:none;color:var(--acc-fg)}
.klocek-w-skrocie{border-left:4px solid var(--acc)}
.klocek-w-skrocie ul{list-style:none;padding:0}
.klocek-w-skrocie li{position:relative;padding-left:1.4em;margin:.4em 0}
.klocek-w-skrocie li::before{content:"";position:absolute;left:0;top:.65em;width:8px;height:8px;border-radius:50%;background:var(--acc)}
.klocek-wazne{position:relative;padding-left:clamp(58px,9vw,72px);border-color:var(--acc);background:var(--acc-tlo2)}
.klocek-wazne::before{content:"!";position:absolute;left:clamp(16px,3vw,22px);top:clamp(16px,3vw,22px);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--acc);color:var(--acc-fg);font-weight:800;font-size:18px}
.klocek-katalog{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
.klocek-okladka{border-radius:14px;overflow:hidden;background:var(--bg2);max-width:180px}
.klocek-okladka img{display:block;width:100%;height:auto;margin:0;border-radius:0}
.klocek-opis .klocek-tytul{font-size:15px;letter-spacing:0;text-transform:none;color:var(--fg);margin-bottom:.3em}
.klocek-meta{color:var(--muted);font-size:13px}
.klocek-os{list-style:none;margin:0;padding:0;counter-reset:krok}
.klocek-os li{position:relative;counter-increment:krok;padding:2px 0 22px 54px;margin:0}
.klocek-os li:last-child{padding-bottom:0}
.klocek-os li::before{content:counter(krok);position:absolute;left:0;top:0;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--acc);color:var(--acc-fg);font-weight:800}
.klocek-os li::after{content:"";position:absolute;left:17px;top:40px;bottom:4px;width:2px;background:var(--acc-tlo2)}
.klocek-os li:last-child::after{display:none}
.klocek-porownanie,.klocek-plusy-minusy{display:grid;grid-template-columns:1fr;gap:14px}
.klocek-kolumna{padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--card2)}
.klocek-kolumna ul{list-style:none;padding:0}
.klocek-kolumna li{position:relative;padding-left:1.4em;margin:.4em 0}
.klocek-plusy li::before,.klocek-minusy li::before{position:absolute;left:0;font-weight:800}
.klocek-plusy li::before{content:"+";color:var(--acc)}
.klocek-minusy li::before{content:"\2212";color:var(--err)}
.klocek-plusy{background:var(--acc-tlo)}
.klocek-minusy{background:var(--err-tlo)}
.klocek-plusy h3{color:var(--acc)}
.klocek-minusy h3{color:var(--err)}
.klocek-liczby{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:0;border:0;background:none}
.klocek-liczba{display:flex;flex-direction:column;gap:6px;padding:18px 16px;border:1px solid var(--line);border-radius:22px;background:var(--card)}
.klocek-wartosc{font-size:clamp(28px,5vw,40px);font-weight:800;line-height:1.1;letter-spacing:-.03em;color:var(--txt)}
.klocek-liczba span{font-size:13px;color:var(--muted);line-height:1.4}
.klocek-pytania{padding:8px clamp(14px,3vw,22px)}
.klocek-pytania details{border-bottom:1px solid var(--line)}
.klocek-pytania details:last-child{border-bottom:0}
.klocek-pytania summary{position:relative;list-style:none;cursor:pointer;padding:14px 34px 14px 0;font-weight:800}
.klocek-pytania summary::-webkit-details-marker{display:none}
.klocek-pytania summary::after{content:"+";position:absolute;right:4px;top:50%;margin-top:-.7em;font-size:1.4em;line-height:1.4;color:var(--txt);transition:transform .25s}
.klocek-pytania details[open] summary::after{content:"\2212";transform:rotate(180deg)}
.klocek-pytania summary:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.klocek-pytania details>*:not(summary){color:var(--muted)}
.klocek-pytania details>p:last-child{margin-bottom:1em}
.klocek-zdjecia{padding:0;border:0;background:none}
.klocek-zdjecia-2,.klocek-zdjecia-3{display:grid;grid-template-columns:1fr;gap:12px}
.klocek-zdjecia-2{grid-template-columns:repeat(2,1fr)}
.klocek-zdjecia figure{margin:0}
.klocek-zdjecia img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;margin:0;border-radius:14px}
.klocek-zdjecia figcaption{margin-top:6px;font-size:13px;color:var(--muted);line-height:1.4}
.klocek-pomiar{border-color:var(--acc);background:linear-gradient(135deg,var(--acc-tlo2),var(--card) 70%)}
.klocek-pomiar .klocek-tytul{font-size:clamp(18px,2.6vw,22px);letter-spacing:-.01em;text-transform:none;color:var(--fg)}
@media (min-width:640px){.klocek-katalog{grid-template-columns:170px 1fr}.klocek-porownanie,.klocek-plusy-minusy{grid-template-columns:1fr 1fr}.klocek-liczby{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.klocek-zdjecia-3{grid-template-columns:repeat(3,1fr)}}
/* belka podglądu wpisu (tylko dla zalogowanego w panelu) */
.blog-podglad{margin:var(--tb) 0 0;padding:10px 16px;text-align:center;font-weight:800;font-size:15px;background:var(--orange);color:var(--acc-fg)}
