/*
 * Space Gate NOVA+ — Mobile Home/Catalog Density + Black Artwork Contract v1
 * 2026-09-07
 *
 * Scope: PHONE ONLY (<768px), shared Web UI used by Mobile Web + MAUI Android WebView.
 * Routes: Home, Movies, Series only.
 * Desktop >=768px is intentionally untouched.
 *
 * Goals:
 *  1) Reduce vertical empty space between Home sections and catalog rows.
 *  2) Force the visual surface immediately around content artwork/posters to pure #000000.
 *     Artwork pixels, badges, text and in-art overlays are not recolored.
 *  3) Preserve card sizes, typography, header, bottom navigation, routing, playback and identity.
 */
@media (max-width: 767px) {
  :root {
    --nova-mobile-home-section-gap-r2: 18px;
    --nova-mobile-catalog-row-gap-r2: 13px;
  }

  /* ================================================================
     HOME — tighter editorial rhythm without compressing the cards.
     ================================================================ */
  html.nova-web-shell [data-nova-page="home"] .target-home .shahid-home-section {
    margin-block: 0 !important;
    padding-top: 6px !important;
  }

  html.nova-web-shell [data-nova-page="home"] .target-home .shahid-home-section:not(:last-of-type) {
    margin-bottom: 0 !important;
    padding-bottom: var(--nova-mobile-home-section-gap-r2) !important;
  }

  html.nova-web-shell [data-nova-page="home"] .target-home .shahid-home-section:last-of-type {
    margin-bottom: 0 !important;
    padding-bottom: 8px !important;
  }

  /* Override older showcase/continue-watching exceptions that used 24–50px. */
  html.nova-web-shell [data-nova-page="home"] .target-home :is(
    .nova-series-showcase,
    .nova-movie-showcase,
    .continue-watching-section,
    .nova-standard-home-block
  ).shahid-home-section:not(:last-of-type) {
    padding-top: 6px !important;
    padding-bottom: var(--nova-mobile-home-section-gap-r2) !important;
  }

  html.nova-web-shell [data-nova-page="home"] .target-home .shahid-home-section + .shahid-home-section {
    margin-top: 0 !important;
    padding-top: 6px !important;
  }

  html.nova-web-shell [data-nova-page="home"] .target-home .shahid-section-heading,
  html.nova-web-shell [data-nova-page="home"] .target-home .nova-standard-section-heading {
    min-height: 42px !important;
    margin-top: 0 !important;
    margin-bottom: 7px !important;
  }

  /* Keep lazy/progressive helpers from becoming visible black spacers. */
  html.nova-web-shell [data-nova-page="home"] :is(
    .home-lazy-sentinel,
    .nova-rail-page-sentinel,
    .nova-batch-loader
  ) {
    margin-block: 0 !important;
    padding-block: 0 !important;
  }

  /* ================================================================
     MOVIES / SERIES — compact vertical grid rhythm.
     ================================================================ */
  html.nova-web-shell :is(
    [data-nova-page="movies"],
    [data-nova-page="series"]
  ) .nova-web-catalog-grid {
    row-gap: var(--nova-mobile-catalog-row-gap-r2) !important;
    column-gap: var(--nova-mobile-gap, 10px) !important;
    padding-top: 4px !important;
  }

  html.nova-web-shell :is(
    [data-nova-page="movies"],
    [data-nova-page="series"]
  ) .nova-item-card .media-info {
    padding-top: 6px !important;
    padding-bottom: 0 !important;
  }

  html.nova-web-shell :is(
    [data-nova-page="movies"],
    [data-nova-page="series"]
  ) .nova-item-card :is(.media-title,.media-meta) {
    margin-block: 0 !important;
  }

  /* ================================================================
     PURE BLACK ARTWORK SURFACE CONTRACT
     No graphite/blue/purple/white tint may surround content artwork.
     ================================================================ */
  html.nova-web-shell [data-nova-page="home"] :is(
    .shahid-poster-card,
    .shahid-ranked-card,
    .shahid-landscape-card,
    .shahid-live-card,
    .shahid-short-card,
    .continue-watching-card,
    .nova-movie-collection-card
  ),
  html.nova-web-shell :is(
    [data-nova-page="movies"],
    [data-nova-page="series"]
  ) .nova-item-card {
    border-color: #000000 !important;
    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;
    box-shadow: none !important;
    outline-color: #000000 !important;
    filter: none !important;
  }

  html.nova-web-shell [data-nova-page="home"] :is(
    .shahid-poster-image,
    .shahid-ranked-poster,
    .shahid-landscape-image,
    .shahid-live-poster,
    .shahid-short-card,
    .continue-watching-image,
    .nova-movie-collection-poster,
    .nova-editorial-card
  ),
  html.nova-web-shell :is(
    [data-nova-page="movies"],
    [data-nova-page="series"]
  ) .poster-wrapper {
    border-color: #000000 !important;
    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: 0 !important;
  }

  html.nova-web-shell [data-nova-page="home"] :is(
    .shahid-poster-image,
    .shahid-ranked-poster,
    .shahid-landscape-image,
    .shahid-live-poster,
    .shahid-short-card,
    .continue-watching-image,
    .nova-movie-collection-poster,
    .nova-editorial-card
  )::before,
  html.nova-web-shell [data-nova-page="home"] :is(
    .shahid-poster-image,
    .shahid-ranked-poster,
    .shahid-landscape-image,
    .shahid-live-poster,
    .shahid-short-card,
    .continue-watching-image,
    .nova-movie-collection-poster,
    .nova-editorial-card
  )::after,
  html.nova-web-shell :is(
    [data-nova-page="movies"],
    [data-nova-page="series"]
  ) .poster-wrapper::before,
  html.nova-web-shell :is(
    [data-nova-page="movies"],
    [data-nova-page="series"]
  ) .poster-wrapper::after {
    border-color: #000000 !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: 0 !important;
  }

  /* The image element itself has a black fallback while loading. */
  html.nova-web-shell [data-nova-page="home"] :is(
    .shahid-card-image,
    .nova-movie-collection-poster img,
    .nova-editorial-art
  ),
  html.nova-web-shell :is(
    [data-nova-page="movies"],
    [data-nova-page="series"]
  ) .poster-wrapper > img {
    border-color: #000000 !important;
    background-color: #000000 !important;
    box-shadow: none !important;
    outline: 0 !important;
  }

  /* Keep textual area visually joined to the black page, never graphite. */
  html.nova-web-shell :is(
    [data-nova-page="movies"],
    [data-nova-page="series"]
  ) .nova-item-card .media-info {
    background: #000000 !important;
    background-image: none !important;
  }
}