/* ============================================================
   JACKOWO — galeria.css
   Siatka bento + lightbox. Ładowana tylko przez galeria.html.
   ============================================================ */

/* ---------- SIATKA ----------
   Mozaika: jeden duży kafel na początku każdej dziesiątki, reszta zwykła.
   O rozmiarze decyduje klasa, nie kolejność — przestawienie zdjęć
   w galeria.json niczego nie psuje. */
/* grid-auto-flow:dense pozwala mniejszym kafelkom wskoczyć w dziury,
   które zostawiają duże — bez tego mozaika ma białe luki. */
.gal{
  display:grid;gap:var(--sp-3);
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:140px;grid-auto-flow:dense;
  max-width:1200px;margin-inline:auto;
}
@media(min-width:760px){.gal{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:160px}}
@media(min-width:1100px){.gal{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:170px}}

.gal__item{
  margin:0;position:relative;overflow:hidden;border-radius:var(--r-md);
  background:var(--c-bg-sand);border:0;padding:0;cursor:zoom-in;
  box-shadow:var(--sh-1);transition:box-shadow .25s var(--ease);
}
.gal__item:hover{box-shadow:var(--sh-2)}
.gal__item img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .5s var(--ease);
}
.gal__item:hover img{transform:scale(1.04)}
.gal__item--duzy{grid-column:span 2;grid-row:span 2}
.gal__item--wysoki{grid-row:span 2}
.gal__item--szeroki{grid-column:span 2}
@media(max-width:759px){
  /* na telefonie siatka ma tylko 2 kolumny — „szeroki" zająłby całą szerokość */
  .gal__item--szeroki{grid-column:span 2;grid-row:span 1}
}



@media(prefers-reduced-motion:reduce){
  .gal__item:hover img{transform:none}
}

/* ---------- LIGHTBOX ----------
   Własny, bez bibliotek. Dialog modalny: Esc zamyka, strzałki przewijają,
   fokus zostaje w środku, tło jest niedostępne dla czytnika ekranu. */
.lbox{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(24,28,25,.92);
  padding:var(--sp-4);
}
.lbox[open]{display:grid;grid-template-rows:auto 1fr auto}
.lbox::backdrop{background:rgba(24,28,25,.92)}

.lbox__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);color:#fff}
.lbox__licznik{font-size:var(--fs-sm);color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums}

.lbox__zamknij,.lbox__nav{
  width:48px;height:48px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  border-radius:var(--r-md);color:#fff;cursor:pointer;padding:0;
  transition:background .2s var(--ease);
}
.lbox__zamknij:hover,.lbox__nav:hover{background:rgba(255,255,255,.24)}
.lbox__zamknij svg,.lbox__nav svg{width:20px;height:20px}
.lbox__zamknij:focus-visible,.lbox__nav:focus-visible{outline:3px solid #fff;outline-offset:2px}

.lbox__scena{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:var(--sp-3);min-height:0;
}
.lbox__stage{display:grid;place-items:center;min-height:0;height:100%}
.lbox__stage img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;margin-inline:auto;border-radius:var(--r-sm);
}
.lbox__podpis{
  color:rgba(255,255,255,.9);font-size:var(--fs-sm);text-align:center;
  padding:var(--sp-3) var(--sp-4) 0;max-width:70ch;margin-inline:auto;
}

/* na wąskim ekranie strzałki schodzą pod zdjęcie — inaczej zjadają kadr */
@media(max-width:640px){
  .lbox__scena{grid-template-columns:1fr}
  .lbox__nav{position:absolute;bottom:var(--sp-5);z-index:2}
  .lbox__nav--wstecz{left:var(--sp-5)}
  .lbox__nav--dalej{right:var(--sp-5)}
  .lbox__podpis{padding-bottom:var(--sp-8)}
}

body.lbox-otwarty{overflow:hidden}