/* ══════════════════════════════════════════════════════════════
   MůjFlix — mujflix-mobile.css
   ──────────────────────────────────────────────────────────────
   Doplňkové úpravy jen pro menší obrazovky (telefony). Necháno
   jako samostatný soubor a načtený jako úplně poslední <link>,
   takže bezpečně vyhraje nad vším ostatním, ale nezasahuje do
   desktopové verze (vše je v @media max-width: 640px).
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* ── Modály (Můj seznam, detail, apod.) — na telefonu ať
     zabírají rozumnou šířku obrazovky, ne malý plovoucí box
     uprostřed s velkými prázdnými okraji. ── */
  .watchlist-box,
  .pm-box {
    width: calc(100vw - 32px) !important;
    max-width: 420px !important;
  }

  /* ── Discover filtry (Trending/Filmy/Seriály/Žánr…) — řádek
     jde odscrollovat, ale nic to nenaznačuje, takže to na
     telefonu vypadá jako "uříznuté". Jemný fade na okraji jako
     vizuální nápověda. ── */
  .disco-nav {
    -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%) !important;
    mask-image: linear-gradient(to right, #000 92%, transparent 100%) !important;
  }

  /* ── Nadpisy na domovské obrazovce — o kousek menší, ať se
     na malé obrazovce nepere víc textu o řádek navíc. ── */
  #mfSectionHome h1,
  .mfh-greeting {
    font-size: 1.5rem !important;
  }

  /* ── Dock — na hodně úzkých telefonech (do ~360px) trochu
     zúžit odstup od okrajů a mezery mezi ikonami, ať je jistota
     že se čtyři položky vejdou s rezervou i na nejmenší displeje. ── */
  #mfDock {
    gap: 0 !important;
  }
  #mfDock .dock-btn {
    min-width: 0 !important;
    padding: 7px 8px !important;
  }
  #mfDock .dock-btn .dock-label {
    font-size: 0.58rem !important;
  }

  /* ── Karty v řádkových seznamech (Nedávno sledováno apod.) —
     ať je jasně vidět, že jde o horizontální scroll, ne že je
     obsah "uříznutý". ── */
  .row-scroll,
  .mfh-row {
    -webkit-mask-image: linear-gradient(to right, #000 94%, transparent 100%) !important;
    mask-image: linear-gradient(to right, #000 94%, transparent 100%) !important;
  }
}