/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
.network-header {
    /* 1. FORCE THE HEADER TO HAVE HEIGHT */
    /* This ensures there is space for the background to actually show */
    min-height: 120px; 
    
    /* 2. BACKGROUND STACKING */
    /* The gradient goes first (on top), the image goes second (behind) */
    background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.4)), 
                url('yourimage.com');
    
    /* 3. SCALING & POSITIONING */
    background-size: cover;      /* Forces image to fill the space */
    background-position: center; /* Keeps the middle of the image visible */
    background-repeat: no-repeat;
    
    /* 4. KEEP YOUR EXISTING LAYOUT RULES */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
}

.logo-img {
  max-height: 195px;
}

.logo-img {
    /* brightness(0) turns the image black, invert(1) turns that black into white */
    filter: brightness(0) invert(1);
}

.menu-items {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 15px;
  margin: 0;
  padding: 0;
}

.nav-links a.glossy-btn {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  padding: 9px 12px;
  border-radius: 4px;
  transition: background 0.2s;
}

.nav-links a.glossy-btn:hover {
  background-color: #0076ff;
}

.search-container input {
  padding: 8px 12px;
  border-radius: 20px;
  border: 1px solid #444;
  background: #222;
  color: white;
}

/* Hamburger Hidden on Desktop */
.hamburger {
  display: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}

.hamburger .bar {
  width: 25px;
  height: 3px;
  background-color: white;
}

/* --- Hero Slider Basics --- */
.slider-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.slide img {
  width: 100%;
  height: auto;
  display: block;
}

.thumbnail-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  background: #111;
}

.thumbnail-row img {
  width: 80px;
  height: auto;
  cursor: pointer;
}

/* --- Main Layout Wrapper --- */
.main-layout-wrapper {
  display: flex;
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
  gap: 30px;
  align-items: flex-start;
}

.library-column {
  flex: 2; /* Takes up roughly 66% of the space */
}

.schedule-column {
  flex: 1; /* Takes up roughly 33% of the space */
  background: #1e1e1e;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #333;
}

/* --- Show Library Grid --- */
.category-block {
  margin-bottom: 40px;
}

.block-title {
  border-bottom: 2px solid #0076ff;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

/* CSS Grid automatically wraps the thumbnails! */
.shows-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}

.show-item {
  background: #222;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  padding-bottom: 10px;
  border: 1px solid #333;
  transition: transform 0.2s;
}

.show-item:hover {
  transform: scale(1.05);
}

.show-item img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-bottom: 2px solid #0076ff;
}

.show-item p {
  margin: 10px 0 0 0;
  font-weight: bold;
  font-size: 0.95rem;
}

/* --- Schedule Box Formatting --- */
.schedule-box {
  text-decoration: none;
  color: white;
}

.schedule-box ul {
  list-style: none;
  padding: 0;
}

.schedule-box li {
  padding: 10px 0;
  border-bottom: 1px solid #333;
  display: flex;
  justify-content: space-between;
}

.schedule-box li span {
  color: #0076ff;
  font-weight: bold;
}

.schedule-btn {
  margin-top: 20px;
  display: inline-block;
  background: #0076ff;
  padding: 10px 15px;
  border-radius: 4px;
  font-weight: bold;
}

