/* Poradnik (/guide, /guide/{slug}) — 1:1 z web/templates/blog.php i post.php.
   .page-hero/.crumbs współdzielone z /terms, /contact, /pricing (onboarding.css). */

.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.post-card:hover{transform:translateY(-4px);box-shadow:0 24px 44px -26px rgba(26,23,18,.45)}
.post-card__img{aspect-ratio:16/9;overflow:hidden;background:#f3ede2;flex:0 0 auto}
.post-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.post-card:hover .post-card__img img{transform:scale(1.05)}
.post-card__body{padding:20px;display:flex;flex-direction:column;gap:9px;flex:1}
.post-card h3{font-size:17px;line-height:1.35;color:var(--ink)}
.post-card p{font-size:13.5px;line-height:1.55;color:var(--muted);flex:1}
.post-card .more{font-size:13px;font-weight:700;color:var(--accent-d);margin-top:2px}
@media(max-width:860px){.post-grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:520px){.post-grid{grid-template-columns:1fr}}

/* Karta "Najnowszy" na /guide — w web/templates/blog.php ten układ (obraz+tekst obok
   siebie) jest wymuszony inline stylem (flex-direction:row + flex:0 0 46% na obrazie)
   BEZ ŻADNEGO wariantu mobilnego — na wąskich ekranach tekst nachodzi/ucieka poza
   viewport (potwierdzone zrzutem ekranu, ten sam błąd jest w web/ live). Tu naprawione
   TYLKO na mobile: przeniesione z inline style do klasy .post-card--featured, żeby
   ≤620px mogło wrócić do naturalnego układu kolumnowego .post-card (jak zwykłe karty) —
   desktop zostaje bez zmian (nadal wiersz, obraz 46% szerokości). */
.post-card--featured{flex-direction:row;align-items:stretch}
.post-card--featured .post-card__img{aspect-ratio:auto;flex:0 0 46%}
.post-card--featured .post-card__body{justify-content:center;padding:32px;gap:12px}
.post-card--featured h3{font-size:24px;line-height:1.25}
.post-card--featured p{font-size:15px}
@media(max-width:620px){
    .post-card--featured{flex-direction:column;align-items:stretch}
    .post-card--featured .post-card__img{aspect-ratio:16/9;flex:0 0 auto}
    .post-card--featured .post-card__body{padding:20px;gap:9px}
    .post-card--featured h3{font-size:17px;line-height:1.35}
    .post-card--featured p{font-size:13.5px}
}

.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;color:var(--muted-2)}
.post-meta .dot{color:var(--line-2)}
.tag{background:var(--accent-bg);color:var(--accent-d);font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}

.post-cover{max-width:900px;margin:0 auto 8px;padding:0 var(--pad)}
.post-cover img{width:100%;height:auto;border-radius:18px;border:1px solid var(--line)}

/* Artykuł — .prose.article ma własny kontener (nie dzieli bazowego .prose z /terms,
   które ma inny max-width dla treści prawnej — patrz onboarding-terms.css). */
.prose.article{max-width:800px;margin:0 auto;padding:8px var(--pad) 64px;display:flex;flex-direction:column}
.prose.article h2{font-size:30px;margin:38px 0 14px;line-height:1.2}
.prose.article h3{font-size:21px;margin:28px 0 10px;line-height:1.3}
.prose.article h2:first-child,.prose.article h3:first-child{margin-top:0}
.prose.article p{font-size:16.5px;line-height:1.75;color:var(--ink-2);margin:0 0 16px}
.prose.article ul{margin:0 0 18px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.prose.article li{position:relative;padding-left:26px;font-size:16px;line-height:1.65;color:var(--ink-2)}
.prose.article li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent-d);font-weight:800}
.prose.article img{width:100%;height:auto;border-radius:14px;margin:22px 0;border:1px solid var(--line)}
.prose.article a{text-decoration:underline;text-underline-offset:2px}
@media(max-width:860px){.prose.article{padding:8px var(--pad) 48px}.prose.article h2{font-size:24px;margin:30px 0 12px}.prose.article h3{font-size:19px}.prose.article p{font-size:16px}}
@media(max-width:520px){.prose.article h2{font-size:22px}}

.article-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:linear-gradient(120deg,var(--accent-bg),#fffaf0);border:1px solid #f0e2bf;border-radius:16px;padding:22px 26px;margin:0 0 28px}
.article-cta--end{margin:32px 0 0}
.article-cta__tx{display:flex;flex-direction:column;gap:3px}
.article-cta__tx b{font-family:'Bricolage Grotesque',sans-serif;font-size:17px;color:var(--ink)}
.article-cta__tx span{font-size:13.5px;color:var(--muted)}
@media(max-width:560px){.article-cta{padding:20px}}

.post-author-inline b{color:var(--ink-2);font-weight:700}
.post-author{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin:26px 0 0}
.post-author__ava{width:52px;height:52px;flex:0 0 auto;border-radius:999px;background:var(--accent-bg);color:var(--accent-d);display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:19px}
.prose.article .post-author__photo{width:52px;height:52px;flex:0 0 auto;border-radius:999px;object-fit:cover;border:2px solid var(--line);margin:0}
.post-author__tx{display:flex;flex-direction:column;gap:2px}
.post-author__label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.post-author__tx b{font-family:'Bricolage Grotesque',sans-serif;font-size:17px;color:var(--ink)}
.post-author__role{font-size:13px;color:var(--muted)}

.toc{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:0 0 28px}
.toc h2{font-size:14px;margin:0 0 10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.toc ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
.toc li{font-size:14.5px;line-height:1.5;padding-left:0}
.prose.article .toc li::before{content:none}
.toc a{color:var(--ink-2);text-decoration:none}
.toc a:hover{color:var(--accent-d);text-decoration:underline}

.mini-cta{max-width:800px;margin:0 auto;padding:0 var(--pad) 64px}
.mini-cta__in{background:linear-gradient(120deg,var(--accent),#ffc861);border-radius:18px;padding:32px;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.mini-cta__in h2{font-size:24px;color:var(--ink);margin:0}
.mini-cta__in p{font-size:14.5px;color:#4a3c14;margin:6px 0 0;max-width:440px}
@media(max-width:860px){.mini-cta__in{flex-direction:column;align-items:flex-start;padding:26px}}