/* ==================================================
   GALERIJA
   ================================================== */


/* =========================
   BLOK GALERIJE
   ========================= */

.dogodek-galerija{

margin-top:30px;

padding:20px;

background:
linear-gradient(
180deg,
#050505 0%,
#181818 50%,
#353535 100%
);

border-radius:16px;
}


/* =========================
   NASLOV GALERIJE
   ========================= */

.galerija-header{

text-align:center;

margin-bottom:30px;
}

.galerija-subtitle{

font-size:18px;

font-weight:700;

color:#d4a017;

text-transform:uppercase;

letter-spacing:1px;

margin-bottom:6px;
}

.dogodek-galerija h2{

margin:0;

font-size:42px;

font-weight:900;

color:#ffffff;
}

.galerija-header::after{

content:'';

display:block;

width:600px;
max-width:90%;

height:4px;

margin:18px auto 0;

border-radius:999px;

background:
linear-gradient(
90deg,
transparent 0%,
#d4a017 15%,
#ffd84d 50%,
#d4a017 85%,
transparent 100%
);

box-shadow:
0 0 8px rgba(212,160,23,.45),
0 0 18px rgba(212,160,23,.25);
}

.galerija-title-row{
display:flex;
justify-content:center;
align-items:center;
gap:24px;
}

.galerija-title-row h2{
margin:0;
}

.ken-burns-link{
display:inline-block;
cursor:pointer;
}

.ken-burns-icon{
width:140px;
height:auto;
display:block;
cursor:pointer;

transition:
transform .25s ease,
filter .25s ease;
}

.ken-burns-icon:hover{
transform:scale(1.08);
filter:brightness(1.15);
}

/* =========================
   MASONRY DESKTOP
   ========================= */

.galerija-masonry{
column-count:4;
column-gap:16px;
}

.galerija-item{
break-inside:avoid;

margin-bottom:16px;
}

.galerija-item img{
width:100%;
height:auto;

display:block;
}


/* =========================
   KARTICA SLIKE
   ========================= */
.galerija-item{

position:relative;

overflow:hidden;

border-radius:14px;

background:#101010;

box-shadow:
0 2px 8px rgba(0,0,0,.15);
}

.galerija-item img{

display:block;

width:100%;
height:auto;

border-radius:14px;
}


/* =========================
   HOVER EFEKT
   ========================= */

.galerija-item{

cursor:pointer;

transition:
box-shadow .25s ease;
}

.galerija-item img{

transition:
transform .25s ease,
filter .25s ease;
}

.galerija-item:hover img{

transform:scale(1.04);

filter:
brightness(.75)
contrast(1.08);
}

.galerija-item:hover{

box-shadow:
0 0 18px rgba(0,120,255,.25),
0 0 35px rgba(0,120,255,.10);
}



/* =========================
   OVERLAY / NASLOV SLIKE
   ========================= */
.galerija-item::after{

content:attr(data-title);

position:absolute;

left:0;
right:0;
bottom:0;

padding:12px 14px;

font-size:15px;
font-weight:700;

color:#fff;

background:
linear-gradient(
to top,
rgba(0,0,0,.85),
rgba(0,0,0,0)
);

opacity:0;

transition:opacity .25s ease;

pointer-events:none;
}

.galerija-item:hover::after{

opacity:1;

}

/* =========================
   POPUP / LIGHTBOX
   ========================= */

.galerija-lightbox{
display:none;

position:fixed;
inset:0;

background:rgba(12,20,35,.66);

z-index:9999;
}

.galerija-popup{

width:min(1400px,95vw);

height:auto;
max-height:90vh;

margin:auto;

display:flex;

background:#050505;

border-radius:20px;

overflow:hidden;

position:absolute;

top:50%;
left:50%;

transform:translate(-50%,-50%);
}

.galerija-popup-left{
flex:2;
background:#000;
}

.galerija-popup-left img{
width:100%;
height:100%;

object-fit:contain;

display:block;
}

.galerija-popup-right{

width:28%;
min-width:300px;
max-width:420px;

padding:48px 36px;

display:flex;
flex-direction:column;

background:
linear-gradient(
180deg,
#050505 0%,
#090909 100%
);
}

.galerija-close{
position:absolute;

top:20px;
right:20px;

font-size:48px;

background:none;
border:0;

color:#fff;

cursor:pointer;

transition:.2s;
}

