/* Container for the video player - important for sizing */
.video-container {
    max-width: 800px; /* Limit video width */
    width: 100%;       /* Responsive width */
    margin-bottom: 20px;
    background-color: #ffffff;
    box-shadow: 0 0 15px rgb(255, 255, 255);
    border-radius: 8px;
    overflow: hidden; /* Crucial with the padding-top trick */

    /* --- Sizing Logic (moved from inline style for cleanliness) --- */
     position: relative;
     /* Example: 16:9 Aspect Ratio */
     padding-top: 100%; /* tallest video in demos
     height: 0;
     /* --- End Sizing Logic --- */
}


.thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap:0px;
    max-width: 800px;
    width: 100%;
    padding: 1px;
    background-color: #ffffff;
    border-radius: 5px;
    margin-top: 0px; /* Add some space above grid */
}

.thumbnail-button {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
    border: 3px solid transparent;
    border-radius: 4px;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

.thumbnail-button:hover,
.thumbnail-button:focus {
    transform: scale(1.05);
    box-shadow: 0 0 10px 4px rgba(26, 0, 191, 0.7);
    border-color: rgba(98, 70, 255, 0.8);
    outline: none;
}

/* Ensure vjs-fill works correctly with the container */
.video-js.vjs-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-js {
    width: 100%;
    height: 100%; /* Makes player height relative to container */
    display: block;
    background-color: white; 
}






.centered-video {
    display: block;     /* Allows margin auto to work for centering */
    width: 70%;       /* Default width for larger screens */
    max-width: 100%;  /* Ensures the video doesn't overflow its container */
    height: auto;     /* Maintain aspect ratio */
    margin-left: auto;  /* Center the video horizontally */
    margin-right: auto; /* Center the video horizontally */
    margin-top: 0;      /* Optional: Adjust or remove if you need vertical margin */
    margin-bottom: 0;   /* Optional: Adjust or remove if you need vertical margin */
  }





@media (max-width: 768px) {
    .centered-video {
        width: 95%; /* Full width on smaller screens */
      }
}