/* ==========================================================================
   0. Box Sizing Reset (Add this at the top)
   ========================================================================== */
   *, *::before, *::after {
    box-sizing: border-box;
  }
  
  /* ==========================================================================
   1. Global Styles & Resets
   ========================================================================== */

   body {
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    color: #333; /* Default text color - more readable than the blue */
    font-size: 16px; /* Base font size */
    line-height: 1.5; /* Default line spacing */
    margin: 0; /* Remove default body margin */
    background-color: #fff; /* Assume white background */
  }
  
  /* Headings */
  h1, h2, h3 {
    font-family: 'Outfit', Arial, Helvetica, sans-serif; /* Ensure heading font */
    text-align: left; /* Default alignment */
    margin-top: 1.5em;
    margin-bottom: 0.75em;
  }
  
  h1 {
    font-size: 2.5em; /* Example size */
  }
  
  h2 {
    font-size: 2em; /* Example size */
  }
  
  h3 {
    font-size: 1.5em; /* Adjusted from px for better scaling */
  }
  
  /* Paragraphs */
  p {
    text-align: left;
    /* Removed font-family (inherited from body) */
    /* color: rgb(136, 136, 255); /* Reconsider this bright blue for paragraphs? Using body default now. */
    /* font-size: 16px; /* Inherited from body */
    margin-bottom: 1em;
  }
  
  /* Links */
  a {
    color: #0056b3; /* Standard link blue - more accessible */
    text-decoration: none; /* No underline by default */
    font-family: 'Outfit', Arial, Helvetica, sans-serif; /* Ensure link font */
  }
  
  a:hover {
    text-decoration: underline; /* Underline on hover */
  }
  
  /* Lists - Basic reset (more specific styling later) */
  ul, ol {
    margin-top: 0;
    margin-bottom: 1em;
    padding-left: 1.5em; /* Standard indent */
  }
  
  /* General List Items (can be overridden by specific list styles) */
  /* These styles seem quite specific, maybe intended only for certain lists? */
  /* Consider removing if .film-grid li etc. cover all cases */
  /* li {
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    text-align: left;
    color: rgb(136, 136, 255); /* Reconsider this bright blue */
  /*  font-size: 20px;
    margin-bottom: 0.5em;
  } */
  
  
  /* ==========================================================================
     2. Layout Containers
     ========================================================================== */
  
  .page-container {
    max-width: 1200px; /* Maximum content width */
    margin: 0 auto;    /* Center the container (top/bottom 0, left/right auto) */
    padding: 1em;      /* Padding inside the container (all sides) */
  }
  
  /* Container for top links/buttons if needed */
  .link-container {
    display: flex;
    justify-content: center; /* Or space-between, space-around */
    align-items: center;
    margin-bottom: 20px;
    gap: 1em; /* Spacing between items */
  }
  
 /* ==========================================================================
   3. Component: Film Grid (Used on Playlist Detail Pages)
      Styles adjusted to mimic .playlist-list appearance
   ========================================================================== */

/* ... (Keep .film-grid, .film-item, .film-link, .film-thumbnail, .film-thumbnail-placeholder rules as they were in the previous step) ... */

.film-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 2em;
  list-style: none;
  padding: 0;
  margin: 0 0 2em 0;
}

.film-grid .film-item {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background-color: #f9f9f9;
  overflow: hidden;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  display: flex;
  padding: 0;
}

.film-grid .film-item:hover {
   box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1);
   transform: translateY(-2px);
}

.film-grid .film-item .film-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #333;
  height: 100%;
  width: 100%;
  padding: 0;
}

.film-grid .film-thumbnail {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background-color: #eee;
}

.film-grid .film-thumbnail-placeholder {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background-color: #e0e0e0;
}


/* --- MODIFIED RULES START HERE --- */

/* Container for text info (title, director) below the image */
.film-grid .film-info {
  display: block;
  width: 100%;            /* Ensure block takes full width */
  text-align: center;     /* Center the text content INSIDE this block */
  padding: 0.8em 0.5em;   /* Padding creates space around text, INCLUDING below image */
  /* margin-top: auto; */  /* <<< REMOVE OR COMMENT OUT THIS LINE */
  /* Keep explicit horizontal/bottom margin resets */
  margin: 0;              /* Simpler reset for all margins */
}