/* --- MOBILE RESPONSIVENESS (Phones & Tablets) --- */
@media (max-width: 850px) {
  
  /* Stack the main content columns */
  .main-layout-wrapper {
    flex-direction: column;
  }
  
  .schedule-column {
    width: 100%;
    box-sizing: border-box;
  }

  /* Shrink thumbnails on mobile to fit 2 side-by-side */
  .shows-row {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

@media (max-width: 650px) {
  
  /* Header adjustments for mobile */
  .network-header {
    flex-wrap: wrap;
  }

  /* Show the hamburger icon */
  .hamburger {
    display: flex;
  }

  /* Hide the menu items by default, stack them, and take full width */
  .menu-items {
    display: none;
    width: 100%;
    flex-direction: column;
    margin-top: 15px;
  }

  /* Toggled via the inline JavaScript I added to the hamburger HTML */
  .menu-items.active {
    display: flex;
  }

  .nav-links {
    flex-direction: column;
    width: 100%;
  }

  .nav-links a.glossy-btn {
    display: block;
    text-align: center;
    background-color: #222;
    margin-bottom: 5px;
    padding: 12px;
  }
  
  .search-container {
    width: 100%;
  }
  
  .search-container input {
    width: 100%;
    box-sizing: border-box;
  }
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
}

/* Glossy Button Effect */
.glossy-btn {
    background: var(--glossy-gradient);
    border: 1px solid #444;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    text-shadow: 0 1px 2px #000;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    transition: 0.3s;
}

.glossy-btn:hover {
    background: var(--accent-blue);
    border-color: #fff;
}

/* Header & Banner */
.network-header { padding: 20px; background: #000; display: flex; align-items: center; }

/* Hero Slider */
.hero-slider { position: relative; width: 100%; height: 400px; overflow: hidden; }
.slide { display: none; width: 100%; height: 100%; }
.slide.active { display: block; }
.arrow { position: absolute; top: 50%; cursor: pointer; background: rgba(0,0,0,0.5); color: white; padding: 20px; border: none; }
.next { right: 0; }

/* Library & Schedule Grid */
.main-wrapper { display: flex; gap: 20px; padding: 20px; }
.library-left { flex: 3; }
.schedule-right { flex: 1; background: #1a1a1a; padding: 20px; border-radius: 8px; }

/* Shows Grid (For shows.html) */
.shows-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    gap: 20px; 
    padding: 20px; 
}
.show-card { background: #1a1a1a; padding: 10px; border-radius: 5px; text-align: center; }
.show-card img { width: 100%; height: 150px; object-fit: cover; }

.hero-carousel {
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    height: 100%;
}

.slide {
    min-width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Gradient Overlay */
.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
}

/* Text Styling */
.text-content {
    position: absolute;
    bottom: 40px;
    left: 40px;
    color: white;
    z-index: 2;
}

.text-content h1 { font-size: 3rem; margin: 0; }
.text-content p { font-size: 1.2rem; }

/* Arrows */
.nav-arrow {
    position: absolute;
    top: 50%;
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 20px;
    cursor: pointer;
    font-size: 2rem;
}
.prev { left: 10px; }
.next { right: 10px; }

/* Thumbnails */
.thumbnails {
    position: absolute;
    bottom: 10px;
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 10px;
}

.thumb {
    width: 60px;
    height: 30px;
    background: rgba(255,255,255,0.3);
    cursor: pointer;
}
.thumb.active { background: white; }

/* Container Layout */
.main-container {
    display: grid;
    grid-template-columns: 3fr 1fr; /* Left is 3x larger than right */
    gap: 20px;
    padding: 20px;
}

/* Update your header styling */
.network-header {
    display: flex;
    align-items: center; /* Vertically centers everything */
    padding: 10px 20px;
    background: #000; /* Adjust to your site colors */
}

/* Push the search bar to the far right */
.search-container {
    margin-left: auto; 
    display: flex;
}

.search-container input {
    padding: 8px;
    border-radius: 4px;
    border: none;
}

.search-container button {
    padding: 8px;
    background: #444;
    color: white;
    border: none;
    cursor: pointer;
    margin-left: 5px;
}

.hero-carousel {
    position: relative;
    width: 100%;
    height: 700px;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    height: 100%;
}

.slide {
    min-width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Linear Gradient Black Overlay */
.gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
}

/* Text Overlay (Lower Left) */
.text-overlay {
    position: absolute;
    bottom: 50px;
    left: 40px;
    color: white;
    z-index: 2;
}

.text-overlay h1 { font-size: 3rem; margin-bottom: 10px; }
.text-overlay p { font-size: 1.2rem; opacity: 0.9; }

/* Arrows */
.arrow {
    position: absolute;
    top: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 15px 20px;
    cursor: pointer;
    font-size: 1.5rem;
}
.prev { left: 10px; }
.next { right: 10px; }

/* Thumbnails */
.thumbnails {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.thumb {
    width: 40px;
    height: 40px;
    background: gray;
    cursor: pointer;
    border-radius: 4px;
}
.thumb.active { background: white; }

/* Layout Wrapper */
.page-container {
    display: grid;
    grid-template-columns: 3fr 1fr; /* 3 parts for grid, 1 part for schedule */
    gap: 20px;
    padding: 20px;
}

/* 12-Item Grid Setup */
.trending-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns across */
    gap: 15px;
}

/* Thumbnail Card Styling */
.show-card {
    position: relative;
    display: block;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
}

.show-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%; /* Gradient goes halfway up */
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
}

.show-title {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: white;
    font-weight: bold;
    z-index: 1;
}

/* Schedule Sidebar */
.schedule-sidebar {
    height: 80vh; /* Limits height to screen */
    overflow-y: auto; /* Enables scrolling */
    background: #f4f4f4;
    padding: 15px;
    border-radius: 8px;
}

.schedule-link {
    text-decoration: none;
    color: #333;
}

.time-row {
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
    display: flex;
    gap: 10px;
}

/* Layout Wrapper */
.page-container {
    display: grid;
    grid-template-columns: 3fr 1fr; /* 3 parts for grid, 1 part for schedule */
    gap: 20px;
    padding: 20px;
}

/* 12-Item Grid Setup */
.trending-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns across */
    gap: 15px;
}

/* Thumbnail Card Styling */
.show-card {
    position: relative;
    display: block;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
}

.show-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%; /* Gradient goes halfway up */
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
}

.show-title {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: white;
    font-weight: bold;
    z-index: 1;
}

/* Schedule Sidebar */
.schedule-sidebar {
    height: 80vh; /* Limits height to screen */
    overflow-y: auto; /* Enables scrolling */
    background: #f4f4f4;
    padding: 15px;
    border-radius: 8px;
}

.schedule-link {
    text-decoration: none;
    color: #333;
}

.time-row {
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
    display: flex;
    gap: 10px;
}

/* Only affects the thumbnails inside the carousel */
.hero-carousel-thumbs {
    position: absolute;
    bottom: 10px;
    display: flex;
    /* ... rest of your styles */
}

.hero-thumb {
    width: 60px;
    height: 30px;
    /* ... rest of your styles */
}

/* Add .hero-carousel before your selectors */
.hero-carousel .thumbnails {
    position: absolute;
    bottom: 10px;
    display: flex;
    /* This style will now IGNORE any .thumbnails outside the carousel */
}

.hero-carousel .thumb {
    width: 60px;
    height: 30px;
    /* This style will now IGNORE any .thumb outside the carousel */
}

.hero-carousel {
    position: relative; /* THIS IS CRITICAL */
    width: 100%;
    height: 80vh;
    overflow: hidden;
}
.main-layout-wrapper {
    display: flex;
    flex-direction: column; /* Forces everything to stack vertically top-to-bottom */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
.category-block {
    width: 100%; /* Forces the block to take full width */
    margin-bottom: 40px;
    display: block; /* Ensures it acts like a vertical stack */
}
.block-title {
    display: block;
    width: 100%;
    margin-bottom: 20px;
}
.main-layout-wrapper {
    display: grid;
    grid-template-columns: 3fr 1fr; /* 3 parts for content, 1 part for sidebar */
    gap: 40px;
}
.library-grid {
    display: grid;
    /* This creates the horizontal rows */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    width: 100%;
}
.show-card {
    display: flex;
    flex-direction: column;
    /* Do NOT put 'width: 100%' here, the grid handles the width */
    text-decoration: none;
    color: white;
}

.show-card img {
    width: 100%; /* This is fine, as it will fill the grid cell */
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
}
/* Container for the 2-column layout */
.content-wrapper {
    display: grid;
    grid-template-columns: 3fr 1fr; /* 3 parts wide for content, 1 part for sidebar */
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* The Poster Grid (Horizontal Engine) */
.library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}

/* Ensure images don't break the layout */
.show-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

/* Mobile Responsive: Stack them on phones */
@media (max-width: 768px) {
    .content-wrapper {
        grid-template-columns: 1fr; /* Turns columns into a single stack */
    }
}
.trending-section {
    display: grid;
    grid-template-columns: 3fr 1fr; /* 75% width for library, 25% for schedule */
    gap: 30px;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.library-grid {
    display: grid;
    /* This forces items to be side-by-side */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

/* Mobile Responsive: Stack everything on smaller screens */
@media (max-width: 850px) {
    .trending-section {
        grid-template-columns: 1fr;
    }
}
.show-card img {
    width: 100%;
    height: 220px;
    object-fit: cover; /* This prevents stretching/distortion */
    border-radius: 6px;
}

/* Base Resets */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: #0f0f0f; /* Deep dark background */
    color: #f1f1f1;
    line-height: 1.6;
}

/* Header Styling */
.network-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1a1a1a;
    padding: 20px 40px;
    border-bottom: 3px solid #00ffcc; /* Showcase Network Accent Color */
}

.network-header .logo {
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 2px;
}

.network-header nav a {
    color: #fff;
    text-decoration: none;
    margin-left: 20px;
    font-weight: 500;
    transition: color 0.2s ease;
}

.network-header nav a:hover, 
.network-header nav a.active {
    color: #00ffcc;
}

/* Main Layout */
.shows-wrapper {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.shows-header {
    text-align: center;
    margin-bottom: 40px;
}

.shows-header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

/* The Grid System */
.show-grid {
    display: grid;
    /* This creates the horizontal layout that automatically wraps */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

/* Individual Show Cards */
.show-card {
    background-color: #1e1e1e;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none; /* Removes underline from links */
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.show-card:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 8px 15px rgba(0, 255, 204, 0.2);
}

/* Thumbnail Images */
.thumbnail {
    width: 100%;
    /* 16:9 Aspect Ratio container */
    aspect-ratio: 16 / 9; 
    background-color: #333;
    overflow: hidden;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images fill the box without stretching */
    transition: transform 0.3s ease;
}

.show-card:hover .thumbnail img {
    transform: scale(1.05); /* Slight zoom on image when hovering */
}

/* The Horizontal Scrolling Row */
.show-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* Forces all cards into a single horizontal line */
    overflow-x: auto; /* Turns on horizontal scrolling */
    gap: 30px;
    margin-bottom: 50px;
    padding-bottom: 20px; /* Gives the scrollbar some breathing room */
    
    /* Smooth snapping effect when scrolling */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    
    /* Hides the default scrollbar in some browsers for a cleaner look (optional) */
    scrollbar-width: thin; 
    scrollbar-color: #00ffcc #1a1a1a; 
}

/* Individual Show Cards */
.show-card {
    /* The crucial part: flex: 0 0 [width]. This stops the cards from squishing together! */
    flex: 0 0 320px; 
    
    background-color: #1e1e1e;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none; 
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    
    /* Aligns the card to the left edge when the user stops scrolling */
    scroll-snap-align: start; 
}

.show-card:hover {
    transform: translateY(-5px); 
    box-shadow: 0 8px 15px rgba(0, 255, 204, 0.2);
}
/* The Horizontal Scrolling Row */
.show-grid {
    display: flex;
    flex-wrap: nowrap; /* Strictly forbids moving to a new line */
    overflow-x: auto; /* Forces the scrollbar to appear */
    overflow-y: hidden; /* Prevents accidental vertical bouncing */
    gap: 30px;
    padding-bottom: 20px; /* Gives the scrollbar room so it doesn't overlap cards */
    margin-bottom: 50px;
    
    /* Smooth snap scrolling */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* Makes scrolling smooth on mobile */
}

/* Individual Show Cards */
.show-card {
    /* THE FIX: This combination absolutely forces the card to stay 320px wide */
    flex: 0 0 auto; 
    width: 320px;
    min-width: 320px; 
    max-width: 320px;
    
    background-color: #1e1e1e;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none; 
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    
    /* Aligns the card when snapping */
    scroll-snap-align: start; 
}

.show-card:hover {
    transform: translateY(-5px); 
    box-shadow: 0 8px 15px rgba(0, 255, 204, 0.2);
}
/* Base Resets */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: #0f0f0f;
    color: #f1f1f1;
    line-height: 1.6;
    overflow-x: hidden; /* Prevents the whole page from scrolling sideways */
}

/* Header Styling */
.network-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1a1a1a;
    padding: 20px 40px;
    border-bottom: 3px solid #00ffcc;
}

.network-header .logo {
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 2px;
}

.network-header nav a {
    color: #fff;
    text-decoration: none;
    margin-left: 20px;
    font-weight: 500;
    transition: color 0.2s ease;
}

.network-header nav a:hover, 
.network-header nav a.active {
    color: #00ffcc;
}

/* Main Layout */
.shows-wrapper {
    max-width: 1400px; /* Slightly wider to accommodate the slider */
    margin: 40px auto;
    padding: 0 40px;
}

.shows-header {
    text-align: center;
    margin-bottom: 30px;
}

.shows-header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

/* --- THE SLIDER & BUTTONS --- */
.slider-container {
    position: relative;
    display: flex;
    align-items: center;
}

.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: #00ffcc;
    border: 2px solid #00ffcc;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.scroll-btn:hover {
    background-color: #00ffcc;
    color: #000;
    box-shadow: 0 0 15px rgba(0, 255, 204, 0.5);
}

