.galleryNote{
  margin:4px auto 16px;
  text-align:center;
  font-weight:700;
  color:#3b3b45;
}

.galleryGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap:12px;
}

.galleryFilters{
  margin:10px 0 18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-start;
}

.galleryFilter{
  border:0;
  padding:8px 14px;
  border-radius:999px;
  background:#fff;
  color:#2f2a30;
  border:2px solid #c9c9c9;
  font-weight:900;
  cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.galleryFilter.is-active{
  border-color:#f1a300;
  box-shadow: 0 10px 18px rgba(241,163,0,.2);
}

.galleryFilter:hover{
  transform: translateY(-1px);
}

@media (max-width:720px){
  .galleryFilters{
    justify-content:center;
  }
}

.galleryItem{
  position:relative;
  border:0;
  padding:0;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}

.galleryItem img,
.galleryItem video{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
}

.galleryItem:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(20,20,30,.14);
}

.galleryItem.is-hidden{
  display:none;
}

.galleryPlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:28px;
  text-shadow: 0 10px 24px rgba(0,0,0,.55);
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.25), rgba(0,0,0,0) 55%);
  pointer-events:none;
}

.galleryModal{
  position:fixed;
  inset:0;
  display:none;
  z-index:80;
}

.galleryModal.open{
  display:block;
}

.galleryModalBackdrop{
  position:absolute;
  inset:0;
  background: rgba(10,10,14,.65);
  backdrop-filter: blur(6px);
}

.galleryModalContent{
  position:relative;
  margin:48px auto 20px;
  width:min(980px, calc(100% - 28px));
  background:#fff;
  border-radius:20px;
  padding:18px;
  box-shadow: 0 20px 60px rgba(10,10,20,.35);
}

.galleryClose{
  position:absolute;
  top:10px;
  right:12px;
  width:40px;
  height:40px;
  border-radius:12px;
  border:0;
  background: rgba(255,88,179,.14);
  color:#b30063;
  font-size:24px;
  cursor:pointer;
}

.galleryStage{
  position:relative;
  width:100%;
  background:#0c0c10;
  border-radius:14px;
  overflow:hidden;
  display:grid;
  place-items:center;
  min-height:240px;
}

.galleryStageImg,
.galleryStageVideo{
  width:100%;
  height:auto;
  max-height:62vh;
  object-fit:contain;
  display:none;
  background:#0c0c10;
}
.galleryGrid img,
.galleryStageImg{
  -webkit-user-drag:none;
  user-select:none;
  -webkit-touch-callout:none;
}

.galleryStageImg.is-active,
.galleryStageVideo.is-active{
  display:block;
}

.galleryThumbRow{
  margin-top:14px;
  display:grid;
  grid-template-columns:40px 1fr 40px;
  gap:10px;
  align-items:center;
}

.galleryNav{
  width:40px;
  height:40px;
  border-radius:12px;
  border:0;
  background: rgba(255,88,179,.18);
  color:#b30063;
  font-size:22px;
  cursor:pointer;
}

.galleryThumbTrack{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:80px;
  gap:10px;
  overflow-x:auto;
  padding:6px 2px;
  scroll-behavior:smooth;
}

.galleryThumb{
  border:0;
  background:#fff;
  padding:0;
  border-radius:10px;
  overflow:hidden;
  cursor:pointer;
  box-shadow: var(--shadow-soft);
  position:relative;
}

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

.galleryThumb.is-active{
  outline:2px solid #ff6fb9;
}

.galleryThumb::after{
  content: attr(data-kind);
  position:absolute;
  bottom:4px;
  right:6px;
  padding:2px 6px;
  font-size:10px;
  font-weight:800;
  border-radius:999px;
  background: rgba(0,0,0,.55);
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.02em;
}

body.modal-open{
  overflow:hidden;
}

@media (max-width:700px){
  .galleryModalContent{
    margin:26px auto 12px;
    padding:14px;
  }
  .galleryThumbRow{
    grid-template-columns:32px 1fr 32px;
  }
  .galleryNav{
    width:32px;
    height:32px;
  }
}