/* CataloguePage (Filmes/Séries/Infantil) — layout compartilhado.
   Hero é IDÊNTICO ao Home (via .hv-hero* classes definidas em home.css).
   Zero override — o skeleton unificado do Hero.render garante consistência
   visual entre home/movies/series/kids. Só aqui: layout flex do container
   pra rails scrollarem sob o hero fixo. */

.ct-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    color: #fff;
    background: transparent;
}
/* Hero-slot não encolhe quando rails crescem */
[id^="ct-hero-slot-"] {
    flex-shrink: 0;
}

/* Rails scrollable — degradê da imagem (transparente topo) → preto sólido.
   Backdrop fixed cobre 100vh atrás; esta camada escurece gradual. */
.ct-rails-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 140px;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background-image: linear-gradient(0deg,
        #000 0%,
        #000 60%,
        rgba(0,0,0,0.85) 80%,
        rgba(0,0,0,0.5) 95%,
        rgba(0,0,0,0.15) 100%);
    position: relative;
    z-index: 2;
}
.ct-rails-scroll::-webkit-scrollbar { display: none; }

.ct-empty {
    color: rgba(255, 255, 255, 0.55);
    padding: 40px;
    text-align: center;
    font-style: italic;
}