.left-btn { left: -25px; }
.right-btn { right: -25px; }

/* The Horizontal Scrolling Row */
.show-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 30px;
    padding: 20px 0; /* Padding for hover shadows */
    width: 100%;
    
    /* Smooth snap scrolling */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    
    /* Hides default scrollbar for cleaner look */
    scrollbar-width: none; 
}

.show-grid::-webkit-scrollbar {
    display: none; /* Hides scrollbar in Chrome/Safari */
}

/* Individual Show Cards */
.show-card {
    flex: 0 0 auto; 
    width: 320px;
    min-width: 320px; 
    max-width: 320px;
    
    background-color: #1e1e1e;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none; 
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    
    scroll-snap-align: start; 
}

.show-card:hover {
    transform: translateY(-8px); 
    box-shadow: 0 12px 20px rgba(0, 255, 204, 0.15);
}

.thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9; 
    background-color: #333;
    overflow: hidden;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.show-card:hover .thumbnail img {
    transform: scale(1.08);
}

.show-info {
    padding: 20px;
}

.show-info h3 {
    font-size: 1.25rem;
    margin-bottom: 8px;
    color: #00ffcc;
}

.show-info p {
    font-size: 0.9rem;
    color: #aaaaaa;
}
/* =========================================
   ABOUT PAGE STYLES
   ========================================= */

