/* CMD Consulting — wpisy blogowe w systemie „neon” (X.2026)
   Dołączany tylko na stronach bloga, po neo.css. Ciemny nagłówek wpisu, treść na jasnym „papierze”,
   kolumna tekstu ok. 70 znaków (37em przy 18 px), spis treści obok (na telefonie nad treścią). */

/* ---------- nagłówek wpisu ---------- */
.post-hero{padding-block:40px 52px}
.post-hero .wrap{display:grid;gap:18px;max-width:980px}
.post-hero h1{font-size:clamp(38px,6vw,68px)}
.post-hero__lead{font-size:19px;color:#D6DBE6;max-width:62ch}
.post-meta{display:flex;flex-wrap:wrap;gap:6px 18px;padding:0;margin:0;list-style:none;font-size:14px;color:var(--muted)}
.post-meta li{display:flex;align-items:center;gap:8px}
.post-meta li+li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--neon);box-shadow:0 0 8px var(--neon)}
@media (max-width:900px){.post-hero{padding-block:22px 36px}.post-hero h1{font-size:38px}.post-hero__lead{font-size:17px}}

/* ---------- układ: spis treści + kolumna tekstu ---------- */
.post{display:grid;grid-template-columns:250px minmax(0,1fr);gap:56px;align-items:start}
.post__body{max-width:37em;min-width:0;color:var(--ink);font-size:18px;line-height:1.72}
@media (max-width:980px){.post{grid-template-columns:1fr;gap:28px}}

