@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════
   KLETNO — podstrona: Galeria (masonry + lightbox)
   Style TYLKO dla tej podstrony (wspólne: css/style.css)
   ═══════════════════════════════════════════════════════════════ */

/* ── MASONRY ───────────────────────────────────────────────── */
.mgal{ column-count:3; column-gap:clamp(12px,1.4vw,18px); }
.mgal button{ display:block; width:100%; padding:0; border:none; background:none; cursor:pointer;
  margin:0 0 clamp(12px,1.4vw,18px); break-inside:avoid; border-radius:14px; overflow:hidden;
  position:relative; box-shadow:var(--shadow-sm); }
.mgal button::after{ content:''; position:absolute; inset:0; border-radius:14px; pointer-events:none;
  background:linear-gradient(to top, rgba(9,14,11,.55), transparent 46%);
  opacity:0; transition:opacity .4s var(--spring); }
.mgal button:hover::after{ opacity:1; }
.mgal img{ width:100%; display:block; transition:transform .9s var(--spring); }
.mgal button:hover img{ transform:scale(1.05); }
.mgal .cap{ position:absolute; left:14px; bottom:12px; z-index:2; color:var(--cream); font-size:12.5px; letter-spacing:.02em;
  display:inline-flex; align-items:center; gap:7px; text-shadow:0 1px 8px rgba(0,0,0,.6);
  opacity:0; transform:translateY(6px); transition:opacity .4s var(--spring), transform .4s var(--spring); }
.mgal .cap i{ font-size:15px; }
.mgal button:hover .cap{ opacity:1; transform:none; }

/* ── LIGHTBOX ──────────────────────────────────────────────── */
.lightbox{ position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:clamp(16px,5vw,64px);
  background:rgba(9,14,11,.88); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; transition:opacity .4s var(--spring), visibility .4s; }
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox__img{ max-width:100%; max-height:86vh; border-radius:8px; box-shadow:0 30px 90px rgba(0,0,0,.55); }
.lightbox__close,.lightbox__nav{ position:absolute; border:1px solid rgba(251,248,241,.3); background:rgba(251,248,241,.1); color:var(--cream);
  display:grid; place-items:center; cursor:pointer; transition:background .3s ease; border-radius:50%; }
.lightbox__close:hover,.lightbox__nav:hover{ background:rgba(251,248,241,.2); }
.lightbox__close{ top:20px; right:24px; width:46px; height:46px; }
.lightbox__nav{ top:50%; transform:translateY(-50%); width:52px; height:52px; }
.lightbox__nav i,.lightbox__close i{ font-size:22px; }
.lightbox__nav.prev{ left:clamp(10px,2vw,24px); } .lightbox__nav.next{ right:clamp(10px,2vw,24px); }
.lightbox__cap{ position:absolute; left:0; right:0; bottom:20px; text-align:center; color:rgba(251,248,241,.75); font-size:12.5px; padding:0 20px; }

/* ── RESPONSYWNOŚĆ ─────────────────────────────────────────── */
@media (max-width:900px){ .mgal{ column-count:2; } }
@media (max-width:560px){ .mgal{ column-count:1; } .lightbox__nav{ width:44px; height:44px; } }