/* =========================================================
   Wolność od Żywienia, style bloga (spójne z marką)
   ========================================================= */
:root{
  --rose:#a86472;--rose-dark:#8e5260;--pink:#c08a96;--pink-soft:#f3e9ec;
  --gold:#9c6a4d;--gold-soft:#efe6df;--ink:#3a322e;--muted:#7a6f68;
  --line:#e8e3e4;--bg:#ffffff;--cream:#ebe9eb;--cream-deep:#d8d3d7;
  --radius:18px;--shadow:0 16px 44px rgba(80,60,55,.14);--shadow-sm:0 8px 22px rgba(80,60,55,.08);
  --font-head:'Unna',Georgia,serif;--font-body:'Mulish',system-ui,-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);background:var(--bg);line-height:1.75;font-size:18px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--rose);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--font-head);font-weight:700;color:var(--ink);letter-spacing:-.01em;overflow-wrap:break-word}

/* HEADER */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-head);font-weight:700;font-size:1.2rem;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:center 22%;border:2px solid #fff;box-shadow:0 4px 12px rgba(168,100,114,.28)}
.brand small{display:block;font-family:var(--font-body);font-weight:600;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:700;font-size:.95rem;padding:13px 26px;border-radius:999px;border:2px solid transparent;background:var(--rose);color:#fff;cursor:pointer;transition:transform .18s,background .18s,box-shadow .18s;text-align:center}
.btn:hover{background:var(--rose-dark);text-decoration:none;transform:translateY(-2px);box-shadow:0 12px 26px rgba(168,100,114,.32)}
.btn-ghost{background:#fff;color:var(--rose);border-color:var(--rose)}
.btn-ghost:hover{background:var(--pink-soft)}

/* BLOG INDEX */
.blog-hero{padding:66px 0 8px;text-align:center}
.eyebrow{display:inline-flex;gap:8px;align-items:center;font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.72rem;color:var(--rose);background:var(--pink-soft);padding:8px 16px;border-radius:999px;margin-bottom:18px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rose)}
.blog-hero h1{font-size:clamp(2.2rem,5vw,3.2rem);margin-bottom:16px}
.blog-hero p{color:var(--muted);font-size:1.12rem;max-width:640px;margin:0 auto}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:44px 0 80px}
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;color:var(--ink)}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);text-decoration:none}
.post-card .thumb{height:150px;background:linear-gradient(135deg,var(--pink-soft),var(--gold-soft));display:grid;place-items:center;font-size:2.6rem}
.post-card:nth-child(2) .thumb{background:linear-gradient(135deg,var(--gold-soft),#f0e6ea)}
.post-card:nth-child(3) .thumb{background:linear-gradient(135deg,#f0e6ea,var(--cream))}
.post-card:nth-child(4) .thumb{background:linear-gradient(135deg,var(--cream),var(--pink-soft))}
.post-card .body{padding:24px;flex:1;display:flex;flex-direction:column}
.post-card .cat{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rose)}
.post-card h2{font-size:1.3rem;margin:9px 0 10px;line-height:1.3}
.post-card p{color:var(--muted);font-size:.95rem;flex:1}
.post-card .more{margin-top:15px;color:var(--rose);font-weight:700;font-size:.92rem}

/* ARTICLE */
.article{padding:52px 0 70px}
.article-wrap{max-width:760px;margin:0 auto}
.breadcrumb{font-size:.9rem;color:var(--muted);margin-bottom:22px}
.breadcrumb a{color:var(--muted)}
.article h1{font-size:clamp(2rem,5vw,2.9rem);line-height:1.18;margin:6px 0 16px}
.article .meta{color:var(--muted);font-size:.92rem;margin-bottom:30px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.lead{font-size:1.2rem;color:var(--muted);line-height:1.7;margin-bottom:30px}
.article-body h2{font-size:1.7rem;margin:40px 0 14px}
.article-body h3{font-size:1.22rem;margin:28px 0 10px}
.article-body p{margin-bottom:18px;color:#4a423c}
.article-body ul{margin:0 0 20px 22px}
.article-body li{margin-bottom:9px;color:#4a423c}
.article-body strong{color:var(--ink);font-weight:700}
.article-body blockquote{border-left:4px solid var(--rose);padding:4px 0 4px 22px;margin:26px 0;font-family:var(--font-head);font-style:italic;font-size:1.32rem;line-height:1.45;color:var(--ink)}
.cta-box{background:linear-gradient(135deg,#fff 38%,var(--pink-soft));border:1px solid var(--line);border-left:5px solid var(--rose);border-radius:var(--radius);padding:34px 36px;margin:44px 0 10px;box-shadow:var(--shadow-sm)}
.cta-box h3{font-size:1.55rem;margin-bottom:10px}
.cta-box p{color:var(--muted);margin-bottom:22px}
.back-link{display:inline-block;margin-top:36px;font-weight:700;color:var(--rose)}

/* FOOTER */
.site-footer{background:#211c1a;color:rgba(255,255,255,.7);padding:46px 0 28px;margin-top:40px}
.site-footer a{color:rgba(255,255,255,.7)}
.site-footer a:hover{color:#fff}
.footer-inner{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
.footer-inner .brand{color:#fff;font-size:1.1rem}
.footer-inner .brand small{color:rgba(255,255,255,.55)}
.footer-copy{font-size:.85rem}

@media(max-width:860px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){
  .blog-grid{grid-template-columns:1fr}
  body{font-size:17px}
  .nav .btn{padding:10px 18px;font-size:.88rem}
  .brand small{display:none}
}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}