/* HOT SECTION */
.hot-section {
  overflow: hidden;
  height: 200px;
}

/* HIDE SCROLLBAR for hot-grid */
/* For Chrome, Safari, and Opera */
.hot-grid::-webkit-scrollbar {
  display: none;
}
/* For IE, Edge, and Firefox */
.hot-grid {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}

.videos-container h2 {
  margin: 0 0 1rem;
  position: relative;
  font-size: 1.5rem;
  color: white;
}

.hot-grid {
  display: flex;
  overflow-x: auto;
  justify-content: center;
  gap: 16px;
  padding: 1rem;
  width: calc(100%);
  border-radius: 8px;
  box-sizing: border-box; /* Include padding in the width */
  position: sticky;
}

.hot-grid .video-preview {
  flex: 0 0 auto;
  width: 220px; /* adjust width as needed */
}

.hot-grid .video-title {
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  width: 8rem;  /* ensures width if title does not overflow */
  white-space: nowrap;        /* Prevent wrapping */
  overflow: hidden;           /* Hide overflow */
  text-overflow: ellipsis;    /* Show "..." for overflowed text */
}

/* CREATORS SECTION */
.creators-section {
  margin-top: 1rem;
  margin-bottom: 1rem;
  position: sticky;
}

.creators-flex {
  display: flex;
  column-gap: 3rem;
  overflow-x: auto;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  width: calc(100%);
  box-sizing: border-box; /* Include padding in the width */
}

/* HIDE SCROLLBAR for creators-flex */
/* For Chrome, Safari, and Opera */
.creators-flex::-webkit-scrollbar {
  display: none;
}
/* For IE, Edge, and Firefox */
.creators-flex {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.creator-card {
  width: 120px;
  height: 180px;
}

.creator-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: goldenrod;
  margin: auto;
  overflow: hidden;
}

.creator-circle img {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.creator-name {
  text-align: center;
  color: white;
}

/* ALL VIDEOS SECTION */
.date-button,
.duration-button,
.shuffle-button,
.views-button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e0e0e0;
  background-color: #3a3a3a;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
}

.thumbnail-grid {
  position: relative;
  width: calc(100%); /* fits next to the sidebar */
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 16px; /* gap between grid columns */
  row-gap: 20px;    /* gap between grid rows */
}

.thumbnail-div {
  position: relative; /* ensures absolutely positioned elements are relative to this container */
}

.video-time {
  color: white;
  background-color: rgb(0, 0, 0);
  position: absolute;
  bottom: 0px;
  right: 10px;
  font-family: Roboto, arial;
  font-weight: 500;
  padding: 3px;
  border-radius: 2px;
}

.thumbnail {
  width: 100%; /* ensures video fits width of grid cell */
  height: 100%;
  aspect-ratio: 16 / 9; /* enforce a 16:9 aspect ratio */
  object-fit: cover;
  object-position: middle;
  z-index: 1000;
}

.video-preview {
  display: inline-block;
  vertical-align: top;
  margin-right: 15px;
  background-color: #2e2e2e;
  border-radius: 8px;
  overflow: hidden;
}

.video-info {
  position: absolute;
  bottom: 5px;
  left: 0;
  /* Reserve space on the right for video-time (adjust 60px if needed) */
  right: 60px;
  padding-left: 15px;
  color: #ffffff;
  font-weight: 600;
  /* Responsive font size: starts at 0.8rem and scales with viewport width */
  font-size: calc(0.8rem);
}

.video-title {
  margin: 0;
  padding: 0;
  position: relative;
  bottom: 14px;
  white-space: nowrap;       /* Prevent wrapping */
  overflow: hidden;          /* Hide any text that doesn't fit */
  text-overflow: ellipsis;   /* Display three dots if text overflows */
  font-size: calc(0.8rem + 0.3vw);
  font-weight: 700;
}

.video-author,
.video-stats, .video-title {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
}

.video-author {
  color: #ffffff;
  position: absolute;
  bottom: 2.7rem;
}

.video-stats {
  position: absolute;
  bottom: 1.5rem;
  color: #fbcce8;
}

/* Pagination Controls */
#pagination-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 20px 0;
}

#pagination-controls button {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#pagination-controls button:hover {
  background-color: #555;
}

#pagination-controls button.active {
  background-color: #007BFF;
}

/* SPLIT PANE */
.split-pane input[type="range"] {
  opacity: 0;
  transition: opacity 0.3s ease;
  width: 100px;
}

.split-pane:hover input[type="range"] {
  opacity: 1;
}

/* Responsive Adjustments */
@media (max-width: 1440px) {
  .thumbnail-grid {
    grid-template-columns: repeat(3, 1fr);
    margin: auto;
    width: 100%;
  }
}

@media (max-width: 1280px) {
  .thumbnail-grid {
    grid-template-columns: repeat(2, 1fr);
    margin: auto;
    width: 100%;
  }
}

@media (max-width: 1024px) {
  .thumbnail-grid {
    grid-template-columns: repeat(1, 1fr);
    margin: auto;
    width: 100%;
  }
  .body-container {
    margin-left: 12rem;
    margin-right: 1rem;
  }
  .hot-grid {
    width: calc(100%);
  }
}

@media (max-width: 768px) {
  .body-container {
    margin-left: 0;
    padding: 0 1rem;
    margin: auto;
  }
  .thumbnail-grid {
    grid-template-columns: repeat(1, 1fr);
    margin: auto;
    width: 100%;
  }
  .hot-grid {
    width: 100%;
    margin: auto;
  }
  .creators-flex {
    gap: 1rem;
    padding: 0.5rem;
    margin: auto;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .thumbnail-grid {
    grid-template-columns: 1fr;
  }
}

/* --- New Rule: Ensure videomodal's content does not exceed the window's width --- */
#video-modal > div {
  max-width: 95vw;
  width: auto;
  box-sizing: border-box;
}