/**
 * Antenna TV homepage presentation (Netflix TV OS–inspired).
 * All rules are gated under html.tv-mode so desktop/mobile stay untouched.
 */

html.tv-mode,
html.tv-mode body {
  background: linear-gradient(180deg, #131313 0%, #020202 4%) !important;
  color: #fff;
}

html.tv-mode body {
  /* TV shell uses fixed 1920 layout from tv.js */
  overflow-x: hidden;
}

/* Hide mobile-only chrome on TV (desktop-forced, but belt-and-suspenders). */
html.tv-mode .mobile-featured-ambient,
html.tv-mode .mobile-featured-section,
html.tv-mode .mobile-filters,
html.tv-mode .mobile-category-overlay,
html.tv-mode .mobile-tab-bar,
html.tv-mode .mobile-search-back,
html.tv-mode .nav-logo-mobile,
html.tv-mode #mobileNavSearch {
  display: none !important;
}

/* ========== Top navigation: profile | search + tabs | brand mark ========== */
html.tv-mode .navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 84px;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-auto-flow: column;
  align-items: center;
  gap: 24px;
  background: transparent !important;
  box-shadow: none;
}

html.tv-mode body.page-loaded .navbar {
  opacity: 1;
  transform: none;
}

html.tv-mode .navbar.scrolled {
  background: #020202 !important;
}

html.tv-mode .nav-left {
  display: contents !important;
}

/* Brand mark on the right (N symbol) */
html.tv-mode .nav-left > a.nav-link[data-page="home"] {
  grid-column: 3;
  justify-self: end;
  align-self: center;
  order: 3;
  margin: 0;
  display: flex;
  align-items: center;
}

html.tv-mode .nav-logo-desktop {
  display: none !important;
}

html.tv-mode .nav-logo-tv,
html.tv-mode .nav-logo-tv[hidden] {
  display: block !important;
  width: 33px;
  height: 33px;
}

html:not(.tv-mode) .nav-logo-tv {
  display: none !important;
}

/* Center cluster: primary tabs */
html.tv-mode .tabbed-primary-navigation {
  grid-column: 2;
  justify-self: center;
  align-self: center;
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 26px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  font-size: 22px !important;
}

html.tv-mode .tabbed-primary-navigation li {
  margin: 0 !important;
  list-style: none;
}

html.tv-mode .tabbed-primary-navigation a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 1) !important;
  font-size: 28px !important;
  font-weight: 300 !important;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

html.tv-mode .tabbed-primary-navigation a.current.active,
html.tv-mode .tabbed-primary-navigation a[aria-current="page"] {
  background: #3c3c3c5c;
  color: #fff !important;
  font-weight: 400 !important;
}

/* Left cluster: profile + search */
html.tv-mode .nav-right {
  grid-column: 1;
  justify-self: start;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 31vw;
  order: 1;
}

html.tv-mode .nav-right .nav-icon[aria-label="Notifications"] {
  display: none !important;
}

html.tv-mode #desktopNavSearch {
  display: flex;
  align-items: center;
}

html.tv-mode #desktopNavSearch .nav-search-toggle {
  width: fit-content;
  height: auto;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html.tv-mode #desktopNavSearch .nav-search-icon-default {
  display: none !important;
}

html.tv-mode #desktopNavSearch .nav-search-icon-tv,
html.tv-mode #desktopNavSearch .nav-search-icon-tv[hidden] {
  display: block !important;
  width: 28px;
  height: 28px;
}

html.tv-mode #desktopNavSearch .nav-search-toggle svg {
  width: 28px;
  height: 28px;
}

html:not(.tv-mode) #desktopNavSearch .nav-search-icon-tv {
  display: none !important;
}

html.tv-mode #desktopNavSearch.open {
  position: relative;
}

html.tv-mode #desktopNavSearch .nav-search-input {
  height: 44px;
  font-size: 18px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

html.tv-mode #desktopNavSearch.open .nav-search-input {
  width: 280px;
}

/* Profile avatar sits first on the left */
html.tv-mode .profile-dropdown-wrap {
  order: -1;
}