.about-wrapper {
    max-width: 1000px;
    margin: 60px auto;
    padding: 0 40px;
}

/* Hero Section */
.about-hero {
    text-align: center;
    margin-bottom: 60px;
    padding-bottom: 40px;
    border-bottom: 1px solid #333;
}

.about-hero h1 {
    font-size: 3rem;
    color: #00ffcc;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.about-hero p {
    font-size: 1.2rem;
    color: #cccccc;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
}

/* Network Pillars Grid */
.network-pillars {
    display: grid;
    /* Creates an automatic grid that drops to the next row on small screens */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    margin-bottom: 80px;
}

.pillar-card {
    background-color: #1a1a1a;
    padding: 30px;
    border-radius: 8px;
    border-top: 3px solid #00ffcc;
    text-align: center;
    transition: transform 0.3s ease;
}

.pillar-card:hover {
    transform: translateY(-5px);
}

.pillar-card .icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.pillar-card h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: #ffffff;
}

.pillar-card p {
    font-size: 0.95rem;
    color: #aaaaaa;
}

/* Founder / Behind the Scenes Section */
.about-founder {
    background-color: #111;
    padding: 50px;
    border-radius: 8px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.founder-content h2 {
    font-size: 2rem;
    color: #00ffcc;
    margin-bottom: 20px;
}

.founder-content p {
    font-size: 1.05rem;
    color: #bbbbbb;
    margin-bottom: 20px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Contact Button */
.contact-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 30px;
    background-color: transparent;
    color: #00ffcc;
    text-decoration: none;
    border: 2px solid #00ffcc;
    border-radius: 4px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.contact-btn:hover {
    background-color: #00ffcc;
    color: #000;
}
.show-info {
    padding: 20px;
    text-align: center; /* This centers the h3 and the p tags inside */
}
.about-founder {
    background-color: #111;
    padding: 50px;
    border-radius: 8px;
    text-align: center; /* This forces all text inside the box to the middle */
}
.my-box {
    max-width: 800px;
    margin: 0 auto; /* The 'auto' pushes equally from the left and right */
}
/* --- Hero Section Fix --- */
.about-hero {
    text-align: center !important;
    margin-bottom: 60px;
    padding-bottom: 40px;
    border-bottom: 1px solid #333;
    display: flex;
    flex-direction: column;
    align-items: center; /* Forces the box contents to the center */
}

.about-hero p {
    font-size: 1.2rem;
    color: #cccccc;
    max-width: 800px;
    margin: 0 auto !important; /* Centers the paragraph block */
    line-height: 1.8;
    text-align: center !important; /* Forces the text words to the center */
}

/* --- Founder / Behind the Scenes Section Fix --- */
.about-founder {
    background-color: #111;
    padding: 50px;
    border-radius: 8px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center; /* Forces the box contents to the center */
    text-align: center !important;
}

.founder-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.founder-content p {
    font-size: 1.05rem;
    color: #bbbbbb;
    margin-bottom: 20px;
    max-width: 700px;
    margin-left: auto !important; /* Centers the paragraph block */
    margin-right: auto !important; /* Centers the paragraph block */
    text-align: center !important; /* Forces the text words to the center */
}
/* =========================================
   HOME PAGE (INDEX) LAYOUT FIXES
   ========================================= */

.home-wrapper {
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 40px;
}

/* This is the failsafe. It forces every major section on the home page 
   to act as a solid block with 80px of space below it, preventing overlaps. 
*/
.home-section {
    position: relative !important;
    display: block !important;
    width: 100%;
    height: auto !important; /* Prevents content from spilling out of the box */
    margin-bottom: 80px; /* Forces a massive gap between Shows and Schedule */
    clear: both; /* Clears any lingering floating elements */
}

/* Stylish section titles for the home page */
.section-title {
    font-size: 2rem;
    color: #ffffff;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 2px solid #333;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* =========================================
   HOME PAGE: DASHBOARD LAYOUT
   ========================================= */

/* The Side-by-Side Grid Setup */
.dashboard-layout {
    display: grid;
    grid-template-columns: 2.2fr 1fr; /* Left gets 2.2 fractions of space, Right gets 1 */
    gap: 40px;
    align-items: start; /* Prevents the schedule from stretching vertically if the library is taller */
    margin-bottom: 80px;
}

/* Left Side: Trending Library Grid */
.trending-grid {
    display: grid;
    /* Automatically fits as many 220px cards as possible per row */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.trending-card {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    background-color: #1a1a1a;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.trending-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s ease;
}

.trending-card .card-title {
    padding: 12px;
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    border-top: 2px solid #00ffcc;
}

.trending-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 15px rgba(0, 255, 204, 0.2);
}

.trending-card:hover img {
    opacity: 0.8;
}

/* Right Side: Mini Schedule */
.mini-schedule-section {
    background-color: #151515;
    border-radius: 8px;
    border: 1px solid #333;
    padding: 25px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}

.schedule-header {
    border-bottom: 2px solid #00ffcc;
    padding-bottom: 15px;
    margin-bottom: 20px;
    text-align: center;
}

.schedule-header h2 {
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 5px;
}

.network-clock {
    font-family: monospace; /* Gives it a digital broadcast feel */
    font-size: 1.2rem;
    color: #00ffcc;
    letter-spacing: 2px;
}

.schedule-list {
    list-style: none;
    margin-bottom: 25px;
}

.schedule-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px dashed #333;
    font-size: 0.95rem;
}

.schedule-item .time {
    color: #aaaaaa;
    font-weight: bold;
    width: 30%;
}

.schedule-item .show-name {
    color: #ffffff;
    width: 70%;
    text-align: right;
}

/* Schedule Button */
.full-schedule-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px;
    background-color: #222;
    color: #00ffcc;
    text-decoration: none;
    border: 1px solid #00ffcc;
    border-radius: 4px;
    font-weight: bold;
    transition: all 0.2s ease;
}

.full-schedule-btn:hover {
    background-color: #00ffcc;
    color: #000;
}

/* Mobile Responsiveness: Stack them vertically on smaller screens */
@media (max-width: 900px) {
    .dashboard-layout {
        grid-template-columns: 1fr; /* Changes from 2 columns to 1 column */
    }
}
/* =========================================
   SPLIT LAYOUT: TRENDING & MINI SCHEDULE
   ========================================= */

.home-layout-wrapper {
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 30px;
    height: auto !important; /* Strictly forces normal block behavior */
}

/* Base structural layout container */
.split-layout-container {
    display: grid;
    grid-template-columns: 1fr; /* Defaults to single column for mobile phones */
    gap: 40px;
    width: 100%;
    height: auto !important;
}

/* DESKTOP UPGRADE: Splits layout side-by-side when the screen is wide enough */
@media (min-width: 992px) {
    .split-layout-container {
        grid-template-columns: 2fr 1fr; /* Left column takes 2/3, Right column takes 1/3 */
    }
}

.split-section-title {
    font-size: 1.6rem;
    color: #ffffff;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-left: 4px solid #00ffcc; /* Accent line on titles */
    padding-left: 15px;
}

/* --- LEFT COLUMN: TRENDING GALLERY --- */
.trending-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

.trending-card {
    background-color: #161616;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #222;
}

.trending-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0, 255, 204, 0.15);
    border-color: #00ffcc;
}

