/**
 * Hot Movie Pass — Smart TV / old WebKit browser fallbacks (homepage + catalog).
 * Scoped to html.hmp-tv-browser (set by inline boot snippet in index.html).
 * Live-TV uses live-tv-module.css and is unaffected.
 */
html.hmp-tv-browser,
html.hmp-tv-browser body {
  background-color: #050505 !important;
  background-image: linear-gradient(180deg, #050505 0%, #0a0a0a 40%, #080808 100%) !important;
  color: #f0f0f0 !important;
  min-height: 100vh;
}

html.hmp-tv-browser #root {
  min-height: 100vh;
  background-color: #050505;
  color: #f0f0f0;
}

/* Re-declare cinema palette if Tailwind @layer theme failed to parse */
html.hmp-tv-browser {
  --color-cinema-black: #050505;
  --color-cinema-void: #0a0a0a;
  --color-cinema-surface: #121212;
  --color-cinema-elevated: #1a1a1a;
  --color-cinema-border: #2a2a2a;
  --color-cinema-muted: #8a8a8a;
  --color-cinema-text: #f0f0f0;
  --color-cinema-dim: #b8b8b8;
  --color-brand-orange: #ff8a00;
  --color-brand-red: #e50914;
  --color-white: #ffffff;
  --color-black: #000000;
  --spacing: 0.25rem;
  --hmp-home-gutter: 2.5rem;
  --hmp-home-max: 1400px;
  --font-sans: "Source Sans 3", "Segoe UI", sans-serif;
  --font-display: "Bebas Neue", Impact, sans-serif;
}

html.hmp-tv-browser body,
html.hmp-tv-browser #root,
html.hmp-tv-browser #root * {
  font-family: var(--font-sans);
}

/* overflow-x: clip is unsupported on many TV WebKit builds */
html.hmp-tv-browser #root > .flex.min-h-screen.flex-col,
html.hmp-tv-browser #root main.flex-1 {
  overflow-x: hidden;
  max-width: 100%;
}

html.hmp-tv-browser .min-h-screen {
  min-height: 100vh;
}

/* Center homepage/catalog shell on 1920px TVs */
html.hmp-tv-browser #root main.flex-1 > .hmp-recs,
html.hmp-tv-browser #root main .relative.z-10[class*="space-y-1"],
html.hmp-tv-browser #root main .hmp-adv-rail,
html.hmp-tv-browser #root main .hmp-recs,
html.hmp-tv-browser #root main .hmp-fest,
html.hmp-tv-browser #root main .hmp-sub-cta__inner {
  max-width: 1400px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

html.hmp-tv-browser #root main .relative.z-10[class*="space-y-1"] > [class*="px-4"],
html.hmp-tv-browser #root main.flex-1 .overflow-x-auto.scroll-smooth,
html.hmp-tv-browser #root main .hero-billboard > .relative.mx-auto,
html.hmp-tv-browser #root main .hmp-adv-rail__head,
html.hmp-tv-browser #root main .hmp-adv-rail__scroller {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

/* Hero: keep billboard readable on 16:9 without blowing past viewport */
html.hmp-tv-browser .hero-billboard {
  max-height: 62vh;
  overflow: hidden;
}

html.hmp-tv-browser .hero-billboard .relative.mx-auto {
  max-width: 80rem;
}

/* Horizontal poster rails */
html.hmp-tv-browser .overflow-x-auto.scroll-smooth {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Header/footer chrome */
html.hmp-tv-browser header,
html.hmp-tv-browser footer {
  background-color: #050505;
}

html.hmp-tv-browser header {
  border-bottom: 1px solid #2a2a2a;
}

/* Flex column shell if Tailwind utilities partially fail */
html.hmp-tv-browser #root > .flex.min-h-screen.flex-col {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
}

html.hmp-tv-browser #root main.flex-1 {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 100%;
}

/* Poster cards: explicit width so rails don't collapse on old flex */
html.hmp-tv-browser .overflow-x-auto.scroll-smooth > * {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

@media (min-width: 1280px) and (hover: none) {
  html.hmp-tv-browser {
    --hmp-home-gutter: 3rem;
  }
}