html.tv-mode .profile-icon {
  width: 40px;
  height: 40px;
  border-radius: 0;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

html.tv-mode .profile-icon img {
  width: 40px;
  height: 40px;
  border-radius: 0;
  object-fit: cover;
}

html.tv-mode .profile-caret {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
}

/*
 * TV top nav visible tabs: Home, Shows, Movies, Live
 * Hide the rest so leftover anchors cannot affect spacing/focus.
 * Anchor rules cover older WebViews; :has(li) tightens layout when supported.
 */
html.tv-mode .tabbed-primary-navigation a[data-page="sports"],
html.tv-mode .tabbed-primary-navigation a[data-page="new"],
html.tv-mode .tabbed-primary-navigation a[data-page="mylist"],
html.tv-mode .tabbed-primary-navigation a[data-navigation-tab-name="audioSubtitles"] {
  display: none !important;
}

html.tv-mode .tabbed-primary-navigation li:has(a[data-page="sports"]),
html.tv-mode .tabbed-primary-navigation li:has(a[data-page="new"]),
html.tv-mode .tabbed-primary-navigation li:has(a[data-page="mylist"]),
html.tv-mode .tabbed-primary-navigation li:has(a[data-navigation-tab-name="audioSubtitles"]) {
  display: none !important;
}

/* ========== Inset hero billboard ========== */
html.tv-mode .maincontainer {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  padding: 97px 48px 0;
  box-sizing: border-box;
}

html.tv-mode div#featuredContainer {
  width: 100%;
  height: 83vh;
  min-height: 560px;
  margin-bottom: 8vh;
  padding-bottom: 0;
  align-items: stretch;
  border-radius: 0;
  overflow: hidden;
  cursor: default;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  outline: 2px solid #393939 !important;
  background: #111;
}

html.tv-mode .hero-poster,
html.tv-mode .hero-video {
  object-fit: cover !important;
  object-position: center center !important;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

html.tv-mode .hero-gradient {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.48) 26%, rgba(0, 0, 0, 0.16) 50%, transparent 70%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.22) 26%, transparent 52%);
}

html.tv-mode .hero-content {
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 41vw;
  padding: 236px 0 30px 25px;
  box-sizing: border-box;
}

html.tv-mode .hero-logo {
  margin-bottom: 10px;
}

html.tv-mode .hero-logo img {
  max-width: min(420px, 34vw);
  max-height: 165px;
  width: auto;
  height: auto;
  margin: 1vw 0;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.55));
}

html.tv-mode .hero-tv-kicker {
  display: block;
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
}

html.tv-mode .hero-tv-title {
  display: block;
  margin: 0 0 18px;
  font-size: clamp(48px, 4.4vw, 76px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.65);
}

html.tv-mode .hero-tv-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 0;
  margin: 0 0 18px;
  font-size: 25px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

html.tv-mode .hero-tv-meta > span:not(.hero-tv-meta-dot):not(.hero-tv-maturity) {
  display: inline-flex;
  align-items: center;
}

html.tv-mode .hero-tv-meta-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  vertical-align: middle;
}

html.tv-mode .hero-tv-maturity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 3px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #fff;
}

html.tv-mode .hero-tv-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0 0 28px;
  font-size: 27px;
  line-height: 1.35;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

html.tv-mode .hero-buttons {
  display: flex;
  align-items: center;
  gap: 16px;
}

html.tv-mode .btn-play,
html.tv-mode .btn-info {
  min-height: 68px;
  padding: 12px 30px 12px 24px;
  border-radius: 999px;
  font-size: 1.45vw;
  gap: 12px;
}

html.tv-mode .btn-play {
  width: 8.4vw;
  background: #fff;
  color: #111;
  font-weight: 500;
  justify-content: center;
}

html.tv-mode .btn-play svg {
  width: 42px;
  margin-right: -5px;
  height: 42px;
}

html.tv-mode .btn-info {
  background: rgb(122 122 122 / 51%);
  color: #fff;
  font-weight: 400;
  backdrop-filter: blur(8px);
  width: 9.45vw !important;
  display: flex;
  justify-content: center;
  padding: 0px;
}

html.tv-mode .btn-info svg {
  display: none;
}

html.tv-mode .hero-bottom-right {
  right: 36px;
  bottom: 36px;
  gap: 14px;
}

html.tv-mode .hero-bottom-right .maturity-rating {
  display: none;
}

html.tv-mode .btn-mute {
  width: 48px;
  height: 48px;
  border-width: 2px;
  background: rgba(0, 0, 0, 0.35);
}

/* Category chip rail under / overlapping hero */
html.tv-mode .tv-category-rail {
  display: flex;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  margin: -30px 0 18px;
  /* Extra padding so focused scale never collides with the rail edge/clip. */
  padding: 22px 24px;
  box-sizing: border-box;
  position: relative;
  z-index: 4;
  overflow: visible;
  scroll-margin-top: 120px;
}

