/* -------------------------------------------------------------------
   Main_CSS.css - Global Styles for Video Player and Gallery Components 
   Optimized for Mobile-First Design
------------------------------------------------------------------- */

/* 1. Global Reset for Mobile (Critical for reliable box model calculation) */
* { 
  box-sizing: border-box; 
}

/* 2. Video Player Container (16:9 Aspect Ratio) */
.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  background-color: #000;
  overflow: hidden;
}

/* Inner Display (Image or Iframe) */
#current-video-display {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#current-video-display iframe,
#current-video-display img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
}
  
/* 3. Link/Action Button (Between Player and Gallery) */
.link-button {
  display: block;
  text-align: center;
  padding: 8px;
  background-color: #007bff;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  width: 100%;
  border: none;
  box-shadow: 0 0 10px rgba(255, 204, 0, 0.7);
  transition: all 0.3s ease;
}
.link-button:hover {
  background-color: #f89304;
  color: #fff;
  box-shadow: 0 0 15px rgba(0, 123, 255, 0.8);
}
  
/* 4. Gallery Layout and Scrolling */
.gallery {
  display: grid;
  background-color: #000;
  /* Default Desktop/Tablet min size */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
  gap: 5px;
  overflow-y: auto; 
  overflow-x: hidden;
  max-height: 600px;
  width: 100%;
  padding: 10px;
  border-radius: 0 0 10px 10px;
  /* iOS smooth scrolling support */
  -webkit-overflow-scrolling: touch; 
}

/* Custom Scrollbar Styling */
.gallery::-webkit-scrollbar {
  width: 12px;
}
.gallery::-webkit-scrollbar-thumb {
  background: #ffcc00;
  border-radius: 6px;
}
.gallery {
    scrollbar-width: thin;
    scrollbar-color: #ffcc00 #333;
}

/* Gallery Images (Thumbnails) */
.gallery img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 5px;
  transition: transform 0.3s;
  cursor: pointer;
}
.gallery img:hover {
  transform: scale(1.1);
}
  
/* 5. Sidebar Components (thumb-pad4) */
.thumb-pad4 {
  background: #ededed;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 25px;
  border: 0 solid #333;
}
  
.caption {
  padding: 4px 8px;
  color: #fff;
}
.caption strong {
  display: block;
  font-family: Arial, sans-serif;
  font-size: 1.2em;
  color: #d4af37; 
  margin-bottom: 4px;
}
  
.box1 p {
  font-family: Arial, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: #333;
  margin: 0;
}
.box1 a {
  font-family: Arial, sans-serif;
  color: #fb7701;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-bottom 0.3s ease;
}
.box1 a:hover {
  border-bottom: 1px solid #d4af37;
}
  
/* 6. Media Query for mobile devices (Mobile-First Optimization) */
@media (max-width: 768px) {
  /* Gallery Grid adjusted for better thumb visibility on smaller screens */
  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
  /* Ensure padding and size are suitable for touch input */
  .gallery img {
    height: 80px;
  }
  .caption {
    padding: 15px;
  }
  .caption strong {
    font-size: 1.1em;
  }
}