/* Gallery Modal Component Styles */

.budi-gallery__thumb {
   margin: 0 auto;
   width: 100%;
   aspect-ratio: 4 / 3;
}

/* Only center and clip when the thumb contains an image, not videos */
.budi-gallery__thumb:has(.budi-gallery__thumb-img) {
   max-height: 500px;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}

.budi-gallery__thumb-img {
   border-radius: 8px;
   background-color: #f9f6f9;
   max-height: 500px;
   max-width: 100%;
   width: auto !important; /* override Bootstrap w-100 passed from component */
   height: auto;
   object-fit: contain;
   object-position: center;
   display: block;
   margin: 0 auto;
}


/* Media Carousel Video Component */
.budi-video__play-button {
   width: 64px;
   height: 64px;
   background-color: rgba(255, 255, 255, 0.7);
   border: 2px solid rgba(0, 0, 0, 0.1);
   cursor: pointer;
   transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.budi-video__play-button:hover {
   transform: scale(1.1);
   background-color: rgba(255, 255, 255, 0.9);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.budi-video__play-button:active {
   transform: scale(1.05);
}

/* Gallery Modal Responsive Styles */

@media (max-width: 767px) {
   .budi-gallery-modal .modal-body {
      padding-block: 24px;
   }
   
   .budi-gallery-modal .modal-header {
      margin-inline: 0;
   }
}