.mini-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #000;
}

.mini-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.trending-info {
    padding: 15px;
}

.genre-tag {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #00ffcc;
    font-weight: bold;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 5px;
}

.trending-info h3 {
    font-size: 1.1rem;
    color: #ffffff;
}

/* --- RIGHT COLUMN: MINI SCHEDULE --- */
.mini-schedule-box {
    background-color: #111111;
    border: 1px solid #222;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.schedule-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #222;
    transition: background-color 0.2s ease;
}

.schedule-row:last-child {
    border-bottom: none;
}

.time-badge {
    background-color: #1a1a1a;
    color: #aaaaaa;
    font-size: 0.85rem;
    font-weight: bold;
    padding: 20px;
    min-width: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #222;
}

.schedule-details {
    padding: 15px 20px;
    flex-grow: 1;
}

.schedule-details h4 {
    font-size: 1.05rem;
    color: #ffffff;
    margin-bottom: 2px;
}

.schedule-details p {
    font-size: 0.85rem;
    color: #888888;
}

/* Live Styling Variant */
.schedule-row.is-live {
    background-color: #162421; /* Subtle dark teal backdrop */
}

.schedule-row.is-live .time-badge {
    background-color: #00ffcc;
    color: #000000;
}

.schedule-row.is-live h4 {
    color: #00ffcc;
}

