/* Strony case study WordPress (W12). Te same tokeny i fonty co portfolio.html, żeby wyglądały jak jego część. */
:root{--papier:#F3F4F6;--bialy:#FFFFFF;--tusz:#121316;--szary:#5E636D;--linia:#DADDE3;--projekt:#2447F5;--link:#2447F5;color-scheme:light}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--papier:#0E0F12;--bialy:#17191D;--tusz:#EEF0F3;--szary:#A0A6B0;--linia:#2A2D34;--link:#8FA3FF;color-scheme:dark}}
:root[data-theme="dark"]{--papier:#0E0F12;--bialy:#17191D;--tusz:#EEF0F3;--szary:#A0A6B0;--linia:#2A2D34;--link:#8FA3FF;color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--papier);color:var(--tusz);font:400 17px/1.6 Onest,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--link)}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--projekt);outline-offset:3px;border-radius:4px}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0}
.top a{color:var(--tusz);text-decoration:none;font-weight:600}
.top a:hover{text-decoration:underline;text-underline-offset:4px}
.top .inny{color:var(--szary);font-weight:500}

h1,h2{font-family:Unbounded,Onest,sans-serif;font-weight:700;letter-spacing:-.01em;line-height:1.08}
h1{font-size:clamp(2.3rem,6vw,4.4rem);margin:28px 0 18px}
h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:22px}
h3{font-size:1.1rem;font-weight:600;margin-bottom:6px}
.status{display:inline-block;border:1px solid var(--linia);background:var(--bialy);border-radius:999px;padding:5px 14px;font-size:.88rem;color:var(--szary)}
.lede{font-size:clamp(1.1rem,1.6vw,1.3rem);color:var(--szary);max-width:60ch}

.fakty{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:36px 0 0;border-top:1px solid var(--linia)}
.fakty div{padding:16px 20px 0 0}
.fakty dt{font-size:.85rem;color:var(--szary)}
.fakty dd{font-weight:600}

.ekran{margin:40px 0 0;border:1px solid var(--linia);border-radius:12px;overflow:hidden;background:var(--bialy)}
.ekran img{width:100%}

.blok{padding:clamp(56px,8vw,96px) 0 0}
.dwie{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(24px,5vw,64px);align-items:start}
.lista{list-style:none}
.lista li{padding:16px 0;border-top:1px solid var(--linia)}
.lista li:last-child{border-bottom:1px solid var(--linia)}
.lista p{color:var(--szary)}

.galeria{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,24px)}
.galeria figure{grid-column:span 12}
.galeria .pol{grid-column:span 6}
.galeria .tel{grid-column:span 4}
.galeria .szer{grid-column:span 8}
.galeria .ramka{border:1px solid var(--linia);border-radius:12px;overflow:hidden;background:var(--bialy)}
.galeria .tel .ramka{border-radius:22px;max-height:720px;overflow:hidden}
.galeria figcaption{font-size:.93rem;color:var(--szary);padding-top:10px;max-width:62ch}

.liczby{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
.liczby div{background:var(--bialy);border:1px solid var(--linia);border-radius:12px;padding:22px}
.liczby b{display:block;font-family:Unbounded,Onest,sans-serif;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.1;margin-bottom:8px}
.liczby span{color:var(--szary)}

.uwaga{margin-top:28px;color:var(--szary);font-size:.93rem;max-width:72ch}
.dalej{margin:clamp(56px,8vw,96px) 0 0;padding:clamp(28px,4vw,44px);border-radius:16px;background:var(--tusz);color:var(--papier);display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.dalej h2{margin:0;font-size:clamp(1.3rem,2.6vw,1.8rem);max-width:28ch}
.przycisk{display:inline-block;background:var(--papier);color:var(--tusz);text-decoration:none;font-weight:600;padding:13px 24px;border-radius:999px}
.przycisk:hover{background:var(--projekt);color:#fff}
footer{padding:40px 0;color:var(--szary);font-size:.9rem}

@media(max-width:820px){
  .fakty{grid-template-columns:1fr 1fr}
  .dwie{grid-template-columns:1fr}
  .galeria .pol,.galeria .szer{grid-column:span 12}
  .galeria .tel{grid-column:span 6}
  .liczby{grid-template-columns:1fr}
}