/* Bazowy reset i zmienne */
:root{
  --bg:#f7f7f8;
  --card:#ffffff;
  --ink:#1f2328;
  --muted:#5b626a;
  --accent:#1f2937;
  --ring: rgba(31,41,55,0.15);
  --radius:12px;
  --shadow: 0 2px 8px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Kontenery */
.wrap{
  width:min(1200px,92%);
  margin-inline:auto;
}

/* Nagłówek */
.site-header{
  background:var(--accent);
  color:#fff;
  padding:28px 0;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.site-header h1{
  margin:0 0 6px 0;
  font-size:clamp(1.4rem,2.5vw,2rem);
  font-weight:700;
  letter-spacing:.2px;
}
.site-lead{
  margin:0;
  color:#d7d9df;
  font-size:clamp(.95rem,1.6vw,1.05rem);
}

/* Siatka 3-kolumnowa */
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  padding:28px 0 36px;
}
@media (max-width: 980px){
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 620px){
  .grid{grid-template-columns:1fr}
}

/* Karta */
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px 18px 16px;
  border:1px solid #eceef1;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card:focus-within,
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  border-color:#e6e8ec;
}

/* Tytuł i link */
.card h2{
  margin:2px 0 8px;
  font-size:1.05rem;
  line-height:1.3;
}
.card h2 a{
  color:var(--accent);
  text-decoration:none;
  outline:none;
}
.card h2 a:focus{
  box-shadow:0 0 0 4px var(--ring);
  border-radius:8px;
}
.card h2 a:hover{
  text-decoration:underline;
}

/* Teksty */
.lead{
  margin:0 0 6px;
  font-weight:600;
  color:var(--ink);
}
.intro{
  margin:0 0 6px;
  color:var(--muted);
}
.descr{
  margin:0;
  color:var(--muted);
}

/* Stopka */
.site-footer{
  border-top:1px solid #e8eaee;
  background:#fff;
  padding:16px 0;
  color:#5e6670;
  font-size:.95rem;
}
.site-footer p{margin:0;text-align:center}