/* Responsive YouTube Style Gallery */
.vg-tabs { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:15px; border-bottom: 1px solid #ddd; }
.vg-tab { background:none; border:none; padding:8px 16px; cursor:pointer; border-radius:6px; transition:0.3s; }
.vg-tab.active, .vg-tab:hover {
    font-weight: bold;
    border-bottom: 3px solid;
    border-radius: 0;
	outline: none !important;
}

.vg-gallery { display:grid; gap:15px; margin-bottom: 3rem; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.vg-item { text-align:center; background:#fff; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,0.1); overflow:hidden; }
.vg-thumb {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  cursor: pointer;
	 aspect-ratio: 17 / 9; /* Maintain proper video shape */
  background: #000; /* fallback */
}

.vg-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover; /* <— Fills the box and removes black bars */
  display: block;
  border: none;
}
.vg-play-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); opacity:0.8; }

.vg-popup { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.8); justify-content:center; align-items:center; z-index:9999; }
.vg-popup-inner { position:relative; width:90%; max-width:800px; }
.vg-popup iframe { width:100%; height:450px; }
.vg-close { position:absolute; top:-30px; right:0; font-size:30px; color:#fff; cursor:pointer; }

@media(max-width:1024px){ .vg-gallery{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .vg-gallery{grid-template-columns:repeat(1,1fr);} }