/*
 * Theme fix overrides
 *
 * This stylesheet contains small UI adjustments and additional styles that
 * are not part of the main app.css bundle. It is loaded after app.css so
 * selectors here will override defaults as needed. Keeping these fixes in
 * their own file avoids modifying the generated app.css directly.
 */

/* Tabs component */
.tab-container { margin-top: 24px; }
.tab-header {
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.tab-header .tab-btn {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.tab-header .tab-btn:hover {
  color: var(--primary);
}
.tab-header .tab-btn.active {
  color: var(--primary);
  border-color: var(--primary);
}
.tab-pane {
  display: none;
  padding-top: 6px;
}
.tab-pane.active {
  display: block;
}

/* Cast list styling */
.cast-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.cast-list li {
  margin-bottom: 6px;
  font-size: 16px;
  color: #d4d4d4;
}

/* Reviews styling */
.review {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.review-header {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}
.review-rating {
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--secondary);
}
.review-content {
  font-size: 16px;
  line-height: 1.5;
  color: #d4d4d4;
  white-space: pre-wrap;
}

/* Adjust poster card spacing in carousels within tabs */
.tab-pane .cards-row {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 10px;
}

/* Detail hero and trailer enhancements */
.detail-hero {
  position: relative;
  background-size: cover;
  background-position: center;
}
.detail-overlay {
  background: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.85));
  padding: 60px 0;
}
.hero-flex {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.hero-poster img {
  width: 280px;
  border-radius: 12px;
  object-fit: cover;
}
.hero-info {
  max-width: 640px;
}
.hero-title {
  font-size: 42px;
  font-weight: 900;
  margin: 0 0 12px;
}
.hero-year {
  color: var(--muted);
  font-size: 26px;
  font-weight: 400;
}
.hero-chips {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.chip {
  display: inline-block;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.hero-overview {
  font-size: 18px;
  line-height: 1.5;
  color: #d4d4d4;
  margin-bottom: 18px;
}
.trailer-btn {
  display: inline-block;
  margin-top: 10px;
}

/* Trailer section */
.trailer-section {
  margin-top: 30px;
}
.trailer-section h2 {
  font-size: 28px;
  margin-bottom: 12px;
}
.iframe-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 12px;
}
.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Custom alignment tweaks added by production patch */
/* Remove extra margin above the hero slider so that the page content aligns closer to the header */
.hero-slider {
  margin-top: 0;
}
/* Ensure cards rows align items to the left when there are fewer than the default number of columns */
.cards-row {
  justify-content: flex-start;
}

/* Ensure the hero slider displays its background images via an img tag.  The
   .hero-bg image covers the entire slide and falls back to a local placeholder
   if the remote image fails to load. */
.hero-slide {
  position: relative;
  /* Hide all slides by default.  The slider JS will set display:block on
     the active slide.  Without this rule, all slides would stack on the
     page before the JS initialises, leading to the first slide hiding
     subsequent ones or causing black areas. */
  display: none;
}
.hero-slide .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-slide .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero-slide .hero-content {
  position: relative;
  z-index: 2;
}

/* The active hero slide should be displayed.  The slider JS toggles this
   class but the rule is provided here for graceful degradation if JS
   fails to run. */
.hero-slide.active {
  display: block;
}

/* Align containers to match the header's wrap width and padding.  This helps
   eliminate large empty spaces on the homepage and browse pages. */
/* Align the site with a consistent container size used throughout other pages.
   This matches the default `.wrap` class width (1200px) so the homepage
   header, content and footer align with lists and detail pages. */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Prevent any element (such as the hero slider) from causing horizontal
   scrolling.  This hides the overflow and ensures that the layout does
   not produce a right-hand blank space on small screens or when images
   extend outside the viewport. */
html, body {
  overflow-x: hidden;
}

/* Force the hero slider and its track to use 100% of the available width
   rather than 100vw.  This avoids adding an extra scrollbar caused by
   the difference between viewport width and document width with scrollbars. */
/* Ensure the hero slider itself hides any overflow (e.g. scrollbars), but
   allow the track to naturally expand based on the number of slides so
   horizontal translation works correctly.  Do not set an explicit width on
   the track because it must exceed the viewport width when multiple slides
   exist. */
.hero-slider {
  width: 100%;
  overflow: hidden;
}
.hero-track {
  overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Homepage layout adjustments
 *
 * These rules refine the sizing and spacing of the hero slider and ensure
 * the page content starts closer to the top of the viewport.  Without these
 * overrides the hero section can reserve too much vertical space, pushing
 * movie grids far down the page.  Heights are chosen to provide a good
 * balance between imagery and content on both desktop and mobile devices.
 */

/* Reduce extra top margin on the hero slider (already set above) and set a
   reasonable fixed height for desktop.  The min-height and height are both
   specified so that if the background images fail to load the container
   still occupies consistent space. */
@media (min-width: 768px) {
  /* Use a consistent hero height on desktop and remove unnecessary top margin */
  .hero-slider { margin-top: 0; }
  .hero-slide {
    min-height: 450px;
    height: 450px;
  }
}

/* On smaller screens, scale down the hero slider height further to keep the
   page compact and eliminate large gaps. */
@media (max-width: 767px) {
  .hero-slider { margin-top: 0; }
  .hero-slide {
    min-height: 280px;
    height: 280px;
  }
}

/* Ensure that the hero image fills its slide completely and that the
   fallback placeholder image is visible.  This also prevents non-active
   slides from rendering at zero height, which would cause black areas. */
.hero-slide .hero-bg {
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 1;
}

/* Trim down the space below the hero slider so that the next section
   appears immediately below it without an oversized gap. */
.hero-slider + .section-head {
  margin-top: 24px;
}