html.tv-mode .tv-category-rail::-webkit-scrollbar {
  display: none;
}

html.tv-mode .tv-category-chip {
  flex: 1 1 0;
  min-width: 150px;
  min-height: 139px;
  padding: 0 18px;
  border: 1px solid #2b2b2b !important;
  border-radius: 26px;
  background: linear-gradient(179deg, #131313, #0e0e0e, #020202);
  color: rgba(255, 255, 255, 0.92);
  font-family: inherit;
  font-size: 27px;
  font-weight: normal !important;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  transform-origin: center center;
  scroll-margin-top: 120px;
}

html.tv-mode .tv-category-chip.tv-focused,
html.tv-mode .tv-category-chip:focus-visible {
  background: linear-gradient(179deg, #3a3e45, #242424, #17181b);
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #fff;
  transform: scale(1.04);
  z-index: 2;
}

/* Rows sit cleanly under the billboard */
html.tv-mode .content-area {
  margin-top: 28px !important;
  padding: 0 0 80px;
  background: transparent !important;
}

html.tv-mode .content-row {
  padding: 0 25px;
  margin-bottom: 36px;
}

html.tv-mode .row-title {
  font-size: 1.85rem;
  font-weight: 400;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.92);
}

html.tv-mode .row-posters {
  gap: 17px;
  padding: 8px 0 12px;
  /* auto: JS rAF-follow owns horizontal motion; CSS smooth fights morph tracking. */
  scroll-behavior: auto;
}

html.tv-mode .content-card {
  width: 309px;
  height: 507px !important;
  border-radius: 0;
  margin: 0;
  flex: 0 0 auto;
  overflow: hidden;
  transition:
    width 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.22s ease,
    box-shadow 0.22s ease;
  will-change: width, height;
}

html.tv-mode .content-card .backdrop,
html.tv-mode .content-card .poster-img {
  object-fit: fill;
  object-position: center center;
  transition:
    opacity 0.28s ease,
    height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  transform: none !important;
}

/* Separate landscape layer: portrait never swaps, landscape fades in when ready. */
html.tv-mode .content-card .tv-landscape-art {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transform: none !important;
  transition:
    opacity 0.32s ease,
    height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

html.tv-mode .content-card .tv-landscape-art.is-visible {
  opacity: 1;
}

html:not(.tv-mode) .tv-landscape-art {
  display: none !important;
}

/* Kill leftover desktop hover zoom so TV focus morph is the only card motion. */
html.tv-mode .content-card:hover,
html.tv-mode .content-card:hover .backdrop,
html.tv-mode .content-card:hover .poster-img,
html.tv-mode .content-card.tv-focused .backdrop,
html.tv-mode .content-card.tv-focused .poster-img,
html.tv-mode .content-card.tv-focused.tv-card-expanded .backdrop,
html.tv-mode .content-card.tv-focused.tv-card-expanded .poster-img,
html.tv-mode .content-card.tv-card-collapsing .backdrop,
html.tv-mode .content-card.tv-card-collapsing .poster-img {
  transform: none !important;
  box-shadow: none;
}

html.tv-mode .content-card:hover {
  z-index: auto;
  box-shadow: none !important;
}

/* Keep focused rows clear of the fixed top bar when settling scroll. */
html.tv-mode .content-row {
  scroll-margin-top: 100px;
}

/* Portrait idle cards: no text/logo overlays. Logos return only on landscape expand. */
html.tv-mode .content-card .logo,
html.tv-mode .content-card .content-info,
html.tv-mode .content-card .gradient-overlay {
  display: none !important;
}

/* Focused row card morphs into landscape overview (remote/keyboard only) */
html.tv-mode .content-area .content-card.tv-focused.tv-card-expanded {
  width: 908px !important;
  height: 680px !important; /* 507 media + meta/description room */
  border: none;
  box-shadow: none;
  z-index: 40;
  overflow: hidden;
  background: transparent;
}

/* Collapse phase: keep overlays alive so they can fade while size morphs back. */
html.tv-mode .content-area .content-card.tv-card-collapsing {
  z-index: 30;
  overflow: hidden;
  background: transparent;
}

/* Gray border frame around the 507px media area only (not the text panel). */
html.tv-mode .content-area .content-card.tv-focused.tv-card-expanded::before,
html.tv-mode .content-area .content-card.tv-card-collapsing::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 507px;
  border: 2px solid #8a8a8a;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  opacity: 1;
  transition: opacity 0.28s ease, height 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

html.tv-mode .content-area .content-card.tv-card-collapsing::before {
  height: 100%;
  opacity: 0;
}

html.tv-mode .content-area .content-card.tv-focused.tv-card-expanded .backdrop,
html.tv-mode .content-area .content-card.tv-focused.tv-card-expanded .poster-img,
html.tv-mode .content-area .content-card.tv-focused.tv-card-expanded .tv-landscape-art,
html.tv-mode .content-area .content-card.tv-card-collapsing .backdrop,
html.tv-mode .content-area .content-card.tv-card-collapsing .poster-img,
html.tv-mode .content-area .content-card.tv-card-collapsing .tv-landscape-art {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  height: 507px !important;
  max-height: 507px !important;
  object-fit: cover !important;
  object-position: center center !important;
  box-sizing: border-box;
  transform: none !important;
  /* Keep pixels inside the border frame */
  clip-path: inset(0);
}

html.tv-mode .content-area .content-card.tv-card-collapsing .backdrop,
html.tv-mode .content-area .content-card.tv-card-collapsing .poster-img,
html.tv-mode .content-area .content-card.tv-card-collapsing .tv-landscape-art {
  height: 100% !important;
  max-height: 100% !important;
}

html.tv-mode .content-area .content-card.tv-focused.tv-card-expanded .tv-landscape-art,
html.tv-mode .content-area .content-card.tv-card-collapsing .tv-landscape-art {
  z-index: 1;
}

html.tv-mode .content-area .content-card.tv-focused.tv-card-expanded .gradient-overlay,
html.tv-mode .content-area .content-card.tv-card-collapsing .gradient-overlay {
  display: block !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  height: 507px !important;
  max-height: 507px !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.22) 40%, transparent 68%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.2) 38%, transparent 64%);
  opacity: 1;
  pointer-events: none;
  z-index: 2;
  transition:
    opacity 0.28s ease,
    height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

