/* wspólne style podstron bloga — spójne ze stroną główną */
:root{
  --ink:#0b0c0a;
  --ink2:#121410;
  --paper:#f2f4ea;
  --fog:rgba(242,244,234,.45);
  --green:#75c92a;
  --green-bright:#8ee13d;
  --orange:#fe8a1d;
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html.cursor-custom, html.cursor-custom *{cursor:none!important}
body{background:var(--ink);color:var(--paper);font-family:var(--font-body);font-size:16px;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--green);color:var(--ink)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}

.eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--green)}
.wrap{max-width:72rem;margin:0 auto;padding:0 1.5rem}

/* kursor */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;opacity:0;will-change:transform,opacity;border-radius:9999px}
.cursor-dot{width:7px;height:7px;background:var(--green)}
.cursor-ring{width:38px;height:38px;border:1px solid rgba(117,201,42,.65);transition:opacity .25s,background-color .25s,border-color .25s}
.cursor-ring.is-hover{background:rgba(117,201,42,.16);border-color:var(--green)}

/* nawigacja */
.header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:center;padding:1rem 1rem 0}
.nav{display:flex;width:100%;max-width:72rem;align-items:center;justify-content:space-between;gap:1rem;border:1px solid rgba(255,255,255,.1);border-radius:9999px;background:rgba(11,12,10,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:.55rem 1rem .55rem 1.1rem}
.nav-logo{display:flex;align-items:center;gap:.6rem}
.nav-logo img{height:30px;width:auto}
.nav-links{display:flex;gap:1.6rem;font-size:.9rem;color:rgba(242,244,234,.75)}
.nav-links a{transition:color .25s}
.nav-links a:hover{color:var(--paper)}
@media(max-width:900px){.nav-links{display:none}}

/* przyciski */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:9999px;font-weight:600;font-size:.92rem;letter-spacing:-.01em;padding:.8rem 1.4rem;transition:background-color .3s,color .3s,border-color .3s;white-space:nowrap}
.btn .arr{display:inline-block;transition:transform .3s}
.btn:hover .arr{transform:translate(3px,-3px)}
.btn-green{background:var(--green);color:var(--ink)}
.btn-green:hover{background:var(--green-bright)}
.btn-ghost{border:1px solid rgba(255,255,255,.18);color:var(--paper)}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}
.btn-sm{padding:.6rem 1.15rem;font-size:.85rem}

/* wejścia */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
[data-reveal].in{opacity:1;transform:none}

/* nagłówek wpisu */
.post-hero{position:relative;padding:9.5rem 0 0}
.post-hero .meta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-bottom:1.4rem}
.post-hero .date{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;color:var(--fog)}
.post-hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,4.6vw,3.6rem);line-height:1.1;letter-spacing:-.015em;max-width:56rem}
.post-hero h1 em{font-style:normal;color:var(--green)}
.post-cover{margin:2.6rem auto 0;border-radius:1.4rem;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.post-cover img{width:100%;aspect-ratio:21/9;object-fit:cover;filter:saturate(.92)}
.post-glow{position:absolute;left:50%;top:-10rem;width:60vw;height:30rem;transform:translateX(-50%);background:rgba(117,201,42,.08);filter:blur(120px);border-radius:9999px;pointer-events:none}

/* treść artykułu */
.article{max-width:44rem;margin:0 auto;padding:3.5rem 1.5rem 4rem}
.article p{margin-bottom:1.35rem;color:rgba(242,244,234,.82)}
.article p.lead{font-size:1.15rem;color:var(--paper)}
.article h2{font-family:var(--font-display);font-weight:700;font-size:1.55rem;line-height:1.25;letter-spacing:-.01em;margin:2.6rem 0 1rem;color:var(--paper)}
.article h2::before{content:"( ";color:var(--green);font-weight:800}
.article h2::after{content:" )";color:var(--green);font-weight:800}
.article h3{font-family:var(--font-display);font-weight:700;font-size:1.15rem;margin:1.9rem 0 .7rem}
.article strong{color:var(--paper)}
.article em{color:var(--green);font-style:normal}
.article ul{list-style:none;margin:0 0 1.35rem;display:flex;flex-direction:column;gap:.55rem}
.article li{position:relative;padding-left:1.4rem;color:rgba(242,244,234,.78)}
.article li::before{content:"✦";position:absolute;left:0;top:.15rem;color:var(--green);font-size:.75rem}
.article .hr{border:0;border-top:1px solid rgba(255,255,255,.1);margin:2.4rem 0}
.article blockquote{border-left:2px solid var(--green);padding:.4rem 0 .4rem 1.3rem;margin:0 0 1.35rem;color:var(--paper);font-family:var(--font-display);font-weight:500;font-size:1.12rem}

/* CTA na końcu wpisu */
.post-cta{max-width:44rem;margin:0 auto 5rem;padding:0 1.5rem}
.post-cta .box{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:1.4rem;background:var(--ink2);padding:2.4rem;text-align:center}
.post-cta .glow{position:absolute;left:50%;top:-60%;width:70%;height:100%;transform:translateX(-50%);background:rgba(117,201,42,.12);filter:blur(90px);border-radius:9999px;pointer-events:none}
.post-cta h2{position:relative;font-family:var(--font-display);font-weight:700;font-size:1.5rem;margin-bottom:.6rem}
.post-cta p{position:relative;color:var(--fog);font-size:.95rem;max-width:28rem;margin:0 auto 1.4rem}
.post-cta .row{position:relative;display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}

/* karty listy wpisów (blog/index.html) */
.blogcards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem}
@media(max-width:700px){.blogcards{grid-template-columns:1fr}}
@media(max-width:700px){[data-reveal]{opacity:1;transform:none;transition:none}}
.bpost{display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.1);border-radius:1.2rem;overflow:hidden;background:var(--ink2);transition:border-color .3s,transform .5s cubic-bezier(.16,1,.3,1)}
.bpost:hover{border-color:rgba(117,201,42,.55);transform:translateY(-5px)}
.bpost .bimg{position:relative;aspect-ratio:3/2;overflow:hidden}
.bpost .bimg img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1);filter:saturate(.9)}
.bpost:hover .bimg img{transform:scale(1.07)}
.bpost .bimg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,12,10,.55),transparent 55%);transition:opacity .4s}
.bpost:hover .bimg::after{opacity:.25}
.bpost .btag{position:absolute;left:.9rem;top:.9rem;z-index:2;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;background:rgba(11,12,10,.65);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.15);border-radius:9999px;padding:.3rem .7rem;color:var(--green)}
.bpost .bbody{display:flex;flex-direction:column;gap:.7rem;padding:1.15rem 1.2rem 1.3rem;flex:1}
.bpost h3{font-family:var(--font-display);font-weight:700;font-size:1.15rem;line-height:1.35;transition:color .3s}
.bpost:hover h3{color:var(--green)}
.bpost .bread{display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;font-size:.82rem;font-weight:600;color:var(--fog);transition:color .3s}
.bpost:hover .bread{color:var(--green)}
.bpost .arr{transition:transform .3s}
.bpost:hover .arr{transform:translate(3px,-3px)}

/* stopka */
.footer{border-top:1px solid rgba(255,255,255,.08);padding:3rem 0 2.5rem;font-size:.82rem;color:rgba(242,244,234,.45)}
.footer .cols{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem}
.footer a:hover{color:var(--paper)}
.footer .legal{display:flex;flex-direction:column;gap:.4rem}
.footer .soc{display:flex;gap:1.2rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.footer .soc a{color:var(--green)}
.footer .soc a:hover{color:var(--green-bright)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
}