/* Localfy: blog (indeks + artykuły). Ładowany po /site.css. Ruch tylko transform/opacity. */
.blog-main{--bw:46rem}
.blog-main .shell{width:min(100% - 2*var(--lf-gutter),var(--lf-max));margin-inline:auto;padding:0}
/* ===== Nagłówek wpisu ===== */
.blog-hero{position:relative;padding:clamp(36px,5vw,80px) 0 clamp(32px,4vw,56px);border-bottom:1px solid var(--lf-line)}
.blog-hero-grid{display:none}
.blog-hero>*:not(.shell),.blog-hero .shell>*,.article-wrap>*:not(.shell),.article-wrap .shell>*{width:min(100% - 2*var(--lf-gutter),var(--bw));margin-inline:auto}
.blog-hero .shell>*,.article-wrap .shell>*{width:min(100%,var(--bw))}
.blog-list .blog-hero .shell>*{width:100%;max-width:none}
.blog-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 auto 20px;font-size:var(--lf-fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--lf-ink-2)}
.blog-eyebrow a{color:var(--lf-action);text-underline-offset:3px}
.blog-eyebrow .bar{width:10px;height:10px;background:var(--lf-tag);box-shadow:1px 1px 0 var(--lf-ink);transform:rotate(-8deg)}
.blog-eyebrow .tag{position:static;inset:auto;transform:none;perspective:none;z-index:auto;color:var(--lf-ink-2)}
.blog-hero h1,.blog-title{font-size:clamp(2.1rem,1.4rem + 3vw,3.6rem);letter-spacing:-.03em;margin:0 auto 18px;max-width:var(--bw)}
.blog-list .blog-title{font-size:var(--lf-fs-3xl);max-width:16ch;margin-left:0}
.blog-hero h1 em,.blog-title em{font-style:normal;box-shadow:inset 0 -.26em 0 var(--lf-tag)}

