@import url("Home.css");

/* TITEL */
.page-head{
  text-align:center;
  margin-bottom:1.5rem;
}

/* FILTERS */
.filters{
  display:flex;
  justify-content:center;
  gap:.5rem;
  margin-bottom:1.2rem;
}

.filter-btn{
  padding:.5rem 1rem;
  border-radius:10px;
  cursor:pointer;
}

.filter-btn.active{
  outline:2px solid var(--accent);
}

/* GALERIJ */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
}

.item{
  border-radius:16px;
  overflow:hidden;
  position:relative;
}

.item img{
  display:block;
  width:100%;
  height:220px;
  object-fit:cover;
}

/* VIDEO BADGE */
.item--video .play-badge{
  position:absolute;
  bottom:10px;
  right:10px;
  background:rgba(0,0,0,.6);
  color:#fff;
  padding:.3rem .6rem;
  border-radius:6px;
}

/* LIGHTBOX */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:grid;
  place-items:center;
  z-index:9999;
}

.lightbox[hidden]{display:none}

#lightbox-content img,
#lightbox-content video{
  max-width:90vw;
  max-height:85vh;
  border-radius:14px;
}

.lightbox__close{
  position:absolute;
  top:20px;
  right:30px;
  font-size:32px;
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
}