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

:root{
  --gal-brand:#7f1d1d;
  --gal-brand-600:#991b1b;
  --gal-text:#111827;
  --gal-muted:#6b7280;
  --gal-bg:#f3f4f6;
  --gal-card:#ffffff;
  --gal-line:#e5e7eb;
  --gal-radius-lg:16px;
  --gal-shadow:0 12px 28px rgba(0,0,0,.10);
  --gal-trans:180ms ease;
}

.gallery-page{
  background:var(--gal-bg);
  color:var(--gal-text);
  overflow-x:hidden;
  font-family:system-ui,-apple-system,"Inter",Segoe UI,Roboto,Arial,sans-serif;
}

/* ===== HERO ===== */
.gallery-hero{
  position:relative;
  color:#fff;
  padding:56px 16px 72px;
  overflow:hidden;
}
.gallery-hero__overlay{
  position:absolute;inset:0;
  background:radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,.08), transparent 60%);
  pointer-events:none;
}
.gallery-hero__content{
  max-width:1100px;margin:0 auto;text-align:center;
}
.gallery-hero h1{
  font-size:clamp(28px,4vw,44px);line-height:1.1;letter-spacing:-0.02em;margin-bottom:12px;
}
.gallery-hero p{
  font-size:clamp(15px,1.9vw,18px);opacity:.95;margin:0 auto 14px;max-width:820px;
}
.gallery-hero__meta{
  display:inline-block;font-size:14px;opacity:.9;background:rgba(255,255,255,.12);
  padding:6px 10px;border-radius:999px;backdrop-filter:blur(2px);
}

/* ===== WRAP ===== */
.gallery-wrap{ padding:40px 0 80px; }
.gallery-container{ max-width:1200px;margin:0 auto;padding:0 16px; }

/* ===== FILTERS ===== */
.gallery-filters{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;
}
.gallery-filters button{
  appearance:none;border:1px solid var(--gal-line);background:#fff;color:var(--gal-text);
  font-size:14px;padding:8px 12px;border-radius:999px;cursor:pointer;transition:all var(--gal-trans);
}
.gallery-filters button:hover{ border-color:#d1d5db; transform:translateY(-1px); }
.gallery-filters button.is-active{
  background:var(--gal-brand);color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(127,29,29,.25);
}

/* ===== GRID ===== */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px;
}
.gallery-item{
  grid-column: span 3; /* 4 u redu na ≥1200px */
  background:var(--gal-card);
  border:1px solid var(--gal-line);
  border-radius:12px;
  box-shadow:var(--gal-shadow);
  overflow:hidden;
  transition:transform var(--gal-trans), box-shadow var(--gal-trans);
}
.gallery-item:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 42px rgba(0,0,0,.14);
}
.gallery-link{ display:block; line-height:0; }
.gallery-item img{
  width:100%;height:220px;object-fit:cover;display:block;
}
.gallery-caption{
  padding:10px 12px;font-size:14px;color:var(--gal-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Responsive kolone */
@media (max-width:1200px){ .gallery-item{ grid-column: span 4; } } /* 3 u redu */
@media (max-width:900px) { .gallery-item{ grid-column: span 6; } } /* 2 u redu */
@media (max-width:520px) { 
  .gallery-item{ grid-column: span 12; } /* 1 u redu */
  .gallery-item img{ height:200px; }
}

.gallery-empty{
  background:#fff;border:1px dashed var(--gal-line);border-radius:12px;
  padding:24px;text-align:center;color:var(--gal-muted);
}

.glightbox{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.72);opacity:0;visibility:hidden;transition:opacity var(--gal-trans), visibility var(--gal-trans);
  z-index:9999;
}
.glightbox.is-open{ opacity:1;visibility:visible; }
.glightbox__inner{
  position:relative; max-width:min(92vw,1100px); width:100%;
  background:#0b0b0b;border-radius:14px; box-shadow:0 30px 60px rgba(0,0,0,.45);
  padding:48px 56px 36px;
}
.glightbox__frame{ margin:0; }
.glightbox__img{
  width:100%; height:auto; display:block; border-radius:12px;
}
.glightbox__caption{
  color:#e5e7eb; font-size:14px; margin-top:10px; text-align:center;
}


.glightbox__close, .glightbox__prev, .glightbox__next{
  position:absolute; top:12px;
  background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.18);
  width:36px; height:36px; border-radius:999px; cursor:pointer; 
  display:flex; align-items:center; justify-content:center; font-size:20px;
  transition:transform var(--gal-trans), background var(--gal-trans), border-color var(--gal-trans);
}
.glightbox__close{ right:12px; }
.glightbox__prev{ left:12px; top:50%; transform:translateY(-50%); }
.glightbox__next{ right:12px; top:50%; transform:translateY(-50%); }
.glightbox__close:hover, .glightbox__prev:hover, .glightbox__next:hover{
  background:rgba(255,255,255,.16); transform:scale(1.06);
}

@media (max-width:560px){
  .glightbox__inner{ padding:36px 16px 22px; }
  .glightbox__prev, .glightbox__next{ display:none; } /* gestovi/strelice na tastaturi su dovoljni */
}