.video-stream{
  z-index: 0;
}
/* Stream Section Info */
.stream-section-info {
  background-color: #121212;
  box-sizing: border-box;
  margin: 0;
  padding: 2vh 10vh;
  color: #fff;
  width: 100%;
  height: max-content;
}

.stream-text {
  font-family: 'Sofia Pro', sans-serif;
  font-size: 3vh;
  line-height: 1.5;
  color: #fff;
  margin-top: 2vh;
  text-align: justify;
}

/* 2) Tablet (~<1200px): −20px */
@media (max-width: 1200px) {
  .stream-information h1 {
    font-size: 40px;
  }
  .video-list-container h2 {
    font-size: 28px;
  }
  .stream-text {
    font-size: 4px;
  }
}

/* 3) Phone (~<768px): another −20px */
@media (max-width: 768px) {
  .stream-information h1 {
    font-size: 20px;
  }
  .video-list-container h2 {
    font-size: 8px;
  }
  .stream-text {
    font-size: 0px;
  }
}

/* Stream Page Styles – Scalable, Immersive, & Future-Ready */

/* 1. Full-Viewport Background “Atmosphere” */
.video-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
/* 1. Make sure the bg-player container spans the full viewport */
.video-background-container,
.video-overlay.bg-player {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  width: 150%;
  height: 150%;
  transform: translate(-15%, -15%);
}

/* 2. Apply the blur + darken filter to the container */
.video-overlay.bg-player {
  filter: blur(50px) brightness(0.5);
  pointer-events: none;
}
/* 2. Primary “Control” Player */
.main-player-container {
  position: relative;
  z-index: 1;
  top: 60%;
  transform: translateY(-50%);
  margin: 0 auto;
  width: 100%;
  max-width: 60vw;
  aspect-ratio: 16/9;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  border-radius: 1rem;
  overflow: hidden;
}
.main-player {
  width: 100%;
  height: 100%;
}

/* 3. Video Gallery & Filter Controls */
.video-gallery-section {
  background-color: #121212;
  padding: 5vh 10vh;
}
/* ─────────────────────────────────────────────────────────────
   1. Container & Layout for Filters
   ───────────────────────────────────────────────────────────── */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap:3vh;                /* generous gap between each field */
  background-color: #222;     /* slightly darker to separate from rest */
  padding: 2vh 5vh;
  border-radius: 0.5rem;
  margin-bottom: 2%;
}

/* Each label + input/select combo */
.filter-field {
  display: flex;
  flex-direction: column;
  min-width: 15vw;           /* don’t shrink too small on narrow screens */
}

/* ─────────────────────────────────────────────────────────────
   2. Label Styling (Modern, Clear)
   ───────────────────────────────────────────────────────────── */
.filter-field label {
  font-size: 2vh;
  font-weight: 500;
  color: #eee;
  margin-bottom: 1vh;
  font-family: 'sofia pro', sans-serif; /* consistent font */

}

/* ─────────────────────────────────────────────────────────────
   3. Shared Input / Select Styles
   ───────────────────────────────────────────────────────────── */
.filter-field input[type="text"],
.filter-field input[type="date"],
.filter-field select {
  padding: 2vh 4vh;
  font-size: 2vh;
  background-color: #333;
  border: 0.1vh solid #444;
  border-radius: 2vh;
  color: #fff;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  width: 100%;
  box-sizing: border-box;
  font-family: 'sofia pro', sans-serif; /* consistent font */
}

/* Placeholder text color */
.filter-field input::placeholder {
  color: #999;
  font-family: 'sofia pro', sans-serif; /* consistent font */

}

/* Hover & Focus states for inputs/select */
.filter-field input:hover,
.filter-field select:hover {
  border-color: #666;
}

.filter-field input:focus,
.filter-field select:focus {
  outline: none;
  border-color: #888;
  box-shadow: 0 0 0 2px rgba(136, 136, 136, 0.3);
  background-color: #2d2d2d;
}

/* ─────────────────────────────────────────────────────────────
   4. Button Group Styling
   ───────────────────────────────────────────────────────────── */
.filter-buttons {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;      /* align buttons with bottom of inputs */
  flex: 1 1 auto;
  min-width: 160px;
}

.filter-buttons button {
  padding: 3vh 2vh;
  font-size: 2vh;
  font-weight: 500;
  background-color: #453a30;  /* accent color for “Search” */
  border: none;
  border-radius: 2vh;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
  min-width: 8vw;
  box-sizing: border-box;
}

.filter-buttons #reset-btn {
  background-color: #555;     /* neutral gray for “Reset” */
}

.filter-buttons button:hover {
  background-color: #da683b;
}

.filter-buttons #reset-btn:hover {
  background-color: #777;
}

/* ─────────────────────────────────────────────────────────────
   5. Responsive Adjustments
   ───────────────────────────────────────────────────────────── */
/* Under 600px: stack everything vertically */
@media (max-width: 600px) {
  .filters {
    flex-direction: column;
    gap: 1vh;
  }
  .filter-buttons {
    flex-direction: column;
    gap: 1vh;
  }
  .filter-buttons button {
    width: 100%;
  }
}


/* 4. Responsive Grid for Thumbnails */
.grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.thumbnail {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform 0.3s ease;
}
.thumbnail:hover {
  transform: scale(1.05);
}
.thumbnail img {
  width: 100%;
  display: block;
}
.thumbnail-title {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0.5rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: #fff;
  font-size: 0.9rem;
}

/* 5. Mobile-First Enhancements */
@media (max-width: 768px) {
  .main-player-container {
    max-width: 95vw;
  }
  .video-gallery-section {
    padding: 1vh;
  }
}

/* Error Overlay */
#error-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  z-index: 9999;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: 'Sofia Pro', sans-serif;
  font-size: 2vh;
}
#error-overlay button {
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  background: #444;
  color: #fff;
  font-size: 1.5vh;
  cursor: pointer;
}