:root{
    --brand:#00d0ff;
    --ink:#e8f2ff;
    --bg:#0b1222;
    --card:rgba(255,255,255,.05);
    --ring:rgba(0,208,255,.5);
  }
  
  .gallery-page{ padding-top:clamp(44px,4vw,72px) }
  
  .section-title{
    text-align:center; margin:0 0 22px;
    font-size:clamp(2rem,3.6vw,3rem); line-height:1.1;
  }
  .section-title::after{
    content:""; display:block; width:120px; height:2px; margin:14px auto 0;
    background:linear-gradient(90deg,transparent,var(--brand),transparent);
    opacity:.7;
  }
  
  /* Masonry (CSS columns) */
  .gallery-masonry{
    columns:3 320px; /* do 3 kolone, min širina 320px */
    column-gap:16px;
  }

  
  .gl-item{
    break-inside:avoid; margin:0 0 16px; position:relative; overflow:hidden; border-radius:16px;
    background:var(--card); border:1px solid rgba(255,255,255,.08);
    box-shadow:0 8px 24px rgba(0,0,0,.35);
  }
  
  .gl-item img{
    width:100%; height:auto; display:block; transform:scale(1.02);
    filter:saturate(1.05) contrast(1.02);
    transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .5s, opacity .3s;
  }
  
  .gl-item::after{
    /* neon edge on hover */
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    box-shadow:inset 0 0 0 0 var(--ring);
    transition: box-shadow .4s ease;
  }
  
  .gl-item:hover img{ transform:scale(1.06); filter:saturate(1.15) contrast(1.08) }
  .gl-item:hover::after{ box-shadow:inset 0 0 0 2px var(--ring) }
  
  /* Lightbox */
  .lightbox{
    position:fixed; inset:0; background:rgba(3,10,18,.8);
    display:none; place-items:center; z-index:9999; padding:24px;
  }
  .lightbox.open{ display:grid }
  .lightbox img{
    max-width:min(92vw,1400px); max-height:82vh; border-radius:14px;
    box-shadow:0 20px 60px rgba(0,0,0,.6);
  }
  .lightbox .close{
    position:absolute; top:16px; right:16px;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
    color:var(--ink); padding:8px 14px; border-radius:10px;
  }
  .lightbox .nav{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between;
    pointer-events:none;
  }
  .lightbox .nav button{
    pointer-events:auto; width:54px; height:54px; border-radius:50%;
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
    color:var(--ink); font-size:22px;
  }
  

  .video-wrapper {
    width: 100%;
    max-width: 1000px; /* ograniči širinu ako želiš */
    margin: 0 auto 2rem auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
  }
  
  .video-wrapper video {
    width: 100%;
    height: auto;
    display: block;
  }
  


  @media (max-width:680px){ .gallery-masonry{ columns:1 100%; } }