/* ==========================================================================
   GALLERY — mřížka realizací + lightbox

   Mřížka je asymetrická: šestisloupcový grid, kde vybrané dlaždice
   zabírají víc sloupců. Pořadí fotek se řídí v js/gallery-data.js —
   pokud ho přeházíš, uprav i nth-child pravidla níž.
   ========================================================================== */

.gal{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }

.gal figure{
  margin:0; grid-column:span 2; position:relative; overflow:hidden;
  background:var(--line-soft); border-radius:2px; cursor:zoom-in;
}
/* velké dlaždice — 1., 4., a dvě poloviční na 9. a 10. pozici */
.gal figure:nth-child(1){ grid-column:span 4; }
.gal figure:nth-child(4){ grid-column:span 4; }
.gal figure:nth-child(9){ grid-column:span 3; }
.gal figure:nth-child(10){ grid-column:span 3; }

.gal img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.gal figure:nth-child(1) img,
.gal figure:nth-child(4) img{ aspect-ratio:16/9; }
.gal figure:hover img{ transform:scale(1.12) translateY(-3%); }

.gal figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.6rem .9rem .75rem;
  font-size:.68rem; letter-spacing:.04em;
  color:#fff;
  background:linear-gradient(to top, rgba(15,17,18,.72), rgba(15,17,18,0));
  opacity:0; transition:opacity .3s;
}
.gal figure:hover figcaption,
.gal figure:focus-within figcaption{ opacity:1; }

@media (max-width:760px){
  .gal{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .gal figure,
  .gal figure:nth-child(1),
  .gal figure:nth-child(4),
  .gal figure:nth-child(9),
  .gal figure:nth-child(10){ grid-column:span 1; }
  .gal figure:nth-child(1) img,
  .gal figure:nth-child(4) img{ aspect-ratio:4/3; }
}

/* --- lightbox (vytváří ho js/gallery.js) --- */
.lb{
  position:fixed; inset:0; z-index:90;
  background:rgba(12,14,15,.94);
  display:flex; align-items:center; justify-content:center;
  padding:3vh 3vw;
}
.lb img{ max-width:100%; max-height:82vh; object-fit:contain; border-radius:2px; }
.lb .lb-cap{
  position:absolute; bottom:1.6rem; left:0; right:0; text-align:center;
  color:#CFCCC4;
  font-size:.72rem; letter-spacing:.05em;
}
.lb button{
  position:absolute; background:none; border:1px solid rgba(255,255,255,.28);
  color:#fff; width:44px; height:44px; border-radius:50%;
  cursor:pointer; font-size:1.1rem; line-height:1;
}
.lb .prev{ left:2vw; top:50%; transform:translateY(-50%); }
.lb .next{ right:2vw; top:50%; transform:translateY(-50%); }
.lb .close{ right:2vw; top:2vh; }
.lb button:hover{ background:rgba(255,255,255,.12); }