/* Neon Pulse Dot for Live Broadcast */
.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: bold;
    color: #00ffcc;
    margin-top: 5px;
    text-transform: uppercase;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: #00ffcc;
    border-radius: 50%;
    box-shadow: 0 0 8px #00ffcc;
    animation: broadcast-pulse 1.5s infinite;
}

@keyframes broadcast-pulse {
    0% { transform: scale(0.9); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.4; }
    100% { transform: scale(0.9); opacity: 1; }
}

/* Full Schedule Bottom Button */
.view-full-schedule-btn {
    display: block;
    text-align: center;
    margin-top: 20px;
    padding: 15px;
    background-color: #1a1a1a;
    color: #00ffcc;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    border: 2px solid #1a1a1a;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.view-full-schedule-btn:hover {
    background-color: transparent;
    border-color: #00ffcc;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.2);
}
/* Centered Main Container */
.show-container {
    max-width: 800px;
    margin: 40px auto; /* This centers the whole block on the page */
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    font-family: Arial, sans-serif;
    color: black; /* <-- Add this line */
}
/* Header & TV Rating Badge */
.show-header {
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 3px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 25px;
}

.show-header h1 {
    margin: 0;
    font-size: 2.5em;
    color: #222;
}

.tv-rating {
    background-color: #000;
    color: #fff;
    padding: 5px 10px;
    font-size: 0.9em;
    font-weight: bold;
    border-radius: 4px;
    letter-spacing: 1px;
}

/* Image and Description Side-by-Side */
.show-info {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
    flex-wrap: wrap; /* Allows it to stack on smaller mobile screens */
}

.image-placeholder img {
    max-width: 100%;
    width: 250px;
    height: auto;
    border-radius: 6px;
    border: 2px solid #ccc;
}

.show-description {
    flex: 1; /* Takes up the remaining space next to the image */
    min-width: 300px;
}

