/* ============================================================
   TV — responsive behavior
   ============================================================ */

/* Slightly tighter gutters */
@media (max-width: 1280px) {
  .page-body, .detail-body, .detail-hero-inner, .detail-rails, .search-page { padding-left: 32px; padding-right: 32px; }
  .rail-strip { padding-left: 32px; padding-right: 32px; }
  .hero-content { left: 32px; }
  .channel-hero { padding-left: 32px; padding-right: 32px; }
}

/* Narrow: collapse sidebar to icon rail */
@media (max-width: 1060px) {
  .app:not(.sidebar-forced-open) .sidebar { width: var(--sidebar-rail); }
  .app:not(.sidebar-forced-open) .side-item { justify-content: center; padding: 0; }
  .app:not(.sidebar-forced-open) .side-item .side-text,
  .app:not(.sidebar-forced-open) .side-item .side-badge { display: none; }
  .app:not(.sidebar-forced-open) .sidebar-label { text-indent: -9999px; height: 12px; padding: 14px 0 4px; }
  .app:not(.sidebar-forced-open) .sidebar-account { justify-content: center; padding: 0; }
  .app:not(.sidebar-forced-open) .sidebar-account .account-name { display: none; }
  .app:not(.sidebar-forced-open) .sidebar-app { justify-content: center; padding: 0; }
  .app:not(.sidebar-forced-open) .sidebar-collapse-btn { display: none; }

  .hero-content { right: 20%; }
}

/* Phone-ish: sidebar becomes an overlay drawer */
@media (max-width: 780px) {
  .toolbar-side-toggle { display: inline-flex; }
  .sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: var(--sidebar-rail);
    transform: translateX(-100%);
    transition: transform 260ms var(--ease-out);
    z-index: 300;
    background: rgba(24, 24, 28, 0.9);
  }
  .app.nav-open .sidebar { transform: translateX(0); }
  .app.nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 290;
    background: rgba(0,0,0,0.4);
  }
  .app .side-item .side-text { display: none; }
  .app .sidebar-app .app-name { display: none; }
  .app .sidebar-collapse-btn { display: none; }

  .page-body, .detail-body, .detail-hero-inner, .detail-rails, .search-page { padding-left: 20px; padding-right: 20px; }
  .rail-strip { padding-left: 20px; padding-right: 20px; }
  .hero-content { left: 20px; right: 8%; }
  .channel-hero { padding-left: 20px; padding-right: 20px; }
  .view { border-radius: 0; }

  .detail-body { flex-direction: column; gap: 40px; }
  .detail-aside { max-width: none; }

  .card { --card-w: 150px; }
  .card-wide { --card-w: 262px; }
  .card-top10 { --card-w: 216px; }
  .card-top10 .top10-numeral { font-size: 92px; width: 64px; }
  .card-top10 .card { --card-w: 136px; }

  .toolbar-search { width: min(46vw, 240px); }
  .toolbar { padding-left: 14px; }

  .player-chrome-bottom { padding: 0 14px 12px; }
  .player-volume .vol-slider { display: none; }
  .player-captions span { font-size: 15px; }
}

@media (max-width: 560px) {
  .hero { min-height: 480px; }
  .hero-title { font-size: 30px; }
  .hero-tagline { font-size: 14px; }
  .grid-rail { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}