/* Minor spacing and theme tweaks */
body { transition: background-color .2s ease, color .2s ease; }
.navbar { backdrop-filter: saturate(180%) blur(4px); }
.table-hover tbody tr:hover { cursor: pointer; }

/* Poster thumbnail in table */
.poster-cell { width: 64px; }
.poster-thumb {
  width: 44px;
  height: 66px;
  object-fit: cover;
  border-radius: .25rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

/* --- Grid view for homepage --- */
.movie-grid {
  display: grid;
  /* Increase base card size further */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.movie-card {
  /* Ensure the card background is the requested solid color across full height */
  background: #252b38;
  border: 1px solid rgba(108,117,125,.24);
  border-radius: .6rem;
  overflow: hidden;
  /* Layered, subtle elevation */
  box-shadow:
    0 0.4px 0.8px rgba(0,0,0,.06),
    0 2px 6px rgba(0,0,0,.06);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.movie-card:hover, .movie-card:focus {
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px rgba(0,0,0,.08),
    0 8px 20px rgba(0,0,0,.14);
  border-color: rgba(108,117,125,.35);
  outline: none;
}
.poster-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  background: rgba(0,0,0,.04);
  overflow: hidden; /* ensure any overflow is clipped to the poster frame */
}
.poster-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block; /* avoid baseline gaps for replaced elements */
  object-fit: cover;
  /* Keep the composition anchored near the top so banners/headers aren’t cropped */
  object-position: center top;
}
/* Background-based poster fill (used for placeholder to avoid SVG intrinsic sizing quirks) */
.poster-bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  /* With normalized 2:3 SVG, cover gives full-bleed without distortion */
  background-size: cover;
  /* Anchor to top to avoid cropping the top banner area of the v3 placeholder */
  background-position: center 7.333%;
}
/* Overlay label to write HORROR on v3 placeholder banner */
.poster-overlay-horror {
  position: absolute;
  /* Align vertically with the red banner on the v3 artwork */
  top: 7.333%;
  left: 0;
  right: 0;
  /* Center on the banner's vertical centerline */
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  /* Responsive font sizing based on poster width */
  font-size: clamp(11px, 2.2vw, 20px);
  line-height: 1;
  /* Slight stroke via layered shadows to improve legibility on red */
  text-shadow:
    0 0 1px rgba(0,0,0,.45),
    0 1px 2px rgba(0,0,0,.35),
    0 0 0.5px rgba(0,0,0,.45);
  pointer-events: none; /* don’t block clicks to open modal */
  z-index: 2;
}
.movie-card .title {
  line-height: 1.25;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* allow up to two lines for longer titles */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.movie-card .badges .badge { font-weight: 600; }
/* Subtle meta band behind badges for readability */
.movie-card .card-body {
  /* Keep card-body transparent so the card’s own background shows through edge-to-edge */
  background: transparent;
  border-top: 1px solid rgba(108,117,125,.18);
}
/* Genres badge: smaller, wrap and clamp to avoid overflow */
.movie-card .badge-genres {
  font-weight: 500;
  /* Shrink genre badge text */
  font-size: .6rem;
  white-space: normal;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* show up to ~3-4 short genres over two lines */
  -webkit-box-orient: vertical;
}

/* Studios badge: compact, 1-line clamp with ellipsis */
.movie-card .badge-studios {
  font-weight: 500;
  font-size: .6rem;
  /* Single-line, no wrap — ellipsis when overflow */
  white-space: nowrap;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
}

/* High-end focus ring for keyboard users */
.movie-card:focus-visible {
  box-shadow:
    0 0 0 2px rgba(255,255,255,.6),
    0 0 0 4px rgba(99,102,241,.45),
    0 1px 2px rgba(0,0,0,.08),
    0 8px 20px rgba(0,0,0,.14);
}

@media (max-width: 575.98px) {
  /* Keep cards comfortably large on mobile */
  .movie-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* Remove hard 10-column override to avoid overflow inside fixed containers */

.modal-header {
  background-size: cover;
  background-position: center center;
  transition: background-image .3s ease-in-out;
}

/* Meta banner styling in modal */
.meta-banner {
  background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(16,185,129,.12));
  border: 1px solid rgba(108,117,125,.25);
  border-radius: .5rem;
  padding: .5rem .5rem 0 .5rem;
}
.meta-banner .badge {
  font-weight: 600;
}

/* Scrollable crew box */
.crew-box {
  max-height: 160px;
  overflow: auto;
  white-space: pre-wrap;
}
.sortable-headers th[data-sort] {
  white-space: nowrap;
}


@media (prefers-color-scheme: dark) {
  :root[data-bs-theme="dark"] .meta-banner {
    background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(16,185,129,.10));
    border-color: rgba(255,255,255,.12);
  }
  .movie-card {
    background: #252b38; /* same color in dark theme to fully cover card */
  }
  .movie-card .card-body { border-top-color: rgba(255,255,255,.12); }
}