/* Film title and year container (Treat as one line) */
/* Removed specific .film-title class styling for inline behavior */
.film-grid .film-info .title-year-line {
  font-weight: bold;
  display: block;
  margin: 0 0 0.25rem 0;
  padding: 0;
  font-size: 1em;
  line-height: 1.3;
}

.film-grid .director-names {
  font-size: 0.9em;
  color: #555;
  margin: 0;
  padding: 0;
  line-height: 1.3;
  text-align: center;
}

/* Hover effect for title part within link */
.film-grid .film-item .film-link:hover .title-year-line {
  /* Underline might look odd across year too, maybe remove? */
  /* text-decoration: underline; */
}
/* Optional: Underline only the title span if needed */
/* .film-grid .film-item .film-link:hover .film-title-span {
   text-decoration: underline;
} */

/* --- MODIFIED RULES END HERE --- */
  
  /* ==========================================================================
   4. Component: Playlist List Grid (Used on Index Page)
   ========================================================================== */

.playlist-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 2em;          /* Spacing BETWEEN playlist items */
  list-style: none;
  padding: 0;
  margin: 0 0 2em 0; /* Space below the grid */
}

/* Individual playlist item block */
.playlist-list li {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background-color: #f9f9f9;
  overflow: hidden; /* Keep contents within rounded corners */
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  display: flex; /* Allows the link inside to potentially fill height */
  padding: 0;    /* Ensure no padding on the LI itself */
}

.playlist-list li:hover {
   box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1);
   transform: translateY(-2px); /* Slight lift effect */
}

/* The clickable link area within the playlist item */
.playlist-list li a {
  display: flex;          /* Use flexbox *inside* the link */
  flex-direction: column; /* Stack image and title vertically */
  align-items: center;    /* Center children (image, title block) horizontally */
  text-decoration: none;
  color: #333;           /* Default text color for title */
  height: 100%;           /* Fill the list item */
  width: 100%;            /* Fill the list item */
  padding: 0;             /* No padding on the link itself initially */
}

/* Playlist thumbnail image */
.playlist-list li img {
  display: block; /* Removes bottom space */
  width: 100%;    /* Image takes full width available */
  /* height: 140px; */  /* Consider removing fixed height */
  height: auto;         /* Use aspect-ratio instead for responsiveness */
  aspect-ratio: 16 / 9; /* Or your desired ratio, helps prevent layout shift */
  object-fit: cover;    /* Cover the area, crops if necessary */
  background-color: #eee; /* Placeholder bg */
  /* No margin needed here if padding is handled on title */
}

/* Playlist title text block */
.playlist-list li .playlist-title {
  display: block;
  width: 100%; /* Ensure title block takes full width for centering */
  text-align: center; /* Center the text within its block */
  /* Add padding HERE for spacing around the text, including below image */
  padding: 0.8em 0.5em;
  font-size: 1em;
  font-weight: bold;
  line-height: 1.3;
  margin-top: 0; /* Remove any auto margin */
  /* The flex container (<a>) handles vertical arrangement */
}