.galerija-close:hover{

color:#f2c94c;

text-shadow:
0 0 8px rgba(242,201,76,.6);

transform:scale(1.1);
}

#popupCounter{

font-size:16px;
font-weight:700;

color:#c9a84f;

margin-bottom:12px;
}

#popupTitle{

margin:0 0 16px;

font-size:34px;
font-weight:800;

line-height:1.15;

color:#f2c94c;
}

.popup-divider{

height:4px;

margin:0 0 24px;

border-radius:999px;

background:
linear-gradient(
90deg,
transparent 0%,
#d4a017 15%,
#ffd84d 50%,
#d4a017 85%,
transparent 100%
);

box-shadow:
0 0 8px rgba(212,160,23,.45),
0 0 18px rgba(212,160,23,.25);
}

#popupOpis{

font-size:22px;
line-height:1.7;

color:#ffffff;
}

.popup-nav{
margin-top:auto;

padding-top:30px;

border-top:1px solid rgba(255,255,255,.15);

display:flex;
gap:16px;
}

.popup-nav button{

flex:1;

height:64px;

border-radius:12px;

border:1px solid rgba(255,255,255,.15);

background:#111;

color:#fff;

font-size:22px;
font-weight:800;

cursor:pointer;

transition:.2s;
}

.popup-nav button:hover{

background:#1b1b1b;

color:#f2c94c;

border-color:#f2c94c;

box-shadow:
0 0 8px rgba(242,201,76,.25);

transform:translateY(-1px);
}

#popupRezultat{

margin-top:40px;
margin-bottom:50px;

display:flex;
align-items:center;
gap:12px;

font-size:22px;
font-weight:700;

color:#f2c94c;
}

body.popup-open{
overflow:hidden !important;
height:100vh;
}

#popupTitle::before{
display:none !important;
}

/* =========================
   TELEFON
   ========================= */

@media (max-width:768px){

.galerija-masonry{
column-count:1;
}

.galerija-popup{

position:fixed;

top:0;
left:0;
right:0;
bottom:0;

width:100vw;
height:100vh;
max-width:none;
max-height:none;

margin:0;

border-radius:0;

display:flex;
flex-direction:column;

transform:none;
}

.galerija-popup-left{

flex:none;
width:100%;
height:auto;
}

.galerija-popup-left img{

display:block;

width:100%;
height:auto;

max-height:35vh;

object-fit:contain;
}

.galerija-popup-right{

width:100%;
min-width:0;
max-width:none;

height:100%;

padding:20px;

box-sizing:border-box;

display:flex;
flex-direction:column;

overflow-y:auto;
overflow-x:hidden;
}

.popup-nav{

display:flex;
gap:10px;

margin-top:auto;

padding-top:12px;

border-top:1px solid rgba(255,255,255,.10);
}

.popup-nav button{

flex:1;

min-width:0;

padding:14px 8px;

font-size:20px;
}

}

/* =========================
   TELEFON LEŽEČE
   ========================= */

@media (max-width:900px) and (orientation:landscape){

.galerija-masonry{
column-count:2;
}

.galerija-popup{

height:95vh;

overflow:hidden;
}

.galerija-popup-left{

flex:1;
overflow:hidden;
}

.galerija-popup-left img{

width:100%;
height:100%;

object-fit:contain;
}

.galerija-popup-right{

width:260px;
min-width:260px;
max-width:260px;

padding:12px;

box-sizing:border-box;

display:flex;
flex-direction:column;

overflow:hidden;
}

#popupCounter{

font-size:13px;

margin-bottom:6px;
}

#popupTitle{

font-size:24px;

margin-bottom:10px;
}

#popupOpis{

font-size:16px;
line-height:1.4;
}

#popupRezultat{

font-size:16px;

margin-top:10px;
}

/* vsebina zgoraj */
#popupOpis,
#popupRezultat{

flex-shrink:0;
}

/* navigacija vedno spodaj */
.popup-nav{

display:flex;
gap:8px;

margin-top:auto;
padding-top:10px;
}

.popup-nav button{

flex:1;

padding:6px 2px;

font-size:12px;
}

}
/* =========================
   TABLICA POKONCI
   Odmik slike od zgornjega roba
   ========================= */

@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){

.galerija-popup-left{
padding-top:20px;
}

}

/* =========================
   TABLICA
   ========================= */

@media (min-width:769px) and (max-width:1024px){

.galerija-masonry{
column-count:2;
}

}