/* ---------------------------------------------------------------------------
   Responsive layer: phones & tablets.
   Aurora's core layout targets TV/desktop; this file (loaded last) adapts the
   same structure for small touch screens instead of forking any markup.
   Breakpoints: ≤900px tablet, ≤860px nav collapse, ≤600px phone.
--------------------------------------------------------------------------- */

/* ---------- Tablet (≤ 900px) ---------- */
@media (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  }
}

/* ---------- Top nav: swipeable strip once items can't all fit ---------- */
@media (max-width: 860px) {
  .nav {
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar {
    display: none;
  }
  .nav > * {
    flex: none;
  }
  .nav-logo {
    margin-right: 4px;
    padding: 6px;
  }
  .nav-logo span:not(.logo-mark) {
    display: none; /* keep the gradient mark, drop the wordmark */
  }
  .nav-item {
    padding: 8px 12px;
  }
  .nav-spacer {
    width: 4px;
  }
  #nav-profile-name {
    display: none; /* avatar alone identifies the profile */
  }
  .nav-profile {
    padding: 5px 6px;
  }

  /* Swipe affordance: fade the edge where items are clipped off-screen
     (classes maintained by main.js from the strip's scroll position) */
  .nav.clip-right {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
  }
  .nav.clip-left {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 48px);
    mask-image: linear-gradient(to right, transparent, #000 48px);
  }
  .nav.clip-left.clip-right {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  }
}

/* ---------- Phones (≤ 600px) ---------- */
@media (max-width: 600px) {
  :root {
    --page-x: 16px;
    --nav-h: 56px;
    --fs-hero: clamp(1.8rem, 9vw, 2.4rem);
  }

  .hero {
    padding-bottom: 36px;
  }
  .hero-inner {
    gap: 0;
  }

  .grid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 14px 12px;
  }

  .row-scroller {
    gap: 10px;
  }

  /* Detail page: tighter hero, full-width action buttons wrap already */
  .detail-poster {
    width: 120px;
  }

  /* Source rows: keep the download button reachable but slimmer */
  .source-dl {
    width: 46px;
  }

  /* Player: the control row (8 buttons + volume) overflows 375px at 52px
     per button — shrink the chrome, not the tap logic */
  .player-top {
    padding: 14px 16px;
  }
  .player-bottom {
    padding: 14px 16px 18px;
  }
  .player-controls {
    gap: 2px;
  }
  .pbtn {
    width: 42px;
    height: 42px;
  }
  .pbtn svg {
    width: 22px;
    height: 22px;
  }
  .pbtn.big svg {
    width: 28px;
    height: 28px;
  }
}

/* ---------- Touch devices (any width) ---------- */
@media (hover: none) {
  /* Hover-revealed affordances must be always-visible on touch */
  .card-remove {
    opacity: 1;
  }
}

/* Phones hold the hardware volume rocker — the on-screen volume group only
   crowds the control row there. Tablets/desktops keep it. */
@media (hover: none) and (max-width: 600px) {
  .vol-group {
    display: none;
  }
}