:root{
  --bg:#f6f8fb;--panel:#fff;--muted:#6b7280;--text:#111827;
  --accent:#0b67ff;--accent2:#0ec39a;--ring:#e5e7eb;--shadow:rgba(0,0,0,0.08);--radius:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text);font:16px/1.6 'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
img{max-width:100%;display:block;height:auto}
a{color:var(--accent);text-decoration:none;transition:color .2s ease}
a:hover{color:#0049b2}
.container{width:min(100% - 48px,1280px);margin-inline:auto}
header.site-header{background:#fff;box-shadow:0 3px 12px var(--shadow);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--ring)}
.nav{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--ring);background:var(--panel);padding:8px 14px;border-radius:999px;font-size:14px;font-weight:500;box-shadow:0 1px 4px var(--shadow)}
.menu a{padding:10px 14px;border-radius:10px;font-weight:500;color:var(--text)}
.menu a:hover{background:var(--accent);color:#fff}
.burger{display:none}
@media(max-width:760px){
  .burger{display:inline-flex;flex-direction:column;gap:4px;border:1px solid var(--ring);padding:8px 10px;border-radius:10px;background:#fff;cursor:pointer}
  .menu{display:none;position:absolute;left:0;right:0;top:64px;background:#fff;border-bottom:1px solid var(--ring);padding:10px 16px}
  .menu .menu-item{display:block}
  .menu.open{display:flex;flex-direction:column}
  .menu a{padding:12px;border-radius:8px;display:block}
}
.hero{padding:clamp(48px,10vw,96px) 0;text-align:center;background:linear-gradient(135deg,#e8f0ff 0%,#f9f9f9 100%);border-bottom:1px solid var(--ring)}
h1{font-size:clamp(32px,6vw,56px);color:var(--accent);margin-bottom:8px}
.subtitle{color:var(--muted);font-size:clamp(14px,2.2vw,18px)}
section{padding:clamp(28px,6vw,64px) 0}
h2{font-size:clamp(22px,3.4vw,34px);margin-bottom:22px;color:var(--accent2);text-align:center;font-weight:600}
h2 + .bar{width:70px;height:4px;background:var(--accent2);border-radius:2px;margin:12px auto 24px}
.panel{background:var(--panel);border:1px solid var(--ring);border-radius:var(--radius);padding:clamp(18px,3.5vw,36px);box-shadow:0 8px 24px var(--shadow);max-width:1024px;margin:0 auto}
.lead{font-size:clamp(16px,2.3vw,19px);margin-bottom:14px;text-align:center}
.thanks-list{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.thanks-item{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--ring);padding:14px 18px;border-radius:14px;transition:transform .25s ease,box-shadow .25s ease}
.thanks-item:hover{transform:translateY(-3px);box-shadow:0 8px 20px var(--shadow)}
.thanks-item img.logo{width:60px;height:60px;object-fit:cover;border-radius:10px;border:1px solid var(--ring)}
.tag{font-size:14px;color:var(--muted)}
.gallery-wrap{width:min(100% - 32px,1400px);margin-inline:auto}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
@media(min-width:1200px){.gallery{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}
.thumb{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--ring);background:#fff;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease}
.thumb:hover{transform:scale(1.03);box-shadow:0 10px 24px var(--shadow)}
.thumb .cap{position:absolute;left:0;right:0;bottom:0;padding:12px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.65));font-size:14px;color:#fff}
.thumb.video::before{content:"▶";position:absolute;inset:auto auto 12px 12px;background:rgba(0,0,0,.6);padding:6px 10px;border-radius:10px;color:#fff;font-size:14px}
.site-footer{text-align:center;color:var(--muted);border-top:1px solid var(--ring);padding:28px 0;margin-top:24px;font-size:14px}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.84);display:none;align-items:center;justify-content:center;padding:24px}
.lightbox.open{display:flex}
.lightbox .inner{max-width:min(1080px,95vw);max-height:90vh;background:#000;border-radius:16px;overflow:hidden}
.lightbox img,.lightbox iframe,.lightbox video{display:block;max-width:100%;max-height:90vh}
.close{position:fixed;top:20px;right:20px;border:0;background:var(--accent);color:#fff;padding:12px 16px;border-radius:12px;cursor:pointer;box-shadow:0 2px 6px var(--shadow)}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}
html{ scroll-behavior:smooth; }
.top-tabs{ position:sticky; top:64px; z-index:9; background:#fff; border-bottom:1px solid var(--ring); }
@media (max-width:760px){ .top-tabs{ top:56px; } }
.top-tabs .tabs-list{ display:flex; gap:8px; list-style:none; margin:0; padding:10px 0; overflow:auto; scrollbar-width:thin; }
.top-tabs a{ display:inline-block; padding:8px 12px; border:1px solid var(--ring); border-radius:999px; text-decoration:none; color:var(--text); background:#fff; box-shadow:0 4px 10px var(--shadow); font-size:14px; font-weight:500; white-space:nowrap; }
.top-tabs a:hover{ background:var(--accent); color:#fff; }
.top-tabs a.active{ background:var(--accent2); color:#fff; border-color:transparent; }
/* tabs w pasku nagłówka */
.site-header .nav{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.tabs-inline{ margin-left:8px; overflow:auto; }
.tabs-inline .tabs-list{ display:flex; gap:8px; list-style:none; margin:0; padding:0; }
.tabs-inline a{
  display:inline-block; padding:8px 12px; border:1px solid var(--ring);
  border-radius:999px; text-decoration:none; color:var(--text);
  background:#fff; box-shadow:0 4px 10px var(--shadow); font-size:14px; font-weight:500; white-space:nowrap;
}
.tabs-inline a:hover{ background:var(--accent); color:#fff; }
.tabs-inline a.active{ background:var(--accent2); color:#fff; border-color:transparent; }

html{ scroll-behavior:smooth; }
/* żeby kotwice nie chowały się pod sticky headerem */
section[id]{ scroll-margin-top: 90px; }
@media(max-width:760px){ section[id]{ scroll-margin-top: 78px; } }

.photo-filter{
  display:flex; gap:8px; flex-wrap:wrap;
  margin:6px 0 4px;
}
.photo-filter .btn{
  appearance:none; cursor:pointer;
  padding:8px 12px; border:1px solid var(--ring);
  border-radius:999px; background:#fff; color:var(--text);
  box-shadow:0 4px 10px var(--shadow); font-weight:500;
}
.photo-filter .btn:hover{ background:var(--accent); color:#fff; border-color:transparent; }
.photo-filter .btn.active{ background:var(--accent2); color:#fff; border-color:transparent; }

.gallery-group[hidden], .set-title[hidden]{ display:none !important; }
.site-footer{ border-top:1px solid var(--ring); margin-top:32px; }
.site-footer .container{ padding:24px 0; text-align:center; }
.site-footer .copy{ color:#6b7280; font-size:13px; margin:0 0 8px; }
.site-footer .sep{ margin:0 6px; opacity:.5; }
.foot-links{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.foot-links a{ font-size:13px; color:#6b7280; text-decoration:none; }
.foot-links a:hover{ color:var(--accent); text-decoration:underline; }
/* ---- LIGHTBOX – ładny, gładki wygląd ---- */
.lightbox{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(12px,3vw,28px);
  background:rgba(15,18,24,.60);           /* półprzezroczyste tło */
  -webkit-backdrop-filter:saturate(140%) blur(6px);
  backdrop-filter:saturate(140%) blur(6px); /* lekki blur */
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
  z-index:9999;
}
.lightbox.open{ opacity:1; visibility:visible; pointer-events:auto; }

#lbInner{
  max-width:min(92vw, 1200px);
  max-height:86vh;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}

/* kontent w popupie: miękka animacja + cień */
#lbInner > *{
  max-width:100%; max-height:86vh; display:block;
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  animation:lbPop .22s ease;
  background:#000; /* dla wideo – żeby czarne pasy były gładkie */
}

@keyframes lbPop{
  from{ transform:translateY(6px) scale(.985); opacity:.01; }
  to  { transform:translateY(0)  scale(1);     opacity:1; }
}

/* przycisk zamknięcia – pigułka */
.lb-close{
  position:absolute; top:16px; right:16px;
  width:42px; height:42px; line-height:42px; text-align:center;
  background:#ffffff; color:#0f172a;
  border:0; border-radius:999px; cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  font-size:22px; font-weight:700;
  transition:transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.lb-close:hover{ transform:scale(1.07); background:#0f172a; color:#fff; }
.lb-close:active{ transform:scale(.98); }
.lb-close:focus-visible{ outline:2px solid #10b981; outline-offset:3px; }

/* podpis pod materiałem (jeśli włączysz w JS – patrz niżej) */
.lb-caption{
  margin-top:12px; text-align:center;
  color:#e5e7eb; font-size:14px;
}

/* kursor na miniaturach */
.gallery .thumb{ cursor:zoom-in; }

.gallery .thumb{
  aspect-ratio: 3 / 2;      /* możesz zmienić na 4/3, 1/1 itd. */
  display: block;
}

/* Miniatura zawsze wypełnia cały kafelek */
.gallery .thumb img{
  width: 100%;
  height: 100% !important;  /* nadpisuje globalne img{height:auto} */
  object-fit: cover;        /* przycina, żeby nie było białych pasów */
  object-position: center;
}