.blog-lead{font-size:var(--lf-fs-lg);color:var(--lf-ink-2);margin:0 auto}
.blog-list .blog-lead{max-width:56ch;margin-left:0}
.blog-meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 auto 20px;font-size:var(--lf-fs-sm);color:var(--lf-ink-2)}
.dot-sep{width:4px;height:4px;border-radius:50%;background:currentColor}
.meta-tag{display:inline-block;padding:2px 9px;background:var(--lf-tag);color:var(--lf-on-tag);font-size:var(--lf-fs-xs);font-weight:700;box-shadow:var(--lf-shadow-tag);transform:rotate(-2deg)}
.blog-hero>*,.blog-hero .shell>*{animation:lf-up .8s var(--lf-ease) both}
.blog-hero h1,.blog-hero .blog-title{animation-delay:.05s}
.blog-hero .blog-lead,.blog-hero .blog-meta-row{animation-delay:.12s}
/* ===== Treść artykułu ===== */
.article-wrap{padding:clamp(36px,5vw,72px) 0 var(--lf-section);font-size:1.125rem;line-height:1.7}
.article-wrap h2{font-size:clamp(1.55rem,1.2rem + 1.4vw,2.1rem);letter-spacing:-.025em;margin-top:2.2em;margin-bottom:.6em;scroll-margin-top:84px}
.article-wrap h3{font-size:1.3rem;margin-top:1.8em;margin-bottom:.5em}
.article-wrap h2:first-child,.article-wrap h3:first-child,.article>h2:first-child{margin-top:0}
.article-wrap p,.article-wrap li{color:var(--lf-ink)}
.article-wrap p{margin:0 auto 1.1em}
.article-wrap ul,.article-wrap ol{padding-left:1.3em;margin:0 auto 1.3em}
.article-wrap li{margin:.35em 0;padding-left:.2em}
.article-wrap li::marker{color:var(--lf-action);font-weight:700}
.article-wrap strong{font-weight:700}
.article-wrap a:not([class]){color:var(--lf-action);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.article-wrap a:not([class]):hover{text-decoration-thickness:2px}
.article-wrap hr{border:0;border-top:1px solid var(--lf-line);margin:2.4em auto}
.article-wrap code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;background:var(--lf-surface);border:1px solid var(--lf-line);border-radius:var(--lf-r-sm);padding:.1em .35em;overflow-wrap:anywhere}
.article-wrap blockquote{margin:1.6em auto;padding:4px 0 4px 20px;border-left:4px solid var(--lf-tag);font-size:var(--lf-fs-lg)}
.article-wrap table{width:100%;border-collapse:collapse;margin:1.6em auto;font-size:var(--lf-fs-sm);line-height:1.5;background:var(--lf-surface);border:1px solid var(--lf-line)}
.article-wrap th,.article-wrap td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--lf-line)}
.tscroll{overflow-x:auto;margin:1.6em auto;-webkit-overflow-scrolling:touch}
.tscroll table{margin:0}
.tscroll th,.tscroll td{min-width:7.5em}
.article-wrap thead th{background:var(--lf-ink);color:var(--lf-on-night);font-weight:700;border-bottom:0}
.article-wrap tbody tr:nth-child(even){background:var(--lf-paper)}
.article-wrap .article{width:min(100%,var(--bw))}
.article>*{margin-left:0;margin-right:0}
/* Ramki w treści */
.cta-inline,.seo-links-post,.article-wrap .aside{margin:2em auto;padding:20px 24px;background:var(--lf-surface);border:1px solid var(--lf-line);border-left:4px solid var(--lf-tag);border-radius:var(--lf-r-md)}
.cta-inline p,.seo-links-post p,.article-wrap .aside p{margin:0;color:var(--lf-ink-2);font-size:var(--lf-fs-sm)}
.seo-links-post h3{margin:0 0 10px;font-size:1.1rem}
.seo-links-post ul{margin:0}
/* CTA na końcu wpisu */
.article-cta{display:grid;gap:14px;justify-items:start;margin:3em auto 0;padding:clamp(24px,4vw,40px);background:var(--lf-night);color:var(--lf-on-night);border-radius:var(--lf-r-lg)}
.article-cta h3{margin:0;font-size:var(--lf-fs-xl);color:#fff}
.article-cta p{margin:0;color:var(--lf-on-night-2)}
.article-cta-text{display:grid;gap:10px}
.article-cta .btn-primary,.article-cta-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 22px;background:var(--lf-brand);color:var(--lf-ink);font-weight:700;text-decoration:none;border-radius:var(--lf-r-md);transition:transform .2s var(--lf-ease)}
.article-cta .btn-primary:hover,.article-cta-btn:hover{transform:translateY(-2px)}
.article-cta-btn svg{flex:none}
.back-link{display:inline-flex;align-items:center;gap:8px;margin:32px auto 0;font-weight:700;color:var(--lf-action);text-decoration:none}
.back-link:hover{text-decoration:underline;text-underline-offset:3px}
/* ===== Czytaj także ===== */
.related{padding:var(--lf-section) 0;background:var(--lf-surface);border-top:1px solid var(--lf-line)}
.related h2{font-size:var(--lf-fs-xl);margin-bottom:24px}
.related ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.related a{display:flex;justify-content:space-between;align-items:center;gap:12px;height:100%;padding:16px 18px;border:1px solid var(--lf-line);border-radius:var(--lf-r-md);background:var(--lf-paper);font-weight:700;text-decoration:none;transition:transform .2s var(--lf-ease),border-color .2s}
.related a::after{content:"→";color:var(--lf-action);transition:transform .2s var(--lf-ease)}
.related a:hover{transform:translateY(-2px);border-color:var(--lf-ink)}
.related a:hover::after{transform:translateX(3px)}
/* ===== Indeks bloga ===== */
.blog-list>section:not(.blog-hero){padding:clamp(40px,5vw,80px) 0}
.blog-index-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.blog-card{display:flex;flex-direction:column;gap:10px;padding:22px;background:var(--lf-surface);border:1px solid var(--lf-line);border-radius:var(--lf-r-lg);text-decoration:none;color:var(--lf-ink);transition:transform .25s var(--lf-ease),box-shadow .25s var(--lf-ease),border-color .25s}
.blog-card:hover{transform:translateY(-4px);border-color:var(--lf-ink);box-shadow:var(--lf-shadow-object)}
.blog-card h3{font-size:1.2rem}
.blog-card p{margin:0;color:var(--lf-ink-2);font-size:var(--lf-fs-sm)}
.blog-tag{align-self:flex-start;padding:2px 9px;background:var(--lf-tag);color:var(--lf-on-tag);font-size:var(--lf-fs-xs);font-weight:700;letter-spacing:.04em}
.blog-foot{display:flex;justify-content:space-between;margin-top:auto;padding-top:12px;border-top:1px solid var(--lf-line);font-size:var(--lf-fs-xs);color:var(--lf-ink-2)}
.blog-read{font-weight:700;color:var(--lf-action)}
.seo-links{width:min(100% - 2*var(--lf-gutter),var(--lf-max));margin:0 auto;padding-bottom:var(--lf-section)}
.seo-links h2{font-size:var(--lf-fs-xl);margin-bottom:8px}
.seo-links .sl-lead{color:var(--lf-ink-2)}
.sl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:20px}
.sl-grid a{display:grid;gap:4px;padding:16px 18px;background:var(--lf-surface);border:1px solid var(--lf-line);border-radius:var(--lf-r-md);text-decoration:none;transition:transform .2s var(--lf-ease),border-color .2s}
.sl-grid a:hover{transform:translateY(-2px);border-color:var(--lf-ink)}
.sl-grid span{font-size:var(--lf-fs-sm);color:var(--lf-ink-2)}
@media (prefers-reduced-motion:reduce){.blog-hero>*,.blog-hero .shell>*{animation:none}.blog-card,.related a,.sl-grid a,.article-cta .btn-primary,.article-cta-btn{transition:none}}
@media (max-width:560px){.blog-lead{font-size:1.0625rem}.article-wrap{font-size:1.0625rem;line-height:1.65}.article-wrap th,.article-wrap td{padding:8px}}