/* --- Header Layout --- */

/* This styles your banner image */
#banner {
  width: 100%;
  height: 250px;     /* You can change this height */
  object-fit: cover; /* This makes the image cover the area nicely */
  display: block;
}

/* --- Horizontal Navigation Tabs --- */
nav.tabs ul {
  list-style-type: none; /* Removes the bullets */
  margin: 0;
  padding: 0;
  text-align: center; /* Centers the tabs on the page */
}

nav.tabs li {
  display: inline-block; /* This is the key change to make them horizontal */
  margin: 0 5px; /* Adds a little space between tabs */
}

nav.tabs a {
  display: block;
  padding: 12px 20px;
  background-color: var(--white);
  color: var(--text-color);
  font-weight: bold;
  border-radius: 6px 6px 0 0; /* Rounds the top corners */
  transition: background-color 0.3s, color 0.3s;
}

nav.tabs a:hover {
  background-color: var(--pastel-blue-dark);
  color: var(--white);
  text-decoration: none; /* Removes underline on tab hover */
}

/* --- Main Content Section Layout --- */
section {
  max-width: 900px; /* Constrains the width for better readability */
  margin: 30px auto;  /* Centers the section on the page */
  padding: 25px;
  background-color: var(--white);
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  overflow: auto; /* This is important! It contains the floated image */
}

/* This styles the image inside your <section> */
section img {
  float: right; /* This moves the image to the right */
  width: 300px;   /* A fixed width for the image */
  margin-left: 20px;  /* Space between the text and image */
  margin-bottom: 10px;
  border-radius: 8px;
  border: 4px solid var(--pastel-purple);
}

section h1 {
  margin-top: 0; /* Removes extra space above the heading */
}

/* Poster List Layout */
.poster-list {
  list-style-type: none; /* Hides the numbers or bullet points */
  padding-left: 0;       /* Removes the default list indentation */
}

.poster-list li {
  display: flex;           /* This is the magic! Makes children side-by-side */
  align-items: flex-start; /* Aligns the top of the image with the top of the text */
  margin-bottom: 25px;     /* Space between each movie entry */
}

.poster-list img {
  width: 100px;  /* Or however wide you want the small poster */
  height: auto;  /* Keeps the correct aspect ratio */
  margin-right: 15px; /* Space between the poster and the text */
  border-radius: 4px; /* Optional: nice rounded corners */
  
  /* This uses the pastel purple from your :root variable! */
  border: 3px solid var(--pastel-purple); 
  
  flex-shrink: 0; /* Stops the image from shrinking on small screens */
}

/* This is the <div> holding your text */
.poster-list div {
  flex-grow: 1; /* Allows the text to take up the remaining space */
}

.poster-list .title {
  font-size: 1.4rem;  /* Makes the title a bit bigger */
  font-weight: bold;
  margin-top: 0;      /* Removes default spacing */
  margin-bottom: 5px;
  color: var(--text-color); /* Uses your theme color */
}

.poster-list .description {
  font-size: 1rem;
  margin: 0;
}

/* Youtube Video Style */

.responsive_video {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 3px solid var(--pastel-purple);
}