*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{max-width:1180px;margin:0 auto;padding:0 18px}
.page{padding:24px 0}

/* Topbar dla podstron (home ma własny header w home.css) */
.topbar{border-bottom:1px solid var(--line);background:var(--topbar-bg);backdrop-filter:blur(8px)}
.topbar-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--nav-h)}
.topbar .back{justify-self:start}
.topbar .brand{justify-self:center}
.topbar .brand img{height:40px}
.topbar .right{justify-self:end}

/* Karty / sekcje */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--br);overflow:hidden;box-shadow:var(--shadow)}
.card .body{padding:16px}
.kicker{display:inline-block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.lead{font-size:18px;line-height:1.6}
.section{margin-top:18px}
.section h2{font-size:20px;margin:0 0 8px}

/* Siatka miniatur (używana na podstronach) */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:14px 0}
.gallery a{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--chip)}
.gallery img{width:100%;height:180px;object-fit:cover;transition:transform .4s ease}
.gallery a:hover img{transform:scale(1.05)}
/* === Gallery performance: rezerwacja miejsca + skeleton + fade-in === */
/* === Gallery performance (bez ryzyka niewczytania) === */
/* content-visibility tylko na żądanie: <div class="gallery" data-cv="on"> */
.gallery[data-cv="on"]{
  content-visibility: auto;
  contain-intrinsic-size: 1000px; /* rezerwa wysokości gdy offscreen */
}

/* skeleton + fade-in (bez zmian) */
.gallery img{
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: linear-gradient(180deg,#e9ecf5,#f6f7fb);
  opacity: 0;
  transform: scale(.985);
  transition: opacity .28s ease, transform .28s ease;
}
:root[data-theme="dark"] .gallery img{ background: linear-gradient(180deg,#10151c,#0b0f14); }
.gallery img.is-loaded{ opacity: 1; transform: scale(1); }


/* Stopka wspólna (brand | copy | social) */
.footer{margin-top:36px;border-top:1px solid var(--line);background:var(--footer-bg)}
.footer-inner{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:18px 0}
.footer-brand img{height:26px}
.footer-copy{justify-self:center;text-align:center;color:var(--text)}
.footer-socials{justify-self:end;display:flex;gap:12px}
.footer-socials a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--line);border-radius:999px}
.footer-socials svg,.footer-socials img{width:18px;height:18px}
@media (max-width:700px){
  .footer-inner{grid-template-columns:1fr;justify-items:center;text-align:center}
  .footer-socials{justify-self:center}
}
/* === Sticky footer (stopka zawsze na dole) === */
html, body { height: 100%; }

body{
  /* wspiera mobilne przeglądarki: 100dvh -> realna wysokość ekranu */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

header{ flex: 0 0 auto; }
main{ flex: 1 0 auto; }          /* zawartość rozpycha się na wysokość */
.footer, .site-footer{ margin-top: auto; }  /* nasza stopka */
/* === Fixed navbar tylko gdy header ma klasę .site-header (index) === */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--topbar-bg, color-mix(in oklab, var(--bg) 85%, transparent));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

/* kompensacja wysokości paska, aby treść nie wchodziła pod header */
body.has-fixed-header{ padding-top: var(--nav-h); }
/* Wymuszenie układu stopki jak na indexie */
.footer-inner{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.footer-brand{ order:1; }
.footer-socials{ order:2; margin-left:auto; }
.footer-copy{ order:3; width:100%; text-align:center; }

/* mobile-safe tweaks */
:root{ --nav-h:64px; --br:18px; }
html{ font-size: clamp(14px,1.8vw,16px); -webkit-text-size-adjust:100%; }
section{ padding: clamp(24px,6vw,52px) 0; }
.container{ padding-left:16px; padding-right:16px; margin-left:auto; margin-right:auto; max-width:1200px; }
h1{ font-size:clamp(26px,6.2vw,40px); line-height:1.2; margin:0 0 16px; }
h2{ font-size:clamp(22px,5.2vw,32px); line-height:1.25; margin:0 0 14px; }
h3{ font-size:clamp(18px,4.6vw,24px); line-height:1.3; margin:0 0 12px; }
p{  font-size:clamp(14px,3.8vw,16px); line-height:1.6; margin:0 0 12px; }
img{ max-width:100%; height:auto; display:block; }
@media (max-width:480px){
  .nav .menu a{ padding:10px 8px; }
}