/* ============================= */
/* TAB BUTTONS */
/* ============================= */

.tab-buttons{
margin:30px 0;
text-align:center;
}

.tab-buttons button{
padding:10px 20px;
margin:6px;
border:none;
border-radius:25px;
background:#333;
color:#fff;
cursor:pointer;
transition:0.3s;
font-size:15px;
}

.tab-buttons button:hover{
background:#ff9800;
transform:scale(1.05);
}

.tab-buttons button.active{
background:#ff9800;
}


/* ============================= */
/* SHORTS GRID */
/* ============================= */


.youtube-short .gallery{
display:grid;
grid-template-columns:repeat(4,230px); 

gap:42px;
padding:20px 40px;
justify-content:center;
}

/*
.youtube-short .gallery{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(90px,1fr));
	gap:8px;
	padding:10px;
	justify-content:center;
}
*/
/* ============================= */
/* SHORTS CARD */
/* ============================= */

.youtube-short .card{
position:relative;
width:100%;
aspect-ratio:9 / 16;
overflow:hidden;
border-radius:10px;
background:#000;
box-shadow:0 4px 10px rgba(0,0,0,0.15);
}


/* ============================= */
/* VIDEO WRAPPER */
/* ============================= */

.short-video-wrapper{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

.short-video-wrapper iframe{
width:100%;
height:100%;
border:0;
}


/* ============================= */
/* TITLE OVERLAY */
/* ============================= */

.short-title{
position:absolute;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,0.6);
color:#fff;
font-size:14px;
padding:8px;
text-align:left;
}


/* ============================= */
/* HOVER EFFECT */
/* ============================= */

.youtube-short .card:hover iframe{
transform:scale(1.03);
transition:0.4s;
}


/* ============================= */
/* FILTER ANIMATION */
/* ============================= */

.youtube-short .show{
animation:fadeIn 0.6s ease;
}

@keyframes fadeIn{
from{
opacity:0;
transform:scale(0.9);
}
to{
opacity:1;
transform:scale(1);
}
}


/* ============================= */
/* MOBILE OPTIMIZATION */
/* ============================= */

@media (max-width:600px){

.youtube-short .gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  padding:10px;
}


.youtube-short .card:nth-child(n+5){
  display:none !important;
}

.short-title{
font-size:12px;
padding:6px;
}

}
.tab-buttons{display:none}

@media (max-width:991px){
.youtube-short .gallery{
  grid-template-columns: repeat(4, 1fr); 
}
}
@media (max-width: 576px) {
	.youtube-short .gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  padding:10px;
}
	
}

.ytmCuedOverlayPlayButton{display:none !important}

/* ============================= */
/* iPad / Tablet Optimization */
/* ============================= */

@media (min-width: 577px) and (max-width: 991px) {
  .video-item img {
    width: 100px !important;
    height: 56px !important;
    border-radius: 6px;
    object-fit: cover;
  }
  .video-item p {
    font-size: 13px !important;
}
}