/* ==========================================================
   Space Gate Nova — minimal compatibility fix
   Keeps the OLD catalog appearance from css/nova-catalog.css.
   This file intentionally avoids overriding CatalogBrowser / filters / chips.
   ========================================================== */
:root {
    --sgn-safe-top: var(--safe-top, 0px);
    --sgn-safe-bottom: var(--safe-bottom, 0px);
    --sgn-purple: #9B4DFF;
    --sgn-blue: #14D7FF;
    --sgn-page-pad: clamp(14px, 4vw, 28px);
}
html, body, #app { background:#000 !important; }
body { color:#fff !important; }

/* Keep poster cards protected without changing the old catalog design. */
.media-poster-art,
.poster-shell,
.movie-poster-shell {
    overflow: hidden !important;
}
.media-poster-art img,
.poster-shell img,
.movie-poster-shell img,
.media-poster-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Details: SafeImage child component sizing only. */
.details-app,
.details-page-shell,
.nova-media-details {
    background: #000 !important;
    color: #fff !important;
    overflow-x: hidden !important;
}
.details-app .nova-hero-solid {
    position: relative !important;
    min-height: min(76dvh, 720px) !important;
    width: 100% !important;
    display: flex !important;
    align-items: flex-end !important;
    overflow: hidden !important;
    background: #000 !important;
    padding: 0 !important;
}
.details-app .nova-bg-layer.nova-fast-image,
.details-app .nova-bg-layer {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center top !important;
    filter: brightness(.68) contrast(1.08) saturate(1.08) !important;
}
.details-app .nova-vignette-solid {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background:
        linear-gradient(to top, #000 0%, rgba(0,0,0,.92) 19%, rgba(0,0,0,.60) 48%, rgba(0,0,0,.12) 100%),
        radial-gradient(circle at 50% 100%, rgba(155,77,255,.19), transparent 44%) !important;
}
.details-app .nova-details-topbar {
    position: absolute !important;
    top: calc(var(--sgn-safe-top) + 16px) !important;
    left: 18px !important;
    right: 18px !important;
    z-index: 6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.details-app .nova-icon-btn {
    width: 48px !important;
    height: 48px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    background: rgba(0,0,0,.46) !important;
    color: #fff !important;
    backdrop-filter: blur(12px) !important;
}
.details-app .nova-topbar-actions { display:flex !important; gap:12px !important; }
.details-app .nova-container { width:100% !important; max-width: 1180px !important; margin:0 auto !important; position:relative !important; z-index:2 !important; }
.details-app .nova-hero-content {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: clamp(18px, 4vw, 34px) !important;
    padding: calc(var(--sgn-safe-top) + 88px) var(--sgn-page-pad) 34px !important;
}
.details-app .nova-poster-main.nova-fast-image,
.details-app .nova-poster-main {
    width: clamp(145px, 18vw, 240px) !important;
    height: auto !important;
    max-width: 30vw !important;
    aspect-ratio: 2 / 3 !important;
    object-fit: cover !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 28px 74px rgba(0,0,0,.72) !important;
    flex: 0 0 auto !important;
    display: block !important;
}
.details-app .nova-info-stack { flex:1 1 auto !important; min-width:0 !important; padding:0 !important; }
.details-app .nova-title-main {
    margin: 0 0 14px !important;
    color:#fff !important;
    font-size: clamp(2rem, 6vw, 4.4rem) !important;
    line-height:1.05 !important;
    font-weight:950 !important;
    text-shadow:0 16px 42px rgba(0,0,0,.78) !important;
}
.details-app .nova-meta-row,
.details-app .nova-tags-row,
.details-app .nova-stats-row { display:flex !important; flex-wrap:wrap !important; gap:12px 16px !important; align-items:center !important; color:rgba(255,255,255,.72) !important; }
.details-app .nova-plot-main { max-width: 720px !important; margin: 16px 0 22px !important; color:rgba(255,255,255,.72) !important; line-height:1.9 !important; }
.details-app .nova-action-row { display:flex !important; gap:12px !important; }
.details-app .nova-btn-primary {
    min-height: 54px !important;
    padding: 0 28px !important;
    border:0 !important;
    border-radius: 14px !important;
    background: linear-gradient(100deg, var(--sgn-purple), var(--sgn-blue)) !important;
    color:#fff !important;
    font-weight:950 !important;
    box-shadow: 0 18px 44px rgba(68,91,255,.28) !important;
}
.details-app .nova-content-flow {
    padding: 28px var(--sgn-page-pad) calc(var(--bottom-nav-h,78px) + var(--sgn-safe-bottom) + 24px) !important;
    display:flex !important;
    flex-direction:column !important;
    gap:30px !important;
}
.details-app .nova-story-box { border:1px solid rgba(255,255,255,.06) !important; border-radius:20px !important; background:rgba(255,255,255,.035) !important; padding:20px !important; }
.details-app .nova-story-box p { color:rgba(255,255,255,.68) !important; line-height:1.9 !important; }
@media (max-width: 760px) {
    .details-app .nova-hero-solid { min-height: 72dvh !important; }
    .details-app .nova-hero-content {
        min-height: 72dvh !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: center !important;
        text-align: center !important;
        gap: 10px !important;
        padding: calc(var(--sgn-safe-top) + 78px) 20px 28px !important;
    }
    .details-app .nova-poster-main.nova-fast-image,
    .details-app .nova-poster-main {
        width: min(34vw, 134px) !important;
        max-width: 134px !important;
        border-radius: 18px !important;
    }
    .details-app .nova-title-main { font-size: clamp(1.9rem, 8.5vw, 2.8rem) !important; margin-bottom:10px !important; }
}