.post>aside{align-self:stretch;min-width:0}
.toc{position:sticky;top:calc(var(--nav-h) + 24px);padding:20px 20px 16px;border:1px solid var(--paper-line);border-radius:var(--r);background:#fff;font-size:15px}
.toc b{display:block;font-family:var(--f-display);font-size:20px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;display:grid;gap:2px}
.toc li{counter-increment:toc;display:grid;grid-template-columns:26px 1fr;gap:4px}
.toc li::before{content:counter(toc,decimal-leading-zero);font-variant-numeric:tabular-nums;font-weight:700;font-size:13px;color:#0B8A95;padding-top:5px}
.toc a{display:block;padding:4px 0;color:var(--ink-2);text-decoration:none;line-height:1.4}
.toc a:hover{color:#0B7A84}
@media (max-width:980px){.toc{position:static}}

/* ---------- typografia artykułu ---------- */
.post__body>*+*{margin-top:18px}
.post__body h2{font-size:clamp(30px,3.6vw,42px);margin-top:64px;color:var(--ink);scroll-margin-top:calc(var(--nav-h) + 16px)}
.post__body h2:first-child{margin-top:0}
.post__body h3{font-size:clamp(23px,2.4vw,27px);text-transform:none;margin-top:36px;color:var(--ink)}
.post__body h2+*,.post__body h3+*{margin-top:14px}
.post__body p,.post__body li{color:#26304A}
.post__body strong{color:var(--ink)}
.post__body a{color:#0B7A84;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.post__body a:hover{text-decoration-thickness:2px}
.post__body ul,.post__body ol{padding-left:22px;display:grid;gap:8px}
.post__body li::marker{color:#0B8A95;font-weight:700}
.post__body code{font-size:.92em;background:#E8EDF4;border-radius:5px;padding:1px 6px}

/* ramki z wnioskami */
.box{padding:20px 22px;border-radius:var(--r);border:1px solid #9ED9DE;border-left:5px solid #0B8A95;background:#E8F7F8;display:grid;gap:8px}
.post__body .box{margin-top:26px}
.box__t{font-family:var(--f-display);font-weight:800;font-size:20px;letter-spacing:.04em;text-transform:uppercase;color:#0B6E77}
.box p,.box li{font-size:17px;color:var(--ink)}
.box ul{margin:0}
.box--warn{border-color:#F0D49A;border-left-color:#D68A00;background:#FFF7E6}
.box--warn .box__t{color:#8A5A00}

/* tabela porównawcza */
.cmp-wrap{border:1px solid var(--paper-line);border-radius:var(--r);background:#fff;overflow:hidden}
.post__body .cmp-wrap{margin-top:24px}
.cmp{width:100%;border-collapse:collapse;font-size:16px;line-height:1.5}
.cmp caption{text-align:left;padding:14px 18px 0;font-size:14px;color:var(--ink-2)}
.cmp th,.cmp td{text-align:left;vertical-align:top;padding:14px 18px;border-bottom:1px solid var(--paper-line)}
.cmp thead th{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.cmp tbody th{font-weight:700;color:var(--ink);width:28%}
.cmp td{color:#26304A}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
@media (max-width:640px){
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cmp,.cmp caption,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp caption{padding:14px 16px 0}
  .cmp tbody tr{padding:14px 16px;border-bottom:1px solid var(--paper-line)}
  .cmp tbody tr:last-child{border-bottom:0}
  .cmp tbody th,.cmp td{padding:4px 0;border:0}
  .cmp tbody th{font-family:var(--f-display);font-size:20px;text-transform:uppercase;width:auto;padding-bottom:6px}
  .cmp td::before{content:attr(data-label);display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0B8A95}
  .cmp td+td{margin-top:8px}
}

/* przykład wyliczenia */
.calc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.post__body .calc{margin-top:22px}
.calc div{padding:16px;border-radius:12px;background:#fff;border:1px solid var(--paper-line);display:grid;gap:4px;align-content:start}
.calc b{font-family:var(--f-display);font-size:34px;line-height:1;color:#0B8A95;white-space:nowrap}
.calc span{font-size:14px;color:var(--ink-2);line-height:1.45}
@media (max-width:560px){.calc{grid-template-columns:1fr;gap:8px}.calc div{grid-template-columns:auto 1fr;align-items:center;gap:14px;padding:12px 14px}.calc b{font-size:28px;min-width:4.6ch}}

/* lista kroków przygotowania */
.post__body ol.prep{list-style:none;padding:0;counter-reset:prep;gap:12px}
.prep li{counter-increment:prep;display:grid;grid-template-columns:44px 1fr;gap:12px;padding:16px;border-radius:12px;background:#fff;border:1px solid var(--paper-line)}
@media (max-width:560px){.prep li{grid-template-columns:30px 1fr;gap:8px;padding:14px}}
.prep li::before{content:counter(prep);font-family:var(--f-display);font-weight:800;font-size:34px;line-height:1;color:#0B8A95}

/* błędy */
.post__body ul.errs{list-style:none;padding:0;gap:12px}
.errs li{display:grid;grid-template-columns:28px 1fr;gap:10px}
.errs li::before{content:"✕";font-weight:800;color:#C24A3B;line-height:1.72}

/* zdjęcie w treści */
.post__fig{margin:28px 0 0}
.post__fig img{border-radius:var(--r);border:1px solid var(--paper-line);width:100%;aspect-ratio:16/10;object-fit:cover}
.post__fig figcaption{font-size:14px;color:var(--ink-2);margin-top:8px}

/* wezwanie w treści (ciemna wyspa na papierze) */
.post-cta{margin-top:32px;padding:24px;border-radius:var(--r-lg);background:var(--bg-0);border:1px solid rgba(126,224,232,.45);box-shadow:0 0 40px rgba(126,224,232,.12);display:grid;gap:12px}
.post__body .post-cta p{color:#D6DBE6}
.post-cta .post-cta__t{font-family:var(--f-display);font-weight:800;font-size:26px;line-height:1.05;text-transform:uppercase;color:var(--text)}
.post__body .post-cta a.btn{color:var(--ink);text-decoration:none;justify-self:start}
@media (max-width:560px){.post__body .post-cta a.btn{justify-self:stretch}}

/* powiązane strony i FAQ w treści */
.post__body .chips{margin-top:16px}
.post__body .chips a{text-decoration:none;color:var(--ink)}
.post__body .faq{margin-top:20px}
.post__body .faq p{font-size:17px}
.post__body .faq summary{font-size:17px;line-height:1.45}
.post-src{font-size:14px;color:var(--ink-2);border-top:1px solid var(--paper-line);padding-top:16px}
.post__body .post-src{margin-top:48px}

/* źródła zewnętrzne */
.post__body ul.post-links{list-style:none;padding:0;gap:6px}
.post-links li{padding:10px 0;border-bottom:1px solid var(--paper-line);font-size:16px}
.post-links a::after{content:" ↗";font-size:.85em}
.post__body .post-links+.post-src{margin-top:18px}

/* cele dotykowe ≥44 px na telefonie: spis treści, okruszki, pigułki, stopka */
@media (max-width:900px){
  .toc a{min-height:44px;display:flex;align-items:center;padding:6px 0}
  .crumbs a{display:inline-flex;align-items:center;min-height:44px}
  .post__body .chips a{min-height:44px}
  .post-links a{display:inline-flex;align-items:center;min-height:44px}
  .foot ul{gap:0}
  .foot li{display:flex;align-items:center}
  .foot a{display:inline-flex;align-items:center;min-height:44px}
}