/* olsztyn.ai — style bloga.
   Te same zmienne co strona glowna; osobny plik, bo blog rosnie i powielanie
   CSS w kazdym wpisie szybko przestaje sie utrzymywac. */
:root{
  --bg:#0b1220; --bg-soft:#101a2e; --panel:#131f36; --line:#22314f;
  --ink:#e8eefc; --ink-dim:#a7b6d4; --ink-faint:#7688ab;
  --accent:#38bdf8; --accent-2:#7dd3a0; --accent-warm:#fbbf24;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.72 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1080px; margin:0 auto; padding:0 22px}
.narrow{max-width:720px}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#04121f;padding:10px 16px;border-radius:0 0 8px 0;z-index:100}
.skip:focus{left:0}

header.nav{position:sticky; top:0; z-index:50; background:rgba(11,18,32,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:13px 0}
.brand{font-weight:700; font-size:1.12rem; color:var(--ink); display:flex; align-items:center; gap:9px}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 12px var(--accent-2)}
.brand:hover{text-decoration:none}
.nav-links{display:flex; gap:22px; align-items:center; font-size:.93rem}
.nav-links a{color:var(--ink-dim)}
.nav-links a:hover{color:var(--ink); text-decoration:none}
.lang{border:1px solid var(--line); border-radius:7px; padding:4px 10px; font-size:.82rem; color:var(--ink-faint)}
.lang:hover{border-color:var(--accent); color:var(--accent)}
@media(max-width:760px){.nav-links .hide-sm{display:none}}

.blog-head{padding:60px 0 40px; border-bottom:1px solid var(--line);
  background:radial-gradient(900px 380px at 75% -14%, rgba(56,189,248,.12), transparent 60%);}
.eyebrow{color:var(--accent-2); font-size:.79rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; margin-bottom:15px}
h1{font-size:clamp(1.8rem,4.2vw,2.7rem); line-height:1.18; margin:0 0 18px; letter-spacing:-.02em; font-weight:750}
.lede{font-size:1.08rem; color:var(--ink-dim); max-width:640px; margin:0}

/* --- lista wpisow --- */
.posts{padding:52px 0}
.post-card{display:block; background:var(--panel); border:1px solid var(--line); border-radius:13px;
  padding:28px; margin-bottom:20px; transition:.18s; color:inherit}
.post-card:hover{border-color:#33507f; transform:translateY(-2px); text-decoration:none}
.post-meta{display:flex; gap:13px; align-items:center; flex-wrap:wrap; font-size:.81rem; color:var(--ink-faint); margin-bottom:11px}
.pill{padding:3px 10px; border-radius:99px; background:rgba(56,189,248,.11); color:var(--accent); border:1px solid rgba(56,189,248,.24); font-size:.75rem}
.pill.warm{background:rgba(251,191,36,.1); color:var(--accent-warm); border-color:rgba(251,191,36,.24)}
.post-card h2{margin:0 0 10px; font-size:1.32rem; font-weight:700; letter-spacing:-.012em; color:var(--ink)}
.post-card p{margin:0; color:var(--ink-dim); font-size:.95rem}

/* --- tresc wpisu --- */
article{padding:48px 0 60px}
article h2{font-size:1.52rem; margin:44px 0 15px; letter-spacing:-.015em; font-weight:700}
article h3{font-size:1.16rem; margin:32px 0 11px; font-weight:650; color:var(--accent-2)}
article p{margin:0 0 19px; color:var(--ink-dim)}
article ul,article ol{margin:0 0 19px; padding-left:22px; color:var(--ink-dim)}
article li{margin-bottom:9px}
article strong{color:var(--ink); font-weight:650}
article blockquote{margin:26px 0; padding:19px 24px; border-left:3px solid var(--accent-2);
  background:rgba(125,211,160,.06); border-radius:0 10px 10px 0; color:var(--ink-dim)}
article blockquote p:last-child{margin:0}
.tldr{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:0 12px 12px 0; padding:24px 26px; margin:0 0 34px}
.tldr b{display:block; color:var(--accent); font-size:.79rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:11px}
.tldr p{margin:0; color:var(--ink-dim)}

table{width:100%; border-collapse:collapse; margin:0 0 22px; font-size:.92rem; display:block; overflow-x:auto}
th,td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line)}
th{color:var(--ink); font-weight:650; font-size:.85rem; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-faint)}
td{color:var(--ink-dim)}

.disclaimer{margin-top:44px; padding:20px 24px; border:1px solid var(--line); border-radius:11px;
  background:var(--bg-soft); font-size:.88rem; color:var(--ink-faint)}
.disclaimer b{color:var(--ink-dim)}

.share{margin-top:38px; padding-top:26px; border-top:1px solid var(--line);
  display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.share span{color:var(--ink-faint); font-size:.89rem}
.share a{display:inline-flex; align-items:center; gap:8px; padding:9px 17px; border:1px solid var(--line);
  border-radius:8px; font-size:.89rem; color:var(--ink)}
.share a:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}

.cta-band{margin-top:44px; background:linear-gradient(135deg,var(--panel),var(--bg-soft));
  border:1px solid var(--line); border-radius:14px; padding:32px; text-align:center}
.cta-band h3{margin:0 0 11px; font-size:1.28rem; font-weight:700; color:var(--ink)}
.cta-band p{margin:0 auto 22px; color:var(--ink-dim); max-width:520px}
.btn{display:inline-block; padding:12px 24px; border-radius:9px; font-weight:600; font-size:.95rem; transition:.15s}
.btn-primary{background:var(--accent); color:#04121f}
.btn-primary:hover{background:#7dd3fc; text-decoration:none}

footer{padding:40px 0 50px; color:var(--ink-faint); font-size:.87rem; border-top:1px solid var(--line)}
.foot-bottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
footer a{color:var(--ink-faint)}
footer a:hover{color:var(--accent)}