/*
  video-grid.css
  Responsive styling for the #random-video-grid container.
*/

#random-video-grid {
  display: grid;
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: #000;
  /* Hide any overflow in case of partial rows */
  overflow: hidden; 
}

#random-video-grid video {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  padding: 0;
  margin: 0;
  /* Add a smooth transition for rotation changes */
  transition: transform 0.3s ease-in-out;
}

/* Force-hide native controls */
#random-video-grid video::-webkit-media-controls {
  display: none !important;
}

/* Default: Mobile (screens < 768px)
  Show 2 rows of 3 = 6 videos
*/
#random-video-grid {
  grid-template-columns: repeat(3, 1fr);
  /* Calculate height for 2 rows based on 1:1 aspect ratio */
  /* (100vw / 3 columns) * 2 rows */
  height: calc((100vw / 3) * 2); 
}

/* Hide videos 7 through 14 */
#random-video-grid video:nth-child(n+7) {
  display: none;
}

/* Tablet: (screens >= 768px)
  Show 2 rows of 5 = 10 videos
*/
@media (min-width: 768px) {
  #random-video-grid {
    grid-template-columns: repeat(5, 1fr);
    /* (100vw / 5 columns) * 2 rows */
    height: calc((100vw / 5) * 2);
  }

  /* Re-show videos 7, 8, 9, 10 */
  #random-video-grid video:nth-child(n+7) {
    display: block;
  }
  
  /* Hide videos 11, 12, 13, 14 */
  #random-video-grid video:nth-child(n+11) {
    display: none;
  }
}

/* Desktop: (screens >= 1024px)
  Show 2 rows of 7 = 14 videos
*/
@media (min-width: 1024px) {
  #random-video-grid {
    grid-template-columns: repeat(7, 1fr);
    /* (100vw / 7 columns) * 2 rows */
    height: calc((100vw / 7) * 2);
  }

  /* Re-show all videos (11, 12, 13, 14) */
  #random-video-grid video:nth-child(n+11) {
    display: block;
  }
}