html.tv-mode .content-area .content-card.tv-card-collapsing .gradient-overlay {
  height: 100% !important;
  max-height: 100% !important;
  opacity: 0;
}

/* Logo only on expanded landscape card, bottom-left of media frame */
html.tv-mode .content-area .content-card.tv-focused.tv-card-expanded .logo,
html.tv-mode .content-area .content-card.tv-card-collapsing .logo {
  display: block !important;
  position: absolute;
  left: 28px !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(100% - 507px + 24px) !important;
  max-width: 42% !important;
  max-height: 110px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  transform: none !important;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.65));
  z-index: 6;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.26s ease;
}

html.tv-mode .content-area .content-card.tv-card-collapsing .logo {
  bottom: 24px !important;
  opacity: 0;
}

html.tv-mode .tv-card-expand-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 515px;
  padding: 12px 8px 0;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.24s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 41;
}

html.tv-mode .content-area .content-card.tv-focused.tv-card-expanded .tv-card-expand-panel {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.06s;
}

html.tv-mode .content-area .content-card.tv-card-collapsing .tv-card-expand-panel {
  opacity: 0;
  transform: translateY(8px);
  transition-delay: 0s;
}

html.tv-mode .tv-card-expand-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

html.tv-mode .tv-card-expand-meta > span:not(.tv-card-expand-dot) {
  display: inline-flex;
  align-items: center;
}

html.tv-mode .tv-card-expand-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  vertical-align: middle;
}

html.tv-mode .tv-card-expand-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0;
  max-width: 860px;
  font-size: 24px;
  line-height: 1.35;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

/* Expanded focus card grows in-place; keep row spacing calm between rails */
html.tv-mode .content-row {
  transition: margin-bottom 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

html.tv-mode .content-row.tv-row-has-expanded {
  margin-bottom: 48px;
}

/* Play-all tile should match portrait card geometry on TV */
html.tv-mode .play-all-card {
  width: 309px;
  height: 507px !important;
  border-radius: 0;
}

html:not(.tv-mode) .tv-card-expand-panel {
  display: none !important;
}

/* Search canvas offset for taller TV nav */
html.tv-mode .search-results {
  top: 84px;
  padding: 36px 48px 80px;
  background: #0b0b0b;
}

/* Non-TV: ensure TV-only nodes never paint if class missing */
html:not(.tv-mode) .hero-tv-kicker,
html:not(.tv-mode) .hero-tv-title,
html:not(.tv-mode) .hero-tv-meta,
html:not(.tv-mode) .hero-tv-description,
html:not(.tv-mode) .tv-category-rail {
  display: none !important;
}