/* style.css */

/* --- Import Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Open+Sans:wght@400;700&display=swap');

/* --- Main Styles ---
  Font: 'Open Sans', 'Bebas Neue'
  Netflix Red: #E50914
  Dark Background: #222
  Off-White Text: #eee
  Card Background: #333
*/

body {
  margin: 0;
  padding: 0;
  background: #100e0f;
  color: #eee;
  font-family: 'Open Sans', sans-serif;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

h1, h2 {
  font-family: 'Bebas Neue', sans-serif;
  color: #E50914;
  letter-spacing: 1.5px;
  font-weight: normal;
}

h1 {
  font-size: 3.5rem;
  text-align: center;
  margin-bottom: 0;
}

h2 {
  font-size: 2.5rem;
  border-bottom: 2px solid #444;
  padding-bottom: 5px;
}

a {
  color: #eee;
  text-decoration: none;
}

a:hover {
  color: #E50914;
}

/* --- Media List Styling --- */
.media-list {
  list-style: none;
  padding: 0;
}

.media-item {
  position:relative;
  background: #333;
  margin-bottom: 3px;
  padding: 0.4rem 1rem;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s;
}

.media-item:hover {
  background: #444;
}

.media-item a {
  font-size: 1rem;
  letter-spacing: 1px;
}

.trailer-icon-link {
  font-size: 2.2rem; /* Make the icon large */
  color: #FF0000; /* YouTube Red */
  transition: transform 0.2s ease, color 0.2s ease;
}

.trailer-icon-link:hover {
  transform: scale(1.15);
  color: #fff; /* Make it white on hover */
}


/* 2. New Synopsis Tooltip Styles */
.media-item .title-wrapper {
  display: flex;
  align-items: center;
  gap: 10px; /* Adds space between title and 'i' icon */
}

.media-item .info-icon {
  font-size: 1.2rem; /* Made it slightly larger */
  color: #888; /* Grey, subtle */
  cursor: help;
  transition: color 0.2s ease;
  pointer-events:none;
}

.media-item .info-icon:hover {
  color: #ccc; /* Lighten it up on hover */
}

/* The pop-out box, hidden by default */
.media-item .info-popout {
  display: none;
  position: absolute;
  bottom: 125%; /* Position it above the 'i' icon */
  left: 50%;
  transform: translateX(-50%); /* Center it on the icon */
  
  width: 300px; /* Set a fixed width */
  background: #eee;
  color: #100e0f; /* Dark text on light background */
  padding: 15px;
  border-radius: 5px;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  
  /* Just in case synopsis is too long */
  max-height: 200px;
  overflow-y: auto;
}

/* The text inside the pop-out */
.media-item .info-popout p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color:#100e0f;
}


/* This is the magic: Show the pop-out on hover */
.media-item .info-tooltip:hover .info-popout {
  display: block;
}

.media-item p {
  margin: 10px 0 0 0;
  color: #ccc;
  font-size: 0.9rem;
}

/* 1. Style for the logo */
.logo {
  display: block;
  max-width: 300px; /* Adjust as needed */
  margin: 20px auto 40px; /* Center it */
}

/* 2. Styles for the 2-column grid */
.new-uploads-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  gap: 30px; /* Space between the columns */
}

/* 3. Style for the full library wrapper */
.full-library {
  margin-top: 30px; /* Add some space above the library */
}

/* --- Add these new styles to the end of style.css --- */

#featured-trailer-wrapper {
  width: 100%;
  margin-bottom: 20px;
}

/* This creates a 16:9 responsive box */
#featured-trailer-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio (9 / 16 = 0.5625) */
  height: 0;
  overflow: hidden;
  border-radius: 5px;
  background: #000; /* Black background for loading */
}

#featured-trailer-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media all and (max-width:1100px) {
  .media-item .info-popout {
    left: auto; 
    right: 0; 
    transform: none; 
    width: 280px;
    max-width: 80vw; 
  }
}

@media all and (max-width:460px) {
 .new-uploads-grid {
  grid-template-columns: 1fr; 
 }
}