/**
 * Hot Movie Pass — homepage / catalog side gutters (“Rand”)
 * Additive overrides only. Hero billboard stays full-bleed; content/rails inset.
 */
:root {
  /* Static fallbacks for old WebKit (Smart TV) before clamp() is applied */
  --hmp-home-gutter: 2.5rem;
  --hmp-home-max: 1400px;
}

@supports (width: clamp(1rem, 2vw, 2rem)) {
  :root {
    --hmp-home-gutter: clamp(1rem, 3.5vw, 2.75rem);
  }
}

/* Avoid horizontal page scroll from rail overflow */
#root > .flex.min-h-screen.flex-col,
#root main.flex-1 {
  overflow-x: hidden; /* fallback for TVs without overflow-x: clip */
  overflow-x: clip;
  max-width: 100vw;
}

/* Catalog rails block: match header shell max-width so wide screens show clear side margin.
   Live DOM nests rails under main > div (not always a direct .relative.z-10 child). */
#root main.flex-1 > .hmp-recs,
#root main .relative.z-10[class*="space-y-1"] {
  width: 100%;
  max-width: var(--hmp-home-max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Rail titles (px-4 / sm:px-8 in SPA) */
#root main .relative.z-10[class*="space-y-1"] > [class*="px-4"] {
  padding-left: var(--hmp-home-gutter) !important;
  padding-right: var(--hmp-home-gutter) !important;
  padding-inline: var(--hmp-home-gutter) !important;
}

/* Horizontal poster rails */
#root main.flex-1 .overflow-x-auto.scroll-smooth {
  padding-left: var(--hmp-home-gutter) !important;
  padding-right: var(--hmp-home-gutter) !important;
  padding-inline: var(--hmp-home-gutter) !important;
  scroll-padding-left: var(--hmp-home-gutter);
  scroll-padding-right: var(--hmp-home-gutter);
  scroll-padding-inline: var(--hmp-home-gutter);
}

/* Hero copy stays inset; billboard background remains edge-to-edge */
#root main .hero-billboard > .relative.mx-auto {
  padding-left: var(--hmp-home-gutter) !important;
  padding-right: var(--hmp-home-gutter) !important;
  padding-inline: var(--hmp-home-gutter) !important;
  max-width: min(80rem, var(--hmp-home-max));
  box-sizing: border-box;
}

/* Advanced rails injected on home */
#root main .hmp-adv-rail {
  max-width: var(--hmp-home-max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

#root main .hmp-adv-rail__head,
#root main .hmp-adv-rail__scroller {
  padding-left: var(--hmp-home-gutter) !important;
  padding-right: var(--hmp-home-gutter) !important;
  padding-inline: var(--hmp-home-gutter) !important;
}

/* Festival row (if still present) */
#root main .hmp-fest {
  max-width: var(--hmp-home-max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding-left: var(--hmp-home-gutter);
  padding-right: var(--hmp-home-gutter);
  padding-inline: var(--hmp-home-gutter);
}

#root main .hmp-fest__sub {
  padding-left: 0;
  padding-right: 0;
  padding-inline: 0;
}

/* Subscribe strips: full-bleed chrome OK; inner content aligned to shell */
#root main .hmp-sub-cta__inner {
  max-width: var(--hmp-home-max);
  padding-left: var(--hmp-home-gutter);
  padding-right: var(--hmp-home-gutter);
  padding-inline: var(--hmp-home-gutter);
  box-sizing: border-box;
}

/* Recs rails if mounted on home */
#root main .hmp-recs,
#root main [class*="hmp-recs"] {
  max-width: var(--hmp-home-max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  :root {
    --hmp-home-gutter: 1rem;
  }
  @supports (width: clamp(1rem, 2vw, 2rem)) {
    :root {
      --hmp-home-gutter: clamp(0.85rem, 4.2vw, 1.25rem);
    }
  }
}