.show-description h2 {
    margin-top: 0;
}

/* Episode Guide List */
.episode-guide h2 {
    border-bottom: 3px solid #eee;
    padding-bottom: 10px;
}

.episode-list {
    list-style: none; /* Removes the bullet points */
    padding: 0;
}

.episode-list li {
    display: flex;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid #ddd;
}

.ep-number {
    font-weight: bold;
    color: #d32f2f; /* A nice network red */
    min-width: 75px;
}

.ep-details h3 {
    margin: 0 0 5px 0;
    font-size: 1.2em;
}

.ep-details p {
    margin: 0;
    color: #555;
    line-height: 1.4;
}
/* Contact Page Container */
.contact-container {
    max-width: 900px;
    margin: 40px auto; 
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    font-family: Arial, sans-serif;
    color: black;
}

/* Header Styling */
.contact-header {
    text-align: center;
    border-bottom: 3px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.contact-header h1 {
    font-size: 2.5em;
    margin: 0 0 10px 0;
    color: #222;
}

.contact-header p {
    color: #555;
    font-size: 1.1em;
    margin: 0;
}

/* Grid Layout for Desktop & Mobile */
.contact-grid {
    display: flex;
    gap: 40px;
    flex-wrap: wrap; /* Crucial for making it stack on small screens */
}

.contact-form-section {
    flex: 2; /* Takes up 2/3 of the space */
    min-width: 300px;
}

.contact-info-section {
    flex: 1; /* Takes up 1/3 of the space */
    min-width: 250px;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 6px;
    border: 1px solid #ddd;
}

/* Form Inputs and Labels */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}

.form-group input, 
.form-group select, 
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1em;
    box-sizing: border-box; /* Prevents input boxes from breaking past 100% width */
}

/* Gives a nice red glow when typing */
.form-group input:focus, 
.form-group select:focus, 
.form-group textarea:focus {
    border-color: #d32f2f; 
    outline: none;
    box-shadow: 0 0 5px rgba(211, 47, 47, 0.3);
}

/* The Submit Button */
.submit-btn {
    background-color: #d32f2f;
    color: white;
    border: none;
    padding: 15px 25px;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.2s;
}

.submit-btn:hover {
    background-color: #b71c1c;
}

/* Sidebar Links & Warning Box */
.info-list {
    list-style: none;
    padding: 0;
    line-height: 1.8;
}

.info-list a {
    color: #d32f2f;
    text-decoration: none;
    font-weight: bold;
}

.info-list a:hover {
    text-decoration: underline;
}

.warning-box {
    margin-top: 30px;
    padding: 15px;
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
    font-size: 0.9em;
    color: #856404;
}
/* Container for the scrollable area */
.schedule-container {
    height: 500px; /* Adjust this to make the box taller or shorter */
    overflow-y: auto; /* This creates the scrollbar */
    border: 2px solid #333;
    background: #fff;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    border-radius: 8px;
}

/* The Grid Setup */
.schedule-grid {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    border-bottom: 1px solid #eee;
    padding: 15px;
}

.time {
    font-weight: bold;
    width: 100px; /* Keeps the times perfectly aligned */
    color: #d32f2f;
    flex-shrink: 0;
}

.show {
    flex-grow: 1;
}

.show a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

.show a:hover {
    text-decoration: underline;
    color: #d32f2f;
}

/* Customizing the Scrollbar (Optional) */
.schedule-container::-webkit-scrollbar {
    width: 10px;
}
.schedule-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.schedule-container::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 5px;
}
.day-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.tab-link {
    background-color: #eee;
    color: #333;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px 8px 0 0; /* Rounded top corners */
    border: 1px solid #ccc;
    transition: background-color 0.3s;
}

.tab-link:hover {
    background-color: #d32f2f;
    color: white;
}

/* Style for the 'current' day page */
.tab-link.active {
    background-color: #333;
    color: white;
    border-bottom: none;
}
.day-tabs {
    display: flex;
    justify-content: center;
    gap: 5px; /* Slightly reduced gap */
    margin-top: 20px;
    flex-wrap: wrap; /* Allows tabs to wrap on smaller screens */
}

.tab-link {
    background-color: #eee;
    color: #333;
    padding: 10px 12px; /* Slightly reduced horizontal padding */
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px 8px 0 0;
    border: 1px solid #ccc;
    font-size: 0.9em; /* Slightly smaller text to fit all 7 tabs */
    transition: background-color 0.3s;
}
.watch-container {
    max-width: 900px;
    margin: 40px auto;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    color: black; /* This forces all text to black */
}

/* Search Box Styling */
.finder-box {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 30px;
    background: #f4f4f4;
    padding: 20px;
    border-radius: 8px;
}

.search-group input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.search-group button {
    padding: 10px 20px;
    background: #d32f2f;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Map Placeholder */
.map-section {
    text-align: center;
    margin-bottom: 40px;
}

.map-section img {
    max-width: 100%;
    border: 2px solid #333;
}

/* State Grid */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 10px;
}

