/* =====================================================================
   Space Gate Nova+ — Home Experience V2
   Cinematic hierarchy inspired by premium streaming editorial layouts.
   Brand rule remains strict: gradients belong to actions/search/active UI;
   media artwork stays graphite/black with neutral borders only.
   ===================================================================== */

:root {
    --nova-home-section-gap: clamp(26px, 5vw, 44px);
    --nova-home-heading-x: max(16px, var(--safe-right, 0px));
    --nova-home-card-shadow: 0 16px 34px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.025);
}

/* 1) HERO — the first frame owns the screen, but leaves a hint of the feed. */
.target-home-hero-shell {
    margin: 0 0 8px !important;
    background: #000 !important;
}

.target-hero-slide {
    height: clamp(560px, 72dvh, 790px) !important;
    min-height: 560px !important;
}

.target-hero-slide::after {
    background:
        radial-gradient(ellipse 76% 34% at 50% 87%, rgba(0,0,0,.30), transparent 70%),
        linear-gradient(180deg, rgba(0,0,0,.07) 0%, rgba(0,0,0,0) 31%, rgba(0,0,0,.08) 48%, rgba(0,0,0,.50) 71%, rgba(0,0,0,.91) 91%, #000 100%) !important;
}

.target-hero-copy {
    bottom: clamp(70px, 9dvh, 102px) !important;
}

.target-hero-text h1 {
    font-size: clamp(1.7rem, 6vw, 3.4rem) !important;
    line-height: 1.02 !important;
}

.target-hero-text p {
    max-width: 540px;
    margin-inline: auto !important;
    color: rgba(255,255,255,.72) !important;
}

/* 2) HOME RHYTHM — strong groups with breathing room instead of a wall of rails. */
.target-home .shahid-home-section {
    padding-block: 12px var(--nova-home-section-gap) !important;
    background: #000 !important;
}

.target-home .shahid-home-section + .shahid-home-section {
    padding-top: 0 !important;
}

.target-home .shahid-section-heading {
    min-height: 48px !important;
    padding-inline: max(16px, var(--safe-right, 0px)) max(16px, var(--safe-left, 0px)) !important;
    margin-bottom: 10px !important;
}

.target-home .shahid-section-heading h2 {
    padding-inline-start: 0 !important;
    color: #fff !important;
    font-size: clamp(1.02rem, 4vw, 1.36rem) !important;
    line-height: 1.12 !important;
    font-weight: 950 !important;
    letter-spacing: -.03em !important;
}

.target-home .shahid-section-heading h2::before {
    content: none !important;
    display: none !important;
}

.target-home .shahid-section-heading > button {
    color: rgba(255,255,255,.58) !important;
}

/* 3) QUICK DISCOVERY — compact landscape cards inspired by the lightweight
      top strip in the reference, not another tall poster carousel. */
.target-home .upcoming .shahid-short-rail {
    gap: 10px !important;
    padding-inline: max(12px, var(--safe-right, 0px)) max(12px, var(--safe-left, 0px)) !important;
    scroll-padding-inline: 12px !important;
}

.target-home .upcoming .shahid-short-card {
    flex: 0 0 clamp(170px, 43vw, 270px) !important;
    aspect-ratio: 16 / 10 !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: #090b10 !important;
    box-shadow: var(--nova-home-card-shadow) !important;
}

.target-home .upcoming .shahid-short-copy {
    right: 11px !important;
    bottom: 9px !important;
    left: 11px !important;
}

.target-home .upcoming .shahid-short-copy strong {
    font-size: .74rem !important;
    line-height: 1.25 !important;
}

.target-home .upcoming .shahid-short-copy small {
    display: none !important;
}

/* 4) MOVIES + SERIES — Shahid-like three-up visual density on phones, but with
      Nova's clean graphite cards and absolutely no gradient frame. */
.target-home :is(.nova-series-showcase, .nova-movie-showcase) {
    padding-top: 6px !important;
    padding-bottom: clamp(32px, 7vw, 50px) !important;
}

.target-home :is(.nova-series-showcase, .nova-movie-showcase) .shahid-section-heading {
    min-height: 54px !important;
}

.target-home :is(.nova-series-showcase, .nova-movie-showcase) .shahid-section-heading h2 {
    font-size: clamp(1.16rem, 4.5vw, 1.54rem) !important;
}

.target-home :is(.nova-series-showcase, .nova-movie-showcase) .shahid-poster-rail {
    gap: 10px !important;
    padding-inline: 10px !important;
    scroll-padding-inline: 10px !important;
}

.target-home :is(.nova-series-showcase, .nova-movie-showcase) .shahid-poster-card {
    flex: 0 0 clamp(132px, 30.6vw, 190px) !important;
    max-width: 190px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.target-home :is(.nova-series-showcase, .nova-movie-showcase) .shahid-poster-image {
    width: 100% !important;
    aspect-ratio: 2 / 3 !important;
    border: 1px solid rgba(255,255,255,.055) !important;
    border-image: none !important;
    border-radius: 13px !important;
    background: #090a0f !important;
    background-image: none !important;
    box-shadow: 0 15px 32px rgba(0,0,0,.34) !important;
}

.target-home :is(.nova-series-showcase, .nova-movie-showcase) .shahid-poster-image::before,
.target-home :is(.nova-series-showcase, .nova-movie-showcase) .shahid-poster-image::after {
    border: 0 !important;
    border-image: none !important;
    box-shadow: none !important;
}

.target-home :is(.nova-series-showcase, .nova-movie-showcase) .shahid-poster-image > strong {
    right: 9px !important;
    bottom: 9px !important;
    left: 9px !important;
    font-size: clamp(.69rem, 2.3vw, .82rem) !important;
    line-height: 1.28 !important;
    font-weight: 900 !important;
    text-shadow: 0 3px 12px rgba(0,0,0,.9) !important;
}

.target-home :is(.nova-series-showcase, .nova-movie-showcase) .shahid-poster-card > small {
    margin-top: 7px !important;
    color: rgba(255,255,255,.48) !important;
    font-size: .62rem !important;
    font-weight: 650 !important;
}

/* 5) RANKED / PEOPLE / LATER RAILS — lower visual weight after the first
      editorial sequence, so the page has a clear hierarchy. */
.target-home .shahid-ranked-card {
    flex-basis: clamp(210px, 44vw, 320px) !important;
}

.target-home .shahid-ranked-poster,
.target-home .shahid-person-card,
.target-home .shahid-landscape-image,
.target-home .shahid-live-poster {
    border-color: rgba(255,255,255,.05) !important;
    border-image: none !important;
    box-shadow: var(--nova-home-card-shadow) !important;
}

.target-home .shahid-rank-ribbon {
    background: rgba(6,7,11,.82) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.target-home .shahid-rank-ribbon small { color: rgba(255,255,255,.60) !important; }
.target-home .shahid-rank-ribbon b { color: #fff !important; }

/* 6) CONTINUE WATCHING — give the most useful rail priority without making it noisy. */
.target-home .continue-watching-section {
    padding-top: 8px !important;
    padding-bottom: 24px !important;
}

.target-home .continue-watching-card {
    flex-basis: clamp(230px, 58vw, 340px) !important;
    max-width: 340px !important;
}

.target-home .continue-watching-image {
    border-radius: 15px !important;
}

/* 7) Interactions: depth only, never rainbow frames on media. */
@media (hover:hover) and (pointer:fine) {
    .target-home .nova-rail-card {
        transition: transform 190ms cubic-bezier(.22,1,.36,1), opacity 190ms ease !important;
    }
    .target-home .nova-rail-card:hover { transform: translateY(-3px) !important; }
    .target-home .nova-rail-card:hover :is(.shahid-poster-image,.shahid-ranked-poster,.shahid-landscape-image,.shahid-live-poster) {
        border-color: rgba(255,255,255,.09) !important;
        border-image: none !important;
        box-shadow: 0 20px 42px rgba(0,0,0,.42) !important;
    }
}

.target-home .nova-rail-card:focus-visible {
    outline: 2px solid rgba(255,255,255,.64) !important;
    outline-offset: 3px !important;
}

/* 8) Large screen editorial balance. */
@media (min-width: 760px) {
    .target-hero-slide { height: clamp(620px, 76dvh, 860px) !important; }
    .target-home :is(.nova-series-showcase, .nova-movie-showcase) .shahid-poster-card {
        flex-basis: clamp(168px, 18vw, 220px) !important;
        max-width: 220px !important;
    }
    .target-home .upcoming .shahid-short-card {
        flex-basis: clamp(230px, 30vw, 360px) !important;
    }
}

@media (max-width: 560px) {
    .target-hero-slide {
        height: 70dvh !important;
        min-height: 540px !important;
    }
    .target-hero-copy { bottom: 68px !important; }
    .target-hero-actions { margin-top: 13px !important; }
    .target-home .shahid-section-heading { margin-bottom: 7px !important; }
    .target-home :is(.nova-series-showcase, .nova-movie-showcase) .shahid-poster-rail {
        gap: 8px !important;
        padding-inline: 8px !important;
    }
    .target-home :is(.nova-series-showcase, .nova-movie-showcase) .shahid-poster-card {
        flex-basis: 30.8vw !important;
        max-width: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .target-home .nova-rail-card { transition: none !important; }
}