.video-gallery { margin:auto; }
.video-grid { display:flex; flex-wrap:wrap; gap:15px; }
.video-item { 
    position: relative;
    z-index: 2;
}
.video-item p { text-align:center; font-size:16px; margin-top:5px; }
.video-item{
cursor: pointer; 
}
/* IMPORTANT: Ensure the MODAL iframe still allows clicks so you can play/pause */
#video-modal .video-modal-content iframe {
    pointer-events: auto !important;
}

.load-more-videos {
    display: block;
    margin: 48px auto 0;
    padding: 16px 34px;
    font-size: 15px;
    font-family: 'Libre Baskerville', serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, #f5c542, #f1a90f);
    color: #000;
    border: none;
    border-radius: 5px;
    box-shadow: 0 10px 25px rgba(245, 197, 66, 0.35);
    cursor: pointer;
    transition: all 0.25s ease;
}
.load-more-videos:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 35px rgba(245, 197, 66, 0.45);
}
/* This prevents the grid iframe from playing when clicked */
.video-item .video-wrapper iframe {
    pointer-events: none;
    z-index: 1;
    height: 185px;
}
/* 1. Spinner is hidden by default */
.load-more-videos .spinner { 
    display: none; 
    width: 18px; 
    height: 18px; 
    border: 3px solid rgba(0, 0, 0, 0.1); 
    border-top: 3px solid #000; 
    border-radius: 50%; 
    margin-left: 8px; 
    vertical-align: middle; 
}

/* 2. Only show and animate when the button has the 'loading' class */
.load-more-videos.loading .spinner { 
    display: inline-block; 
    animation: spin 1s linear infinite; 
}
@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

#video-modal {
    display: none; /* hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.video-modal-content {
    position: relative;
    width: 80%;
    max-width: 800px;
    aspect-ratio: 16/9; /* keeps 16:9 ratio */
}

.video-modal-content iframe {
    width: 100%;
    height: 100%;
    display: block;
}

.video-modal-close {
    position: absolute;
    top: -50px;
    right: -50px;
    color: #fff;
    font-size: 60px;
    cursor: pointer;
    z-index: 10;
}

.video-modal-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); }
.video-modal-content { position:relative; z-index:10; width:80%; max-width:800px; }
.video-modal-content iframe { width:100%; height:450px; }
.video-modal-content .close-modal { position:absolute; top:-10px; right:-10px; background:#fff; border:none; font-size:20px; cursor:pointer; border-radius:50%; padding:5px 10px; }

@media(max-width:768px) { .video-item { width: calc(50% - 10px); } }
@media(max-width:480px) { .video-item { width:100%; } }