.state-column {
    display: flex;
    flex-direction: column;
}

.state-column a {
    text-decoration: none;
    color: #333;
    padding: 5px 0;
}

.state-column a:hover {
    color: #d32f2f;
    text-decoration: underline;
}

.state-column h3 {
    margin: 20px 0 10px 0;
    border-bottom: 2px solid #d32f2f;
}
.shows-container {
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
}

.shows-grid {
    display: grid;
    /* This line creates the horizontal layout: 
       It fills the row with columns at least 200px wide, 
       then wraps automatically! */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 30px; /* Space between the show cards */
}

.show-card {
    text-align: center;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    transition: transform 0.2s; /* Adds a little "pop" effect */
}

.show-card:hover {
    transform: scale(1.05); /* Slightly grows when you hover over it */
}

.show-card a {
    text-decoration: none;
    color: black;
}

.show-card img {
    width: 100%; /* Ensures the image fills the width of the card */
    height: auto;
    border-radius: 4px;
    display: block; /* Removes weird gaps under images */
}

.show-card h3 {
    margin-top: 15px;
    font-size: 1.1em;
}
/* Pagination Wrapper */
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
    padding: 20px;
}

/* Pagination Links */
.pagination a {
    padding: 10px 18px;
    background-color: #f1f1f1;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    border: 1px solid #ddd;
    transition: 0.3s;
}

/* Hover Effect */
.pagination a:hover {
    background-color: #d32f2f;
    color: white;
    border-color: #d32f2f;
}

/* The "Active" Page Indicator */
.pagination a.active {
    background-color: #333;
    color: white;
    border-color: #333;
}
/* Main Layout Grid */
.hero-layout {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 15px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Hero Section */
.hero-banner {
    position: relative;
    height: 400px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
}

.hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px 20px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: white;
}

/* Sidebar Thumbnails */
.sidebar-thumbnails { display: flex; flex-direction: column; gap: 5px; }

.thumb-container {
    height: 350px;
    overflow-y: hidden; /* JavaScript will handle scroll */
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}

.thumb-container img { width: 100%; border-radius: 4px; cursor: pointer; }

.arrow { padding: 10px; cursor: pointer; border: none; background: #eee; }

/* Trending Grid */
.trending-movies { padding: 20px; max-width: 1200px; margin: 0 auto; }
.movie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
}
/* Ensure the parent container is relative */
.hero-layout {
    position: relative; /* Allows the title to be positioned relative to this block */
    margin-top: 60px;   /* Add space to push the grid down if the title is floating */
}
/* The container that controls the width for everything */
.page-wrapper {
    max-width: 1200px; /* Adjust this to your preferred width */
    margin: 0 auto;    /* Centers the entire page content */
    padding: 20px;
}

header {
    text-align: center; /* Aligns title to the left edge */
    margin-bottom: 20px;
}

header h1 {
    font-size: 4rem;
    color: #fff;
}

/* Ensure hero-layout no longer has extra padding */
.hero-layout {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 15px;
    /* Remove padding/margin here since the wrapper handles it */
}
.white-text {
    color: #fff;
}
.center-text {
    text-align: center;
}
.intro-box {
    /* 1. Sizing the box */
    max-width: 800px;  /* Keeps the text from stretching too wide, making it easier to read */
    
    /* 2. Centering the box */
    margin: 40px auto; /* 40px space on top/bottom, 'auto' centers it left/right */
    
    /* 3. Styling the box */
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.05); /* Optional: A very faint white background to make it look like a distinct "box" */
    border-radius: 8px; /* Smooth corners */
    
    /* 4. Styling the text inside */
    color: #fff;        /* Makes the text white */
    text-align: center; /* Centers the actual words inside the box */
    line-height: 1.6;   /* Gives the text room to breathe */
}
.schedule-wrapper {
  width: 100%; /* Keeps the container within the screen bounds */
  overflow-x: auto; /* Allows horizontal scrolling */
  overflow-y: hidden; /* Hides vertical scrollbar if not needed */
  -webkit-overflow-scrolling: touch; /* Enables smooth touch scrolling */
  
  /* Optional: Adds a subtle visual cue that there's more content */
  padding-bottom: 10px; 
}

/* Make sure your actual schedule is wide enough to trigger the scroll */
.schedule-content {
  min-width: 600px; /* Adjust this number based on how wide your schedule actually is */
}
/* Hide the mobile menu by default */
.menu-container {
  display: none; 
  /* Add your styling here: background color, position: absolute, etc. */
}

/* The special class JavaScript will add to make it visible */
.menu-container.show-menu {
  display: block; 
}

/* Make sure the hamburger looks clickable */
.hamburger-btn {
  cursor: pointer;
  font-size: 28px; /* Make it big enough for thumbs! */
  background: none;
  border: none;
}