/* Hover effect for title within link */
.playlist-list li a:hover .playlist-title {
  text-decoration: underline;
}
  
  
  /* ==========================================================================
     5. Component: Film Detail Page
     ========================================================================== */
  
  .film-detail-grid {
    display: grid;
    /* Default: two columns, adjust fraction for relative width */
    grid-template-columns: 3fr 2fr;
    gap: 30px;
    margin-top: 20px;
  }
  
  .video-column {
    width: 100%; /* Take full width of its grid area */
  }
  
  .video-column iframe {
    display: block; /* Remove extra space below iframe */
    width: 100%;
    aspect-ratio: 16 / 9; /* Maintain 16:9 */
    height: auto;       /* Height adjusts automatically */
    border: none;       /* Remove default iframe border */
  }
  
  /* Placeholder for when there's no video */
  .video-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 200px; /* Ensure it has some height */
    background-color: #e0e0e0; /* Grey background */
    color: #666;
    font-size: 1.1em;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px; /* Optional rounded corners */
  }
  
  /* Right-hand column for text info */
  .info-column {
    min-width: 0; /* Prevents grid blowout if content is too wide */
  }
  
  .info-column h2 {
    margin-top: 0; /* Remove margin if it's the first item */
    margin-bottom: 0.75em;
  }
  
  /* Styling for metadata below the title */
  .info-column .film-type,
  .info-column .director-names,
  .info-column .bfi-ref {
    color: #555;
    margin-bottom: 1em;
    font-size: 0.95em; /* Slightly smaller */
  }
  
  /* Back link at the bottom of the info column */
  .info-column .back-link {
    display: inline-block; /* Allows margin-top */
    margin-top: 2em;
  }
  
  /* --- Collapsible Details Section --- */
  .film-collapsible-details {
    margin-top: 1.5em; /* Space above the whole section */
  }
  
  /* Individual collapsible item */
  .film-detail-collapsible {
    margin-bottom: 0.8em;
    background-color: #ffffff;
    border: 1px solid #ddd; /* Add a border around each item */
    border-radius: 4px;
  }
  
  /* The summary/header part */
  .film-detail-collapsible summary {
    padding: 0.6em 1em;
    font-weight: bold;
    cursor: pointer;
    background-color: #f8f9fa; /* Slightly off-white header */
    list-style: none; /* Remove default marker */
    position: relative;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #ddd; /* Separator line */
  }
  .film-detail-collapsible[open] summary {
      border-bottom: 1px solid #ddd; /* Keep line when open */
  }
  .film-detail-collapsible:last-of-type summary {
      /* Remove bottom border for the last item's header when closed */
       /* border-bottom: none; */ /* Conflicts with [open] style, maybe remove */
  }
  .film-detail-collapsible:last-of-type[open] summary {
       /* border-bottom: 1px solid #ddd; */ /* Keep border when open */
  }
  
  
  .film-detail-collapsible summary:hover {
    background-color: #e9ecef; /* Darker on hover */
  }
  
  /* Remove default browser marker */
  .film-detail-collapsible summary::marker,
  .film-detail-collapsible summary::-webkit-details-marker {
    display: none;
  }
  
  /* Custom Arrow Marker */
  .film-detail-collapsible summary::before {
      content: '▶'; /* Right arrow */
      display: inline-block;
      font-size: 0.7em;
      margin-right: 0.6em;
      color: #555;
      transition: transform 0.2s ease-in-out;
      vertical-align: middle; /* Align arrow better */
  }
  
  .film-detail-collapsible[open] summary::before {
      transform: rotate(90deg); /* Point down when open */
  }
  
  /* The content revealed when open (contains the <pre> tag) */
  .film-detail-collapsible .details-content { /* Added a wrapper div potentially needed */
      padding: 1em 1.2em; /* Padding inside the content area */
  }
  
  /* Style the <pre> tag containing the synopsis/notes */
  .film-detail-collapsible pre {
    margin: 0; /* Remove default margin from pre */
    font-family: 'Outfit', Arial, Helvetica, sans-serif; /* Ensure font matches */
    line-height: 1.6;
    white-space: pre-wrap; /* Allow long lines to wrap */
    word-wrap: break-word; /* Break long words */
    color: #333; /* Ensure text color */
    font-size: 0.95em; /* Slightly smaller text for details */
  }
  
  /* --- Responsive adjustments --- */
  @media (max-width: 768px) {
    /* Stack columns on smaller screens */
    .film-detail-grid {
      grid-template-columns: 1fr; /* Single column */
      gap: 20px;
    }
    /* Optional: Adjust heading sizes on mobile */
    h1 { font-size: 2em; }
    h2 { font-size: 1.6em; }
    h3 { font-size: 1.3em; }
  }
  
  
/* ==========================================================================
   6. Component: All Films Page (Dynamic List & Controls)
   ========================================================================== */

/* --- Controls Container (Keep As Is) --- */
.film-list-controls {
  display: flex; flex-wrap: wrap; gap: 1em 1.5em; margin-bottom: 2em; padding: 1em;
  background-color: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 6px;
}
.control-group { display: flex; align-items: center; gap: 0.5em; }
.film-list-controls label { font-weight: bold; white-space: nowrap; margin-bottom: 0; color: #333; }
.film-list-controls input[type="search"], .film-list-controls select {
  padding: 0.5em 0.75em; border: 1px solid #ccc; border-radius: 4px; font-size: 1em; font-family: inherit; min-width: 150px;
}


/* --- List Container (Keep As Is) --- */
#film-list-container {
  margin-top: 2em;
  min-height: 100px;
}

/* --- The Film List Itself (2-COLUMN GRID) --- */
.film-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Exactly 2 equal columns */
  gap: 1em 1.5em; /* Row gap, Column gap */
}

/* Individual list items (Grid Items) */
.film-list li {
  /* The LI itself doesn't need much styling now */
  /* Optional: Add border/bg here if you want a card effect *around* the link area */
  /* border: 1px solid #eee; border-radius: 4px; padding:0; */
  line-height: 1.4;
}

/* --- MODIFIED: Styling the Link (a) inside the list item --- */
/* This link will be the flex container for thumb + text */
.film-list li a {
  display: flex;           /* Use Flexbox for side-by-side layout */
  align-items: center;     /* Align thumbnail and text block vertically */
  gap: 1em;                /* Space between thumbnail and text */
  padding: 0.8em 0.5em;    /* Padding INSIDE the link area */
  border-bottom: 1px solid #eee; /* Separator line */
  text-decoration: none;
  color: #333;             /* Default text color inside */
  width: 100%;             /* Fill grid cell */
  height: 100%;            /* Fill grid cell */
}
.film-list li a:hover {
  text-decoration: none; /* No underline on whole block */
  background-color: #f8f9fa; /* Optional hover background */
}

/* Remove border-bottom for the last links in each column */
.film-list li:nth-last-child(-n+2) a { /* Target the last two links */
    border-bottom: none;
}


/* --- Thumbnail Styling (Small, Fixed Size) --- */
.film-list-thumbnail {
  display: block;
  flex-shrink: 0; /* Prevent thumbnail from shrinking */
  width: 80px;    /* Or your desired small width */
  height: 45px;   /* Corresponding 16:9 height */
  object-fit: cover;
  background-color: #ccc;
  border-radius: 3px;
}
.film-list-thumbnail-placeholder {
  display: block;
  flex-shrink: 0;
  width: 80px;
  height: 45px;
  background-color: #e0e0e0;
  border-radius: 3px;
}

/* --- Container for Text Content (To the right of thumbnail) --- */
.film-list-text-content {
  flex-grow: 1; /* Allow text block to take remaining horizontal space */
  min-width: 0; /* Prevent text overflow issues in flexbox */
}

/* Title and Year line */
.film-list .title-year-line {
  display: block;
  font-weight: bold;
  margin-bottom: 0.2em;
  color: #0056b3; /* Blue title */
  line-height: 1.3;
}
/* Underline title part on link hover */
.film-list li a:hover .title-year-line {
  text-decoration: underline;
}

.film-list .year {
   font-size: 0.9em;
   color: #555;
   font-weight: normal;
   margin-left: 0.3em;
}

/* Director line */
.film-list .director {
  display: block;
  font-size: 0.9em;
  color: #555;
  line-height: 1.3;
  margin: 0;
  padding: 0;
  text-decoration: none;
}


/* --- Status Messages --- */
.loading-message,
.error-message,
.no-results-message {
  padding: 2em; text-align: center; font-style: italic; color: #666;
  border: 1px dashed #ddd; border-radius: 4px; margin-top: 1em;
  grid-column: 1 / -1; /* Span both columns */
}
.error-message { color: #c00; font-weight: bold; border-color: #fdd; background-color: #fee; }
.no-results-message { border-style: solid; }

/* --- Responsive adjustment for columns --- */
@media (max-width: 650px) { /* Adjust breakpoint */
  .film-list {
    grid-template-columns: 1fr; /* Stack to single column */
    gap: 0; /* Remove column gap, row gap handled by border? */
  }
  /* Restore border for all but last in single column */
  .film-list li a {
      border-bottom: 1px solid #eee;
  }
  .film-list li:nth-last-child(-n+2) a {
     /* Rule not needed in single column */
  }
   .film-list li:last-child a {
       border-bottom: none;
   }
   /* Ensure status message still spans */
   .loading-message, .error-message, .no-results-message {
        grid-column: 1 / -1;
   }
}


/* ==========================================================================
   End All Films Page Styles
   ========================================================================== */
  
  /* ==========================================================================
     7. Utility Styles (If any)
     ========================================================================== */
  
  /* Add any utility classes here (e.g., .text-center, .visually-hidden) */